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

Reuse existing audio track controls on desktop

Browse source 
Use new top trakc controls on mobile
Modify media queries to account for width of two extra buttons in mediaControls
Remove playlist index information to avoid cluttering UI
This commit is contained in:
T. Adams 2015-03-13 23:24:42 -07:00
parent 4be4ca4cef
commit 7ab25fd11c
3 changed files with 22 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -61,12 +61,6 @@
vertical-align: top; vertical-align: top;
} }
.videoAdvancedControls .currentPlaylistState {
display: inline-block;
line-height: 44px;
margin-right: 10px;
}
.videoControls .currentTime { .videoControls .currentTime {
margin-top: 25px; margin-top: 25px;
} }
@ -168,6 +162,10 @@
.videoControls .nowPlayingText { .videoControls .nowPlayingText {
max-width: 160px; max-width: 160px;
} }
#mediaPlayer .nowPlayingImage {
display: none;
}
} }
@media all and (max-width: 960px), all and (max-height: 550px) { @media all and (max-width: 960px), all and (max-height: 550px) {
@ -190,8 +188,8 @@
} }
} }
@media all and (max-width: 500px) { @media all and (max-width: 555px) {
#mediaPlayer .previousTrackButton, #mediaPlayer .nextTrackButton { #mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton {
display: none!important; display: none!important;
} }
.videoTopControlsLogo { .videoTopControlsLogo {
@ -205,7 +203,7 @@
} }
} }
@media all and (min-width: 1200px) { @media all and (min-width: 1300px) {
#videoPlayer .nowPlayingInfo img { #videoPlayer .nowPlayingInfo img {
height: auto !important; height: auto !important;
max-width: 150px; max-width: 150px;

30
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -472,14 +472,6 @@
tooltip.remove(); tooltip.remove();
}); });
$('.videoPreviousButton').on('click', function () {
self.previousTrack();
});
$('.videoNextButton').on('click', function () {
self.nextTrack();
});
$('.videoSubtitleButton').on('click', function () { $('.videoSubtitleButton').on('click', function () {
self.showSubtitleMenu(); self.showSubtitleMenu();
@ -1174,8 +1166,7 @@
//show stop button //show stop button
$('#video-playButton', videoControls).hide(); $('#video-playButton', videoControls).hide();
$('#video-pauseButton', videoControls).show(); $('#video-pauseButton', videoControls).show();
$('#video-previousTrackButton', videoControls).hide(); $('.videoTrackControl').hide();
$('#video-nextTrackButton', videoControls).hide();
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html); var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
@ -1340,31 +1331,28 @@
self.updatePlaylistUi = function () { self.updatePlaylistUi = function () {
var index = self.currentPlaylistIndex(null), var index = self.currentPlaylistIndex(null),
length = self.playlist.length; length = self.playlist.length,
requiresNativeControls = !self.canAutoPlayVideo(),
controls = $(requiresNativeControls ? '.videoAdvancedControls' : '.videoControls');
if (length < 2) { if (length < 2) {
$('.videoTrackControl').hide(); $('.videoTrackControl').hide();
return; return;
} }
console.log('Index: ' + index);
$('.currentPlaylistIndex').text(index + 1);
$('.currentPlaylistLength').text(length);
if (index === 0) { if (index === 0) {
$('.videoPreviousButton').attr('disabled', 'disabled'); $('.previousTrackButton', controls).attr('disabled', 'disabled');
} else { } else {
$('.videoPreviousButton').removeAttr('disabled'); $('.previousTrackButton', controls).removeAttr('disabled');
} }
if ((index + 1) >= length) { if ((index + 1) >= length) {
$('.videoNextButton').attr('disabled', 'disabled'); $('.nextTrackButton', controls).attr('disabled', 'disabled');
} else { } else {
$('.videoNextButton').removeAttr('disabled'); $('.nextTrackButton', controls).removeAttr('disabled');
} }
$('.videoTrackControl').show(); $('.videoTrackControl', controls).show();
}; };
} }

13
dashboard-ui/scripts/site.js
View file

@ -1399,14 +1399,13 @@ $(function () {
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>'; videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
videoPlayerHtml += '<div class="videoAdvancedControls">'; videoPlayerHtml += '<div class="videoAdvancedControls">';
videoPlayerHtml += '<button class="imageButton mediaButton videoTrackControl videoPreviousButton" title="Previous video" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousVideo') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoTrackControl previousTrackButton" title="Previous video" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
videoPlayerHtml += '<div class="videoTrackControl currentPlaylistState"><span class="currentPlaylistIndex"></span>&nbsp;/&nbsp;<span class="currentPlaylistLength"></span></div>' videoPlayerHtml += '<button class="mediaButton videoTrackControl nextTrackButton" title="Next video" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
videoPlayerHtml += '<button class="imageButton mediaButton videoTrackControl videoNextButton" title="Next video" type="button" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextVideo') + '</button>';
videoPlayerHtml += '<button class="imageButton mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoAudioButton" title="Audio tracks" type="button" data-icon="audiocd" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonAudioTracks') + '</button>';
videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="imageButton mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoSubtitleButton" title="Subtitles" type="button" data-icon="subtitles" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>'; videoPlayerHtml += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>'; videoPlayerHtml += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>';
@ -1423,10 +1422,10 @@ $(function () {
// Create controls // Create controls
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">'; videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>'; videoPlayerHtml += '<button id="video-previousTrackButton" class="mediaButton previousTrackButton videoTrackControl" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>'; videoPlayerHtml += '<button id="video-playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPlay') + '</button>';
videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>'; videoPlayerHtml += '<button id="video-pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPause') + '</button>';
videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>'; videoPlayerHtml += '<button id="video-nextTrackButton" class="mediaButton nextTrackButton videoTrackControl" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonNextTrack') + '</button>';
videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">'; videoPlayerHtml += '<div class="positionSliderContainer sliderContainer">';
videoPlayerHtml += '<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" />'; videoPlayerHtml += '<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" />';