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

Video player enhancements

Browse source 
BlockUI style backdrop, escape key exits video, click video to toggle
playback, dbl-click to toggle fullscreen.
This commit is contained in:
Tim Hobbs 2014-03-05 05:56:15 -08:00
parent f9541e56fd
commit 4b43d4c9e7
2 changed files with 199 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

107
dashboard-ui/scripts/mediaplayer.js
View file

@ -20,6 +20,9 @@
var culturesPromise;
var timeout;
var idleState = true;
var mediaDomElement;
var isEnhanced = false;
var fullscreenExited;
self.playlist = [];
var currentPlaylistIndex = 0;
@ -40,10 +43,6 @@
}
}
function enterFullScreen() {
$(".itemVideo").removeAttr("style").addClass("fullscreenVideo");
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
@ -52,10 +51,13 @@
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
fullscreenExited = true;
}
function isFullScreen() {
return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen ? true : false;
return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement ? true : false;
//return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen ? true : false;
}
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
@ -67,8 +69,7 @@
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
} else {
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition");
$('.itemVideo').removeClass('fullscreenVideo');
repositionPlayer();
exitFullScreenToWindow();
}
});
@ -86,8 +87,6 @@
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
}
}).on("resize", function () {
repositionPlayer();
});
function replaceQueryString(url, param, value) {
@ -129,6 +128,9 @@
if (currentItem.MediaType == "Video") {
ApiClient.stopActiveEncodings();
if (isEnhanced) {
resetEnhancements();
}
}
}
@ -1116,6 +1118,8 @@
if (item.MediaType === "Video") {
mediaElement = playVideo(item, startPosition, user);
enhancePlayer(mediaElement);
} else if (item.MediaType === "Audio") {
mediaElement = playAudio(item, startPosition);
@ -1373,7 +1377,6 @@
document.webkitCancelFullScreen();
} else {
$('.itemVideo').removeClass('fullscreenVideo');
repositionPlayer();
}
} else {
requestFullScreen(document.body);
@ -1575,15 +1578,6 @@
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();
@ -1945,6 +1939,81 @@
});
};
function enhancePlayer(video) {
var nowPlayingBar = $("#nowPlayingBar");
mediaDomElement = $("#mediaElement", nowPlayingBar).detach();
$(video)
.on("click", function () {
if (this.paused) {
self.unpause();
} else {
self.pause();
}
})
.on("dblclick", function () {
self.toggleFullscreen();
});
changeHandler("fullscreenchange");
changeHandler("mozfullscreenchange");
changeHandler("webkitfullscreenchange");
changeHandler("msfullscreenchange");
$(document).on("keyup.enhancePlayer", function (e) {
if (fullscreenExited) {
fullscreenExited = false;
return;
}
if (e.keyCode == 27) {
self.stop();
$(this).unbind("keyup.enhancePlayer");
}
});
var videoBackdrop = $("<div id='videoBackdrop'></div>");
var videoPlayer = $("<div id='videoPlayer'></div>")
.append(video)
.append(nowPlayingBar);
$("#footer").append(videoBackdrop.append(videoPlayer));
video.play();
isEnhanced = true;
fullscreenExited = false;
};
function changeHandler(event) {
document.addEventListener(event, function () {
fullscreenExited = isFullScreen() == false;
});
}
function resetEnhancements() {
var nowPlayingBar = $("#nowPlayingBar");
$("#stopButton", nowPlayingBar).before(mediaDomElement);
$("#footer").append(nowPlayingBar);
$("#videoBackdrop").remove();
};
function enterFullScreen() {
var player = $(".itemVideo");
if (isEnhanced) {
player = $("#videoPlayer")
}
player.addClass("fullscreenVideo");
};
function exitFullScreenToWindow() {
var player = $(".itemVideo");
if (isEnhanced) {
player = $("#videoPlayer")
}
player.removeClass("fullscreenVideo");
}
}
window.MediaPlayer = new mediaPlayer();