mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Windowed video now centered
The window size is responsive as well, resizing with the browser viewport.
This commit is contained in:
parent
96c607f203
commit
8ef5062d9f
2 changed files with 39 additions and 24 deletions
|
@ -54,10 +54,15 @@
|
|||
if (requestMethod) { // Native full screen.
|
||||
requestMethod.call(element);
|
||||
} else {
|
||||
$('.itemVideo').addClass('fullscreenVideo');
|
||||
enterFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
function enterFullScreen() {
|
||||
console.log("enter full screen");
|
||||
$(".itemVideo").removeAttr("style").addClass("fullscreenVideo");
|
||||
}
|
||||
|
||||
function exitFullScreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
|
@ -76,14 +81,14 @@
|
|||
var nowPlayingBar = ('#nowPlayingBar');
|
||||
$('.itemVideo').off('mousemove keydown scroll', idleHandler);
|
||||
if (isFullScreen()) {
|
||||
$('.itemVideo').addClass('fullscreenVideo');
|
||||
enterFullScreen();
|
||||
idleState = true;
|
||||
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
|
||||
} else {
|
||||
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition");
|
||||
$('.itemVideo').removeClass('fullscreenVideo');
|
||||
repositionPlayer();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$(window).on("beforeunload", function () {
|
||||
|
@ -100,6 +105,8 @@
|
|||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
||||
}
|
||||
}).on("resize", function () {
|
||||
repositionPlayer();
|
||||
});
|
||||
|
||||
function replaceQueryString(url, param, value) {
|
||||
|
@ -846,6 +853,10 @@
|
|||
$('#fullscreenButton', nowPlayingBar).show();
|
||||
}
|
||||
|
||||
if (isFullScreen() == false) {
|
||||
repositionPlayer();
|
||||
}
|
||||
|
||||
var channelsButton = $('#channelsButton', nowPlayingBar).hide();
|
||||
|
||||
var videoElement = $("video", nowPlayingBar);
|
||||
|
@ -1407,7 +1418,7 @@
|
|||
document.webkitCancelFullScreen();
|
||||
} else {
|
||||
$('.itemVideo').removeClass('fullscreenVideo');
|
||||
|
||||
repositionPlayer();
|
||||
}
|
||||
} else {
|
||||
requestFullScreen(document.body);
|
||||
|
@ -1609,6 +1620,15 @@
|
|||
return currentMediaElement;
|
||||
};
|
||||
|
||||
function repositionPlayer() {
|
||||
var $v = $(".itemVideo");
|
||||
// Reset top/left to handle window resizing
|
||||
$v.css({ "top": "50%", "left": "50%" });
|
||||
var w = $v.width();
|
||||
var h = $v.height();
|
||||
$v.css({ "margin-top": (h / 2) * -1, "margin-left": (w / 2) * -1 });
|
||||
};
|
||||
|
||||
function hideFlyout(flyout) {
|
||||
|
||||
flyout.hide().empty();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue