1
0
Fork 0
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:
Tim Hobbs 2014-03-03 15:55:19 -08:00
parent 96c607f203
commit 8ef5062d9f
2 changed files with 39 additions and 24 deletions

View file

@ -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();