diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 599d2aac92..3b4be615e4 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -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) { diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js index 0a39b3a957..86e721876c 100644 --- a/dashboard-ui/scripts/remotecontrol.js +++ b/dashboard-ui/scripts/remotecontrol.js @@ -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 += ''; html += ''; html += ''; + html += ''; html += ''; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 7a42fbe5f2..e0e4631eea 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -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") {