1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Media player fixes

* Fix for hidden audio player
* Fullscreen hover fix
This commit is contained in:
Tim Hobbs 2014-03-18 12:57:32 -07:00
parent b5b21349f9
commit 2131f0f895
4 changed files with 64 additions and 5 deletions

View file

@ -8,7 +8,7 @@
} }
.nowPlayingBar .barBackground { .nowPlayingBar .barBackground {
border-top: 2px solid green; border-top: 2px solid #08b;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -16,6 +16,9 @@
#videoPlayer.fullscreenVideo .nowPlayingBar { #videoPlayer.fullscreenVideo .nowPlayingBar {
opacity: 0.5; opacity: 0.5;
}
#videoPlayer.fullscreenVideo .inactive {
-webkit-transition: top 0.6s ease-in-out; -webkit-transition: top 0.6s ease-in-out;
-moz-transition: top 0.6s ease-in-out; -moz-transition: top 0.6s ease-in-out;
-o-transition: top 0.6s ease-in-out; -o-transition: top 0.6s ease-in-out;
@ -24,7 +27,7 @@
height: 100%; height: 100%;
} }
#videoPlayer.fullscreenVideo:hover .nowPlayingBar { #videoPlayer.fullscreenVideo:hover .active {
top: 95% !important; top: 95% !important;
} }
@ -54,6 +57,11 @@
left: 0; left: 0;
} }
#mediaPlayer {
min-height: 50px;
padding-bottom: 20px;
}
.nowPlayingMediaInfo div { .nowPlayingMediaInfo div {
display: inline-block; display: inline-block;
} }
@ -167,7 +175,7 @@
height: 50px; height: 50px;
background-color: #1d1d1d; background-color: #1d1d1d;
position: absolute; position: absolute;
top: initial; top: auto;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -598,4 +606,12 @@ ss}
-webkit-transform: scale(1); -webkit-transform: scale(1);
opacity: 0; opacity: 0;
} }
}
.cursor-active {
cursor: default;
}
.cursor-inactive {
cursor: none;
} }

View file

@ -683,7 +683,7 @@ h1 .imageLink {
z-index: 99997; z-index: 99997;
color: #fff; color: #fff;
border: 0 !important; border: 0 !important;
max-height: 200px; max-height: 220px;
} }
.footerNotification { .footerNotification {

View file

@ -18,8 +18,8 @@
var timeout; var timeout;
var video; var video;
var culturesPromise; var culturesPromise;
var idleState = true;
var fullscreenExited = false; var fullscreenExited = false;
var idleState = true;
self.initVideoPlayer = function () { self.initVideoPlayer = function () {
video = playVideo(item, startPosition, user); video = playVideo(item, startPosition, user);
@ -50,6 +50,8 @@
var nowPlayingBar = $("#nowPlayingBar", mediaPlayer); var nowPlayingBar = $("#nowPlayingBar", mediaPlayer);
footer.css("top", null);
mediaElement.html(""); // remove play/pause mediaElement.html(""); // remove play/pause
mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong
@ -61,6 +63,11 @@
footer.hide(); footer.hide();
} }
$("html").css("cursor", "default");
$(".ui-loader").hide();
}; };
self.exitFullScreen = function() { self.exitFullScreen = function() {
@ -146,9 +153,13 @@
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () { $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
var nowPlayingBar = $('#nowPlayingBar'); var nowPlayingBar = $('#nowPlayingBar');
$('.itemVideo').off('mousemove keydown scroll', idleHandler);
if (self.isFullScreen()) { if (self.isFullScreen()) {
enterFullScreen(); enterFullScreen();
idleState = true; idleState = true;
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
} else { } else {
nowPlayingBar.removeClass("highPosition"); nowPlayingBar.removeClass("highPosition");
exitFullScreenToWindow(); exitFullScreenToWindow();
@ -205,8 +216,36 @@
hideFlyout($('#qualityFlyout')); 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) { function requestFullScreen(element) {
// Supports most browsers and their versions. // Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

View file

@ -79,6 +79,8 @@
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position); ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
$("#mediaPlayer").hide();
if (currentItem.MediaType == "Video") { if (currentItem.MediaType == "Video") {
ApiClient.stopActiveEncodings(); ApiClient.stopActiveEncodings();
if (self.isFullScreen()) { if (self.isFullScreen()) {
@ -357,6 +359,8 @@
$('#subtitleButton', nowPlayingBar).hide(); $('#subtitleButton', nowPlayingBar).hide();
$('#chaptersButton', nowPlayingBar).hide(); $('#chaptersButton', nowPlayingBar).hide();
$("#mediaPlayer", nowPlayingBar).show();
var mediaElement = $('#mediaElement', footer).html(html); var mediaElement = $('#mediaElement', footer).html(html);
var audioElement = $("audio", mediaElement); var audioElement = $("audio", mediaElement);