From cdf1cff41b45ebeb2b486fb787bee0af3c1cf1c9 Mon Sep 17 00:00:00 2001
From: Eveline Anderson <evelinealy.careers@gmail.com>
Date: Fri, 21 Jul 2023 17:16:49 +0200
Subject: [PATCH] Fix #99410: SocketIO Reconnect Web Interface (#104235)

Fix #99410: Web: fetch version on SocketIO reconnect (and maybe reload)

After losing the SocketIO connection and subsequently reconnecting, the
webapp should re-fetch the Flamenco Manager version and display it in
the top-right corner. If it's different from before, then it will log a
notification about the upgrade and refresh the entire page to ensure the
new version is loaded properly.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104235
---
 web/app/src/App.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 6f9016d4..07b37290 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -28,8 +28,9 @@
 import * as API from '@/manager-api';
 import { getAPIClient } from "@/api-client";
 import { backendURL } from '@/urls';
+import { useSocketStatus } from '@/stores/socket-status';
 
-import ApiSpinner from '@/components/ApiSpinner.vue'
+import ApiSpinner from '@/components/ApiSpinner.vue';
 
 const DEFAULT_FLAMENCO_NAME = "Flamenco";
 const DEFAULT_FLAMENCO_VERSION = "unknown";
@@ -47,6 +48,14 @@ export default {
   mounted() {
     window.app = this;
     this.fetchManagerInfo();
+
+    const sockStatus = useSocketStatus();
+    this.$watch(() => sockStatus.isConnected, (isConnected) => {
+      if (!isConnected) return;
+      if (!sockStatus.wasEverDisconnected) return;
+      this.socketIOReconnect();
+    });
+
   },
   methods: {
     // TODO: also call this when SocketIO reconnects.
@@ -57,6 +66,16 @@ export default {
         this.flamencoVersion = version.version;
       })
     },
+
+    socketIOReconnect() {
+      const metaAPI = new API.MetaApi(getAPIClient())
+      metaAPI.getVersion().then((version) => {
+        if (version.name === this.flamencoName && version.version == this.flamencoVersion)
+          return;
+        console.log(`Updated from ${this.flamencoVersion} to ${version.version}`);
+        location.reload();
+      });
+    },
   },
 }
 </script>