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

rework playlist ui

Browse source
This commit is contained in:
Luke Pulverenti 2015-04-30 23:00:29 -04:00
parent 81cfd99137
commit 59466a8ff3
4 changed files with 120 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dashboard-ui/nowplaying.html
View file

@ -128,10 +128,7 @@
</div>
<div class="tabPlaylist tabContent" style="display: none;">
<div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
<div class="playlist detailTableContainer">
</div>
<div class="playlist itemsContainer" style="max-width:800px;margin: 0 auto;">
</div>
</div>

8
dashboard-ui/scripts/librarylist.js
View file

@ -887,6 +887,14 @@
itemsContainer.trigger('playallfromhere', [index]);
}
else if (action == 'setplaylistindex') {
index = elemWithAttributes.getAttribute('data-index');
closeContextMenu();
MediaController.currentPlaylistIndex(index);
}
else if (action == 'photoslideshow') {
if (!$(elem).hasClass('card')) {

71
dashboard-ui/scripts/nowplayingpage.js
View file

@ -614,7 +614,7 @@
}
function showIntro() {
if (store.getItem('remotecontrolswipedown') != '1') {
Dashboard.alert({
message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
@ -626,60 +626,39 @@
}
function loadPlaylist(page) {
var html = '';
html += '<table class="detailTable">';
//ApiClient.getItems(Dashboard.getCurrentUserId(), {
html += '<thead><tr>';
html += '<th></th>';
html += '<th>' + Globalize.translate('HeaderName') + '</th>';
html += '<th>' + Globalize.translate('HeaderAlbum') + '</th>';
html += '<th>' + Globalize.translate('HeaderArtist') + '</th>';
html += '<th>' + Globalize.translate('HeaderAlbumArtist') + '</th>';
html += '<th>' + Globalize.translate('HeaderTime') + '</th>';
html += '</tr></thead>';
// SortBy: "SortName",
// SortOrder: "Ascending",
// IncludeItemTypes: "Audio",
// Recursive: true,
// Fields: "PrimaryImageAspectRatio,SortName,MediaSourceCount,IsUnidentified,SyncInfo",
// StartIndex: 0,
// ImageTypeLimit: 1,
// EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
// Limit: 100
html += '<tbody>';
//}).done(function (result) {
$.each(MediaController.playlist(), function (i, item) {
// html += LibraryBrowser.getListViewHtml({
// items: result.Items,
// smallIcon: true,
// defaultAction: 'setplaylistindex'
// });
var name = LibraryBrowser.getPosterViewDisplayName(item);
// $(".playlist", page).html(html).trigger('create').lazyChildren();
//});
var parentName = item.SeriesName || item.Album;
html += '<tr>';
html += '<td><button type="button" data-index="' + i + '" class="lnkPlayFromIndex" data-icon="play" data-iconpos="notext">' + Globalize.translate('ButtonPlay') + '</button></td>';
html += '<td>';
html += '<a href="itemdetails.html?id=' + item.Id + '">' + name + '</a>';
html += '</td>';
html += '<td>';
if (parentName) {
var parentId = item.AlbumId || item.SeriesId || item.ParentId;
html += '<a href="itemdetails.html?id=' + parentId + '">' + parentName + '</a>';
}
html += '</td>';
html += '<td>';
html += LibraryBrowser.getArtistLinksHtml(item.ArtistItems || []);
html += '</td>';
html += '<td>';
if (item.AlbumArtist) {
html += LibraryBrowser.getArtistLinksHtml(item.AlbumArtists || []);
}
html += '</td>';
html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
html += '<td><button type="button" data-index="' + i + '" class="lnkRemoveFromIndex" data-icon="delete" data-iconpos="notext">' + Globalize.translate('ButtonRemove') + '</button></td>';
html += '</tr>';
html += LibraryBrowser.getListViewHtml({
items: MediaController.playlist(),
smallIcon: true,
defaultAction: 'play'
});
html += '</tbody>';
html += '</table>';
$(".playlist", page).html(html).trigger('create');
$(".playlist", page).html(html).trigger('create').lazyChildren();
}
$(document).on('pageinit', "#nowPlayingPage", function () {

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

@ -1412,121 +1412,127 @@ var Dashboard = {
})();
$(function () {
(function() {
function onReady() {
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
videoPlayerHtml += '<div class="videoBackdrop">';
videoPlayerHtml += '<div id="videoPlayer">';
videoPlayerHtml += '<div class="videoBackdrop">';
videoPlayerHtml += '<div id="videoPlayer">';
videoPlayerHtml += '<div id="videoElement">';
videoPlayerHtml += '<div id="play" class="status"></div>';
videoPlayerHtml += '<div id="pause" class="status"></div>';
videoPlayerHtml += '</div>';
videoPlayerHtml += '<div id="videoElement">';
videoPlayerHtml += '<div id="play" class="status"></div>';
videoPlayerHtml += '<div id="pause" class="status"></div>';
videoPlayerHtml += '</div>';
videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
videoPlayerHtml += '<div class="videoAdvancedControls">';
videoPlayerHtml += '<div class="videoTopControls hiddenOnIdle">';
videoPlayerHtml += '<div class="videoTopControlsLogo"></div>';
videoPlayerHtml += '<div class="videoAdvancedControls">';
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 += '<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="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 += '<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="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 += '<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 += '<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 += '<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 += '<button class="mediaButton videoChaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonScenes') + '</button>';
videoPlayerHtml += '<div data-role="popup" class="videoChaptersPopup 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 += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonQuality') + '</button>';
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton videoQualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonQuality') + '</button>';
videoPlayerHtml += '<div data-role="popup" class="videoQualityPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonStop') + '</button>';
videoPlayerHtml += '<button class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="delete" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonStop') + '</button>';
videoPlayerHtml += '</div>'; // videoAdvancedControls
videoPlayerHtml += '</div>'; // videoTopControls
videoPlayerHtml += '</div>'; // videoAdvancedControls
videoPlayerHtml += '</div>'; // videoTopControls
// Create controls
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
// Create controls
videoPlayerHtml += '<div class="videoControls hiddenOnIdle">';
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-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 videoTrackControl" 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-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-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 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 += '<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 += '</div>';
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 += '</div>';
videoPlayerHtml += '<div class="currentTime">--:--</div>';
videoPlayerHtml += '<div class="currentTime">--:--</div>';
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
videoPlayerHtml += '<div class="nowPlayingImage"></div>';
videoPlayerHtml += '<div class="nowPlayingText"></div>';
videoPlayerHtml += '</div>'; // nowPlayingInfo
videoPlayerHtml += '<div class="nowPlayingInfo hiddenOnIdle">';
videoPlayerHtml += '<div class="nowPlayingImage"></div>';
videoPlayerHtml += '<div class="nowPlayingText"></div>';
videoPlayerHtml += '</div>'; // nowPlayingInfo
videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonMute') + '</button>';
videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonUnmute') + '</button>';
videoPlayerHtml += '<button id="video-muteButton" class="mediaButton muteButton" title="Mute" type="button" onclick="MediaPlayer.mute();" data-icon="audio" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonMute') + '</button>';
videoPlayerHtml += '<button id="video-unmuteButton" class="mediaButton unmuteButton" title="Unmute" type="button" onclick="MediaPlayer.unMute();" data-icon="volume-off" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonUnmute') + '</button>';
videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
videoPlayerHtml += '<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" />';
videoPlayerHtml += '</div>';
videoPlayerHtml += '<div class="volumeSliderContainer sliderContainer">';
videoPlayerHtml += '<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" />';
videoPlayerHtml += '</div>';
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
videoPlayerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="expand" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonFullscreen') + '</button>';
videoPlayerHtml += '</div>'; // videoControls
videoPlayerHtml += '</div>'; // videoControls
videoPlayerHtml += '</div>'; // videoPlayer
videoPlayerHtml += '</div>'; // videoBackdrop
videoPlayerHtml += '</div>'; // mediaPlayer
videoPlayerHtml += '</div>'; // videoPlayer
videoPlayerHtml += '</div>'; // videoBackdrop
videoPlayerHtml += '</div>'; // mediaPlayer
$(document.body).append(videoPlayerHtml);
$(document.body).append(videoPlayerHtml);
var mediaPlayerElem = $('#mediaPlayer', document.body);
mediaPlayerElem.trigger('create');
var mediaPlayerElem = $('#mediaPlayer', document.body);
mediaPlayerElem.trigger('create');
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>';
$(document.body).append(footerHtml);
$(document.body).append(footerHtml);
var footerElem = $('#footer', document.body);
footerElem.trigger('create');
var footerElem = $('#footer', document.body);
footerElem.trigger('create');
$(window).on("beforeunload", function () {
$(window).on("beforeunload", function () {
var apiClient = ConnectionManager.currentApiClient();
var apiClient = ConnectionManager.currentApiClient();
// Close the connection gracefully when possible
if (apiClient && apiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {
// Close the connection gracefully when possible
if (apiClient && apiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {
console.log('Sending close web socket command');
apiClient.closeWebSocket();
}
});
console.log('Sending close web socket command');
apiClient.closeWebSocket();
$(document).on('contextmenu', '.ui-popup-screen', function (e) {
$('.ui-popup').popup('close');
e.preventDefault();
return false;
});
function isTouchDevice() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
});
$(document).on('contextmenu', '.ui-popup-screen', function (e) {
$('.ui-popup').popup('close');
e.preventDefault();
return false;
});
function isTouchDevice() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
if (isTouchDevice()) {
$(document.body).addClass('touch');
}
}
if (isTouchDevice()) {
$(document.body).addClass('touch');
}
});
$(onReady);
})();
Dashboard.jQueryMobileInit();