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 {
|
.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;
|
||||||
}
|
}
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue