1 files changed, 54 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..b49f6ae1 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,13 +30,43 @@ 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;
             }
         }
     },
 
+    _width: {
+        enumerable: false,
+        value: 640
+    },
+    width: {
+        get: function() {
+            return this._width;
+        },
+        set: function(value) {
+            if (this._width !== value) {
+                this._width = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+    _height: {
+        enumerable: false,
+        value: 385
+    },
+    height: {
+        get: function() {
+            return this._height;
+        },
+        set: function(value) {
+            if (this._height !== value) {
+                this._height = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     _autoplay: {
         enumerable: false,
         value: false
@@ -49,6 +78,7 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
         set: function(value) {
             if (this._autoplay !== value) {
                 this._autoplay = value;
+                this.needsDraw = true;
             }
         }
     },
@@ -127,30 +157,35 @@ 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;
-            }
+            document.removeEventListener("youtubePlayerApiReady", this);
 
-            this._ready = true;
-            this.needsDraw = true;
+            var self = this;
+            this.player = new YT.Player(this._element, { events: {
+                onReady: function(event) {
+                    self._ready = true;
+                    self.needsDraw = true;
+                }
+            }});
         }
     },
 
@@ -172,8 +207,10 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
 
                 this._player[fnName].apply(this._player, args);
             }
-
             this._playerQueue.length = 0;
+
+            this._element.width = this._width;
+            this._element.height = this._height;
         }
     }
 });
\ No newline at end of file