Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

progress commit: display podcast episodes in right-side pane

This commit is contained in:
ryan 2018-12-27 16:48:28 -06:00
parent e672e81d8f
commit 8f8e9ef3f3
2 changed files with 125 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
airtime_mvc/public/js/airtime/library/library.js
View File

@ -1398,31 +1398,6 @@ var AIRTIME = (function(AIRTIME) {
} }
}); });
var openPodcastEpisodeTable = function (podcast) {
$("#library_filter").append(" - " + podcast.title);
mod.podcastEpisodeTableWidget.reload(podcast.id);
mod.podcastTableWidget.clearSelection();
mod.setCurrentTable(mod.DataTableTypeEnum.PODCAST_EPISODES);
mod.podcastEpisodeDataTable.closest(".dataTables_wrapper").find(".dataTables_processing")
.addClass("block-overlay").css("visibility", "visible");
};
podcastToolbarButtons["ViewEpisodes"] = {
title : $.i18n._("View Episodes"),
iconClass : "icon-chevron-right",
extraBtnClass : "btn-small",
elementId : "",
eventHandlers : {
click: function () {
var podcast = mod.podcastTableWidget.getSelectedRows()[0];
openPodcastEpisodeTable(podcast);
}
},
validateConstraints: function () {
return this.getSelectedRows().length == 1;
}
};
//Set up the div with id "podcast_table" as a datatable. //Set up the div with id "podcast_table" as a datatable.
mod.podcastTableWidget = new AIRTIME.widgets.Table( mod.podcastTableWidget = new AIRTIME.widgets.Table(
$('#podcast_table'), //DOM node to create the table inside. $('#podcast_table'), //DOM node to create the table inside.
@ -1439,12 +1414,9 @@ var AIRTIME = (function(AIRTIME) {
} }
}); });
mod._initPodcastEpisodeDatatable(); // Edit podcast in right-side pane upon double click
// On double click, open a table showing the selected podcast's episodes
// in the left-hand pane.
mod.podcastTableWidget.assignDblClickHandler(function () { mod.podcastTableWidget.assignDblClickHandler(function () {
var podcast = mod.podcastDataTable.fnGetData(this); AIRTIME.podcast.editSelectedPodcasts();
openPodcastEpisodeTable(podcast);
}); });
mod.podcastDataTable = mod.podcastTableWidget.getDatatable(); mod.podcastDataTable = mod.podcastTableWidget.getDatatable();
@ -1452,27 +1424,9 @@ var AIRTIME = (function(AIRTIME) {
}; };
/** /**
* Initialize the podcast episode view for the left-hand pane * Initialize the podcast episode table with working buttons
*
* @private
*/ */
mod._initPodcastEpisodeDatatable = function () { mod.initPodcastEpisodeDatatableWithButtonEvents = function (domNode) {
var buttons = {
backBtn: {
title : $.i18n._('Back to Podcasts'),
iconClass : 'icon-chevron-left',
extraBtnClass : 'btn-small',
elementId : '',
eventHandlers : {
click: function () {
$("#library_filter").text($.i18n._("Podcasts"));
mod.setCurrentTable(mod.DataTableTypeEnum.PODCAST);
}
},
validateConstraints: function () { return true; }
}
},
defaults = AIRTIME.widgets.Table.getStandardToolbarButtons();
/** /**
* Check the import statuses of each selected episode to see which * Check the import statuses of each selected episode to see which
@ -1498,7 +1452,8 @@ var AIRTIME = (function(AIRTIME) {
}; };
// Setup the default buttons (new, edit, delete) // Setup the default buttons (new, edit, delete)
$.extend(true, defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW], podcastEpisodeButtons = AIRTIME.widgets.Table.getStandardToolbarButtons();
$.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
{ {
title: "Import", title: "Import",
eventHandlers: { eventHandlers: {
@ -1511,7 +1466,7 @@ var AIRTIME = (function(AIRTIME) {
return checkSelectedEpisodeImportStatus.call(this, false); return checkSelectedEpisodeImportStatus.call(this, false);
} }
}); });
$.extend(true, defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT], $.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
{ {
eventHandlers: { eventHandlers: {
click: function () { click: function () {
@ -1523,7 +1478,7 @@ var AIRTIME = (function(AIRTIME) {
return checkSelectedEpisodeImportStatus.call(this, true); return checkSelectedEpisodeImportStatus.call(this, true);
} }
}); });
$.extend(true, defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE], $.extend(true, podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE],
{ {
eventHandlers: { eventHandlers: {
click: function () { click: function () {
@ -1531,7 +1486,8 @@ var AIRTIME = (function(AIRTIME) {
$.each(episodes, function () { $.each(episodes, function () {
data.push({id: this.file.id, type: this.file.ftype}); data.push({id: this.file.id, type: this.file.ftype});
}); });
mod.fnDeleteItems(data); console.log("podcast deletion:", data);
AIRTIME.podcast.deleteSelectedEpisodes(data, mod.podcastEpisodeTableWidget);
} }
}, },
validateConstraints: function () { validateConstraints: function () {
@ -1541,30 +1497,30 @@ var AIRTIME = (function(AIRTIME) {
// Reassign these because integer keys take precedence in iteration order - we want to order based on insertion // Reassign these because integer keys take precedence in iteration order - we want to order based on insertion
// FIXME: this is a pretty flimsy way to try to set up iteration order (possibly not xbrowser compatible?) // FIXME: this is a pretty flimsy way to try to set up iteration order (possibly not xbrowser compatible?)
defaults = { podcastEpisodeButtons = {
newBtn : defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW], newBtn : podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.NEW],
editBtn: defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT], editBtn: podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.EDIT],
delBtn : defaults[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE] delBtn : podcastEpisodeButtons[AIRTIME.widgets.Table.TOOLBAR_BUTTON_ROLES.DELETE]
}; };
$.extend(true, buttons, defaults, { $.extend(true, podcastEpisodeButtons, {
addToScheduleBtn: { // addToScheduleBtn: {
title : $.i18n._('Add to Schedule'), // title : $.i18n._('Add to Schedule'),
iconClass : '', // iconClass : '',
extraBtnClass : 'btn-small', // extraBtnClass : 'btn-small',
elementId : '', // elementId : '',
eventHandlers : { // eventHandlers : {
click: function () { // click: function () {
var data = [], selected = mod.podcastEpisodeTableWidget.getSelectedRows(); // var data = [], selected = mod.podcastEpisodeTableWidget.getSelectedRows();
$.each(selected, function () { data.push(this.file); }); // $.each(selected, function () { data.push(this.file); });
mod.addToSchedule(data); // mod.addToSchedule(data);
} // }
}, // },
validateConstraints: function () { // validateConstraints: function () {
// TODO: change text + behaviour for playlists, smart blocks, etc. // // TODO: change text + behaviour for playlists, smart blocks, etc.
return checkSelectedEpisodeImportStatus.call(this, true); // return checkSelectedEpisodeImportStatus.call(this, true);
} // }
}, // },
viewDescBtn: { viewDescBtn: {
title : $.i18n._("View"), title : $.i18n._("View"),
iconClass : "icon-globe", iconClass : "icon-globe",
@ -1580,32 +1536,8 @@ var AIRTIME = (function(AIRTIME) {
}); });
mod.podcastEpisodeTableWidget = AIRTIME.podcast.initPodcastEpisodeDatatable( mod.podcastEpisodeTableWidget = AIRTIME.podcast.initPodcastEpisodeDatatable(
$("#podcast_episodes_table"), domNode,
{ podcastEpisodeButtons,
aoColumns : [
/* GUID */ { "sTitle" : "" , "mDataProp" : "guid" , "sClass" : "podcast_episodes_guid" , "bVisible" : false },
/* Ingested */ { "sTitle" : $.i18n._("Imported?") , "mDataProp" : "importIcon" , "sClass" : "podcast_episodes_imported" , "sWidth" : "120px" },
/* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "title" , "sClass" : "podcast_episodes_title" , "sWidth" : "170px" },
/* Author */ { "sTitle" : $.i18n._("Author") , "mDataProp" : "author" , "sClass" : "podcast_episodes_author" , "sWidth" : "170px" },
/* Description */ { "sTitle" : $.i18n._("Description") , "mDataProp" : "description" , "sClass" : "podcast_episodes_description" , "sWidth" : "300px" },
/* Link */ { "sTitle" : $.i18n._("Link") , "mDataProp" : "link" , "sClass" : "podcast_episodes_link" , "sWidth" : "170px" },
/* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" }
],
bServerSide : false,
sAjaxSource : null,
// Initialize the table with empty data so we can defer loading
// If we load sequentially there's a delay before the table appears
aaData : {},
oColVis : {
buttonText: $.i18n._("Columns"),
iOverlayFade: 0,
aiExclude: [0, 1, 2]
},
oColReorder: {
iFixedColumns: 3 // Checkbox + imported
}
},
buttons,
{ {
hideIngestCheckboxes: false, hideIngestCheckboxes: false,
emptyPlaceholder: { emptyPlaceholder: {
@ -1628,6 +1560,8 @@ var AIRTIME = (function(AIRTIME) {
} }
} }
}); });
return mod.podcastEpisodeTableWidget;
}; };
mod.libraryInit = libraryInit; mod.libraryInit = libraryInit;

155
airtime_mvc/public/js/airtime/library/podcast.js
View File

@ -345,6 +345,12 @@ var AIRTIME = (function (AIRTIME) {
} }
}); });
// Add podcast episode table in right-side panel below podcast edit form
var episodeTable = AIRTIME.library.initPodcastEpisodeDatatableWithButtonEvents(
$("#podcast_episodes_" + podcast.id),
);
episodeTable.reload(podcast.id);
episodeTable.clearSelection()
} }
/** /**
@ -501,11 +507,13 @@ var AIRTIME = (function (AIRTIME) {
*/ */
mod.addPodcast = function () { mod.addPodcast = function () {
$.post(endpoint, $("#podcast_url_dialog").find("form").serialize(), function(json) { $.post(endpoint, $("#podcast_url_dialog").find("form").serialize(), function(json) {
// Open the episode view for the newly created podcast in the left-hand pane // Refresh left-side library pane to show newly created podcast
AIRTIME.library.podcastEpisodeTableWidget.reload(JSON.parse(json.podcast).id); AIRTIME.library.podcastDataTable.fnDraw();
AIRTIME.library.podcastTableWidget.clearSelection();
AIRTIME.library.setCurrentTable(AIRTIME.library.DataTableTypeEnum.PODCAST_EPISODES); // close modal
$("#podcast_url_dialog").dialog("close"); $("#podcast_url_dialog").dialog("close");
// open newly created podcast in right-side edit pane
_initAppFromResponse(json); _initAppFromResponse(json);
}).fail(function (e) { }).fail(function (e) {
var errors = $("#podcast_url_dialog").find(".errors"); var errors = $("#podcast_url_dialog").find(".errors");
@ -560,6 +568,7 @@ var AIRTIME = (function (AIRTIME) {
* @param {PodcastEpisodeTable} dt PodcastEpisode table containing the data * @param {PodcastEpisodeTable} dt PodcastEpisode table containing the data
*/ */
mod.importSelectedEpisodes = function (episodes, dt) { mod.importSelectedEpisodes = function (episodes, dt) {
console.log("importSelectedEpisodes", episodes, dt);
$.each(episodes, function () { $.each(episodes, function () {
// remainingDiskSpace is defined in layout.phtml // remainingDiskSpace is defined in layout.phtml
if (this.enclosure.length > remainingDiskSpace) { if (this.enclosure.length > remainingDiskSpace) {
@ -567,12 +576,11 @@ var AIRTIME = (function (AIRTIME) {
return false; return false;
} }
if (this.file && Object.keys(this.file).length > 0) return false; if (this.file && Object.keys(this.file).length > 0) return false;
var podcastId = this.podcast_id; $.post(endpoint + this.podcast_id + '/episodes', JSON.stringify({
$.post(endpoint + podcastId + '/episodes', JSON.stringify({
csrf_token: $("#csrf").val(), csrf_token: $("#csrf").val(),
episode: this episode: this
}), function () { }), function () {
dt.reload(podcastId); dt.reload(this.podcast_id);
}); });
remainingDiskSpace -= this.enclosure.length; remainingDiskSpace -= this.enclosure.length;
@ -581,6 +589,20 @@ var AIRTIME = (function (AIRTIME) {
dt.clearSelection(); dt.clearSelection();
}; };
/**
* Delete one or more podcast episodes.
*
* @param {id:string, type:string}[] data Array of data objects to be deleted
* @param {PodcastEpisodeTable} dt PodcastEpisode table containing the data
*/
mod.deleteSelectedEpisodes = function (data, dt) {
$.each(data, function () {
AIRTIME.library.fnDeleteItems(data);
});
dt.reload(this.podcast_id);
dt.clearSelection();
};
/** /**
* Initialize the internal datatable for the podcast editor view to hold episode data passed back from the server. * Initialize the internal datatable for the podcast editor view to hold episode data passed back from the server.
* *
@ -594,73 +616,74 @@ var AIRTIME = (function (AIRTIME) {
* *
* @returns {Table} the created Table object * @returns {Table} the created Table object
*/ */
mod.initPodcastEpisodeDatatable = function (domNode, params, buttons, config) { mod.initPodcastEpisodeDatatable = function (domNode, buttons, config) {
if ('slideToggle' in buttons) {
buttons = $.extend(true, {
slideToggle: {
title: '',
iconClass: 'spl-no-r-margin icon-chevron-up',
extraBtnClass: 'toggle-editor-form',
elementId: '',
eventHandlers: {},
validateConstraints: function () { return true; }
}
}, buttons);
}
params = $.extend(true, params,
{
bDeferRender: true,
oColVis: {
buttonText: $.i18n._("Columns"),
iOverlayFade: 0,
aiExclude: [0]
},
oColReorder: {
iFixedColumns: 1 // Checkbox
},
fnCreatedRow: function(nRow, aData, iDataIndex) {
var self = this;
if (aData.file && Object.keys(aData.file).length > 0) {
$(nRow).draggable({
helper: function () {
var $row = $(this), data = self._datatable.fnGetData(nRow);
$row.data("aData", data.file);
self.selectRow(this, data, self.SELECTION_MODE.SINGLE, $row.index());
var selected = self.getSelectedRows().length, container,
width = self._$wrapperDOMNode.closest(".dataTables_wrapper").outerWidth(), message;
message = sprintf($.i18n._(selected > 1 ? "Adding %s Items" : "Adding %s Item"), selected); params = {
container = $('<div/>').attr('id', 'draggingContainer').append('<tr/>') aoColumns : [
.find("tr").append('<td/>').find("td") /* GUID */ { "sTitle" : "" , "mDataProp" : "guid" , "sClass" : "podcast_episodes_guid" , "bVisible" : false },
.attr("colspan", 100).width(width).css("max-width", "none") /* Ingested */ { "sTitle" : $.i18n._("Imported?") , "mDataProp" : "importIcon" , "sClass" : "podcast_episodes_imported" , "sWidth" : "120px" },
.addClass("ui-state-highlight").append(message).end().end(); /* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "title" , "sClass" : "podcast_episodes_title" , "sWidth" : "170px" },
/* Author */ { "sTitle" : $.i18n._("Author") , "mDataProp" : "author" , "sClass" : "podcast_episodes_author" , "sWidth" : "170px" },
/* Description */ { "sTitle" : $.i18n._("Description") , "mDataProp" : "description" , "sClass" : "podcast_episodes_description" , "sWidth" : "300px" },
/* Link */ { "sTitle" : $.i18n._("Link") , "mDataProp" : "link" , "sClass" : "podcast_episodes_link" , "sWidth" : "170px" },
/* Publication Date */ { "sTitle" : $.i18n._("Publication Date") , "mDataProp" : "pub_date" , "sClass" : "podcast_episodes_pub_date" , "sWidth" : "170px" }
],
bServerSide : false,
sAjaxSource : null,
// Initialize the table with empty data so we can defer loading
// If we load sequentially there's a delay before the table appears
aaData : {},
oColVis : {
buttonText: $.i18n._("Columns"),
iOverlayFade: 0,
aiExclude: [0, 1, 2]
},
bDeferRender: true,
oColReorder: {
iFixedColumns: 3 // Checkbox + imported
},
fnCreatedRow: function(nRow, aData, iDataIndex) {
var self = this;
if (aData.file && Object.keys(aData.file).length > 0) {
$(nRow).draggable({
helper: function () {
var $row = $(this), data = self._datatable.fnGetData(nRow);
$row.data("aData", data.file);
self.selectRow(this, data, self.SELECTION_MODE.SINGLE, $row.index());
var selected = self.getSelectedRows().length, container,
width = self._$wrapperDOMNode.closest(".dataTables_wrapper").outerWidth(), message;
return container; message = sprintf($.i18n._(selected > 1 ? "Adding %s Items" : "Adding %s Item"), selected);
}, container = $('<div/>').attr('id', 'draggingContainer').append('<tr/>')
tolerance: 'pointer', .find("tr").append('<td/>').find("td")
cursor: 'move', .attr("colspan", 100).width(width).css("max-width", "none")
cursorAt: { .addClass("ui-state-highlight").append(message).end().end();
top: 20,
left: Math.floor(self._datatable.outerWidth() / 2) return container;
}, },
distance: 25, // min-distance for dragging tolerance: 'pointer',
connectToSortable: $("#show_builder_table, .active-tab .spl_sortable") cursor: 'move',
}); cursorAt: {
} top: 20,
}, left: Math.floor(self._datatable.outerWidth() / 2)
fnDrawCallback: function () { },
AIRTIME.library.drawEmptyPlaceholder(this); distance: 25, // min-distance for dragging
// Hide the processing div connectToSortable: $("#show_builder_table, .active-tab .spl_sortable")
var dt = this.getDatatable(); });
!dt || dt.closest(".dataTables_wrapper").find(".dataTables_processing").css("visibility", "hidden");
} }
},
fnDrawCallback: function () {
AIRTIME.library.drawEmptyPlaceholder(this);
// Hide the processing div
var dt = this.getDatatable();
!dt || dt.closest(".dataTables_wrapper").find(".dataTables_processing").css("visibility", "hidden");
} }
); }
if (typeof PodcastEpisodeTable === 'undefined') { if (typeof PodcastEpisodeTable === 'undefined') {
_initPodcastEpisodeTable(); _initPodcastEpisodeTable();
} }
var podcastEpisodesTableWidget = new PodcastEpisodeTable( var podcastEpisodesTableWidget = new PodcastEpisodeTable(
domNode, // DOM node to create the table inside. domNode, // DOM node to create the table inside.
true, // Enable item selection true, // Enable item selection