1 files changed, 14 insertions, 8 deletions
diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
index ff06d0c..88c66cf 100644
--- a/client/src/lib/views/livestream.js
+++ b/client/src/lib/views/livestream.js
@@ -4,7 +4,7 @@ import {
   View
 } from 'react-native';
 
-import Container from '../components/container'
+import ScrollableContainer from '../components/scrollableContainer'
 import ClearText from '../components/text'
 import Button from '../components/button'
 import Youtube from '../components/youtube'
@@ -47,7 +47,7 @@ export default class Livestream extends Component {
     const second_buttons = buttons.slice(3)
 
     return (
-      <Container heading='Livestream' bodyStyle={styles.bodyStyle}>
+      <ScrollableContainer heading='Livestream' bodyStyle={styles.bodyStyle}>
         <View style={styles.videoContainer} className='videoContainer'>
           <Youtube ytid={this.state.ytid} />
           <View style={styles.overlay}></View>
@@ -61,7 +61,7 @@ export default class Livestream extends Component {
         <View style={styles.contentContainer}>
           <ClearText style={styles.body}>{this.props.content.body}</ClearText>
         </View>
-      </Container>
+      </ScrollableContainer>
     )
   }
 }
@@ -74,8 +74,14 @@ function getYTID(url) {
   || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i)
   || url.match(/embed\/([-_a-zA-Z0-9]{11})/i)
   )[1].split('&')[0];
-
 }
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -89,6 +95,7 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     marginTop: 40,
     width: '75%',
+    paddingBottom: 100,
   },
   contentContainer: {
     flex: 1,
@@ -98,13 +105,13 @@ const styles = StyleSheet.create({
   },
   videoContainer: {
     justifyContent: 'flex-start',
-    height: 400,
+    height: isMobile ? 100 : 400,
     width: '100%',
     padding: 10,
   },
   video: {
     alignSelf: 'stretch',
-    height: 400,
+    height: isMobile ? 100 : 400,
     width: '100%',
     backgroundColor: 'black',
     marginVertical: 10
@@ -121,8 +128,7 @@ const styles = StyleSheet.create({
   },
   buttons: {
     width: '100%',
-    marginLeft: -25,
-    paddingTop: 30,
+    paddingTop: 20,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',