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