diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index d255a0d87f..13e8200de4 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/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) { diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 162ede6f42..c997503314 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/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; diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 9ccf6bb078..23139fe329 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/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 = '