studio/flamenco
studio/flamenco
12
30
Fork 38
Code Issues 63 Pull Requests 5 Releases Wiki Activity

Fix #99410: SocketIO Reconnect Web Interface #104235

Merged
Sybren A. Stüvel merged 8 commits from Evelinealy/flamenco:socketio-web-interface into main 2023-07-21 17:16:51 +02:00
Conversation 3 Commits 8 Files Changed 1 +25 -2
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eaf6fd3148 - Show all commits

27
web/app/src/App.vue
View File

@ -14,7 +14,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<api-spinner /> <api-spinner />
<span class="app-version"> <span class="app-version">
<a :href="backendURL('/flamenco3-addon.zip')">add-on</a> <a :href="backendURL('/flamenco3-addon.zip')">add-on</a>
| <a :href="backendURL('/api/v3/swagger-ui/')">API</a> | <a :href="backendURL('/api/v3/swagger-ui/')">API</a>
@ -28,8 +28,11 @@
import * as API from '@/manager-api'; import * as API from '@/manager-api';
import { getAPIClient } from "@/api-client"; import { getAPIClient } from "@/api-client";
import { backendURL } from '@/urls'; 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_NAME = "Flamenco";
const DEFAULT_FLAMENCO_VERSION = "unknown"; const DEFAULT_FLAMENCO_VERSION = "unknown";
@ -38,6 +41,8 @@ export default {
name: 'App', name: 'App',
components: { components: {
ApiSpinner, ApiSpinner,
UpdateListener,
ConnectionStatus
}, },
data: () => ({ data: () => ({
flamencoName: DEFAULT_FLAMENCO_NAME, flamencoName: DEFAULT_FLAMENCO_NAME,
@ -47,6 +52,14 @@ export default {
mounted() { mounted() {
window.app = this; window.app = this;
this.fetchManagerInfo(); this.fetchManagerInfo();
const sockStatus = useSocketStatus();
this.$watch(() => sockStatus.isConnected, (isConnected) => {
if (isConnected) {
dr.sybren marked this conversation as resolved
Sybren A. Stüvel commented 2023-07-20 11:32:50 +02:00
Review
Copy Link

This should also check sockStatus.wasEverDisconnected, otherwise it'll also respond to the initial connection.

This should also check `sockStatus.wasEverDisconnected`, otherwise it'll also respond to the initial connection.
this.socketIOReconnect();
}
});
}, },
methods: { methods: {
// TODO: also call this when SocketIO reconnects. // TODO: also call this when SocketIO reconnects.
@ -57,6 +70,16 @@ export default {
this.flamencoVersion = version.version; 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> </script>