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

View File

@ -842,6 +842,13 @@
this.isSliding = false;
});
$('.btnFullscreen', popup).on('click', function () {
var id = $('#selectSession', popup).val();
ApiClient.sendPlayStateCommand(id, 'Fullscreen');
});
}
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="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="btnFullscreen" type="button" data-icon="action" data-inline="true" data-iconpos="notext">Toggle fullscreen</button>';
html += '</div>';

View File

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