unloads webpage on layer hide

data/default/bundle.json

@@ -1,5 +1,5 @@
 {
-	"displayName": "default nimi testi toimiiko 123",
+	"displayName": "default",
 	"background": "bg.jpg",
 	"duration": 0,
 	"transition": "tiles3d",

public/js/display.js

@@ -43,6 +43,7 @@ $(function () {
 });
 
 var layer = 0;
+var flvPlayer;
 
 /** bundleData
  * @see data/default/bundle.json
@@ -203,6 +204,10 @@ function nextSlide(data) {
     if (serverOptions.isAnnounce) {
         $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
         $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+        setTimeout(function () {
+            clearIFrame(getWebLayer());
+            clearIFrame(getWebLayer(1));
+        }, 2500);
         $("#slider").show();
         $("#slider").addClass();
         $("#helperLayer").addClass("announce");
@@ -233,8 +238,13 @@ function nextSlide(data) {
                     transition = serverOptions.currentMeta.transition;
                 }
 
-                $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
-                $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+                $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn").contents().empty();
+                $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn").contents().empty();
+                setTimeout(function () {
+                    clearIFrame(getWebLayer());
+                    clearIFrame(getWebLayer(1));
+                }, 2500);
+
                 $("#slider").show();
                 window.f.showImageById(serverOptions.currentFile, transition);
                 break;
@@ -435,4 +445,9 @@ function getWebLayer(offset) {
     return "webLayer" + (layer + offset) % 2;
 }
 
+function clearIFrame(elementId) {
+    var frame = document.getElementById(elementId);
+    frame.contentWindow.location.href = "/empty";
+}
+
 

public/js/displayLite.js

@@ -4,6 +4,7 @@ var layer = 0;
  * @see data/default/bundle.json
  *
  **/
+var flvPlayer;
 var connectionTimeoutId;
 var bundleData;
 var serverOptions;
@@ -159,6 +160,11 @@ function nextSlide(data) {
     if (serverOptions.isAnnounce) {
         $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
         $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+        setTimeout(function() {
+            clearIFrame(getLayer());
+            clearIFrame(getLayer(1));
+        }, 1000);
+
         $("#helperLayer").addClass("announce");
         try {
             var randomId = uuidv4();
@@ -178,6 +184,10 @@ function nextSlide(data) {
                 $(elem).show();
                 $("#" + getWebLayer()).addClass("fadeOut").removeClass("fadeIn");
                 $("#" + getWebLayer(1)).addClass("fadeOut").removeClass("fadeIn");
+                setTimeout(function() {
+                    clearIFrame(getLayer());
+                    clearIFrame(getLayer(1));
+                }, 1000);
                 elem.src = "/render/" + serverOptions.currentBundle + "/" + serverOptions.currentFile + ".png";
                 break;
         }
@@ -198,24 +208,29 @@ function nextSlide(data) {
 
 function setBackground(background) {
     background = "/background/" + bundleData.bundleName + "/" + background;
+    if (serverOptions.isStreaming) return;
 
     var video = document.getElementById("bgvid");
     var bg = $("#bg");
     var bgImage = document.getElementById("bgimg");
     if (background.indexOf(".mp4") !== -1) {
+
         if (parseUrl(video.src) !== background) {
-            bg.hide();
-            $(video).show();
+            bg.fadeOut();
             video.src = background;
+            video.load();
             video.play();
+            $(video).show();
         }
     } else {
         if (parseUrl(bgImage.src) !== background) {
             bgImage.src = background;
-            bg.show();
-            $(video).hide();
-            video.src = "";
+            bg.fadeIn();
+            // unload video
             video.pause();
+            video.removeAttribute("src");
+            video.load();
+            $(video).hide();
         }
     }
 }
@@ -302,4 +317,9 @@ function getWebLayer(offset) {
     return "webLayer" + (weblayer + offset) % 2;
 }
 
+function clearIFrame(id) {
+    var frame = document.getElementById(id),
+        frameDoc = frame.contentDocument || frame.contentWindow.document;
+    frameDoc.documentElement.innerHTML = "";
+}
 

routes/index.js

@@ -15,6 +15,10 @@ module.exports = function (websocket, dispatcher) {
         res.render('index', {config: config});
     });
 
+    router.get('/empty', function (req, res, next) {
+        res.render('empty');
+    });
+
     router.get('/display/:id/lite', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         let idx = parseInt(req.params.id);

views/empty.twig

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+    <title></title>
+    <style>
+        html, body {
+            background: none;
+        }
+    </style>
+</head>
+<body>
+</body>
+</html>

views/layout/admin.twig

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>InfoScreen</title>
+    <title>InfoScreen3 - Admin</title>
 
     {% include "assets.twig" %}
     {% block header %}{% endblock %}

views/layout/edit.twig

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="">
 <head>
-    <title>InfoScreen</title>
+    <title>InfoScreen3 - Admin</title>
 
     {% include "assets.twig" %}
     <script src="/js/filereader.js"></script>

views/layout/view.twig

@@ -1,8 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="">
 <head>
     {% include "assets.twig" %}
-
     <style>
         html, body {
             padding: 0;
@@ -12,6 +11,7 @@
             height: 100vh;
         }
     </style>
+
     {% block header %}{% endblock %}
 </head>
 <body style="overflow: hidden;">