From 188e71d04e585a7f1b6c93eaeca62edf9de83036 Mon Sep 17 00:00:00 2001
From: Reaby <petri.jarvisalo@gmail.com>
Date: Thu, 14 May 2020 00:14:18 +0300
Subject: [PATCH] fixes stream overlay

---
 plugins/overlay/plugin.js | 2 +-
 public/js/display.js      | 8 +++++---
 views/display.twig        | 5 ++++-
 views/layout/view.twig    | 6 ++++++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/plugins/overlay/plugin.js b/plugins/overlay/plugin.js
index c872d62..6859308 100644
--- a/plugins/overlay/plugin.js
+++ b/plugins/overlay/plugin.js
@@ -7,7 +7,7 @@ class overlayPlugin extends plugin {
         html, body {
             background: none;
         }
-        video, #bg {
+        #bg, #bgvid {
             visibility: hidden !important;
         }
         </style>`;
diff --git a/public/js/display.js b/public/js/display.js
index 3f30607..bf85004 100644
--- a/public/js/display.js
+++ b/public/js/display.js
@@ -340,9 +340,10 @@ function showBackgroundOnly() {
 }
 
 function checkStream(serverOptions) {
-    if (serverOptions.isStreaming && streamStarted === false) {
+    if (serverOptions.isStreaming) {
         if (flvjs.isSupported()) {
-            var videoElement = document.getElementById('bgvid');
+            $("#stream").show();
+            var videoElement = document.getElementById('stream');        
             flvPlayer = flvjs.createPlayer({
                 type: 'flv',
                 url: serverOptions.streamSource
@@ -352,10 +353,10 @@ function checkStream(serverOptions) {
                 flvPlayer.volume = videoVolume;
                 flvPlayer.load();
                 flvPlayer.play();
-                showBackgroundOnly();
                 streamStarted = true;
                 return true;
             } catch (err) {
+                $('#stream').hide();
                 console.log(err);
                 streamStarted = false;
                 return false;
@@ -373,6 +374,7 @@ function checkStream(serverOptions) {
             }
             return false;
         }
+        $("#stream").hide();
         return false;
     }
     return true;
diff --git a/views/display.twig b/views/display.twig
index 5db9fb6..ebdecfa 100644
--- a/views/display.twig
+++ b/views/display.twig
@@ -24,6 +24,8 @@
     
 
     <div id="networkstatus" class="noselect animated"><i class="spinner loading icon"></i></div>
+    
+    <video id="stream" class="fsimage" poster=""></video>
 
     <div id="helperLayer" class="gpu animated"></div>
 
@@ -38,7 +40,8 @@
         <img id="bgimg" class="fsimage" src="/img/wait.png"/>
     </div>
 
-    <video loop autoplay id="bgvid" class="fsimage" poster=""></video>
+    <video loop autoplay id="bgvid" class="fsimage" poster="">
+    </video>
 
     <script>
         var socket = io("{{ config.serverUrl }}:{{ config.serverListenPort }}/display-{{ displayId }}");
diff --git a/views/layout/view.twig b/views/layout/view.twig
index 169388e..419540b 100644
--- a/views/layout/view.twig
+++ b/views/layout/view.twig
@@ -10,6 +10,12 @@
             background: #000;
             height: 100vh;
         }
+        #stream {
+            display: none;
+            z-index: 100;
+            height: 100vh;
+            width: 100vw;
+        }
     </style>
 
     {% block header %}{% endblock %}