announce enhancements

modules/admin.js

@@ -199,11 +199,14 @@ class admin {
 
             // override
             socket.on('admin.override', function (data) {
-                let view = getView(parseInt(data.displayId));
-                console.log(data.duration);
+                try {
+                    let view = getView(parseInt(data.displayId));
+                    view.overrideSlide(data.json, data.png, data.duration);
 
-                view.overrideSlide(data.json, data.png, data.duration);
-                view.displayCurrentSlide();
+                    view.displayCurrentSlide();
+                } catch (err) {
+                    cli.error("error, admin.override", err);
+                }
             });
 
             socket.on('admin.setBundle', function (data) {

public/js/display.js

@@ -142,6 +142,7 @@ socket.on('callback.reloadImage', function (data) {
 socket.on('callback.announce', function (data) {
     checkBlackout();
     nextSlide(data);
+
 });
 
 socket.on('callback.forceSlide', function (data) {
@@ -203,7 +204,8 @@ function nextSlide(data) {
         $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
         $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
         $("#slider").show();
-
+        $("#slider").addClass();
+        $("#helperLayer").addClass("announce");
         try {
             var randomId = uuidv4();
             var image = new Image();
@@ -216,7 +218,7 @@ function nextSlide(data) {
             console.log(err);
         }
     } else {
-
+        $("#helperLayer").removeClass("announce");
         switch (serverOptions.currentMeta.type) {
             case "webpage":
                 $("#slider").hide();

public/js/edit.js

@@ -183,6 +183,7 @@ socket.on('callback.edit', function (data) {
     console.log(data.slideData.displayTime);
 
     $("#override").checkbox('set unchecked');
+
     if (data.slideData.displayTime !== null) {
         $("#override").checkbox('set checked');
         if (data.slideData.displayTime) {
@@ -421,15 +422,23 @@ function removeSelectedObjects() {
 }
 
 function cueSlide() {
+    if (displayId !== null) {
+        if (confirm('Force display of the current slide?')) {
+            var duration = null;
+            if ($.isNumeric($("#duration").val())) {
+                duration = parseFloat($("#duration").val());
+            }
 
-    if (confirm('Force display of the current slide?')) {
-        var duration = null;
-        if ($.isNumeric($("#duration").val())) {
-            duration = parseFloat($("#duration").val());
+            let obj = {
+                json: canvas.toJSON(['id']),
+                png: canvas.toDataURL('png'),
+                displayId: displayId,
+                duration: duration
+            };
+            socket.emit("admin.override", obj);
         }
-
-        let obj = {json: canvas.toJSON(['id']), png: canvas.toDataURL('png'), displayId: displayId, duration: duration};
-        socket.emit("admin.override", obj);
+    } else {
+        alert("Can't find display to announce");
     }
 }
 
@@ -482,8 +491,6 @@ function saveAsFullScreenImage(name = "untitled", imageData) {
     canvas.clear();
     canvas.setBackgroundImage(null, null, null);
 
-    console.log(imageData);
-
     fabric.Image.fromURL(imageData, function (bgImage) {
 
         var canvasAspect = canvas.width / canvas.height;

public/stylesheets/style.css

@@ -95,13 +95,24 @@ iframe {
 
 #blackoutLayer {
     position: fixed;
-    background: black;
     opacity: 0;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 100;
+    background: black;
+}
+
+#helperLayer {
+    position: fixed;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 70;
+    background: white;
 }
 
 #bundleSlides .item, #allBundles .item {
@@ -137,7 +148,9 @@ iframe {
     -ms-transform: translateZ(0);
     -o-transform: translateZ(0);
     transform: translateZ(0);
+}
 
+.opacity {
     -moz-transition: opacity 2s !important;
     -webkit-transition: opacity 2s !important;
     -o-transition: opacity 2s !important;
@@ -159,3 +172,39 @@ iframe {
     opacity: 0;
 }
 
+@-webkit-keyframes announce {
+    from,
+    50% {
+        opacity: 1;
+    }
+
+    25%,
+    75%,
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes announce {
+    from,
+    50%
+    {
+        opacity: 1;
+    }
+
+    25%,
+    75%,
+    to {
+        opacity: 0;
+    }
+}
+
+.announce {
+    -moz-transition: opacity 3s !important;
+    -webkit-transition: opacity 3s !important;
+    -o-transition: opacity 3s !important;
+    transition: opacity 3s !important;
+    -webkit-animation-name: announce;
+    animation-name: announce;
+}
+

routes/admin.js

@@ -27,7 +27,8 @@ module.exports = function (websocket) {
     router.get('/edit/slide', function (req, res, next) {
         let bundle = req.query['bundle'];
         let file = req.query['file'];
-        let displayId = req.query['displayId'] || null;
+        let displayId = req.query['displayId'];
+
         res.render('admin/editSlide', {config: config, bundle: bundle, displayId: displayId, file: file});
     });
 

views/admin/editSlide.twig

@@ -6,7 +6,7 @@
     <script>
         var bundle = "{{ bundle }}";
         var file = "{{ file }}";
-        {% if displayId %}
+        {% if displayId != null %}
         var displayId = {{ displayId }};
         {% else %}
         var displayId = null;

views/display.twig

@@ -14,13 +14,13 @@
 {% endblock %}
 
 {% block body %}
-    <div id="blackoutLayer" class="animated">
-
-    </div>
+    <div id="blackoutLayer" class="animated"></div>
 
     <div id="time" class="noselect animated">00:00</div>
     <div id="networkstatus" class="noselect animated"><i class="spinner loading icon"></i></div>
 
+    <div id="helperLayer" class="gpu"></div>
+
     <iframe id="webLayer0" scrolling="no" class="web fsimage animated"></iframe>
     <iframe id="webLayer1" scrolling="no" class="web fsimage animated"></iframe>
 

views/liteDisplay.twig

@@ -15,15 +15,17 @@
 
 {% block body %}
 
-    <div id="blackoutLayer" class="gpu"></div>
+    <div id="blackoutLayer" class="gpu opacity"></div>
+
+    <div id="helperLayer" class="gpu animated"></div>
 
     <iframe id="webLayer0" class="web fsimage animated"></iframe>
     <iframe id="webLayer1" class="web fsimage animated"></iframe>
 
-    <div id="layer0" class="fsimage gpu" style="z-index: 10;">
+    <div id="layer0" class="fsimage gpu opacity" style="z-index: 10;">
         <img id="img0" style="width: 100%;"/>
     </div>
-    <div id="layer1" class="fsimage gpu" style="z-index: 10;">
+    <div id="layer1" class="fsimage gpu opacity" style="z-index: 10;">
         <img id="img1" style="width: 100%;"/>
     </div>