update osd

dashboard-ui/css/mediaplayer-video.css

@@ -37,8 +37,6 @@
 }
 
 .videoControls {
-    padding: 0 .5em;
-    background-color: rgba(0, 0, 0, .7);
     position: fixed;
     left: 0;
     bottom: 0;
@@ -47,6 +45,14 @@
     text-align: center;
 }
 
+    .videoControls > div {
+        background-color: rgba(0, 0, 0, .7);
+    }
+
+.videoControlButtons {
+    padding: 0 .5em;
+}
+
 .videoTopControls {
     padding: 0 1em;
     background-color: rgba(0, 0, 0, .5);
@@ -69,8 +75,8 @@
     }
 
 .nowPlayingInfo {
-    text-align: center;
-    padding: 1.5em 1em 2em 1em;
+    text-align: left;
+    padding: 1.5em 1em 2em 3em;
 }
 
 #videoPlayer .nowPlayingImage img {
@@ -88,7 +94,7 @@
     vertical-align: top;
     color: #eee;
     display: inline-block;
-    width: 70%;
+    width: 80%;
     font-weight: normal;
     font-size: 14px;
 }
@@ -202,9 +208,9 @@
 
 @media all and (max-width: 1400px), all and (max-height: 900px) {
 
-    #mediaPlayer .nowPlayingInfo {
+    /*#mediaPlayer .nowPlayingInfo {
         display: none !important;
-    }
+    }*/
 }
 
 @media all and (max-width: 555px) {

dashboard-ui/css/mediaplayer.css

@@ -4,7 +4,7 @@
 }
 
 .nowPlayingText {
-    display: inline-block;
+    display: inline-block;.
     font-weight: normal;
     position: relative;
     top: -7px;
@@ -18,6 +18,15 @@
     max-width: 130px;
 }
 
+.mediaButton.infoButton iron-icon {
+    width: 34px;
+    height: 34px;
+}
+
+.mediaButton.active {
+    color: #2ad;
+}
+
 @media (min-width: 500px) {
     .nowPlayingText {
         max-width: 180px;

dashboard-ui/scripts/mediaplayer-video.js

@@ -33,12 +33,29 @@
         };
 
         self.resetEnhancements = function () {
-            $("#mediaPlayer").hide();
+
+            fadeOut(document.querySelector('#mediaPlayer'));
             $('#videoPlayer').removeClass('fullscreenVideo').removeClass('idlePlayer');
             $('.hiddenOnIdle').removeClass("inactive");
             $("video").remove();
+
+            document.querySelector('.mediaButton.infoButton').classList.remove('active');
+            document.querySelector('.videoControls .nowPlayingInfo').classList.add('hide');
+            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) {
@@ -610,6 +627,42 @@
             });
         };
 
+        self.toggleInfo = function () {
+
+            var button = document.querySelector('.mediaButton.infoButton');
+            var nowPlayingInfo = document.querySelector('.videoControls .nowPlayingInfo');
+
+            if (button.classList.contains('active')) {
+                button.classList.remove('active');
+                document.querySelector('.videoControls').classList.add('hiddenOnIdle');
+
+                fadeOutDown(nowPlayingInfo);
+
+            } else {
+                button.classList.add('active');
+                document.querySelector('.videoControls').classList.remove('hiddenOnIdle');
+                nowPlayingInfo.classList.remove('hide');
+                fadeInUp(nowPlayingInfo);
+            }
+        };
+
+        function fadeInUp(elem) {
+            var keyframes = [
+              { transform: 'translate3d(0, 100%, 0)', offset: 0 },
+              { transform: 'none', offset: 1 }];
+            var timing = { duration: 300, iterations: 1 };
+            elem.animate(keyframes, timing);
+        }
+
+        function fadeOutDown(elem) {
+            var keyframes = [{ transform: 'none', offset: 0 },
+              { transform: 'translate3d(0, 100%, 0)', offset: 1 }];
+            var timing = { duration: 300, iterations: 1 };
+            elem.animate(keyframes, timing).onfinish = function () {
+                elem.classList.add('hide');
+            };
+        }
+
         function ensureVideoPlayerElements() {
 
             var html = '<div id="mediaPlayer" style="display: none;">';
@@ -647,11 +700,12 @@
             // Create controls
             html += '<div class="videoControls hiddenOnIdle">';
 
-            html += '<div class="nowPlayingInfo hiddenOnIdle">';
+            html += '<div class="nowPlayingInfo hide">';
             html += '<div class="nowPlayingImage"></div>';
             html += '<div class="nowPlayingTabs"></div>';
             html += '</div>'; // nowPlayingInfo
 
+            html += '<div class="videoControlButtons">';
             html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton videoTrackControl hide" onclick="MediaPlayer.previousTrack();"></paper-icon-button>';
 
             html += '<paper-icon-button id="video-playButton" icon="play-arrow" class="mediaButton unpauseButton" onclick="MediaPlayer.unpause();"></paper-icon-button>';
@@ -669,6 +723,8 @@
             html += '<paper-slider pin step="1" min="0" max="100" value="0" class="videoVolumeSlider" style="width:100px;vertical-align:middle;margin-left:-1em;"></paper-slider>';
 
             html += '<paper-icon-button icon="fullscreen" class="mediaButton fullscreenButton" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"></paper-icon-button>';
+            html += '<paper-icon-button icon="info" class="mediaButton infoButton" onclick="MediaPlayer.toggleInfo();"></paper-icon-button>';
+            html += '</div>';
 
             html += '</div>'; // videoControls
 

dashboard-ui/vulcanize-out.html

@@ -19143,6 +19143,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             <g id="filter-list"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></g>
             <g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g>
             <g id="wifi"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path></g>
+            <g id="info-outline"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g>
         </defs>
     </svg>
 </iron-iconset-svg>