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