From 3070d7b2a3b96609eace60825c721951c85405cc Mon Sep 17 00:00:00 2001
From: François Frisch
Date: Sat, 17 Mar 2012 18:05:23 -0700
Subject: Adding the youtube player
---
.../ui/youtube-player.reel/youtube-player.html | 29 ++++
.../ui/youtube-player.reel/youtube-player.js | 179 +++++++++++++++++++++
2 files changed, 208 insertions(+)
create mode 100644 node_modules/montage/ui/youtube-player.reel/youtube-player.html
create mode 100644 node_modules/montage/ui/youtube-player.reel/youtube-player.js
(limited to 'node_modules/montage/ui/youtube-player.reel')
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
new file mode 100644
index 00000000..ae757626
--- /dev/null
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
new file mode 100644
index 00000000..2f7709d7
--- /dev/null
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
@@ -0,0 +1,179 @@
+//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&enablejsapi=1&playerapiid=ytplayer"
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+/*global require,exports*/
+var Montage = require("montage").Montage,
+ Component = require("ui/component").Component;
+
+var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
+
+ // Stores a queue of function calls to make on the player in the draw
+ // function
+ _playerQueue: {
+ enumerable: false,
+ value: []
+ },
+
+ _ready: {
+ enumerable: false,
+ value: false
+ },
+
+ _player: {
+ enumerable: false,
+ value: null
+ },
+ player: {
+ get: function() {
+ return this._player;
+ },
+ set: function(value) {
+ // TODO don't allow this to be changed
+ if (this._player !== value) {
+ this._player = value;
+ }
+ }
+ },
+
+ _autoplay: {
+ enumerable: false,
+ value: false
+ },
+ autoplay: {
+ get: function() {
+ return this._autoplay;
+ },
+ set: function(value) {
+ if (this._autoplay !== value) {
+ this._autoplay = value;
+ }
+ }
+ },
+
+ _videoId: {
+ enumerable: false,
+ value: null
+ },
+ videoId: {
+ get: function() {
+ return this._videoId;
+ },
+ set: function(value) {
+ if (this._videoId !== value) {
+ // TODO handle URLs as well
+ this._videoId = value;
+
+ // If the video isn't in the playlist, clear the playlist,
+ if (this._playlist && this._playlist.indexOf(value) === -1) {
+ this._playlist = null;
+ }
+ // TODO if the video is in the playlist use playVideoAt
+
+ if (this._autoplay) {
+ this._playerQueue.push(["loadVideoById", value]);
+ } else {
+ this._playerQueue.push(["cueVideoById", value]);
+ }
+ this.needsDraw = true;
+ }
+ }
+ },
+
+ _playlist: {
+ enumerable: false,
+ value: null
+ },
+ playlist: {
+ get: function() {
+ return this._playlist;
+ },
+ set: function(value) {
+ if (this._playlist !== value) {
+ this._playlist = value;
+
+ if (this._autoplay) {
+ this._playerQueue.push(["loadPlaylist", value]);
+ } else {
+ this._playerQueue.push(["cuePlaylist", value]);
+ }
+ this.needsDraw = true;
+ }
+ }
+ },
+
+ play: {
+ value: function() {
+ this._playerQueue.push("playVideo");
+ this.needsDraw = true;
+ }
+ },
+ pause: {
+ value: function() {
+ this._playerQueue.push("pauseVideo");
+ this.needsDraw = true;
+ }
+ },
+ stop: {
+ value: function() {
+ this._playerQueue.push("stopVideo");
+ this.needsDraw = true;
+ }
+ },
+
+ prepareForDraw: {
+ 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) {
+ var event = document.createEvent("CustomEvent");
+ event.initEvent("youtubePlayerReady", true, true);
+ event.playerId = playerId;
+ document.dispatchEvent(event);
+ };
+ }
+
+ document.addEventListener("youtubePlayerReady", this, false);
+
+ // 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;
+ }
+ },
+
+ handleYoutubePlayerReady: {
+ value: function(event) {
+ if (event.playerId !== this.uuid) {
+ return;
+ }
+
+ this._ready = true;
+ this.needsDraw = true;
+ }
+ },
+
+ draw: {
+ value: function() {
+ if (!this._ready) {
+ return;
+ }
+
+ for (var i = 0, len = this._playerQueue.length; i < len; i++) {
+ var fnName, args;
+ if (typeof this._playerQueue[i] === "string") {
+ fnName = this._playerQueue[i];
+ args = [];
+ } else {
+ fnName = this._playerQueue[i].shift();
+ args = this._playerQueue[i];
+ }
+
+ this._player[fnName].apply(this._player, args);
+ }
+
+ this._playerQueue.length = 0;
+ }
+ }
+});
\ No newline at end of file
--
cgit v1.2.3
From eb5cda3ce03b35c3335b91c34ead0cdf290b243e Mon Sep 17 00:00:00 2001
From: Stuart Knightley
Date: Mon, 19 Mar 2012 09:46:38 -0700
Subject: Update Youtube player to HTML5
---
.../ui/youtube-player.reel/youtube-player.html | 10 ++----
.../ui/youtube-player.reel/youtube-player.js | 38 ++++++++++++----------
2 files changed, 24 insertions(+), 24 deletions(-)
(limited to 'node_modules/montage/ui/youtube-player.reel')
diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
index ae757626..ec61493c 100644
--- a/node_modules/montage/ui/youtube-player.reel/youtube-player.html
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html
@@ -7,23 +7,19 @@
+
-
+
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"
/*
This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
-/*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;
+ }
+ }});
}
},
--
cgit v1.2.3
From e438756a18e4ae46cd4713e81f0bc4a1d2ddea15 Mon Sep 17 00:00:00 2001
From: Stuart Knightley
Date: Mon, 19 Mar 2012 15:13:28 -0700
Subject: Update Youtube channel to have three thumbnails
---
.../ui/youtube-player.reel/youtube-player.js | 37 ++++++++++++++++++++--
1 file changed, 35 insertions(+), 2 deletions(-)
(limited to 'node_modules/montage/ui/youtube-player.reel')
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 462dca58..b49f6ae1 100644
--- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js
+++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js
@@ -36,6 +36,37 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
}
},
+ _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
@@ -47,6 +78,7 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
set: function(value) {
if (this._autoplay !== value) {
this._autoplay = value;
+ this.needsDraw = true;
}
}
},
@@ -145,7 +177,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, {
handleYoutubePlayerApiReady: {
value: function(event) {
- console.log("handleYoutubePlayerApiReady");
document.removeEventListener("youtubePlayerApiReady", this);
var self = this;
@@ -176,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
--
cgit v1.2.3