web: add a button to reconnect to OBS

rkdarst · rkdarst · commit f55118914272 · 2025-06-02T20:15:52.000+03:00
diff --git a/web/annunciators.html b/web/annunciators.html
@@ -33,6 +33,7 @@
     </div>
 
     <!--<div class="status">Status is updated here</div>-->
+    <button class="reconnect-button" style="display: none" onclick="obs_init()">Reconnect</button>
     <!--<span class="synced" syncwith="scene">Scene</span>-->
     <!--<span class="synced" syncwith="ss_resolution">Resolution</span>-->
 
diff --git a/web/director.html b/web/director.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
   <head>
-    <title>OBS CR control</title>
+    <title>OBS CR control (director)</title>
     <meta charset="UTF-8">
     <script src="https://cdn.jsdelivr.net/npm/obs-websocket-js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
@@ -33,6 +33,7 @@
     </div>
 
     <div class="status">Status is updated here</div>
+    <button class="reconnect-button" style="display: none" onclick="obs_init()">Reconnect</button>
     <!--<span class="synced" syncwith="scene">Scene</span>-->
     <!--<span class="synced" syncwith="ss_resolution">Resolution</span>-->
 
diff --git a/web/small.html b/web/small.html
@@ -33,6 +33,7 @@
     </div>
 
     <!--<div class="status">Status is updated here</div>-->
+    <button class="reconnect-button" style="display: none" onclick="obs_init()">Reconnect</button>
     <!--<span class="synced" syncwith="scene">Scene</span>-->
     <!--<span class="synced" syncwith="ss_resolution">Resolution</span>-->
 
diff --git a/web/tablet.html b/web/tablet.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
   <head>
-    <title>OBS CR control (small)</title>
+    <title>OBS CR control (tablet)</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <!-- boostrap -->
@@ -73,6 +73,9 @@
               <div>Playfile timer:</div>
               <span class="playfile timer centered" title="Timer for ongoing playback">-</span>
             </div>
+            <div class="reconnect-button" style="display: none">
+              <button class="centered" onclick="obs_init()">Reconnect</button>
+            </div>
             <div style="font-size: 75%;">
               <div>Status:</div>
               <span class="status">Status</span>
diff --git a/web/util.js b/web/util.js
@@ -326,7 +326,9 @@ async function obs_init () {
     }
 
     // Create a new OBS WebSocket instance
-    globalThis.obs = new OBSWebSocket();
+    if (globalThis.obs === undefined) {
+        globalThis.obs = new OBSWebSocket();
+    }
     update_status(`Trying to connect to ${url}`)
 
     try {
@@ -341,17 +343,22 @@ async function obs_init () {
     forEach('.ssl-warning', div => {
         div.style['display'] = 'none'
     })
+    forEach('.reconnect-button', x => {x.style.display = 'none'})
     // Poll to keep the connection alive
     globalThis.obs_pinger = setInterval(async function() {console.log("Connection ping: ", (await obs.call('GetVersion')).obsVersion)},
                 60000);
-    obs.on('ConnectionClosed', e => { update_status(`OBS Disconnected (closed)!: ${e}`); obs_reconnect(); } )
-    obs.on('ConnectionError', e => { update_status(`OBS Disconnected (error)!: ${e}`); obs_reconnect(); } )
+    obs.on('ConnectionClosed', e => { obs_disconnected(e) } )
+    obs.on('ConnectionError', e => { obs_disconnected(e) } )
 }
 
-async function obs_reconnect(n) {
+async function obs_disconnected(e) {
     if (obs_pinger) {
         clearInterval(obs_pinger)
     }
+    update_status(`OBS Disconnected (closed)!: ${e}`)
+    forEach('.reconnect-button', x => {x.style.display = ''})
+}
+async function obs_reconnect(n) {
     return  // disabled
     append_status("Reconnecting in 5s...")
     setTimeout(obs_init, 5000)
