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

Windowed video now centered

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

35
dashboard-ui/css/mediaplayer.css
View file

@ -71,13 +71,13 @@
}
.itemVideo {
position: absolute;
z-index: 99998;
height: auto;
width: 270px;
bottom: 45px;
border: 1px solid #444;
background: #000;
border: 1px solid #444;
position: fixed;
top: 50%;
left: 50%;
width: 1080px;
}
.fullscreenVideo {
@ -90,6 +90,7 @@
height: 100%;
border: 0;
z-index: 99996;
margin: 0 !important;
}
.currentTime {
@ -283,36 +284,30 @@ input[type="range"]::-ms-fill-upper {
padding-left: 5px;
}
@media (min-width: 750px) {
@media (min-width: 50px) {
.itemVideo:not(.fullscreenVideo) {
width: 320px;
}
}
@media (min-width: 750px) {
.itemVideo:not(.fullscreenVideo) {
width: 480px;
}
}
@media (min-width: 1200px) {
.itemVideo:not(.fullscreenVideo) {
width: 320px;
width: 720px;
}
}
@media (min-width: 1440px) {
.itemVideo:not(.fullscreenVideo) {
width: 400px;
width: 1080px;
}
.positionSliderContainer {
width: 300px;
}
}
@media (min-width: 1700px) {
.itemVideo:not(.fullscreenVideo) {
width: 500px;
}
}
@media (min-width: 2400px) {
.itemVideo:not(.fullscreenVideo) {
width: 550px;
}
}

28
dashboard-ui/scripts/mediaplayer.js
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();