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

Enable remote "fullscreen" command

This is really only pseudo-fullscreen, as the js fullscreen API doesn't
allow fullscreen without user interaction.
This commit is contained in:
Tim Hobbs 2014-03-20 12:12:10 -07:00
parent 689ee461ed
commit 10e282094e
3 changed files with 48 additions and 5 deletions

View file

@ -21,27 +21,52 @@
var initialVolume; var initialVolume;
var fullscreenExited = false; var fullscreenExited = false;
var idleState = true; var idleState = true;
var remoteFullscreen = false;
self.initVideoPlayer = function () { self.initVideoPlayer = function () {
video = playVideo(item, startPosition, user); video = playVideo(item, startPosition, user);
return video; return video;
}; };
self.remoteFullscreen = function () {
var videoControls = $("#videoControls");
if (remoteFullscreen) {
exitFullScreenToWindow();
videoControls.removeClass("inactive");
} else {
enterFullScreen();
videoControls.addClass("inactive");
}
remoteFullscreen = !remoteFullscreen;
};
self.toggleFullscreen = function () { self.toggleFullscreen = function () {
if (self.isFullScreen()) { if (self.isFullScreen()) {
if (document.cancelFullScreen) { document.cancelFullScreen(); } if (document.cancelFullScreen) {
else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } document.cancelFullScreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.webkitCancelFullScreen) { else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen(); document.webkitCancelFullScreen();
} }
$('#videoPlayer').removeClass('fullscreenVideo'); $('#videoPlayer').removeClass('fullscreenVideo');
} else { } else {
requestFullScreen(document.body); requestFullScreen(document.documentElement);
} }
}; };
self.resetEnhancements = function () { self.resetEnhancements = function () {
$("#mediaPlayer").hide(); $("#mediaPlayer").hide();
$('#videoPlayer').removeClass('fullscreenVideo');
$("#videoControls").removeClass("inactive")
$("video").remove(); $("video").remove();
$("html").css("cursor", "default"); $("html").css("cursor", "default");
$(".ui-loader").hide(); $(".ui-loader").hide();
@ -128,7 +153,8 @@
} }
}; };
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () { $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
var videoControls = $('#videoControls'); var videoControls = $('#videoControls');
$('.itemVideo').off('mousemove keydown scroll', idleHandler); $('.itemVideo').off('mousemove keydown scroll', idleHandler);
@ -224,14 +250,16 @@
}; };
function requestFullScreen(element) { function requestFullScreen(element) {
// Supports most browsers and their versions. // Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen;
if (requestMethod) { // Native full screen. if (requestMethod) { // Native full screen.
requestMethod.call(element); requestMethod.call(element);
} else { } else {
enterFullScreen(); enterFullScreen();
} }
}; };
function changeHandler(event) { function changeHandler(event) {
@ -248,6 +276,8 @@
player.addClass("fullscreenVideo"); player.addClass("fullscreenVideo");
remoteFullscreen = true;
}; };
function exitFullScreenToWindow() { function exitFullScreenToWindow() {
@ -256,6 +286,8 @@
player.removeClass("fullscreenVideo"); player.removeClass("fullscreenVideo");
remoteFullscreen = false;
}; };
function toggleFlyout(flyout, button) { function toggleFlyout(flyout, button) {

View file

@ -842,6 +842,13 @@
this.isSliding = false; this.isSliding = false;
}); });
$('.btnFullscreen', popup).on('click', function () {
var id = $('#selectSession', popup).val();
ApiClient.sendPlayStateCommand(id, 'Fullscreen');
});
} }
function getPlaybackHtml() { function getPlaybackHtml() {
@ -872,6 +879,7 @@
html += '<button class="btnVolumeDown" type="button" data-icon="volume-down" data-inline="true" data-iconpos="notext">Decrease volume</button>'; html += '<button class="btnVolumeDown" type="button" data-icon="volume-down" data-inline="true" data-iconpos="notext">Decrease volume</button>';
html += '<button class="btnVolumeUp" type="button" data-icon="volume-up" data-inline="true" data-iconpos="notext">Increase volume</button>'; html += '<button class="btnVolumeUp" type="button" data-icon="volume-up" data-inline="true" data-iconpos="notext">Increase volume</button>';
html += '<button class="btnToggleMute" type="button" data-icon="volume-off" data-inline="true" data-iconpos="notext">Toggle mute</button>'; html += '<button class="btnToggleMute" type="button" data-icon="volume-off" data-inline="true" data-iconpos="notext">Toggle mute</button>';
html += '<button class="btnFullscreen" type="button" data-icon="action" data-inline="true" data-iconpos="notext">Toggle fullscreen</button>';
html += '</div>'; html += '</div>';

View file

@ -925,6 +925,9 @@ var Dashboard = {
else if (msg.Data.Command === 'PreviousTrack') { else if (msg.Data.Command === 'PreviousTrack') {
MediaPlayer.previousTrack(); MediaPlayer.previousTrack();
} }
else if (msg.Data.Command === 'Fullscreen') {
MediaPlayer.remoteFullscreen();
}
} }
else if (msg.MessageType === "SystemCommand") { else if (msg.MessageType === "SystemCommand") {