From 2131f0f895372f407356f79f79d7af35c3a81cca Mon Sep 17 00:00:00 2001 From: Tim Hobbs Date: Tue, 18 Mar 2014 12:57:32 -0700 Subject: [PATCH] Media player fixes * Fix for hidden audio player * Fullscreen hover fix --- dashboard-ui/css/mediaplayer.css | 22 ++++++++++-- dashboard-ui/css/site.css | 2 +- dashboard-ui/scripts/mediaplayer-video.js | 41 ++++++++++++++++++++++- dashboard-ui/scripts/mediaplayer.js | 4 +++ 4 files changed, 64 insertions(+), 5 deletions(-) diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 2f8d452ae0..a35f846c5c 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -8,7 +8,7 @@ } .nowPlayingBar .barBackground { - border-top: 2px solid green; + border-top: 2px solid #08b; position: absolute; width: 100%; height: 100%; @@ -16,6 +16,9 @@ #videoPlayer.fullscreenVideo .nowPlayingBar { opacity: 0.5; + } + + #videoPlayer.fullscreenVideo .inactive { -webkit-transition: top 0.6s ease-in-out; -moz-transition: top 0.6s ease-in-out; -o-transition: top 0.6s ease-in-out; @@ -24,7 +27,7 @@ height: 100%; } - #videoPlayer.fullscreenVideo:hover .nowPlayingBar { + #videoPlayer.fullscreenVideo:hover .active { top: 95% !important; } @@ -54,6 +57,11 @@ left: 0; } +#mediaPlayer { + min-height: 50px; + padding-bottom: 20px; +} + .nowPlayingMediaInfo div { display: inline-block; } @@ -167,7 +175,7 @@ height: 50px; background-color: #1d1d1d; position: absolute; - top: initial; + top: auto; right: 0; bottom: 0; left: 0; @@ -598,4 +606,12 @@ ss} -webkit-transform: scale(1); opacity: 0; } +} + +.cursor-active { + cursor: default; +} + +.cursor-inactive { + cursor: none; } \ No newline at end of file diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 7dbef1f20a..132ab59b1a 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -683,7 +683,7 @@ h1 .imageLink { z-index: 99997; color: #fff; border: 0 !important; - max-height: 200px; + max-height: 220px; } .footerNotification { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 76573784f9..7cd6a3f461 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -18,8 +18,8 @@ var timeout; var video; var culturesPromise; - var idleState = true; var fullscreenExited = false; + var idleState = true; self.initVideoPlayer = function () { video = playVideo(item, startPosition, user); @@ -50,6 +50,8 @@ var nowPlayingBar = $("#nowPlayingBar", mediaPlayer); + footer.css("top", null); + mediaElement.html(""); // remove play/pause mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong @@ -61,6 +63,11 @@ footer.hide(); } + + $("html").css("cursor", "default"); + + $(".ui-loader").hide(); + }; self.exitFullScreen = function() { @@ -146,9 +153,13 @@ $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () { var nowPlayingBar = $('#nowPlayingBar'); + + $('.itemVideo').off('mousemove keydown scroll', idleHandler); + if (self.isFullScreen()) { enterFullScreen(); idleState = true; + $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove'); } else { nowPlayingBar.removeClass("highPosition"); exitFullScreenToWindow(); @@ -205,8 +216,36 @@ hideFlyout($('#qualityFlyout')); }); + + $("#footer").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () { + + idleHandler(this); + + }); }); + function idleHandler() { + var video = $(".itemVideo"); + var nowPlayingBar = $("#nowPlayingBar"); + + if (timeout) { + window.clearTimeout(timeout); + } + + if (idleState == true) { + video.removeClass("cursor-inactive").addClass("cursor-active"); + nowPlayingBar.removeClass("inactive").addClass("active"); + } + + idleState = false; + + timeout = window.setTimeout(function () { + idleState = true; + video.removeClass("cursor-active").addClass("cursor-inactive"); + nowPlayingBar.removeClass("active").addClass("inactive"); + }, 4000); + } + function requestFullScreen(element) { // Supports most browsers and their versions. var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 3906985161..a4f041b1e0 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -79,6 +79,8 @@ ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position); + $("#mediaPlayer").hide(); + if (currentItem.MediaType == "Video") { ApiClient.stopActiveEncodings(); if (self.isFullScreen()) { @@ -357,6 +359,8 @@ $('#subtitleButton', nowPlayingBar).hide(); $('#chaptersButton', nowPlayingBar).hide(); + $("#mediaPlayer", nowPlayingBar).show(); + var mediaElement = $('#mediaElement', footer).html(html); var audioElement = $("audio", mediaElement);