load yt/sc js api, modify youtube.js to use iframe api

4 files changed, 72 insertions, 32 deletions

diff --git a/frontend/static/js/src/youtube.js b/frontend/static/js/src/youtube.js
index 23d0089..ae68cab 100644
--- a/frontend/static/js/src/youtube.js
+++ b/frontend/static/js/src/youtube.js
@@ -93,17 +93,17 @@ var Youtube =
 			d.error("YOUTUBE: UNKNOWN")
 			}
 		},
-        onError: function (error)
-                {
-                var errorStr = 'UNKNOWN'
-                if (error === 2)
-                        errorStr = "INVALID PARAMETER"
-                if (error === 100)
-                        errorStr = "NOT FOUND"
-                if (error === 101 || error === 150)
-                        errorStr = "EMBED FORBIDDEN"
-		Youtube.error(errorStr)
-                },
+    onError: function (error)
+      {
+      var errorStr = 'UNKNOWN'
+      if (error === 2)
+              errorStr = "INVALID PARAMETER"
+      if (error === 100)
+              errorStr = "NOT FOUND"
+      if (error === 101 || error === 150)
+              errorStr = "EMBED FORBIDDEN"
+      Youtube.error(errorStr)
+      },
 	setVolume: function (vol)
 		{
 		Youtube.player.setVolume(vol)
@@ -150,27 +150,61 @@ var Youtube =
 		Youtube.loaded = false
 		Youtube.pending = false
 		},
-	init: function ()
-		{
-		d.warn("YOUTUBE INIT")
-		var params = { allowScriptAccess: "always", wmode: "opaque" }
-		var atts = { id: "ytscreen" }
-		swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid=ytscreen",
-			"ytscreen", Player.width, Player.height, "8", null, null, params, atts)
+	isReady: function(){
+	  Youtube.ready = true
+    if (! Youtube.loaded)
+      return Youtube.unload()
+    if (Youtube.pending)
+      Youtube.player.loadVideoById(Youtube.video.name)
+    Youtube.pending = false
+	},
+	build: function(){
+		Youtube.player = new YT.Player("ytscreen", {
+			videoId: this.media.token,
+			width: Player.width,
+			height: Player.height,
+			events: {
+				onReady: Youtube.isReady,
+				onError: Youtube.error,
+				onStateChange: Youtube.statechange,
+			},
+			playerVars: {
+				autohide: 1,
+				autoplay: 1,
+				disablekb: 1,
+				controls: 0,
+				enablejsapi: 1,
+				origin: window.location.origin,
+				fs: 0,
+				modestbranding: 1,
+				iv_load_policy: 3, // no annotations
+				loop: 0,
+				showinfo: 0,
+				rel: 0,
+				wmode: 'opaque',
+			},
+		})
+	},
+  deferBuild: function (uid){
+		if (! YT || ! YT.loaded) {
+			setTimeout(function(){
+				this.defer(uid)
+			}.bind(this), 300)
 		}
-	}
-function onYouTubePlayerReady (playerId)
-	{
+		else {
+			// not sure why i need to delay here..
+			// stopped working until i added the setTimeout
+			setTimeout(function(){
+				this.build(uid)
+			}.bind(this), 20)
+		}
+  },
+	init: function () {
+		d.warn("YOUTUBE INIT")
+  },
+};
+
+window.onYouTubePlayerReady = function (playerId) {
 	d.warn("YOUTUBE READY")
-	Youtube.player = document.getElementById(playerId)
-	Youtube.playerId = playerId
-	Youtube.player.addEventListener("onStateChange", "Youtube.onStateChange")
-	Youtube.player.addEventListener("onError", "Youtube.onError")
-	Youtube.ready = true
-	if (! Youtube.loaded)
-		return Youtube.unload()
-	if (Youtube.pending)
-		Youtube.player.loadVideoById(Youtube.video.name)
-	Youtube.pending = false
-	}
+}
 Player.register(Youtube)
diff --git a/frontend/templates/profile.html b/frontend/templates/profile.html
index 9df2a44..b4f7c7f 100755
--- a/frontend/templates/profile.html
+++ b/frontend/templates/profile.html
@@ -120,6 +120,8 @@
 
 </body> 
 <script type="text/javascript">document.getElementById("plea").style.display="none"</script>
+<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
+<script type="text/javascript" src="https://w.soundcloud.com/player/api.js"></script>
 <script type="text/javascript">
 	serverHost = "{{SERVER_HOST}}"
 	serverPort = 80
diff --git a/frontend/templates/profile_img.html b/frontend/templates/profile_img.html
index 1e75dac..2ca2d16 100755
--- a/frontend/templates/profile_img.html
+++ b/frontend/templates/profile_img.html
@@ -117,6 +117,8 @@
 </body> 
 {{LIKEZ|safe}}
 <script type="text/javascript">document.getElementById("plea").style.display="none"</script>
+<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
+<script type="text/javascript" src="https://w.soundcloud.com/player/api.js"></script>
 <script type="text/javascript">
 	serverHost = "{{SERVER_HOST}}"
 	serverPort = 80
diff --git a/frontend/templates/room.html b/frontend/templates/room.html
index 85ee451..7bdbcc5 100755
--- a/frontend/templates/room.html
+++ b/frontend/templates/room.html
@@ -196,6 +196,8 @@
 <section id="msg"></section>
 
 </body>
+<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
+<script type="text/javascript" src="https://w.soundcloud.com/player/api.js"></script>
 <script type="text/javascript">if (navigator.userAgent.indexOf("MSIE") !== -1) { document.getElementById("lunacy").style.display="block" }</script> 
 <script type="text/javascript"> 
 	serverHost = "{{ SERVER_HOST }}"