mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework playlist editor
This commit is contained in:
Luke Pulverenti
parent
add9159c97
commit
cbccf10bec
9 changed files with 255 additions and 220 deletions
|
|
@ -29,14 +29,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
|
||||
"_release": "1.0.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.6",
|
||||
"commit": "af5c98b1cf9b3d180a6326c99ac9c7057eee647f"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
|
||||
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||
}
|
||||
|
|
@ -25,14 +25,14 @@
|
|||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.0.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "dcfc54b0d358269bf0c72180b4ab090fc4931ecd"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
function directoryBrowser() {
|
||||
function collectioneditor() {
|
||||
|
||||
var self = this;
|
||||
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
|
||||
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||
|
||||
PaperDialogHelper.openWithHash(dlg, 'directorybrowser');
|
||||
PaperDialogHelper.openWithHash(dlg, 'collectioneditor');
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', function () {
|
||||
|
||||
|
|
@ -229,5 +229,5 @@
|
|||
};
|
||||
}
|
||||
|
||||
return directoryBrowser;
|
||||
return collectioneditor;
|
||||
});
|
||||
238
dashboard-ui/components/playlisteditor/playlisteditor.js
Normal file
238
dashboard-ui/components/playlisteditor/playlisteditor.js
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
define([], function () {
|
||||
|
||||
var lastPlaylistId = '';
|
||||
|
||||
function redirectToPlaylist(id) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
|
||||
Dashboard.navigate(LibraryBrowser.getHref(item, context));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onAddToPlaylistFormSubmit() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var panel = $(this).parents('paper-dialog')[0];
|
||||
|
||||
var playlistId = $('#selectPlaylistToAddTo', panel).val();
|
||||
|
||||
if (playlistId) {
|
||||
lastPlaylistId = playlistId;
|
||||
addToPlaylist(panel, playlistId);
|
||||
} else {
|
||||
createPlaylist(panel);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function createPlaylist(dlg) {
|
||||
|
||||
var url = ApiClient.getUrl("Playlists", {
|
||||
|
||||
Name: $('#txtNewPlaylistName', dlg).val(),
|
||||
Ids: $('.fldSelectedItemIds', dlg).val() || '',
|
||||
userId: Dashboard.getCurrentUserId()
|
||||
|
||||
});
|
||||
|
||||
ApiClient.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
dataType: "json"
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var id = result.Id;
|
||||
|
||||
PaperDialogHelper.close(dlg);
|
||||
redirectToPlaylist(id);
|
||||
});
|
||||
}
|
||||
|
||||
function addToPlaylist(dlg, id) {
|
||||
|
||||
var url = ApiClient.getUrl("Playlists/" + id + "/Items", {
|
||||
|
||||
Ids: $('.fldSelectedItemIds', dlg).val() || '',
|
||||
userId: Dashboard.getCurrentUserId()
|
||||
});
|
||||
|
||||
ApiClient.ajax({
|
||||
type: "POST",
|
||||
url: url
|
||||
|
||||
}).done(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
PaperDialogHelper.close(dlg);
|
||||
Dashboard.alert(Globalize.translate('MessageAddedToPlaylistSuccess'));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onDialogClosed() {
|
||||
|
||||
$(this).remove();
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function populatePlaylists(panel) {
|
||||
|
||||
var select = $('#selectPlaylistToAddTo', panel);
|
||||
|
||||
if (!select.length) {
|
||||
|
||||
$('#txtNewPlaylistName', panel).val('').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
$('.newPlaylistInfo', panel).hide();
|
||||
|
||||
var options = {
|
||||
|
||||
Recursive: true,
|
||||
IncludeItemTypes: "Playlist",
|
||||
SortBy: 'SortName'
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
|
||||
|
||||
html += result.Items.map(function (i) {
|
||||
|
||||
return '<option value="' + i.Id + '">' + i.Name + '</option>';
|
||||
});
|
||||
|
||||
select.html(html).val('').trigger('change');
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function getEditorHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<form style="max-width:100%;">';
|
||||
|
||||
html += '<br />';
|
||||
|
||||
html += '<div class="fldSelectPlaylist">';
|
||||
html += '<br />';
|
||||
html += '<label for="selectPlaylistToAddTo">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
|
||||
html += '<select id="selectPlaylistToAddTo" data-mini="true"></select>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="newPlaylistInfo">';
|
||||
|
||||
html += '<div>';
|
||||
html += '<paper-input type="text" id="txtNewPlaylistName" required="required" label="' + Globalize.translate('LabelName') + '"></paper-input>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
|
||||
// newPlaylistInfo
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
html += '<div>';
|
||||
html += '<button type="submit" class="clearButton" data-role="none"><paper-button raised class="submit block">' + Globalize.translate('ButtonOk') + '</paper-button></button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<input type="hidden" class="fldSelectedItemIds" />';
|
||||
|
||||
html += '</form>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function initEditor(content, items) {
|
||||
|
||||
$('#selectPlaylistToAddTo', content).on('change', function () {
|
||||
|
||||
if (this.value) {
|
||||
$('.newPlaylistInfo', content).hide();
|
||||
$('input', content).removeAttr('required');
|
||||
} else {
|
||||
$('.newPlaylistInfo', content).show();
|
||||
$('input', content).attr('required', 'required');
|
||||
}
|
||||
|
||||
}).trigger('change');
|
||||
|
||||
populatePlaylists(content);
|
||||
|
||||
$('form', content).on('submit', onAddToPlaylistFormSubmit);
|
||||
|
||||
$('.fldSelectedItemIds', content).val(items.join(','));
|
||||
|
||||
if (items.length) {
|
||||
$('.fldSelectPlaylist', content).show();
|
||||
populatePlaylists(content);
|
||||
} else {
|
||||
$('.fldSelectPlaylist', content).hide();
|
||||
$('#selectPlaylistToAddTo', content).html('').val('').trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function playlisteditor() {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.show = function (items) {
|
||||
|
||||
items = items || [];
|
||||
|
||||
require(['components/paperdialoghelper'], function () {
|
||||
|
||||
var dlg = PaperDialogHelper.createDialog({
|
||||
size: 'small'
|
||||
});
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
html += '<paper-fab icon="arrow-back" class="mini btnCloseDialog"></paper-fab>';
|
||||
|
||||
var title = Globalize.translate('HeaderAddToPlaylist');
|
||||
|
||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + title + '</div>';
|
||||
html += '</h2>';
|
||||
|
||||
html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
|
||||
html += getEditorHtml();
|
||||
html += '</div>';
|
||||
|
||||
dlg.innerHTML = html;
|
||||
document.body.appendChild(dlg);
|
||||
|
||||
var editorContent = dlg.querySelector('.editorContent');
|
||||
initEditor(editorContent, items);
|
||||
|
||||
$(dlg).on('iron-overlay-closed', onDialogClosed);
|
||||
|
||||
PaperDialogHelper.openWithHash(dlg, 'playlisteditor');
|
||||
|
||||
$('.btnCloseDialog', dlg).on('click', function () {
|
||||
|
||||
PaperDialogHelper.close(dlg);
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
return playlisteditor;
|
||||
});
|
||||
|
|
@ -430,7 +430,7 @@ fieldset {
|
|||
border: none;
|
||||
}
|
||||
|
||||
input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']) {
|
||||
input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']) {
|
||||
-webkit-appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-rtl-ordering: logical;
|
||||
|
|
|
|||
|
|
@ -1,215 +1,11 @@
|
|||
(function ($, document) {
|
||||
|
||||
var lastPlaylistId = '';
|
||||
|
||||
function redirectToPlaylist(id) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
|
||||
Dashboard.navigate(LibraryBrowser.getHref(item, context));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function onAddToPlaylistFormSubmit() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var panel = $(this).parents('.newPlaylistPanel');
|
||||
|
||||
var playlistId = $('select.selectPlaylistToAddTo', panel).val();
|
||||
|
||||
if (playlistId) {
|
||||
lastPlaylistId = playlistId;
|
||||
addToPlaylist(panel, playlistId);
|
||||
} else {
|
||||
createPlaylist(panel);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getNewPlaylistPanel() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
$('.newPlaylistPanel').panel('destroy').remove();
|
||||
|
||||
var html = '<div data-role="panel" data-position="right" data-display="overlay" class="newPlaylistPanel" data-position-fixed="true" data-theme="a">';
|
||||
|
||||
html += '<h3>' + Globalize.translate('HeaderAddToPlaylist') + '</h3>';
|
||||
|
||||
html += '<br />';
|
||||
|
||||
html += '<form class="addToPlaylistForm">';
|
||||
|
||||
var selectId = 'selectPlaylistToAddTo' + new Date().getTime();
|
||||
|
||||
html += '<div>';
|
||||
html += '<label for="' + selectId + '">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
|
||||
html += '<select id="' + selectId + '" class="selectPlaylistToAddTo" data-mini="true">';
|
||||
html += '</select>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<br />';
|
||||
|
||||
html += '<div class="fldNewPlaylist" style="display:none;">';
|
||||
html += '<label for="txtNewPlaylistName">' + Globalize.translate('LabelName') + '</label>';
|
||||
html += '<input type="text" id="txtNewPlaylistName" />';
|
||||
html += '</div>';
|
||||
|
||||
html += '<p>';
|
||||
html += '<input class="fldSelectedItemIds" type="hidden" />';
|
||||
html += '<button type="submit" data-icon="plus" data-mini="true" data-theme="b">' + Globalize.translate('ButtonSubmit') + '</button>';
|
||||
html += '</p>';
|
||||
|
||||
html += '</form>';
|
||||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
|
||||
var elem = $('.newPlaylistPanel').panel({}).trigger('create').on("panelclose", function () {
|
||||
|
||||
$(this).off("panelclose").remove();
|
||||
});
|
||||
|
||||
var select = $('#' + selectId, elem).on('change', function () {
|
||||
|
||||
if (this.value) {
|
||||
$('.fldNewPlaylist', elem).hide();
|
||||
$('input', elem).removeAttr('required');
|
||||
} else {
|
||||
$('.fldNewPlaylist', elem).show();
|
||||
$('input', elem).attr('required', 'required');
|
||||
}
|
||||
|
||||
}).trigger('change');
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), {
|
||||
|
||||
IncludeItemTypes: 'Playlist',
|
||||
recursive: true,
|
||||
SortBy: 'SortName'
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
var selectHtml = '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
|
||||
selectHtml += result.Items.map(function (o) {
|
||||
|
||||
return '<option value="' + o.Id + '">' + o.Name + '</option>';
|
||||
|
||||
}).join('');
|
||||
|
||||
select.html(selectHtml);
|
||||
|
||||
select.val(lastPlaylistId || '').trigger('change');
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
||||
$('form', elem).on('submit', onAddToPlaylistFormSubmit);
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function showNewPlaylistPanel(items) {
|
||||
|
||||
var panel = getNewPlaylistPanel().panel('toggle');
|
||||
|
||||
$('.fldSelectedItemIds', panel).val(items.join(','));
|
||||
|
||||
populatePlaylists(panel);
|
||||
}
|
||||
|
||||
function populatePlaylists(panel) {
|
||||
|
||||
var select = $('select.selectPlaylistToAddTo', panel);
|
||||
|
||||
if (!select.length) {
|
||||
|
||||
$('#txtNewPlaylistName', panel).val('').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
$('.newPlaylistInfo', panel).hide();
|
||||
|
||||
var options = {
|
||||
|
||||
Recursive: true,
|
||||
IncludeItemTypes: "Playlist",
|
||||
SortBy: 'SortName'
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<option value="">' + Globalize.translate('OptionNewPlaylist') + '</option>';
|
||||
|
||||
html += result.Items.map(function (i) {
|
||||
|
||||
return '<option value="' + i.Id + '">' + i.Name + '</option>';
|
||||
});
|
||||
|
||||
select.html(html).val('').trigger('change');
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function createPlaylist(panel) {
|
||||
|
||||
var url = ApiClient.getUrl("Playlists", {
|
||||
|
||||
Name: $('#txtNewPlaylistName', panel).val(),
|
||||
Ids: $('.fldSelectedItemIds', panel).val() || '',
|
||||
userId: Dashboard.getCurrentUserId()
|
||||
|
||||
});
|
||||
|
||||
ApiClient.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
dataType: "json"
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var id = result.Id;
|
||||
|
||||
panel.panel('toggle');
|
||||
redirectToPlaylist(id);
|
||||
});
|
||||
}
|
||||
|
||||
function addToPlaylist(panel, id) {
|
||||
|
||||
var url = ApiClient.getUrl("Playlists/" + id + "/Items", {
|
||||
|
||||
Ids: $('.fldSelectedItemIds', panel).val() || '',
|
||||
userId: Dashboard.getCurrentUserId()
|
||||
});
|
||||
|
||||
ApiClient.ajax({
|
||||
type: "POST",
|
||||
url: url
|
||||
|
||||
}).done(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
panel.panel('toggle');
|
||||
Dashboard.alert(Globalize.translate('MessageAddedToPlaylistSuccess'));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
window.PlaylistManager = {
|
||||
|
||||
showPanel: function (items) {
|
||||
|
||||
require(['jqmpanel'], function() {
|
||||
showNewPlaylistPanel(items);
|
||||
require(['playlisteditor'], function (playlisteditor) {
|
||||
new playlisteditor().show(items);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -2049,7 +2049,8 @@ var AppInfo = {};
|
|||
velocity: "bower_components/velocity/velocity.min",
|
||||
tvguide: 'components/tvguide/tvguide',
|
||||
directorybrowser: 'components/directorybrowser/directorybrowser',
|
||||
collectioneditor: 'components/collectioneditor/collectioneditor'
|
||||
collectioneditor: 'components/collectioneditor/collectioneditor',
|
||||
playlisteditor: 'components/playlisteditor/playlisteditor'
|
||||
};
|
||||
|
||||
if (Dashboard.isRunningInCordova()) {
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ div.ui-slider:after {
|
|||
clear: both;
|
||||
}
|
||||
input.ui-slider-input {
|
||||
display: block;
|
||||
display: none;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -115,7 +115,7 @@ input.ui-slider-input {
|
|||
border-width: 1px;
|
||||
border-style: solid;
|
||||
height: 15px;
|
||||
margin: 0 15px 0 68px;
|
||||
margin: 0 15px 0 0;
|
||||
top: 6px;
|
||||
}
|
||||
.ui-slider-track.ui-mini {
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
this.handle.bind("click", false);
|
||||
|
||||
this._handleFormReset();
|
||||
//this._handleFormReset();
|
||||
|
||||
this.refresh(undefined, undefined, true);
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue