react-native-web port of fmf app

1 files changed, 91 insertions, 0 deletions

diff --git a/client/src/lib/components/youtube.js b/client/src/lib/components/youtube.js
new file mode 100644
index 0000000..ab5f8aa
--- /dev/null
+++ b/client/src/lib/components/youtube.js
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import {
+} from 'react-native';
+
+export default class Youtube extends Component {
+  constructor(props) {
+    super()
+    this.container = null
+    this.buildPlayer = this.buildPlayer.bind(this)
+  }
+  render() {
+    return (
+      <div ref={(ref) => this.container = ref} />
+    )
+  }
+  componentDidMount() {
+    if (YT_READY) {
+      this.buildPlayer()
+    }
+    else {
+      setTimeout(this.buildPlayer, 250)
+    }
+  }
+  buildPlayer() {
+    this.player = new YT.Player(this.container, {
+      videoId: this.props.ytid,
+      width: "100%",
+      height: 400,
+      playerVars: {
+        'autohide': 1,
+        'autoplay': 0,
+        'disablekb': 0,
+        'cc_load_policy': 3,
+        'controls': 0,
+        'enablejsapi': 1,
+        'fs': 0,
+        'modestbranding': 1,
+        'iv_load_policy': 3,
+        'loop': 0,
+        'showinfo': 0,
+        'rel': 0,
+        'wmode': 'transparent',
+        'hd': 1
+      },
+      events: {
+        onReady: function(e){
+          e.target.playVideo()
+        },
+        onStateChange: function(e){
+          switch(e.data){
+          case -1:
+            // unstarted
+            break
+          case 0:
+            // finished
+            break
+          case 1:
+            // play
+            break
+          case 2:
+            // pause
+            break
+          case 3:
+            // buffering
+            break
+          case 5:
+            // cued
+            break
+          default:
+            break
+          }
+        }
+      }
+    })
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (! this.player) {
+      return
+    }
+    else if (prevProps.ytid !== this.props.ytid) {
+      this.player.loadVideoById( this.props.ytid )
+    }
+  }
+}
+
+let YT_READY = false
+
+global.onYouTubeIframeAPIReady = function(){
+  console.log('youtube api loaded')
+  YT_READY = true
+}