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.html | 46 ++++++++++++++++------ .../ui/youtube-channel.reel/youtube-channel.js | 25 ++++++++++++ 2 files changed, 58 insertions(+), 13 deletions(-) (limited to 'node_modules/montage/ui') 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 96d823a5..f40ccadb 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -33,6 +33,12 @@ "element": {"#": "imageC"} } }, + "button": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "close"} + } + }, "owner": { "module": "montage/ui/youtube-channel.reel", @@ -51,6 +57,7 @@ @@ -96,6 +115,7 @@ 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.html | 2 ++ .../montage/ui/youtube-channel.reel/youtube-channel.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'node_modules/montage/ui') 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 f40ccadb..848322e0 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -84,11 +84,13 @@ opacity: 0; visibility: hidden; + -webkit-transform: scale3d(0, 0, 1); -webkit-transition: all 0.5s ease-in-out; } .montage-youtube-channel-popup.show { opacity: 1; visibility: visible; + -webkit-transform: scale3d(1, 1, 1); } .montage-youtube-channel-close { 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') 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