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:
parent
689ee461ed
commit
10e282094e
3 changed files with 48 additions and 5 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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>';
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue