adds clear button to status text, removed non-working youtube display.

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.");
-}
+    });        
+}
+
+console.log(`Copying .env`);
+fs.cpSync(`./.env.example`, `./dist/.env`);
+console.log("Packaged infoscreen3 to /dist");

locales/en/translation.json

@@ -20,6 +20,7 @@
     "paste": "Paste",
     "edit": "Edit",
     "set": "Set",
+    "clear": "Clear",
     "play": "Play",
     "blackout": "Blackout",
     "displayTime": "Display Time",

locales/fi/translation.json

@@ -20,6 +20,7 @@
     "copy": "Kopio",
     "paste": "Liitä",
     "set": "Aseta",
+    "clear": "Tyhjennä",
     "play": "Toista",
     "blackout": "Tummenna",
     "displayTime": "Näytä aika",

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("<br>", "\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 += `
         <div class="ui green message item" id="bundle_${simpleHash(bundle.dir)}">
-            <div class="ui right floated content" style="width: fit-content;">
-                <button class="ui small basic inverted icon button" onclick="editBundleProperties('${bundle.dir}')"><i class="edit icon"></i></button>
-                <button class="ui small basic inverted icon button" onclick="editBundleSlides('${bundle.dir}')"><i class="list icon"></i></button>
-                <button class="ui small basic inverted icon button" onclick="changeBundle('${bundle.dir}')"><i class="play icon"></i></button>
-            </div>
-            <div class="content">
-                <div>${bundle.name}</div>
-            </div>
+        <div class="ui right floated content" style="width: fit-content;">
+        <button class="ui small basic inverted icon button" onclick="editBundleProperties('${bundle.dir}')"><i class="edit icon"></i></button>
+        <button class="ui small basic inverted icon button" onclick="editBundleSlides('${bundle.dir}')"><i class="list icon"></i></button>
+        <button class="ui small basic inverted icon button" onclick="changeBundle('${bundle.dir}')"><i class="play icon"></i></button>
+        </div>
+        <div class="content">
+        <div>${bundle.name}</div>
+        </div>
         </div>`;
     }
-
+    
     $('#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", "<br>"));
 }
 
-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 += ` <i class="delete icon"></i> ${isoStr}`;
         }
-
-        let toggleButton =  `<i class="large toggle ${status} icon" onclick="emit('controls.toggle', {fileName: '${slide.uuid}'} );"></i>`;
+        
+        let toggleButton = `<i class="large toggle ${status} icon" onclick="emit('controls.toggle', {fileName: '${slide.uuid}'} );"></i>`;
         if (slide.epochEnd != -1 && slide.epochStart != -1) {
             toggleButton = `<i class="large icon"></i>`;
         }
-
-
-
-
+        
+        
+        
+        
         output += `
         <div class="ui ${color} message item" id="${slide.uuid}">
-            <div class="right floated content">
-                <button class="ui small basic inverted icon button" onclick="editSlide('${slide.uuid}', '${slide.type}');"><i class="edit outline icon"></i></button>
-                <button class="ui small basic inverted icon button" onclick="emit('controls.skipTo', {fileName: '${slide.uuid}'} );"><i class="step forward icon"></i></button>
-             <!--   <button class="ui small basic inverted icon button" onclick="remove('${slide.uuid}');"><i class="delete icon"></i></button> -->
-               ${toggleButton}
-            </div>
-            <div class="content">
-                <span class="editable">${slide.name}</span><br>
-                ${statusHtml}
-            </div>
+        <div class="right floated content">
+        <button class="ui small basic inverted icon button" onclick="editSlide('${slide.uuid}', '${slide.type}');"><i class="edit outline icon"></i></button>
+        <button class="ui small basic inverted icon button" onclick="emit('controls.skipTo', {fileName: '${slide.uuid}'} );"><i class="step forward icon"></i></button>
+        <!--   <button class="ui small basic inverted icon button" onclick="remove('${slide.uuid}');"><i class="delete icon"></i></button> -->
+        ${toggleButton}
+        </div>
+        <div class="content">
+        <span class="editable">${slide.name}</span><br>
+        ${statusHtml}
+        </div>
         </div>
         `;
-
+        
         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;
 }
 

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);

views/admin/dashboard.twig

@@ -107,18 +107,12 @@
                     </div>
 
                 <div class="row">
-                    <div class="ui inverted segment">
-                         <h4>YouTube</h4>
-                        <div class="ui fluid left icon inverted action input">
-                        <i class="ui red youtube icon"></i>
-                        <input style="background: #444;" id="youtubeId" value="" placeholder="Youtube Url" />
-                        <div class="ui small green button" onclick="playYoutubeVideo();">{{ t("actions.play") }}</div>
-                        </div>
-
+                    <div class="ui inverted segment">                    
                         <h4> {{ t("admin.dashboard.statusMessage") }}</h4>
                         <div class="ui fluid grey inverted action input">
-                        <input style="background: #444;" id="statusMessageAdmin" value="" placeholder="{{ t("admin.dashboard.statusMessage") }}" />
-                        <div class="ui small green button" onclick="setStatusMessage();">{{ t("actions.set") }}</div>
+                        <textarea style="width: 100%;" id="statusMessageAdmin" placeholder="{{ t("admin.dashboard.statusMessage") }}" data-max="2"></textarea>
+                        <button class="ui small green button" onclick="setStatusMessage();">{{ t("actions.set") }}</button>
+                        <button class="ui small red button" onclick="clearStatusMessage();">{{ t("actions.clear") }}</button>
                     </div>
                 </div>
             </div>