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 --- .../examples/youtube-channel-example/index.html | 10 +- .../ui/youtube-channel.reel/youtube-channel.html | 72 +++++++++++- .../ui/youtube-channel.reel/youtube-channel.js | 128 ++++++++++++++++++--- .../ui/youtube-player.reel/youtube-player.js | 37 +++++- 4 files changed, 224 insertions(+), 23 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/examples/youtube-channel-example/index.html b/node_modules/montage/examples/youtube-channel-example/index.html index f3a0592a..132d0d5a 100755 --- a/node_modules/montage/examples/youtube-channel-example/index.html +++ b/node_modules/montage/examples/youtube-channel-example/index.html @@ -15,7 +15,7 @@ "prototype": "montage/ui/youtube-channel.reel", "properties": { "element": {"#": "player"}, - "channel": "drive" + "channelUrl": "http://www.youtube.com/TEDEducation" } }, @@ -24,6 +24,12 @@ "properties": { "element": {"#": "url"}, "value": "http://www.youtube.com/TEDEducation" + }, + "bindings": { + "value": { + "boundObject": {"@": "player"}, + "boundObjectPropertyPath": "channelUrl" + } } } } @@ -32,7 +38,7 @@
Youtube Channel
- +
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html index 184ac360..50286c22 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -15,20 +15,86 @@ "element": {"#": "player"} } }, + "imageA": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageA"} + } + }, + "imageB": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageB"} + } + }, + "imageC": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageC"} + } + }, "owner": { - "prototype": "montage/ui/youtube-channel.reel", + "module": "montage/ui/youtube-channel.reel", + "name": "YoutubeChannel", "properties": { "element": {"#": "container"}, - "player": {"@": "player"} + "player": {"@": "player"}, + "_popupElement": {"#": "popup"}, + "imageA": {"@": "imageA"}, + "imageB": {"@": "imageB"}, + "imageC": {"@": "imageC"} } } } +
-
+ + + + +
+
+
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js index 3e20c406..3d9f7f2f 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -6,8 +6,7 @@ /*global require,exports*/ var Montage = require("montage").Montage, Component = require("ui/component").Component, - Uuid = require("core/uuid").Uuid; - + Uuid = require("core/Uuid"); var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { @@ -16,6 +15,25 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { value: /youtube.com\/(user\/)?([a-z0-9]+)/i }, + imageA: { + value: null + }, + imageB: { + value: null + }, + imageC: { + value: null + }, + _popupElement: { + enumerable: false, + value: null + }, + + _shouldShowPopup: { + enumerable: false, + value: false + }, + _channelUrl: { enumerable: false, value: null @@ -77,37 +95,115 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { // create url var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; - this.script = document.createElement("script"); - this.script.src = url; + this._script = document.createElement("script"); + this._script.src = url; this.needsDraw = true; } }, - script: { + _script: { + enumerable: false, value: null }, + prepareForDraw: { + value: function() { + this.imageA.element.addEventListener("click", this, false); + this.imageB.element.addEventListener("click", this, false); + this.imageC.element.addEventListener("click", this, false); + } + }, + draw: { value: function() { - if (this.script) { - this._element.appendChild(this.script); - this.script = null; + if (this._script) { + this._element.appendChild(this._script); + this._script = null; } + + if (this._entries) { + this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url; + this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url; + this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url; + } + + if (this._videoId) { + this.player.videoId = this._videoId; + this._videoId = null; + } + + if (this._shouldShowPopup) { + this._popupElement.classList.add("show"); + if (window.Touch) { + document.addEventListener('touchstart', this, false); + } else { + document.addEventListener('mousedown', this, false); + document.addEventListener('keyup', this, false); + } + } else { + this._popupElement.classList.remove("show"); + this.player.stop(); + + if (window.Touch) { + document.removeEventListener('touchstart', this); + } else { + document.removeEventListener('mousedown', this); + document.removeEventListener('keyup', this); + } + + } + } }, - handleData: { - value: function(data) { - var entries = data.feed.entry || []; + _entries: { + enumerable: false, + value: null + }, - var playlist = []; + handleClick: { + value: function(event) { + switch(event.target.dataset.montageId) { + case "imageA": + this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageB": + this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageC": + this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"]; + break; + } + this._shouldShowPopup = true; + this.needsDraw = true; + } + }, - for (var i = 0, len = entries.length; i < len; i++) { - var id = entries[i]["media$group"]["yt$videoid"]["$t"]; - playlist.push(id); + handleTouchStart: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + handleMousedown: { + value: function(event) { + if (event.button === 0) { + this._shouldShowPopup = false; + this.needsDraw = true; } + } + }, + handleKeyup: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, - this.player.playlist = playlist; + handleData: { + value: function(data) { + this._entries = data.feed.entry || []; + this.needsDraw = true; } } 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