1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

fixed fullscreen button visibility

This commit is contained in:
Luke Pulverenti 2013-05-24 16:22:19 -04:00
parent 030b99bfe1
commit 39ac592292
3 changed files with 11 additions and 174 deletions

View file

@ -775,6 +775,7 @@ progress {
position: relative; position: relative;
top: -10px; top: -10px;
width: 110px; width: 110px;
margin-right: .5em;
} }
.mediaSlider { .mediaSlider {
@ -847,7 +848,7 @@ input[type="range"]::-ms-fill-upper {
@media all and (max-width: 500px) { @media all and (max-width: 500px) {
.volumeButton, .volumeSlider, .fullscsreenButton { .volumeButton, .volumeSlider, .fullscreenButton {
display: none!important; display: none!important;
} }
@ -864,174 +865,4 @@ input[type="range"]::-ms-fill-upper {
.positionSlider { .positionSlider {
width: 50px; width: 50px;
} }
} }
/* VideoJS overrides */
#videoWindow.tubecss .vjs-menu-button {
width: 1.5em;
border: 0;
background: none;
}
#videoWindow.tubecss .vjs-play-control {
width: 2em;
}
.vjs-quality-button {
padding: 0 0.6em !important;
width: auto !important;
}
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div {
background: url("images/media/settings.png");
height: 16px;
width: 16px;
background-size: cover;
opacity: 0.5;
}
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
opacity: 1.0;
}
#videoWindow.tubecss .vjs-chapter-button div {
background: url("images/media/chapter.png");
height: 16px;
width: 16px;
background-size: cover;
opacity: 0.5;
}
#videoWindow.tubecss .vjs-chapter-button div:hover {
opacity: 1.0;
}
.vjs-chapter-button.vjs-menu-button ul {
width: auto;
max-width: 25em;
overflow-y: scroll;
}
.vjs-chapter-button.vjs-menu-button ul li {
width: auto;
white-space: nowrap;
font-size: 1.1em;
padding-right: 10px;
}
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button {
float: left;
background: none;
border: 0;
width: 2.5em;
}
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
background: url("images/media/stop.png");
height: 26px;
width: 26px;
margin: -.7em .5em auto 0;
opacity: 0.5;
}
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
opacity: 1.0;
}
.vjs-subtitle-button div {
background-position: -25px -75px !important;
}
.vjs-subtitle-button.vjs-menu-button ul {
width: auto;
max-width: 25em;
overflow-y: scroll;
}
.vjs-subtitle-button.vjs-menu-button ul li {
width: auto;
white-space: nowrap;
font-size: 1.1em;
padding-right: 10px;
}
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div {
background: url("images/media/language.png") !important;
height: 16px;
width: 16px;
background-size: cover!important;
opacity: 0.5;
margin: .2em;
}
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
opacity: 1.0;
}
#videoWindow.tubecss .vjs-menu-button.vjs-subtitle-button div {
margin: .2em 0px;
}
#videoWindow.tubecss .vjs-menu-button.vjs-subtitle-button div:hover {
opacity: 1.0;
}
.vjs-language-button.vjs-menu-button ul {
width: auto;
max-width: 25em;
overflow-y: scroll;
}
.vjs-language-button.vjs-menu-button ul li {
width: auto;
white-space: nowrap;
font-size: 1.1em;
padding-right: 10px;
}
#videoWindow.tubecss .vjs-mute-control {
position: absolute;
left: 5.5em;
}
#videoWindow.tubecss .vjs-volume-control {
position: absolute;
top: auto;
left: 9em;
}
#videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider {
position: absolute;
bottom: 0;
top: auto;
height: auto;
width: 0px;
}
#videoWindow.tubecss .vjs-time-divider {
bottom: 0.4em;
left: 25.3em;
display: none;
}
#videoWindow.tubecss .vjs-menu-item {
font-size: 1em;
}
#videoWindow.tubecss .vjs-current-time {
left: .1em;
top: -2em;
z-index: 2;
}
#videoWindow.tubecss .vjs-duration {
right: .1em;
text-align: right;
z-index: 2;
}
#videoWindow.tubecss .vjs-progress-holder {
margin: 0 5em;
}

View file

@ -285,8 +285,10 @@
var html = ''; var html = '';
var requiresControls = $.browser.msie || $.browser.android || $.browser.iphone || $.browser.ipad;
// Can't autoplay in these browsers so we need to use the full controls // Can't autoplay in these browsers so we need to use the full controls
if ($.browser.msie || $.browser.android || $.browser.iphone || $.browser.ipad) { if (requiresControls) {
html += '<audio preload="auto" autoplay controls>'; html += '<audio preload="auto" autoplay controls>';
} else { } else {
html += '<audio preload="auto" style="display:none;" autoplay>'; html += '<audio preload="auto" style="display:none;" autoplay>';
@ -328,6 +330,10 @@
}).on("play.once", function () { }).on("play.once", function () {
if (!requiresControls) {
audioElement.hide();
}
var duration = this.duration; var duration = this.duration;
isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY; isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;

View file

@ -1118,7 +1118,7 @@ $(function () {
footerHtml += '<button id="muteButton" onclick="MediaPlayer.mute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/volume.png" /></button>'; footerHtml += '<button id="muteButton" onclick="MediaPlayer.mute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/volume.png" /></button>';
footerHtml += '<button id="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>'; footerHtml += '<button id="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>';
footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />'; footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscsreenButton" class="imageButton mediaButton fullscsreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>'; footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
footerHtml += '</div>'; footerHtml += '</div>';