web/app/src/App.vue

@@ -14,7 +14,7 @@
         </li>
       </ul>
     </nav>
-    <api-spinner />
+    <api-spinner /> 
     <span class="app-version">
       <a :href="backendURL('/flamenco3-addon.zip')">add-on</a>
       | <a :href="backendURL('/api/v3/swagger-ui/')">API</a>
@@ -28,8 +28,11 @@
 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';
+import UpdateListener from '@/components/UpdateListener.vue';
+import ConnectionStatus from '@/components/ConnectionStatus.vue';
 
 const DEFAULT_FLAMENCO_NAME = "Flamenco";
 const DEFAULT_FLAMENCO_VERSION = "unknown";
@@ -38,6 +41,8 @@ export default {
   name: 'App',
   components: {
     ApiSpinner,
+    UpdateListener,
+    ConnectionStatus
   },
   data: () => ({
     flamencoName: DEFAULT_FLAMENCO_NAME,
@@ -47,6 +52,14 @@ export default {
   mounted() {
     window.app = this;
     this.fetchManagerInfo();
+
+    const sockStatus = useSocketStatus();
+    this.$watch(() => sockStatus.isConnected, (isConnected) => {
+      if (isConnected) {
+        this.socketIOReconnect();
+      }
+    });
+
   },
   methods: {
     // TODO: also call this when SocketIO reconnects.
@@ -57,6 +70,16 @@ export default {
         this.flamencoVersion = version.version;
       })
     },
+
+    socketIOReconnect() {
+      this.fetchManagerInfo()
+      if (this.flamencoVersion !== DEFAULT_FLAMENCO_VERSION || this.flamencoName !== DEFAULT_FLAMENCO_NAME ) {
+        console.log(`Upgraded Flamenco Version: ${this.flamencoVersion}`);
+
+        // Reload the page
+        location.reload();
+      }
+    }
   },
 }
 </script>