From 09852e9b9b8e64f003bed5aa57630d8b42c8ac95 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sat, 17 Mar 2012 19:28:30 -0700 Subject: Integrating picasa carousel and youtube channel --- .../ui/youtube-channel.reel/youtube-channel.js | 101 +++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 node_modules/montage/ui/youtube-channel.reel/youtube-channel.js (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js new file mode 100644 index 00000000..fd642290 --- /dev/null +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -0,0 +1,101 @@ +/* + 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, + Uuid = require("core/uuid").Uuid; + + +var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { + + _userRe: { + enumerable: false, + value: /youtube.com\/(user\/)?([a-z0-9]+)/i + }, + + _channelUrl: { + enumerable: false, + value: null + }, + channelUrl: { + depends: ["channel"], + get: function() { + return this._channelUrl; + }, + set: function(value, fromChannel) { + if (this._channelUrl !== value) { + this._channelUrl = value; + + // prevent infinite loop + if (!fromChannel) { + var match = this._userRe.exec(value); + if (match && match[2]) { + Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); + } + } + } + } + }, + + _channel: { + enumerable: false, + value: null + }, + channel: { + get: function() { + return this._channel; + }, + set: function(value, fromUrl) { + if (this._channel !== value) { + this._channel = value; + + // prevent infinite loop + if (!fromUrl) { + Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); + } + + this._loadChannel(); + } + } + }, + + _loadChannel: { + enumerable: false, + value: function() { + var self = this; + + var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); + + window[callbackName] = function(data) { + self.handleData(data); + delete window[callbackName]; + }; + + // create url + var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; + + var script = document.createElement("script"); + script.src = url; + this._element.appendChild(script); + } + }, + + handleData: { + value: function(data) { + var entries = data.feed.entry || []; + + var playlist = []; + + for (var i = 0, len = entries.length; i < len; i++) { + var id = entries[i]["media$group"]["yt$videoid"]["$t"]; + playlist.push(id); + } + + this.player.playlist = playlist; + } + } + +}); \ No newline at end of file -- cgit v1.2.3 From 222562c734396403c18c90a1ca395a36c4d49da4 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Mon, 19 Mar 2012 09:21:15 -0700 Subject: Youtube appending script in draw --- .../ui/youtube-channel.reel/youtube-channel.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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 fd642290..3e20c406 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -77,9 +77,22 @@ 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; - var script = document.createElement("script"); - script.src = url; - this._element.appendChild(script); + this.script = document.createElement("script"); + this.script.src = url; + this.needsDraw = true; + } + }, + + script: { + value: null + }, + + draw: { + value: function() { + if (this.script) { + this._element.appendChild(this.script); + this.script = null; + } } }, -- 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-channel.reel/youtube-channel.js | 128 ++++++++++++++++++--- 1 file changed, 112 insertions(+), 16 deletions(-) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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; } } -- cgit v1.2.3 From ab7c54f28151e5ae485881ec53ba22718ff4b449 Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Tue, 20 Mar 2012 09:32:21 -0700 Subject: Change Youtube channel transition to avoid rendering bug --- node_modules/montage/ui/youtube-channel.reel/youtube-channel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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 3d9f7f2f..ccbd9978 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -133,7 +133,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { } if (this._shouldShowPopup) { - this._popupElement.classList.add("show"); + this._element.classList.add("show"); if (window.Touch) { document.addEventListener('touchstart', this, false); } else { @@ -141,7 +141,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { document.addEventListener('keyup', this, false); } } else { - this._popupElement.classList.remove("show"); + this._element.classList.remove("show"); this.player.stop(); if (window.Touch) { -- cgit v1.2.3 From 7edc0c123f9157d48543b09f5a9d7bb496e14f44 Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Wed, 21 Mar 2012 14:16:55 -0700 Subject: Make Youtube video fill the full page Includes Chrome and Canary code paths for rendering bug fixes --- .../ui/youtube-channel.reel/youtube-channel.js | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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 ccbd9978..6cd43a3c 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -111,6 +111,8 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { this.imageA.element.addEventListener("click", this, false); this.imageB.element.addEventListener("click", this, false); this.imageC.element.addEventListener("click", this, false); + + this._positionPopup(); } }, @@ -133,7 +135,9 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { } if (this._shouldShowPopup) { + this._positionPopup(); this._element.classList.add("show"); + this._popupElement.classList.add("show"); if (window.Touch) { document.addEventListener('touchstart', this, false); } else { @@ -142,6 +146,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { } } else { this._element.classList.remove("show"); + this._popupElement.classList.remove("show"); this.player.stop(); if (window.Touch) { @@ -161,6 +166,26 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { value: null }, + _positionPopup: { + value: function() { + + var viewport = this._element.parentNode; + var viewportStyle = window.getComputedStyle(viewport); + + this.player.width = viewportStyle.width; + this.player.height = viewportStyle.height; + + // // Chrome + viewport.insertBefore(this._popupElement, viewport.firstChild); + this._popupElement.style.top = viewport.offsetTop; + this._popupElement.style.left = viewport.offsetLeft; + + // Canary + // this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; + // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; + } + }, + handleClick: { value: function(event) { switch(event.target.dataset.montageId) { -- cgit v1.2.3 From 0243eed41eddd5bde3a7ce0c6e2ae7313457b19b Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Wed, 21 Mar 2012 14:27:43 -0700 Subject: Add scale animation back to youtube channel Masks animation error on Canary. Also looks cool. --- .../montage/ui/youtube-channel.reel/youtube-channel.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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 6cd43a3c..30920953 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -136,8 +136,15 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { if (this._shouldShowPopup) { this._positionPopup(); - this._element.classList.add("show"); - this._popupElement.classList.add("show"); + + // Fix for Canary where the thumbnail in the video doesn't + // change until the CSS transition has finished, so wait for + // it to change before starting the animation + var self = this; + window.setTimeout(function() { + self._element.classList.add("show"); + self._popupElement.classList.add("show"); + }, 50); if (window.Touch) { document.addEventListener('touchstart', this, false); } else { -- cgit v1.2.3 From 4e6662a973a8af583733d484073359cc780851de Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Thu, 22 Mar 2012 10:34:32 -0700 Subject: Update Youtube Channel to work in Chrome Beta --- .../montage/ui/youtube-channel.reel/youtube-channel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js') 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 30920953..5b05f2c5 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -183,13 +183,13 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { this.player.height = viewportStyle.height; // // Chrome - viewport.insertBefore(this._popupElement, viewport.firstChild); - this._popupElement.style.top = viewport.offsetTop; - this._popupElement.style.left = viewport.offsetLeft; + // viewport.insertBefore(this._popupElement, viewport.firstChild); + // this._popupElement.style.top = viewport.offsetTop; + // this._popupElement.style.left = viewport.offsetLeft; // Canary - // this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; - // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; + this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; + this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; } }, -- cgit v1.2.3