merge

1 files changed, 134 insertions, 0 deletions

diff --git a/client/src/lib/views/livestream.js b/client/src/lib/views/livestream.js
new file mode 100644
index 0000000..d3df460
--- /dev/null
+++ b/client/src/lib/views/livestream.js
@@ -0,0 +1,134 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View
+} from 'react-native';
+
+import Container from '../components/container'
+import ClearText from '../components/text'
+import Button from '../components/button'
+import Youtube from '../components/youtube'
+
+export default class Livestream extends Component {
+  constructor(props) {
+    super()
+    this.state = {
+      ytid: getYTID(choice(props.content.streams).uri),
+      isReady: false,
+      currentTime: 0,
+      duration: 0,
+      quality: 0,
+      status: 'unloaded',
+      error: null,
+    }
+  }
+  render() {
+    const buttons = this.props.content.streams.map( (stream, i) => {
+      const ytid = getYTID(stream.uri || "")
+      if (! ytid) return null
+      let buttonStyle, textStyle
+      if (ytid === this.state.ytid) {
+        buttonStyle = styles.activeButton
+        textStyle = styles.activeButtonText
+      }
+      return (
+        <Button
+          key={'button_' + i}
+          buttonStyle={buttonStyle}
+          textStyle={textStyle}
+          label={stream.text}
+          onPress={() => {
+            this.setState({ ytid })
+          }}
+        />
+      )
+    }).filter(button => !!button)
+
+    return (
+      <Container heading='Livestream' bodyStyle={styles.bodyStyle}>
+        <View style={styles.videoContainer} className='videoContainer'>
+          <Youtube ytid={this.state.ytid} />
+          <View style={styles.overlay}></View>
+        </View>
+        <View style={styles.buttons}>
+          {buttons}
+        </View>
+        <View style={styles.contentContainer}>
+          <ClearText style={styles.body}>{this.props.content.body}</ClearText>
+        </View>
+      </Container>
+    )
+  }
+}
+
+function randint(n){ return Math.floor(Math.random() * n) }
+function choice(a){ return a[randint(a.length)] }
+function getYTID(url) {
+  return (
+     url.match(/v=([-_a-zA-Z0-9]{11})/i)
+  || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i)
+  || url.match(/embed\/([-_a-zA-Z0-9]{11})/i)
+  )[1].split('&')[0];
+
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  bodyStyle: {
+    flex: 1,
+  },
+  body: {
+    textAlign: 'left',
+    marginTop: 40,
+    width: '75%',
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+  },
+  videoContainer: {
+    justifyContent: 'flex-start',
+    height: 400,
+    width: '100%',
+    padding: 10,
+  },
+  video: {
+    alignSelf: 'stretch',
+    height: 400,
+    width: '100%',
+    backgroundColor: 'black',
+    marginVertical: 10
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0,0,0,0)'
+  },
+  buttons: {
+    width: '100%',
+    paddingTop: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    margin: 20,
+  },
+  activeButtonText: {
+    color: 'red',
+  },
+  activeButton: {
+    backgroundColor: '#bbb',
+    borderBottomColor: '#888',
+  },
+})