diff --git a/compile.js b/compile.js index 602613d..3641efa 100644 --- a/compile.js +++ b/compile.js @@ -1,13 +1,15 @@ -import { execSync } from 'child_process'; import fs from "fs-extra"; console.log("Copying files..."); -const toCopy = ["data", "locales", "templates", "tmp", "trash", ".env"]; +const toCopy = ["data", "locales", "templates", "tmp", "trash"]; for (const dir of toCopy) { console.log(`Copying ${dir}...`); fs.cpSync(`./${dir}`, `./dist/${dir}`, { recursive: true - }); - console.log("done."); -} \ No newline at end of file + }); +} + +console.log(`Copying .env`); +fs.cpSync(`./.env.example`, `./dist/.env`); +console.log("Packaged infoscreen3 to /dist"); diff --git a/locales/en/translation.json b/locales/en/translation.json index 1845dc2..1324fa9 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -20,6 +20,7 @@ "paste": "Paste", "edit": "Edit", "set": "Set", + "clear": "Clear", "play": "Play", "blackout": "Blackout", "displayTime": "Display Time", diff --git a/locales/fi/translation.json b/locales/fi/translation.json index c763abd..295e82f 100644 --- a/locales/fi/translation.json +++ b/locales/fi/translation.json @@ -20,6 +20,7 @@ "copy": "Kopio", "paste": "Liitä", "set": "Aseta", + "clear": "Tyhjennä", "play": "Toista", "blackout": "Tummenna", "displayTime": "Näytä aika", diff --git a/public/js/dashboard.js b/public/js/dashboard.js index 986c024..a222ce8 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -29,26 +29,26 @@ socket.on("callback.dashboard.sync", function (data) { bundleDirs = data.bundleDirs; displayList = data.displays; updateControls(data.serverOptions); - + // update dropdown at menu with bundles let valueArray = []; for (let dir of bundleDirs) { valueArray.push({ name: dir.name, value: dir.dir }); } - + $('#bundles') - .dropdown({ - direction: "downward", - values: valueArray, - action: function (_label, _value) { - $('#bundles') - .dropdown("hide"); - - emit("admin.setBundle", { bundle: _value }); - } - }).dropdown("set selected", { bundle: serverOptions.currentBundle }); + .dropdown({ + direction: "downward", + values: valueArray, + action: function (_label, _value) { + $('#bundles') + .dropdown("hide"); + + emit("admin.setBundle", { bundle: _value }); + } + }).dropdown("set selected", { bundle: serverOptions.currentBundle }); $('#currentBundle').text(serverOptions.currentBundle); - $('#statusMessageAdmin').val(serverOptions.statusMessage); + $('#statusMessageAdmin').val(serverOptions.statusMessage.replace("
", "\n")); // update dropdown at menu with bundles valueArray = []; let x = 0; @@ -56,46 +56,46 @@ socket.on("callback.dashboard.sync", function (data) { valueArray.push({ name: display.name, value: x }); x++; } - + $('#displays') - .dropdown({ - direction: "downward", - values: valueArray, - action: function (text, value) { - $('#displays') - .dropdown("hide"); - - displayId = parseInt(value); - document.location = "/admin/display/" + displayId; - } - }).dropdown("set selected", displayId); - + .dropdown({ + direction: "downward", + values: valueArray, + action: function (text, value) { + $('#displays') + .dropdown("hide"); + + displayId = parseInt(value); + document.location = "/admin/display/" + displayId; + } + }).dropdown("set selected", displayId); + $('.currentDisplay').text(displayList[displayId].name); - + let transitionArray = []; // let values = ["bars", "blinds", "blinds3d", "zip", "blocks", "blocks2", "concentric", "warp", "cube", "tiles3d", "tiles3dprev", "slide", "swipe", "dissolve"]; - + transitionArray.push({ name: "random", value: null }); for (let i in SupportedTransitions) { transitionArray.push({ name: SupportedTransitions[i], value: SupportedTransitions[i] }); } - + $('#transitions') - .dropdown({ - direction: "downward", - values: transitionArray, - action: function (text, value) { - $('#transitions').dropdown("hide"); - $('#transitions').dropdown("set selected", value); - - emit("admin.setTransition", { transition: value }); - $('#currentTransition').text(text); - - } - }).dropdown("set selected", serverOptions.transition); - + .dropdown({ + direction: "downward", + values: transitionArray, + action: function (text, value) { + $('#transitions').dropdown("hide"); + $('#transitions').dropdown("set selected", value); + + emit("admin.setTransition", { transition: value }); + $('#currentTransition').text(text); + + } + }).dropdown("set selected", serverOptions.transition); + $('#currentTransition').text(serverOptions.transition || "random"); - + // let preview = document.getElementById('preview'); // preview.src = "/admin/preview?displayId=" + displayId + "&socket=" + encodeURIComponent(socket.id); updateBundleData(bundleDirs); @@ -115,21 +115,21 @@ socket.on("callback.dashboard.updateBundles", function (data) { socket.on("callback.dashboard.update", function (data) { if (data.serverOptions.displayId !== displayId) - return; - + return; + displayId = parseInt(data.displayId); bundleSettings = data.bundleSettings; serverOptions = data.serverOptions; updateControls(data.serverOptions); updateSlides(bundleSettings.allSlides); - + $('#allBundles').children().css("border", "1px solid black"); $('#bundle_' + simpleHash(serverOptions.currentBundle)).css("border", "1px solid #1ebc30"); $('#currentBundle').text(serverOptions.currentBundle); $('#currentDisplay').text(displayList[displayId].name); $('#transitions').dropdown("set selected", serverOptions.transition); $('#currentTransition').text(serverOptions.transition || "random"); - + $('.editable').editable(function (value, settings) { let uuid = $(this).parent().parent().attr("id"); emit("admin.renameSlide", { uuid: uuid, name: value, bundleName: serverOptions.currentBundle }); @@ -152,27 +152,43 @@ $(function () { emit("admin.reorderSlides", { bundleName: serverOptions.currentBundle, sortedIDs: sortedIDs }); } }).disableSelection(); + $('#statusMessageAdmin').on("keyup", function(e) { + limitLines(e.currentTarget); + }); + }); +function limitLines(elem) { + let maxLines = $(elem).attr('data-max'); + let newLines = $(elem).val().split("\n").length; + if(newLines >= maxLines) { + let lines = $(elem).val().split("\n").slice(0, maxLines); + let newValue = lines.join("\n"); + $(elem).val(newValue); + return true; + } + return false; +}; + function updateBundleData(bundleDirs) { let output = ""; bundleDirs.sort(sortByName); - + for (let i in bundleDirs) { let bundle = bundleDirs[i]; output += `
-
- - - -
-
-
${bundle.name}
-
+
+ + + +
+
+
${bundle.name}
+
`; } - + $('#allBundles').html(output); $('#allBundles').children().css("border", "1px solid black"); $('#bundle_' + simpleHash(serverOptions.currentBundle)).css("border", "1px solid #1ebc30"); @@ -181,9 +197,9 @@ function updateBundleData(bundleDirs) { function fixPreview() { let con = $("#programContainer"), - aspect = (0.9 / 1.6), - width = con.innerWidth(), - height = Math.floor(width * aspect); + aspect = (0.9 / 1.6), + width = con.innerWidth(), + height = Math.floor(width * aspect); $("#program").css("width", width + "px").css("height", height + "px"); $("#preview").css("width", width + "px").css("height", height + "px"); } @@ -207,64 +223,42 @@ function createNewVideo() { function editSlide(name, type) { switch (type) { case "slide": - window.open("/admin/edit/slide?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=900,width=1304,scrollbars=no,status=no'); - break; + window.open("/admin/edit/slide?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=900,width=1304,scrollbars=no,status=no'); + break; case "webpage": - window.open("/admin/edit/link?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=400,width=600,scrollbars=no,status=no'); - break; + window.open("/admin/edit/link?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=400,width=600,scrollbars=no,status=no'); + break; case "video": - window.open("/admin/edit/video?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=600,width=600,scrollbars=no,status=no'); - break; + window.open("/admin/edit/video?bundle=" + serverOptions.currentBundle + "&file=" + name + "&displayId=" + displayId, '_blank', 'location=no,height=600,width=600,scrollbars=no,status=no'); + break; } } function setStatusMessage() { - emit("admin.setStatusMessage", $('#statusMessageAdmin').val()); + emit("admin.setStatusMessage", $('#statusMessageAdmin').val().replace("\n", "
")); } -function playYoutubeVideo() { - let elem = $('#youtubeId').val(); - let regexMatch = /(?:https?:)?(?:\/\/)?(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/\S*?[^\w\s-])((?!videoseries)[\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/.exec(elem); - let videoId = elem; - if (regexMatch.length == 2) { - videoId = regexMatch[1]; - } - - if (videoId !== "") { - let obj = { - json: { - type: "webPage", - webUrl: `https://www.youtube.com/embed/${videoId}?autoplay=1&origin=${serverUrl}&rel=0&modestbranding=0`, - zoom: 1., - displayTime: false, - }, - displayId: displayId, - duration: null, - transition: null, - png: null, - }; - socket.emit("admin.overrideWebPage", obj); - } +function clearStatusMessage() { + $("#statusMessageAdmin").val(""); + setStatusMessage(); } - - function createNewBundle() { $('#newBundle') - .modal({ - closable: true, - onDeny: function () { - $('#newBundle').modal("hide"); - return false; - }, - onApprove: function () { - emit("admin.createBundle", { "dir": $("#newBundleDirName").val(), "bundle": $("#newBundleName").val() }); - $("#newBundleDirName").val(""); - $("#newBundleName").val(""); - $('#newBundle').modal("hide"); - } - }) - .modal('show'); + .modal({ + closable: true, + onDeny: function () { + $('#newBundle').modal("hide"); + return false; + }, + onApprove: function () { + emit("admin.createBundle", { "dir": $("#newBundleDirName").val(), "bundle": $("#newBundleName").val() }); + $("#newBundleDirName").val(""); + $("#newBundleName").val(""); + $('#newBundle').modal("hide"); + } + }) + .modal('show'); } @@ -281,38 +275,38 @@ function emit(eventName, data) { } /** - * - * @param {display~serverOptions} serverOptions - */ +* +* @param {display~serverOptions} serverOptions +*/ function updateControls(serverOptions) { - + if (serverOptions.blackout) { $('#blackout').removeClass('basic'); } else { $('#blackout').addClass('basic'); } - + if (serverOptions.displayTime) { $('#toggleTime').removeClass('basic'); } else { $('#toggleTime').addClass('basic'); } - + if (serverOptions.isStreaming) { $('#stream').removeClass('basic'); } else { $('#stream').addClass('basic'); } - + if (serverOptions.loop) { $('#play').addClass('green'); $('#pause').removeClass('orange'); - + } else { $('#play').removeClass('green'); $('#pause').addClass('orange'); } - + } function updateSlides(slides) { @@ -331,7 +325,7 @@ function updateSlides(slides) { iconStatus = "play"; currentIndex = index; } - + let statusHtml = ``; if (slide.epochStart != -1) { let d = new Date(slide.epochStart); @@ -343,33 +337,33 @@ function updateSlides(slides) { let isoStr = d.toLocaleDateString() + " " + d.toLocaleTimeString(); statusHtml += ` ${isoStr}`; } - - let toggleButton = ``; + + let toggleButton = ``; if (slide.epochEnd != -1 && slide.epochStart != -1) { toggleButton = ``; } - - - - + + + + output += `
-
- - - - ${toggleButton} -
-
- ${slide.name}
- ${statusHtml} -
+
+ + + + ${toggleButton} +
+
+ ${slide.name}
+ ${statusHtml} +
`; - + index += 1; } - + $("#bundleSlides").html(output); $('#bundleSlides').children().css("border", "1px solid black"); $('#' + serverOptions.currentFile).css("border", "1px solid #1ebc30"); @@ -385,7 +379,7 @@ function updateSlides(slides) { cancelcssclass: 'ui tiny basic negative button', submitcssclass: 'ui tiny basic positive button', }); - + } function editBundleProperties(bundle) { window.open("/admin/edit/bundleProperties?bundle=" + bundle, '_blank', 'width=400,height=800,scrollbars=yes,status=no,location=no'); @@ -397,14 +391,14 @@ function editBundleSlides(name) { function changeBundle(name) { if (confirm(askMessage) == true) { - emit("admin.setBundle", {bundle: name}); + emit("admin.setBundle", { bundle: name }); } return true; } function remove(uuid) { let obj = { bundleName: serverOptions.currentBundle, uuid: uuid }; - + if (confirm("Really delete slide?")) { emit('admin.removeSlide', obj); } @@ -418,9 +412,9 @@ function forceReload() { function sortByName(a, b) { if (a.name < b.name) - return -1; + return -1; if (a.name > b.name) - return 1; + return 1; return 0; } diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 314595d..a24cbf4 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -158,7 +158,7 @@ iframe { 50% { opacity: 1; } - + 25%, 100%, to { @@ -172,7 +172,7 @@ iframe { 50% { opacity: 1; } - + 25%, 100%, to { @@ -197,6 +197,14 @@ canvas { width: inherit !important; height: inherit !important; } + +#statusMessageAdmin { + color: white; + background-color: #0f0f10 !important; + border: 2px solid black; + border-radius: 4px; +} + #statusMessageOuter { z-index: 11; width: 100vw; @@ -205,7 +213,7 @@ canvas { height: 15vh; position: absolute; display: flex; - align-content: center; + align-items: center; bottom: 1vw; left: 0; background: rgba(0, 0, 0, 0.8); diff --git a/views/admin/dashboard.twig b/views/admin/dashboard.twig index 1582aa3..acca670 100644 --- a/views/admin/dashboard.twig +++ b/views/admin/dashboard.twig @@ -107,18 +107,12 @@
-
-

YouTube

-
- - -
{{ t("actions.play") }}
-
- +

{{ t("admin.dashboard.statusMessage") }}

- -
{{ t("actions.set") }}
+ + +