adding toggle fullscreen-mode: pressing enter on keyboard and clicking anywhere at display

public/js/display.js

@@ -71,6 +71,27 @@ $(window).bind("resize", function () {
     fixImageSizes();
 });
 
+if (isPreview === 0) {
+    document.addEventListener("keydown", function(e) {
+        if (e.keyCode == 13) {
+            toggleFullScreen();
+        }
+    }, false);
+}
+
+function toggleFullScreen() {  
+    if (isPreview === 0) {
+        if (!document.fullscreenElement) {
+            document.documentElement.requestFullscreen();
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen(); 
+            }
+        }
+    }
+}
+  
+  
 
 function getLayer(offset) {
     if (offset === undefined) offset = 0;

public/js/displayLite.js

@@ -94,10 +94,27 @@ $(function () {
 
 });
 
+
 $(window).bind("resize", function () {
     fixImageSizes();
 });
 
+function toggleFullScreen() {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen(); 
+      }
+    }
+  }
+  
+  document.addEventListener("keydown", function(e) {
+    if (e.keyCode == 13) {
+      toggleFullScreen();
+    }
+  }, false);
+
 
 function getLayer(offset) {
     if (offset === undefined) offset = 0;

routes/index.js

@@ -35,11 +35,13 @@ module.exports = function (pluginManager, websocket, dispatcher) {
     router.get('/display/:id/lite', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         let idx = parseInt(req.params.id);
-        let volume = req.params.videoVolume || 1.;
+        let volume = req.query['videoVolume'] || 1.;
+        let extra = pluginManager.getDisplayAdditions();
         res.render('liteDisplay', {
             config: config,
             display: availableDisplays[idx],
             displayId: idx,
+            extra: extra,
             videoVolume: volume
         });
     });
@@ -47,9 +49,17 @@ module.exports = function (pluginManager, websocket, dispatcher) {
     router.get('/display/:id', function (req, res, next) {
         res.header('Access-Control-Allow-Origin', '*');
         let idx = parseInt(req.params.id);
-        let volume = req.params.videoVolume || 1.;
+        let preview = parseInt(req.query['isPreview']) || 0;
+        let volume = parseFloat(req.query['videoVolume']) || 1.;
         let extra = pluginManager.getDisplayAdditions();
-        res.render('display', { config: config, display: availableDisplays[idx], displayId: idx, videoVolume: volume, extra: extra });
+        res.render('display', { 
+            config: config, 
+            display: availableDisplays[idx], 
+            displayId: idx, 
+            videoVolume: volume, 
+            extra: extra, 
+            isPreview: preview
+        });
     });
 
     router.get('/images/:dir/:name', function (req, res, next) {

views/admin/dashboard.twig

@@ -112,7 +112,7 @@
                 <div class="row">
                     <div id="programContainer" class="ui inverted segment">
                         <h2 class="ui inverted nopadded header currentDisplay"> {{ t("admin.dashboard.program") }} </h2>
-                        <iframe class="nopadded" id="program" src="/display/{{ displayId }}"></iframe>
+                        <iframe class="nopadded" id="program" src="/display/{{ displayId }}?isPreview=1"></iframe>
                     </div>
                 </div>
 

views/display.twig

@@ -13,15 +13,17 @@
 {% endblock %}
 
 {% block body %}
-    <div id="blackoutLayer" class="animated"></div>
+    <div id="blackoutLayer" class="animated" onClick="toggleFullScreen()"></div>
 
     {{ extra }}
     
+    <div id="time" class="noselect animated">00:00</div>
+
     <div id="statusMessageOuter" class="noselect animated">
         <span id="statusMessage"></span>
     </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 animated"></div>
@@ -42,6 +44,7 @@
     <script>
         var socket = io.connect("{{ config.serverUrl }}:{{ config.serverListenPort }}/display-{{ displayId }}");
         var videoVolume = {{ videoVolume }};
+        var isPreview = {{ isPreview }};
     </script>
 
     <script src="/js/display.js"></script>

views/liteDisplay.twig

@@ -15,13 +15,16 @@
 
 {% block body %}
 
-    <div id="blackoutLayer" class="gpu opacity"></div>
+    <div id="blackoutLayer" class="gpu opacity" onclick="toggleFullScreen();"></div>
+    
+    {{ extra }}
 
+    <div id="time" class="noselect delay animated">00:00</div>
+    
     <div id="statusMessageOuter" class="noselect animated">
         <span id="statusMessage"></span>
     </div>
     
-    <div id="time" class="noselect delay animated">00:00</div>
     <div id="networkstatus" class="noselect animated"><i class="spinner loading icon"></i></div>
     
     <div id="helperLayer" class="gpu animated"></div>