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:
parent
b5b21349f9
commit
2131f0f895
4 changed files with 64 additions and 5 deletions
|
@ -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;
|
||||
|
@ -599,3 +607,11 @@ ss}
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cursor-inactive {
|
||||
cursor: none;
|
||||
}
|
|
@ -683,7 +683,7 @@ h1 .imageLink {
|
|||
z-index: 99997;
|
||||
color: #fff;
|
||||
border: 0 !important;
|
||||
max-height: 200px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.footerNotification {
|
||||
|
|
|
@ -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,7 +216,35 @@
|
|||
|
||||
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.
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue