milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Video player "menu" button added

Browse source 
Toggles display of all appropriate video controls for video player sizes
< 100%
This commit is contained in:
Tim Hobbs 2014-03-25 12:48:54 -07:00
parent a61b36b74c
commit 8216e6d956
5 changed files with 99 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

73
dashboard-ui/css/mediaplayer-video.css
View file

@ -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) {