From 604fba2cbfff27fe80525db177ded7fd696e2b82 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 30 Nov 2015 01:43:21 -0500
Subject: [PATCH] add zoom and fade effect to video player

---
 .../bower_components/doc-ready/.bower.json    |  2 +-
 .../iron-overlay-behavior/.bower.json         |  6 +-
 .../bower_components/paper-input/.bower.json  |  6 +-
 .../bower_components/paper-ripple/.bower.json |  6 +-
 dashboard-ui/css/mediaplayer-video.css        |  3 +-
 dashboard-ui/scripts/actionsheet.js           |  2 +-
 dashboard-ui/scripts/htmlmediarenderer.js     |  2 +-
 dashboard-ui/scripts/mediaplayer-video.js     | 81 +++++++++++++------
 8 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/dashboard-ui/bower_components/doc-ready/.bower.json b/dashboard-ui/bower_components/doc-ready/.bower.json
index adda4287b..d4d75eca6 100644
--- a/dashboard-ui/bower_components/doc-ready/.bower.json
+++ b/dashboard-ui/bower_components/doc-ready/.bower.json
@@ -39,6 +39,6 @@
     "commit": "cec8e49744a1e18b14a711eea77e201bb70de544"
   },
   "_source": "git://github.com/desandro/doc-ready.git",
-  "_target": "1.0.x",
+  "_target": "~1.0.4",
   "_originalSource": "doc-ready"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
index 781650cdb..3911d5458 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
@@ -33,14 +33,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/iron-overlay-behavior",
+  "homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
   "_release": "1.1.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.1.1",
     "commit": "1ed1603ce820456feab3f62ae86f8f3ec801d131"
   },
-  "_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
+  "_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-overlay-behavior"
+  "_originalSource": "PolymerElements/iron-overlay-behavior"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-input/.bower.json b/dashboard-ui/bower_components/paper-input/.bower.json
index 91b2f2300..d0ff753f5 100644
--- a/dashboard-ui/bower_components/paper-input/.bower.json
+++ b/dashboard-ui/bower_components/paper-input/.bower.json
@@ -50,7 +50,7 @@
     "tag": "v1.1.1",
     "commit": "1bbce220b027dc030b294163f7da6f3e9052ab13"
   },
-  "_source": "git://github.com/polymerelements/paper-input.git",
-  "_target": "^1.0.9",
-  "_originalSource": "polymerelements/paper-input"
+  "_source": "git://github.com/PolymerElements/paper-input.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/paper-input"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-ripple/.bower.json b/dashboard-ui/bower_components/paper-ripple/.bower.json
index 157225ee7..2f654d71c 100644
--- a/dashboard-ui/bower_components/paper-ripple/.bower.json
+++ b/dashboard-ui/bower_components/paper-ripple/.bower.json
@@ -32,14 +32,14 @@
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/paper-ripple",
+  "homepage": "https://github.com/polymerelements/paper-ripple",
   "_release": "1.0.5",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.5",
     "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
   },
-  "_source": "git://github.com/PolymerElements/paper-ripple.git",
+  "_source": "git://github.com/polymerelements/paper-ripple.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-ripple"
+  "_originalSource": "polymerelements/paper-ripple"
 }
\ No newline at end of file
diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css
index 0b3547951..80fdb48c7 100644
--- a/dashboard-ui/css/mediaplayer-video.css
+++ b/dashboard-ui/css/mediaplayer-video.css
@@ -1,5 +1,4 @@
-.videoBackdrop {
-    /* Allows popups to be closed, because their z-index is 1099 */
+#mediaPlayer {
     z-index: 1098;
     position: fixed;
     background-color: transparent;
diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js
index fa629dd1d..3f41fe99f 100644
--- a/dashboard-ui/scripts/actionsheet.js
+++ b/dashboard-ui/scripts/actionsheet.js
@@ -118,7 +118,7 @@
 
         setTimeout(function () {
             dlg.open();
-        }, 10);
+        }, 50);
 
         // Has to be assigned a z-index after the call to .open() 
         dlg.addEventListener('iron-overlay-closed', function () {
diff --git a/dashboard-ui/scripts/htmlmediarenderer.js b/dashboard-ui/scripts/htmlmediarenderer.js
index 0089e6ae8..fa876d5b9 100644
--- a/dashboard-ui/scripts/htmlmediarenderer.js
+++ b/dashboard-ui/scripts/htmlmediarenderer.js
@@ -219,7 +219,7 @@
 
             html += '</video>';
 
-            var elem = $('#videoElement', '#mediaPlayer').prepend(html);
+            var elem = $('#videoElement', '#videoPlayer').prepend(html);
 
             return $('.itemVideo', elem)
             	.one('.loadedmetadata', onLoadedMetadata)
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index c4b73e2a2..23aa9fcd9 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -42,7 +42,7 @@
                 self.exitFullScreen();
             }
 
-            fadeOut(document.querySelector('#mediaPlayer'));
+            fadeOut(document.querySelector('#videoPlayer'));
             $('#videoPlayer').removeClass('fullscreenVideo').removeClass('idlePlayer');
             $('.hiddenOnIdle').removeClass("inactive");
             $("video").remove();
@@ -52,18 +52,6 @@
             document.querySelector('.videoControls').classList.add('hiddenOnIdle');
         };
 
-        function fadeOut(elem) {
-            $(elem).hide();
-            return;
-            var keyframes = [
-              { opacity: '1', offset: 0 },
-              { opacity: '0', offset: 1 }];
-            var timing = { duration: 300, iterations: 1 };
-            elem.animate(keyframes, timing).onfinish = function () {
-                $(elem).hide();
-            };
-        }
-
         self.exitFullScreen = function () {
 
             if (document.exitFullscreen) {
@@ -690,13 +678,9 @@
 
         function ensureVideoPlayerElements() {
 
-            // TODO: remove dependency on nowplayingbar
-            require(['css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css']);
+            var html = '';
 
-            var html = '<div id="mediaPlayer" style="display: none;">';
-
-            html += '<div class="videoBackdrop">';
-            html += '<div id="videoPlayer">';
+            html += '<div id="videoPlayer" class="hide">';
 
             html += '<div id="videoElement">';
             html += '<div id="play" class="status"></div>';
@@ -758,8 +742,6 @@
             html += '</div>'; // videoControls
 
             html += '</div>'; // videoPlayer
-            html += '</div>'; // videoBackdrop
-            html += '</div>'; // mediaPlayer
 
             var div = document.createElement('div');
             div.innerHTML = html;
@@ -777,7 +759,7 @@
             initComplete = true;
             ensureVideoPlayerElements();
 
-            var parent = $("#mediaPlayer");
+            var parent = $("#videoPlayer");
 
             muteButton = $('.muteButton', parent);
             unmuteButton = $('.unmuteButton', parent);
@@ -957,9 +939,10 @@
 
         self.playVideo = function (item, mediaSource, startPosition, callback) {
 
-            initVideoElements();
+            // TODO: remove dependency on nowplayingbar
+            requirejs(['videorenderer', 'css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css'], function () {
 
-            requirejs(['videorenderer'], function () {
+                initVideoElements();
 
                 self.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) {
 
@@ -988,6 +971,53 @@
             });
         };
 
+        function fadeOut(elem) {
+
+            if (elem.classList.contains('hide')) {
+                return;
+            }
+
+            var onfinish = function () {
+                elem.classList.add('hide');
+            };
+
+            if (!browserInfo.animate) {
+                onfinish();
+                return;
+            }
+
+            requestAnimationFrame(function () {
+                var keyframes = [
+                  { opacity: '1', offset: 0 },
+                  { opacity: '0', offset: 1 }];
+                var timing = { duration: 400, iterations: 1, easing: 'ease-out' };
+                elem.animate(keyframes, timing).onfinish = onfinish;
+            });
+        }
+
+        function fadeIn(elem) {
+
+            if (!elem.classList.contains('hide')) {
+                return;
+            }
+
+            elem.classList.remove('hide');
+
+            if (!browserInfo.animate) {
+                return;
+            }
+
+            requestAnimationFrame(function () {
+
+                var keyframes = [
+                    { transform: 'scale3d(.2, .2, .2)  ', opacity: '.6', offset: 0 },
+                  { transform: 'none', opacity: '1', offset: 1 }
+                ];
+
+                var timing = { duration: 240, iterations: 1, easing: 'ease-out' };
+                elem.animate(keyframes, timing);
+            });
+        }
         self.playVideoInternal = function (item, mediaSource, startPosition, streamInfo, callback) {
 
             self.startTimeTicksOffset = streamInfo.startTimeTicksOffset;
@@ -998,7 +1028,8 @@
             });
 
             // Create video player
-            var mediaPlayerContainer = $("#mediaPlayer").show();
+            var mediaPlayerContainer = document.querySelector('#videoPlayer');
+            fadeIn(mediaPlayerContainer);
             var videoControls = $('.videoControls', mediaPlayerContainer);
 
             //show stop button