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 { .itemVideo {
position: absolute;
z-index: 99998; z-index: 99998;
height: auto;
width: 270px;
bottom: 45px;
border: 1px solid #444;
background: #000; background: #000;
border: 1px solid #444;
position: fixed;
top: 50%;
left: 50%;
width: 1080px;
} }
.fullscreenVideo { .fullscreenVideo {
@ -90,6 +90,7 @@
height: 100%; height: 100%;
border: 0; border: 0;
z-index: 99996; z-index: 99996;
margin: 0 !important;
} }
.currentTime { .currentTime {
@ -283,36 +284,30 @@ input[type="range"]::-ms-fill-upper {
padding-left: 5px; padding-left: 5px;
} }
@media (min-width: 750px) { @media (min-width: 50px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 320px; width: 320px;
} }
} }
@media (min-width: 750px) {
.itemVideo:not(.fullscreenVideo) {
width: 480px;
}
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 320px; width: 720px;
} }
} }
@media (min-width: 1440px) { @media (min-width: 1440px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 400px; width: 1080px;
} }
.positionSliderContainer { .positionSliderContainer {
width: 300px; 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. if (requestMethod) { // Native full screen.
requestMethod.call(element); requestMethod.call(element);
} else { } else {
$('.itemVideo').addClass('fullscreenVideo'); enterFullScreen();
} }
} }
function enterFullScreen() {
console.log("enter full screen");
$(".itemVideo").removeAttr("style").addClass("fullscreenVideo");
}
function exitFullScreen() { function exitFullScreen() {
if (document.exitFullscreen) { if (document.exitFullscreen) {
document.exitFullscreen(); document.exitFullscreen();
@ -76,14 +81,14 @@
var nowPlayingBar = ('#nowPlayingBar'); var nowPlayingBar = ('#nowPlayingBar');
$('.itemVideo').off('mousemove keydown scroll', idleHandler); $('.itemVideo').off('mousemove keydown scroll', idleHandler);
if (isFullScreen()) { if (isFullScreen()) {
$('.itemVideo').addClass('fullscreenVideo'); enterFullScreen();
idleState = true; idleState = true;
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove'); $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
} else { } else {
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition"); $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition");
$('.itemVideo').removeClass('fullscreenVideo'); $('.itemVideo').removeClass('fullscreenVideo');
repositionPlayer();
} }
}); });
$(window).on("beforeunload", function () { $(window).on("beforeunload", function () {
@ -100,6 +105,8 @@
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position); ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
} }
}).on("resize", function () {
repositionPlayer();
}); });
function replaceQueryString(url, param, value) { function replaceQueryString(url, param, value) {
@ -846,6 +853,10 @@
$('#fullscreenButton', nowPlayingBar).show(); $('#fullscreenButton', nowPlayingBar).show();
} }
if (isFullScreen() == false) {
repositionPlayer();
}
var channelsButton = $('#channelsButton', nowPlayingBar).hide(); var channelsButton = $('#channelsButton', nowPlayingBar).hide();
var videoElement = $("video", nowPlayingBar); var videoElement = $("video", nowPlayingBar);
@ -1407,7 +1418,7 @@
document.webkitCancelFullScreen(); document.webkitCancelFullScreen();
} else { } else {
$('.itemVideo').removeClass('fullscreenVideo'); $('.itemVideo').removeClass('fullscreenVideo');
repositionPlayer();
} }
} else { } else {
requestFullScreen(document.body); requestFullScreen(document.body);
@ -1609,6 +1620,15 @@
return currentMediaElement; 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) { function hideFlyout(flyout) {
flyout.hide().empty(); flyout.hide().empty();