cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add playlist forward and back controls to video player

Browse Source
This commit is contained in:
T. Adams 2015-03-13 01:58:50 -07:00
parent ad29857eae
commit c97609181a
4 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard-ui/css/mediaplayer-video.css
View File

@ -61,6 +61,12 @@
vertical-align: top;
}
.videoAdvancedControls .currentPlaylistState {
display: inline-block;
line-height: 44px;
margin-right: 10px;
}
.videoControls .currentTime {
margin-top: 25px;
}

37
dashboard-ui/scripts/mediaplayer-video.js
View File

@ -472,6 +472,14 @@
tooltip.remove();
});
$('.videoPreviousButton').on('click', function () {
self.previousTrack();
});
$('.videoNextButton').on('click', function () {
self.nextTrack();
});
$('.videoSubtitleButton').on('click', function () {
self.showSubtitleMenu();
@ -1329,6 +1337,35 @@
return video[0];
};
self.updatePlaylistUi = function () {
var index = self.currentPlaylistIndex(null),
length = self.playlist.length;
if (length < 2) {
$('.videoTrackControl').hide();
return;
}
console.log('Index: ' + index);
$('.currentPlaylistIndex').text(index + 1);
$('.currentPlaylistLength').text(length);
if (index === 0) {
$('.videoPreviousButton').attr('disabled', 'disabled');
} else {
$('.videoPreviousButton').removeAttr('disabled');
}
if ((index + 1) >= length) {
$('.videoNextButton').attr('disabled', 'disabled');
} else {
$('.videoNextButton').removeAttr('disabled');
}
$('.videoTrackControl').show();
};
}
createVideoPlayer(MediaPlayer);

25
dashboard-ui/scripts/mediaplayer.js
View File

@ -507,8 +507,7 @@
if (options.startPositionTicks || firstItem.MediaType !== 'Video' || !self.canAutoPlayVideo()) {
self.playInternal(firstItem, options.startPositionTicks, function () {
self.playlist = items;
currentPlaylistIndex = 0;
self.setPlaylistState(0, items);
});
return;
@ -518,8 +517,7 @@
items = intros.Items.concat(items);
self.playInternal(items[0], options.startPositionTicks, function () {
self.playlist = items;
currentPlaylistIndex = 0;
self.setPlaylistState(0, items);
});
});
@ -721,10 +719,23 @@
var newItem = self.playlist[i];
self.playInternal(newItem, 0, function () {
currentPlaylistIndex = i;
self.setPlaylistState(i);
});
};
// Set currentPlaylistIndex and playlist. Using a method allows for overloading in derived player implementations
self.setPlaylistState = function (i, items) {
if (!isNaN(i)) {
currentPlaylistIndex = i;
}
if (items) {
self.playlist = items;
}
if (self.updatePlaylistUi) {
self.updatePlaylistUi();
}
};
self.nextTrack = function () {
var newIndex = currentPlaylistIndex + 1;
@ -735,7 +746,7 @@
console.log('playing next track');
self.playInternal(newItem, 0, function () {
currentPlaylistIndex = newIndex;
self.setPlaylistState(newIndex);
});
}
};
@ -747,7 +758,7 @@
if (newItem) {
self.playInternal(newItem, 0, function () {
currentPlaylistIndex = newIndex;
self.setPlaylistState(newIndex);
});
}
}

4
dashboard-ui/scripts/site.js
View File

@ -1399,6 +1399,10 @@ $(function () {
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
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 += '<div class="videoTrackControl currentPlaylistState"><span class="currentPlaylistIndex"></span>&nbsp;/&nbsp;<span class="currentPlaylistLength"></span></div>'
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 += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';