349 lines
15 KiB
Twig
349 lines
15 KiB
Twig
|
{#
|
|||
|
|
/**
|
|||
|
|
* Copyright (C) 2020 Xibo Signage Ltd
|
|||
|
|
*
|
|||
|
|
* Xibo - Digital Signage - http://www.xibo.org.uk
|
|||
|
|
*
|
|||
|
|
* This file is part of Xibo.
|
|||
|
|
*
|
|||
|
|
* Xibo is free software: you can redistribute it and/or modify
|
|||
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|||
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|||
|
|
* any later version.
|
|||
|
|
*
|
|||
|
|
* Xibo is distributed in the hope that it will be useful,
|
|||
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|||
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|||
|
|
* GNU Affero General Public License for more details.
|
|||
|
|
*
|
|||
|
|
* You should have received a copy of the GNU Affero General Public License
|
|||
|
|
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
|
*/
|
|||
|
|
#}
|
|||
|
|
{% extends "authed.twig" %}
|
|||
|
|
{% import "forms.twig" as forms %}
|
|||
|
|
|
|||
|
|
{% block pageContent %}
|
|||
|
|
|
|||
|
|
<div class="row mt-4">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
{# Playlist selection #}
|
|||
|
|
{% set attributes = [
|
|||
|
|
{ name: "data-placeholder--id", value: null },
|
|||
|
|
{ name: "data-placeholder--value", value: "" },
|
|||
|
|
{ name: "data-search-url", value: url_for("playlistdashboard.search") },
|
|||
|
|
{ name: "data-search-term", value: "name" },
|
|||
|
|
{ name: "data-id-property", value: "playlistId" },
|
|||
|
|
{ name: "data-text-property", value: "name" }
|
|||
|
|
] %}
|
|||
|
|
|
|||
|
|
{% set title %}{% trans "Playlist" %}{% endset %}
|
|||
|
|
{% set helpText %}{% trans "Please select a Playlist to manage" %}{% endset %}
|
|||
|
|
{{ forms.dropdown("playlistId", "single", title, "", [playlist], "playlistId", "name", helpText, "playlist-control pagedSelect", "", "", "", attributes) }}
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div id="spots">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card p-3 mb-3 bg-light">
|
|||
|
|
<h3>{% trans "Playlist Content" %}</h3>
|
|||
|
|
<p>{% trans "Fill empty Spots by clicking on ‘Add’ to select the media file you wish to use." %}</p>
|
|||
|
|
|
|||
|
|
<p>{% trans "Replace existing media files by clicking on a Spot and select the new media file you wish to use." %}</p>
|
|||
|
|
|
|||
|
|
<p>{{ libraryUpload.maxSizeMessage }}</p>
|
|||
|
|
</div>
|
|||
|
|
{% include "theme-dashboard-message.twig" ignore missing %}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{% endblock %}
|
|||
|
|
|
|||
|
|
{% block javaScript %}
|
|||
|
|
{# Add common files #}
|
|||
|
|
{% include "editorTranslations.twig" %}
|
|||
|
|
{% include "editorVars.twig" %}
|
|||
|
|
|
|||
|
|
<script src="{{ theme.rootUri() }}dist/playlistEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|||
|
|
<script src="{{ theme.rootUri() }}dist/codeEditor.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|||
|
|
<script src="{{ theme.rootUri() }}dist/editorCommon.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|||
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|||
|
|
// Define some global variables to keep hold of
|
|||
|
|
var template;
|
|||
|
|
var uploadUrl;
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
|
|||
|
|
// Hide reshow welcome on this page
|
|||
|
|
$('#reshowWelcomeMenuItem').remove();
|
|||
|
|
|
|||
|
|
// We need to have the URL of hte upload form available
|
|||
|
|
uploadUrl = "{{ url_for("library.add") }}";
|
|||
|
|
|
|||
|
|
// Bind our buttons on the dashboard
|
|||
|
|
// Listen to the playlist selector change
|
|||
|
|
$("div.playlist-control select").on("change", function() {
|
|||
|
|
loadPlaylistIntoSpotEditor($(this).val());
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Upload server status check for browsers with CORS support:
|
|||
|
|
if ($.support.cors) {
|
|||
|
|
$.ajax({
|
|||
|
|
url: uploadUrl,
|
|||
|
|
type: 'HEAD'
|
|||
|
|
}).fail(function () {
|
|||
|
|
$('<span class="alert alert-error"/>')
|
|||
|
|
.text('Upload server currently unavailable - ' + new Date())
|
|||
|
|
.appendTo($('.card'));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Compile our template once
|
|||
|
|
template = Handlebars.compile($("#template-spot-dashboard").html());
|
|||
|
|
|
|||
|
|
// Do we need to load a preset?
|
|||
|
|
loadPlaylistIntoSpotEditor($("div.playlist-control select").val());
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Load a Playlist into the Spot Editor
|
|||
|
|
* @param playlistId the playlistId
|
|||
|
|
*/
|
|||
|
|
function loadPlaylistIntoSpotEditor(playlistId) {
|
|||
|
|
// Check we have a playlistId provided
|
|||
|
|
if (playlistId === undefined || playlistId === null || playlistId === "") {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Make an AJAX call to the spots backend for this, and dump the resulting HTML into our target div.
|
|||
|
|
var $spotElement = $("#spots");
|
|||
|
|
|
|||
|
|
$spotElement.html("<span class=\"fa fa-cogs fa-spin\"></span>");
|
|||
|
|
|
|||
|
|
$.ajax("{{ url_for("playlistdashboard.show", {id:':id'}) }}".replace(":id", playlistId), {
|
|||
|
|
method: "GET",
|
|||
|
|
success: function(response) {
|
|||
|
|
if (response.success) {
|
|||
|
|
$spotElement.html(response.html);
|
|||
|
|
|
|||
|
|
// Run init generally to capture any Xibo special elements
|
|||
|
|
XiboInitialise("#spots");
|
|||
|
|
|
|||
|
|
// Also bind to any special buttons we have on our page.
|
|||
|
|
|
|||
|
|
// Bind an on-click event to each of our buttons
|
|||
|
|
// when we click them, they get replaced with a file upload form.
|
|||
|
|
// once complete, or cancelled, they get reloaded with new information, or the old info put back.
|
|||
|
|
$spotElement.find(".spot-action-button").on("click", function() {
|
|||
|
|
spotActionButtonClick($(this));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Bind click event to delete a playlist widget
|
|||
|
|
$spotElement.find(".delete-widget").click(function(e) {
|
|||
|
|
var $anchor = $(this).children();
|
|||
|
|
e.preventDefault();
|
|||
|
|
XiboFormRender($anchor);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
SystemMessage(response.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* What should happen when we click a button?
|
|||
|
|
* @param button
|
|||
|
|
*/
|
|||
|
|
function spotActionButtonClick(button) {
|
|||
|
|
|
|||
|
|
// Whip away the current button
|
|||
|
|
var $container = button.parent();
|
|||
|
|
var $imgDiv = $container.prev();
|
|||
|
|
var $delButtonDiv = $container.next();
|
|||
|
|
|
|||
|
|
// Remove the button, thumbnail and whatever else
|
|||
|
|
button.remove();
|
|||
|
|
$imgDiv.empty();
|
|||
|
|
$delButtonDiv.empty();
|
|||
|
|
|
|||
|
|
// Append a new one
|
|||
|
|
$container.append(template({
|
|||
|
|
playlistId: $container.data("playlistId"),
|
|||
|
|
widgetId: $container.data("widgetId"),
|
|||
|
|
oldMediaId: $container.data("mediaId"),
|
|||
|
|
upload: {
|
|||
|
|
maxSize: {{ libraryUpload.maxSize }},
|
|||
|
|
validExt: "{{ validExtensions }}"
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// Hand over to blue-imp
|
|||
|
|
// Configure the upload form
|
|||
|
|
var form = $container.find("form");
|
|||
|
|
|
|||
|
|
// Initialize the jQuery File Upload widget:
|
|||
|
|
form.fileupload({
|
|||
|
|
url: uploadUrl,
|
|||
|
|
disableImageResize: true,
|
|||
|
|
maxNumberOfFiles: 1,
|
|||
|
|
limitMultiFileUploads: 1,
|
|||
|
|
autoUpload: true,
|
|||
|
|
dropZone: $(this).parent()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Enable iframe cross-domain access via redirect option:
|
|||
|
|
form.fileupload('option', 'redirect', window.location.href.replace(/\/[^\/]*$/, '/cors/result.html?%s'));
|
|||
|
|
|
|||
|
|
form.bind('fileuploadalways', function (e, data) {
|
|||
|
|
if (data.textStatus === "success") {
|
|||
|
|
// Take the data and update our form back to a replace button
|
|||
|
|
var result = data.result.files[0];
|
|||
|
|
|
|||
|
|
// Pull the results out
|
|||
|
|
if (result.error !== undefined) {
|
|||
|
|
toastr.error(result.error);
|
|||
|
|
} else {
|
|||
|
|
// update the container with a new mediaId
|
|||
|
|
$container.data("mediaId", result.mediaId);
|
|||
|
|
$container.data("widgetId", result.widgetId);
|
|||
|
|
$container.data("widgetName", result.name);
|
|||
|
|
$container.data("mediaType", result.mediaType);
|
|||
|
|
|
|||
|
|
if ($container.data("buttonType") === "add") {
|
|||
|
|
|
|||
|
|
$container.data("buttonType", "replace");
|
|||
|
|
|
|||
|
|
// Change Empty to Add in the next row down (if there is one)
|
|||
|
|
var $next = $container.parent().next().find("button");
|
|||
|
|
$next.addClass("spot-action").addClass("btn-success").removeClass("btn-white").prop("disabled", false).html("Add");
|
|||
|
|
$next.on("click", function () {
|
|||
|
|
spotActionButtonClick($next);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
toastr.error(data.result);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var button;
|
|||
|
|
if ($container.data("widgetName") !== undefined) {
|
|||
|
|
// Switch back to a button
|
|||
|
|
button = $("<button class=\"btn btn-block btn-warning spot-action-button\">" + $container.data("widgetName") + "</button>");
|
|||
|
|
$container.append(button);
|
|||
|
|
|
|||
|
|
var delTempl = Handlebars.compile($("#delete-template").html());
|
|||
|
|
$delButtonDiv.append(delTempl({
|
|||
|
|
href: $container.data("widgetDel").replace(":id", $container.data("widgetId")),
|
|||
|
|
featureEnabled: $container.data("featureEnabled"),
|
|||
|
|
transDelete: "{% trans "Delete" %}"
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
if ($container.data("mediaType") === "image") {
|
|||
|
|
var previewUrl = $container.data("widgetPreview").replace(":id", $container.data("mediaId"));
|
|||
|
|
var thumbnail = $("<a class=\"img-replace\" data-toggle=\"lightbox\" data-type=\"image\" href=\"" + previewUrl + "\">" +
|
|||
|
|
"<img src=\"" + previewUrl.replace('download', 'thumbnail') + "\" style=\"max-height: 50px; max-width: 50px;\" alt=\"{{ "Thumbnail"|trans }}\"/>" +
|
|||
|
|
"</a>");
|
|||
|
|
|
|||
|
|
$imgDiv.append(thumbnail);
|
|||
|
|
} else {
|
|||
|
|
$imgDiv.append($("<i class=\"fa fa-2x fa-check\" style=\"height: 50px; max-width: 50px;\"></i>"));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
button = $("<button class=\"btn btn-block btn-success spot-action-button\">Add</button>");
|
|||
|
|
$container.append(button);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Bind to the button.
|
|||
|
|
button.on("click", function () {
|
|||
|
|
spotActionButtonClick($(this));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
setTimeout(function() {
|
|||
|
|
form.fileupload('destroy');
|
|||
|
|
form.remove();
|
|||
|
|
}, 500);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Click our new button
|
|||
|
|
$container.find('input[name="files[]"]').trigger("click");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Callback used by the Playlist Module Delete form opening.
|
|||
|
|
*/
|
|||
|
|
function playlistModuleDeleteFormOpen() {
|
|||
|
|
|
|||
|
|
$("#playlistModuleDeleteForm").submit(function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
// Call the usual form submit.
|
|||
|
|
XiboFormSubmit($("#playlistModuleDeleteForm"), null, function(xhr, form) {
|
|||
|
|
if (xhr.success) {
|
|||
|
|
loadPlaylistIntoSpotEditor($("div.playlist-control select").val());
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
{# Output a template for the upload form which will appear in the spot when clicked. #}
|
|||
|
|
{% verbatim %}
|
|||
|
|
<script type="text/x-handlebars-template" id="template-spot-dashboard">
|
|||
|
|
<form method="post" enctype="multipart/form-data" data-max-file-size="{{ upload.maxSize }}" data-accept-file-types="/(\.|\/){{ upload.validExt }}$/i">
|
|||
|
|
<input type="hidden" name="playlistId" value="{{ playlistId }}" />
|
|||
|
|
{{#if widgetId}}
|
|||
|
|
<input type="hidden" name="widgetId" value="{{ widgetId }}" />
|
|||
|
|
{{/if}}
|
|||
|
|
{{#if oldMediaId}}
|
|||
|
|
<input type="hidden" name="oldMediaId" value="{{ oldMediaId }}" />
|
|||
|
|
{{/if}}
|
|||
|
|
<input type="hidden" name="updateInLayouts" value="1" />
|
|||
|
|
<input type="hidden" name="deleteOldRevisions" value="1" />
|
|||
|
|
<div class="row fileupload-buttonbar">
|
|||
|
|
<div class="col-md-7">
|
|||
|
|
<!-- The fileinput-button span is used to style the file input field as button -->
|
|||
|
|
<span class="btn btn-success fileinput-button">
|
|||
|
|
<i class="fa fa-plus"></i>
|
|||
|
|
<span>Please select a file...</span>
|
|||
|
|
<input type="file" name="files[]">
|
|||
|
|
</span>
|
|||
|
|
<!-- The loading indicator is shown during file processing -->
|
|||
|
|
<span class="fileupload-loading"></span>
|
|||
|
|
</div>
|
|||
|
|
<!-- The global progress information -->
|
|||
|
|
<div class="col-md-4 fileupload-progress fade">
|
|||
|
|
<!-- The global progress bar -->
|
|||
|
|
<div class="progress">
|
|||
|
|
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
|
|||
|
|
<div class="sr-only"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- The extended global progress information -->
|
|||
|
|
<div class="progress-extended"> </div>
|
|||
|
|
<!-- Processing info container -->
|
|||
|
|
<div class="progress-end" style="display:none;">{{ trans.processing }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- The template to display delete button -->
|
|||
|
|
<script type="text/x-handlebars-template" id="delete-template">
|
|||
|
|
{{#if featureEnabled }}
|
|||
|
|
<a class="XiboFormButton added btns" title="{{ transDelete }}" href="{{ href }}">
|
|||
|
|
<i class="fa fa-lg fa-trash" aria-hidden="true" style="padding:8px 0 8px; color:#d9534f;"></i>
|
|||
|
|
</a>
|
|||
|
|
{{/if}}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
{% endverbatim %}
|
|||
|
|
{% endblock %}
|