mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
change now playing bar to use jqm buttons
This commit is contained in:
Luke Pulverenti
parent
607b3482e1
commit
2047f4bd49
7 changed files with 98 additions and 121 deletions
|
|
@ -79,3 +79,17 @@
|
|||
.ui-nosvg .ui-icon-filter:after {
|
||||
background-image: url("images/icons/filter.png");
|
||||
}
|
||||
.ui-icon-audiocd:after {
|
||||
background-image: url("images/icons/audiocd.png");
|
||||
}
|
||||
/* Fallback */
|
||||
.ui-nosvg .ui-icon-audiocd:after {
|
||||
background-image: url("images/icons/audiocd.png");
|
||||
}
|
||||
.ui-icon-subtitles:after {
|
||||
background-image: url("images/icons/subtitles.png");
|
||||
}
|
||||
/* Fallback */
|
||||
.ui-nosvg .ui-icon-subtitles:after {
|
||||
background-image: url("images/icons/subtitles.png");
|
||||
}
|
||||
BIN
dashboard-ui/css/images/icons/audiocd.png
Normal file
BIN
dashboard-ui/css/images/icons/audiocd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
BIN
dashboard-ui/css/images/icons/subtitles.png
Normal file
BIN
dashboard-ui/css/images/icons/subtitles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 B |
|
|
@ -1,45 +1,41 @@
|
|||
|
||||
|
||||
/* Now playing bar */
|
||||
#nowPlayingBar {
|
||||
padding: 6px .5em;
|
||||
.nowPlayingBar {
|
||||
padding: 6px 0 12px 0;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition {
|
||||
.nowPlayingBar .highPosition {
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#nowPlayingBar .highPosition:hover:not(.barBackground ) {
|
||||
.nowPlayingBar .highPosition:hover:not(.barBackground ) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#nowPlayingBar .barBackground {
|
||||
.nowPlayingBar .barBackground {
|
||||
border-top: 2px solid green;
|
||||
background: #3c3c3c;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 1em;
|
||||
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nowPlayingBarImage {
|
||||
border: 1px solid #a7a7a7!important;
|
||||
border: 1px solid #444!important;
|
||||
padding: 1px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.mediaButton {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#mediaElement {
|
||||
|
|
@ -64,6 +60,7 @@
|
|||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
|
@ -103,8 +100,8 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 110px;
|
||||
margin-right: .25em;
|
||||
max-width: 110px;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.mediaSlider {
|
||||
|
|
@ -114,37 +111,31 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
/* IE10 won't see this (good) '*/
|
||||
.mediaSlider {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
background: #777;
|
||||
border-radius: 5px;
|
||||
vertical-align: bottom;
|
||||
height: 3px;
|
||||
top: -17px;
|
||||
}
|
||||
.sliderContainer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.mediaSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.volumeSliderContainer {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.sliderContainer .ui-slider {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sliderContainer .ui-slider-track {
|
||||
margin-left: 15px !important;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.volumeSliderContainer .ui-slider-track {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.volumeButton {
|
||||
margin-right: .5em!important;
|
||||
}
|
||||
|
|
@ -173,15 +164,11 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.volumeButton, .volumeSlider, .nowPlayingText, .chaptersButton, .audioTracksButton {
|
||||
.volumeButton, .volumeSliderContainer, .nowPlayingText, .chaptersButton, .audioTracksButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -191,7 +178,7 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
|
||||
@media all and (max-width: 750px) {
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +283,7 @@ input[type="range"]::-ms-fill-upper {
|
|||
width: 400px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
|
|
@ -310,7 +297,7 @@ input[type="range"]::-ms-fill-upper {
|
|||
width: 500px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
|
|
@ -324,7 +311,7 @@ input[type="range"]::-ms-fill-upper {
|
|||
width: 550px;
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
.positionSliderContainer {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -669,7 +669,6 @@ h1 .imageLink {
|
|||
|
||||
/* Footer */
|
||||
#footer {
|
||||
background: #3c3c3c;
|
||||
position: fixed;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@
|
|||
|
||||
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
|
||||
var nowPlayingBar = ('#nowPlayingBar');
|
||||
$('.itemVideo').unbind('mousemove keydown scroll', idleHandler);
|
||||
$('.itemVideo').off('mousemove keydown scroll', idleHandler);
|
||||
if (isFullScreen()) {
|
||||
$('.itemVideo').addClass('fullscreenVideo');
|
||||
idleState = true;
|
||||
$('.itemVideo').bind('mousemove keydown scroll', idleHandler).trigger('mousemove');
|
||||
$('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
|
||||
} else {
|
||||
$(".mediaButton,.currentTime,.nowPlayingMediaInfo,.mediaSlider,.barBackground", nowPlayingBar).removeClass("highPosition");
|
||||
$('.itemVideo').removeClass('fullscreenVideo');
|
||||
|
|
@ -216,46 +216,20 @@
|
|||
|
||||
currentTimeElement = $('.currentTime');
|
||||
|
||||
volumeSlider = $('.volumeSlider').on('change', function () {
|
||||
volumeSlider = $('.volumeSlider').on('slidestop', function () {
|
||||
|
||||
document.title += '1';
|
||||
var vol = this.value;
|
||||
|
||||
updateVolumeButtons(vol);
|
||||
currentMediaElement.volume = vol;
|
||||
});
|
||||
|
||||
$(".jqueryuislider").slider({ orientation: "horizontal" });
|
||||
|
||||
positionSlider = $(".positionSlider").on('mousedown', function () {
|
||||
positionSlider = $(".positionSlider").on('slidestart', function () {
|
||||
|
||||
isPositionSliderActive = true;
|
||||
|
||||
});
|
||||
|
||||
if ($.browser.mozilla) {
|
||||
|
||||
positionSlider.on('change', onPositionSliderChange);
|
||||
|
||||
} else {
|
||||
|
||||
positionSlider.on('change', function () {
|
||||
|
||||
isPositionSliderActive = true;
|
||||
|
||||
setCurrentTimePercent(parseInt(this.value), currentItem);
|
||||
|
||||
}).on('changed', onPositionSliderChange);
|
||||
}
|
||||
|
||||
|
||||
(function (el, timeout) {
|
||||
var timer, trig = function () { el.trigger("changed"); };
|
||||
el.bind("change", function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(trig, timeout);
|
||||
});
|
||||
})(positionSlider, 500);
|
||||
}).on('slidestop', onPositionSliderChange);
|
||||
|
||||
$('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
|
||||
|
|
@ -311,12 +285,6 @@
|
|||
return d >= 0 && text.lastIndexOf(pattern) === d;
|
||||
}
|
||||
|
||||
function setCurrentTimePercent(percent, item) {
|
||||
|
||||
var position = (percent / 100) * curentDurationTicks;
|
||||
setCurrentTime(position, item, false);
|
||||
}
|
||||
|
||||
function setCurrentTime(ticks, item, updateSlider) {
|
||||
|
||||
// Convert to ticks
|
||||
|
|
@ -332,12 +300,10 @@
|
|||
var percent = ticks / curentDurationTicks;
|
||||
percent *= 100;
|
||||
|
||||
positionSlider.val(percent);
|
||||
|
||||
positionSlider.removeAttr('disabled');
|
||||
positionSlider.val(percent).slider('enable').slider('refresh');
|
||||
}
|
||||
} else {
|
||||
positionSlider.attr('disabled', 'disabled');
|
||||
positionSlider.slider('disable');
|
||||
}
|
||||
|
||||
currentTimeElement.html(timeText);
|
||||
|
|
@ -424,7 +390,7 @@
|
|||
this.volume = initialVolume;
|
||||
});
|
||||
|
||||
volumeSlider.val(initialVolume);
|
||||
volumeSlider.val(initialVolume).slider('refresh');
|
||||
updateVolumeButtons(initialVolume);
|
||||
|
||||
audioElement.on("volumechange", function () {
|
||||
|
|
@ -612,7 +578,7 @@
|
|||
this.volume = initialVolume;
|
||||
});
|
||||
|
||||
volumeSlider.val(initialVolume);
|
||||
volumeSlider.val(initialVolume).slider('refresh');
|
||||
updateVolumeButtons(initialVolume);
|
||||
|
||||
videoElement.on("volumechange", function () {
|
||||
|
|
@ -1322,7 +1288,7 @@
|
|||
if (currentMediaElement) {
|
||||
currentMediaElement.volume = Math.max(currentMediaElement.volume - .02, 0);
|
||||
|
||||
volumeSlider.val(currentMediaElement.volume);
|
||||
volumeSlider.val(currentMediaElement.volume).slider('refresh');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1331,7 +1297,7 @@
|
|||
if (currentMediaElement) {
|
||||
currentMediaElement.volume = Math.min(currentMediaElement.volume + .02, 1);
|
||||
|
||||
volumeSlider.val(currentMediaElement.volume);
|
||||
volumeSlider.val(currentMediaElement.volume).slider('refresh');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1269,37 +1269,45 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
|
|||
|
||||
$(function () {
|
||||
|
||||
var footerHtml = '<div id="footer" class="ui-bar-a">';
|
||||
footerHtml += '<div id="nowPlayingBar" style="display:none;">';
|
||||
footerHtml += '<div class="barBackground"></div>';
|
||||
footerHtml += '<a id="playlistButton" class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>';
|
||||
footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();"><img src="css/images/media/previoustrack.png" /></button>';
|
||||
footerHtml += '<button id="playButton" class="imageButton mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();"><img src="css/images/media/play.png" /></button>';
|
||||
footerHtml += '<button id="pauseButton" class="imageButton mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();"><img src="css/images/media/pause.png" /></button>';
|
||||
footerHtml += '<button id="stopButton" class="imageButton mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();"><img src="css/images/media/stop.png" /></button>';
|
||||
footerHtml += '<button id="nextTrackButton" class="imageButton mediaButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();"><img src="css/images/media/nexttrack.png" /></button>';
|
||||
footerHtml += '<input type="range" class="mediaSlider positionSlider" step=".001" min="0" max="100" value="0" />';
|
||||
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
|
||||
footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
|
||||
footerHtml += '<div class="barBackground ui-bar-b"></div>';
|
||||
footerHtml += '<div style="display:inline-block;width:12px;"></div>';
|
||||
footerHtml += '<a id="playlistButton" class="mediaButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
|
||||
footerHtml += '<button id="previousTrackButton" class="mediaButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
|
||||
footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
|
||||
footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
|
||||
footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
|
||||
footerHtml += '<button id="nextTrackButton" class="mediaButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
|
||||
|
||||
footerHtml += '<div class="positionSliderContainer sliderContainer">';
|
||||
footerHtml += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
footerHtml += '</div>';
|
||||
|
||||
footerHtml += '<div class="currentTime"></div>';
|
||||
footerHtml += '<div id="mediaElement"></div>';
|
||||
footerHtml += '<div class="nowPlayingMediaInfo"></div>';
|
||||
|
||||
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 += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
|
||||
footerHtml += '<button id="muteButton" class="mediaButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">Mute</button>';
|
||||
footerHtml += '<button id="unmuteButton" class="mediaButton" title="Unmute" type="button" onclick="MediaPlayer.unmute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">Unmute</button>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="imageButton mediaButton qualityButton" title="Quality" type="button"><img src="css/images/media/quality.png" /></button>';
|
||||
footerHtml += '<div class="volumeSliderContainer sliderContainer">';
|
||||
footerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
|
||||
footerHtml += '</div>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
|
||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button"><img src="css/images/media/audiotrack.png" /></button>';
|
||||
footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">Audio Tracks</button>';
|
||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></div>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button"><img src="css/images/media/subtitles.png" /></button>';
|
||||
footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">Subtitles</button>';
|
||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></div>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>';
|
||||
footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
|
||||
footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
|
||||
|
||||
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
|
||||
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
|
||||
|
||||
footerHtml += '</div>';
|
||||
|
||||
|
|
@ -1308,6 +1316,9 @@ $(function () {
|
|||
|
||||
$(document.body).append(footerHtml);
|
||||
|
||||
var footerElem = $('#footer', document.body);
|
||||
footerElem.trigger('create');
|
||||
|
||||
$(window).on("beforeunload", function () {
|
||||
|
||||
// Close the connection gracefully when possible
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue