2 files changed, 68 insertions, 14 deletions

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..848322e0 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 @@
     <style type="text/css">
         .montage-youtube-channel {
             width: 370px;
+            position: relative;
         }
 
         .montage-youtube-channel img {
@@ -60,32 +67,46 @@
             background-color: #000;
             opacity: 1;
 
-            -webkit-transition: opacity 0.5s ease-in-out;
+            visibility: visible;
+            -webkit-transition: all 0.5s ease-in-out;
         }
         .montage-youtube-channel.show img {
             opacity: 0;
+            visibility: hidden;
         }
 
-        .montage-youtube-channel .montage-youtube-channel-popup {
-            width: 640px;
-            border: 5px solid #000;
-            border-radius: 5px;
-
+        .montage-youtube-channel-popup {
             position: fixed;
-            top: 50%;
-            margin-top: -192px;
-            left: 50%;
-            margin-left: -320px;
-
-            z-index: 9000;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
 
             opacity: 0;
             visibility: hidden;
+            -webkit-transform: scale3d(0, 0, 1);
             -webkit-transition: all 0.5s ease-in-out;
         }
-        .montage-youtube-channel.show .montage-youtube-channel-popup {
+        .montage-youtube-channel-popup.show {
             opacity: 1;
             visibility: visible;
+            -webkit-transform: scale3d(1, 1, 1);
+        }
+
+        .montage-youtube-channel-close {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+
+            width: 25px;
+            height: 25px;
+
+            background: #333;
+            border: 1px solid #999;
+            border-radius: 3px;
+
+            color: #EEE;
+            outline: none;
         }
     </style>
 </head>
@@ -96,6 +117,7 @@
         <img src="" alt="" data-montage-id="imageC">
 
         <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide">
+            <button data-montage-id="close" class="montage-youtube-channel-close">×</button>
             <div data-montage-id="player"></div>
         </div>
     </div>
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..5b05f2c5 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,16 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             }
 
             if (this._shouldShowPopup) {
-                this._element.classList.add("show");
+                this._positionPopup();
+
+                // 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 {
@@ -142,6 +153,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 +173,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) {