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