diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 51156157a1..10fc04fea3 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -91,6 +91,10 @@ display: block; } +#mediaPlayer #videoControls #video-subtitleButton:disabled, #mediaPlayer #videoControls #video-muteButton:disabled, #mediaPlayer #videoControls #video-unmuteButton:disabled { + display: none!important +} + /* Media queries ***************************************/ @@ -140,6 +144,10 @@ margin-left: -550px; margin-top: -329px; } + + #video-videoPlayerMenuButton { + display: none; + } } @media all and (min-width: 1440px) and (min-height: 720px) { @@ -157,31 +165,88 @@ /****************************************/ @media all and (max-width: 1200px), all and (max-height: 720px) { - #mediaPlayer .volumeSliderContainer, #mediaPlayer .sendMediaButton { + #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .sendMediaButton { + display: none!important; + } + + #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton { + display: initial!important; + } + + #mediaPlayer.showVideoMenu .nowPlayingMediaInfo { display: none!important; } } @media all and (max-width: 960px), all and (max-height: 550px) { - #mediaPlayer .volumeSliderContainer, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton { + #mediaPlayer .nowPlayingBarImage, #mediaPlayer .qualityButton, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton { + display: none!important; + } + + #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton { + display: initial!important; + } + + #mediaPlayer.showVideoMenu .nowPlayingMediaInfo { display: none!important; } } @media all and (max-width: 800px), all and (max-height: 460px) { - #mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer, #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton { + #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton { display: none!important; } + + #mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer { + display: inline-block!important; + } + + #mediaPlayer.showVideoMenu #videoPlayer { + margin-top: -180px; + } + + #mediaPlayer.showVideoMenu .itemVideo { + margin-bottom: 120px; + } + + #mediaPlayer.showVideoMenu #videoControls { + height: 120px; + } + + #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton { + display: initial!important; + } } @media all and (max-width: 640px), all and (max-height: 365px) { - #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton { + #mediaPlayer .fullscreenButton, #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton { display: none!important; } #mediaPlayer .currentTime { margin-top: 15px; } + + #mediaPlayer .volumeSliderContainer { + vertical-align: middle; + margin-top: -5px; + } + + #mediaPlayer.showVideoMenu #videoPlayer { + margin-top: -135px; + } + + #mediaPlayer.showVideoMenu .itemVideo { + margin-bottom: 120px; + } + + #mediaPlayer.showVideoMenu #videoControls { + height: 120px; + } + + #mediaPlayer.showVideoMenu .fullscreenButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .subtitleButton { + display: initial!important; + } } @media all and (max-width: 500px) { diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 5070af2039..d37ae0230b 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -50,12 +50,6 @@ font-weight: normal; } -@media all and (max-width: 650px) { - .nowPlayingMediaInfo { - display: none; - } -} - .mediaButton img { height: 24px; } @@ -134,6 +128,12 @@ input[type="range"]::-ms-fill-upper { } } +@media all and (max-width: 650px) { + .nowPlayingMediaInfo { + display: none; + } +} + @media all and (max-width: 600px) { .chaptersButton, .audioTracksButton, .sendMediaButton { display: none!important; diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 04b91dc857..c16cb762fb 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -22,6 +22,7 @@ var fullscreenExited = false; var idleState = true; var remoteFullscreen = false; + var videoMenuVisible = false; self.initVideoPlayer = function () { video = playVideo(item, mediaSource, startPosition, user); @@ -139,6 +140,21 @@ } }; + self.toggleVideoPlayerMenu = function () { + + var mediaPlayer = $("#mediaPlayer"); + + if (videoMenuVisible) { + $(mediaPlayer).removeClass("showVideoMenu"); + } else { + $(mediaPlayer).addClass("showVideoMenu"); + } + + videoMenuVisible = !videoMenuVisible; + + console.log("show vid click"); + }; + $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) { var videoControls = $('#videoControls'); @@ -831,9 +847,9 @@ if (mediaStreams.filter(function (i) { return i.Type == "Subtitle"; }).length) { - $('#video-subtitleButton', videoControls).show(); + $('#video-subtitleButton', videoControls).show().prop("disabled", false); } else { - $('#video-subtitleButton', videoControls).hide(); + $('#video-subtitleButton', videoControls).hide().prop("disabled", true);; } if (item.Chapters && item.Chapters.length) { diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 26be435159..4253650f15 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -30,11 +30,11 @@ self.updateVolumeButtons = function (vol) { if (vol) { - self.muteButton.show(); - self.unmuteButton.hide(); + self.muteButton.show().prop("disabled", false); + self.unmuteButton.hide().prop("disabled", true); } else { - self.muteButton.hide(); - self.unmuteButton.show(); + self.muteButton.hide().prop("disabled", true); + self.unmuteButton.show().prop("disabled", false); } }; diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 4f696e30da..186e043c5f 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -1367,6 +1367,8 @@ $(function () { videoPlayerHtml += ''; + videoPlayerHtml += ''; + videoPlayerHtml += ''; // videoControls videoPlayerHtml += ''; // videoPlayer