Update Youtube player to HTML5

1 files changed, 21 insertions, 17 deletions

diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
index 2f7709d7..462dca58 100644
--- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
@@ -1,10 +1,9 @@
-//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&enablejsapi=1&playerapiid=ytplayer"
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-/*global require,exports*/
+/*global require,exports,YT */
 var Montage = require("montage").Montage,
     Component = require("ui/component").Component;
 
@@ -31,7 +30,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
             return this._player;
         },
         set: function(value) {
-            // TODO don't allow this to be changed
             if (this._player !== value) {
                 this._player = value;
             }
@@ -127,30 +125,36 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
         value: function() {
             // Create the callback if it doesn't exist, and make it dispatch
             // an event on the document instead
-            if (!window.onYouTubePlayerReady) {
-                window.onYouTubePlayerReady = function(playerId) {
+            if (!window.onYouTubePlayerAPIReady) {
+                window.onYouTubePlayerAPIReady = function() {
                     var event = document.createEvent("CustomEvent");
-                    event.initEvent("youtubePlayerReady", true, true);
-                    event.playerId = playerId;
+                    event.initEvent("youtubePlayerApiReady", true, true);
                     document.dispatchEvent(event);
                 };
             }
 
-            document.addEventListener("youtubePlayerReady", this, false);
+            this._element.src +=  (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1";
 
-            // If there's no videoId set one the doesn't exist
-            this._player.data = "https://www.youtube.com/v/" + (this._videoId || "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid;
+            if (typeof YT !== "undefined" && YT.Player) {
+                this.handleYoutubePlayerApiReady();
+            } else {
+                document.addEventListener("youtubePlayerApiReady", this, false);
+            }
         }
     },
 
-    handleYoutubePlayerReady: {
+    handleYoutubePlayerApiReady: {
         value: function(event) {
-            if (event.playerId !== this.uuid) {
-                return;
-            }
-
-            this._ready = true;
-            this.needsDraw = true;
+            console.log("handleYoutubePlayerApiReady");
+            document.removeEventListener("youtubePlayerApiReady", this);
+
+            var self = this;
+            this.player = new YT.Player(this._element, { events: {
+                onReady: function(event) {
+                    self._ready = true;
+                    self.needsDraw = true;
+                }
+            }});
         }
     },