always connected websocket, settings revamp

client-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitchautomator-client",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "private": true,
   "homepage": "https://github.com/MrBrax/TwitchAutomator",
   "scripts": {

client-vue/src/App.vue

@@ -17,63 +17,93 @@
             </div>
         </div>
         <job-status ref="jobstatus" />
-        <!-- broken until there's a way to make imported variables reactive
-        <div id="js-status" :class="{ disconnected: websocketConnected }" ref="js-status">
-            <template v-if="websocketObject">
+        <div id="js-status" :class="{ disconnected: websocket && !websocketConnected }" ref="js-status">
+            <template v-if="websocket">
                 {{ websocketConnected ? "Connected" : websocketConnecting ? "Connecting..." : "Disconnected" }}
             </template>
             <template v-else>Disabled</template>
         </div>
-        -->
     </div>
 </template>
 
 <style lang="scss"></style>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, reactive, ref } from "vue";
 
 import SideMenu from "@/components/SideMenu.vue";
 import { useStore } from "./store";
 import type { ApiSettingsResponse } from "@common/Api/Api";
 import JobStatus from "./components/JobStatus.vue";
-import { connectWebsocket, eventListener, WebsocketJSON } from "./websocket";
-import { ChapterUpdateData, EndCaptureData, EndConvertData, JobClear, JobSave, NotifyData, VodRemoved, VodUpdated, WebhookAction, WebhookData } from "@common/Webhook";
+// import { connectWebsocket, eventListener, WebsocketJSON } from "./websocket";
+import { ChapterUpdateData, EndCaptureData, EndConvertData, JobClear, JobSave, NotifyData, VodRemoved, VodUpdated } from "@common/Webhook";
 import { ApiLogLine } from "@common/Api/Client";
 import { parseISO } from "date-fns";
+import { WebsocketJSON } from "./websocket";
+// import websocket from "./websocket";
 
 export default defineComponent({
     name: "App",
     setup() {
         const store = useStore();
         return { store };
     },
-    data() {
+    data(): {
+        errors: string[];
+        websocket: WebSocket | undefined;
+        websocketConnected: boolean;
+        websocketConnecting: boolean;
+        websocketKeepalive: number;
+        websocketKeepaliveTime: number;
+        websocketLastPing: number;
+    } {
         return {
             errors: [],
+            websocket: undefined,
+            websocketConnected: false,
+            websocketConnecting: false,
+            websocketKeepalive: 0,
+            websocketKeepaliveTime: 20 * 1000,
+            websocketLastPing: 0,
+        };
+    },
+    provide() {
+        return {
+            websocket: this.websocket,
         };
     },
     created() {
+        console.debug("App created");
         this.store.fetchClientConfig();
         this.fetchData().then(() => {
             if (this.store.cfg("websocket_enabled") && this.store.clientConfig?.useWebsockets) {
-                connectWebsocket();
+                console.debug("Connecting websocket...");
+                this.connectWebsocket();
+            } else {
+                console.debug("Websocket disabled");
             }
+        }).catch((error) => {
+            console.error("fetchData error", error);
         });
 
+        // this.websocket = connectWebsocket();
+
         // websocket messages
-        const ev = eventListener();
+        // const ev = eventListener();
         // ev.addEventListener("message", this.handleWebsocketMessage);
-        ev.addEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
-        console.debug("Added websocket event listener");
+        // ev.addEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
+        // console.debug("Added websocket event listener");
 
     },
     unmounted() {
-        eventListener().removeEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
+        // eventListener().removeEventListener("message", this.handleWebsocketMessage as unknown as EventListener);
         console.debug("Removed websocket listener");
     },
     mounted() {
-
+        console.log("wsObject", this.websocket);
+        setTimeout(() => {
+            console.log("wsObject", this.websocket);
+        }, 1000);
     },
     methods: {
         async fetchData() {
@@ -111,9 +141,84 @@ export default defineComponent({
             this.store.websocketUrl = data.data.websocket_url;
             this.store.app_name = data.data.app_name;
         },
-        handleWebsocketMessage(event: CustomEvent<WebsocketJSON>) {
+        connectWebsocket(): WebSocket | undefined {
+
+            let websocket_url = "";
+
+            if (this.store.clientConfig?.websocketAddressOverride) {
+                websocket_url = this.store.clientConfig.websocketAddressOverride;
+                console.debug(`Overriding generated websocket URL with client config '${this.store.clientConfig.websocketAddressOverride}'`);
+            } else {
+                if (!this.store.websocketUrl || this.store.websocketUrl == "") {
+                    console.error("No websocket URL found");
+                    return;
+                }
+                websocket_url = this.store.websocketUrl;
+            }
+
+            console.log(`Connecting to ${websocket_url}`);
+            this.websocketConnecting = true;
+            this.websocket = new WebSocket(websocket_url);
+
+            this.websocket.addEventListener("open", (ev: Event) => {
+                console.log(`Connected to websocket!`, ev);
+                if (!this.websocket) return;
+                this.websocket.send(JSON.stringify({ action: "helloworld" }));
+                this.websocketConnected = true;
+                this.websocketConnecting = false;
+                this.websocketKeepalive = setInterval(() => {
+                    if (!this.websocket) return;
+                    this.websocket.send("ping");
+                }, this.websocketKeepaliveTime);
+            });
+
+            this.websocket.addEventListener("message", (ev: MessageEvent) => {
+
+                let text: string = ev.data;
+
+                if (text == "pong") {
+                    // console.log("pong recieved");
+                    this.websocketLastPing = Date.now();
+                    return;
+                }
+
+                let json: WebsocketJSON;
+
+                try {
+                    json = JSON.parse(text);
+                } catch (error) {
+                    console.error("Couldn't parse json", text);
+                    return;
+                }
+
+                this.handleWebsocketMessage(json.action, json.data);
+            });
+
+            this.websocket.addEventListener("error", (ev: Event) => {
+                console.error(`Websocket error!`, ev);
+                this.websocketConnected = false;
+                this.websocketConnecting = false;
+                clearInterval(this.websocketKeepalive);
+            });
+
+            this.websocket.addEventListener("close", (ev: CloseEvent) => {
+                console.log(`Disconnected from websocket! (${ev.code}/${ev.reason})`);
+                this.websocketConnecting = false;
+                setTimeout(() => {
+                    if (!ev.wasClean) {
+                        this.connectWebsocket();
+                    }
+                }, 10000);
+                this.websocketConnected = false;
+                clearInterval(this.websocketKeepalive);
+            });
+
+            return this.websocket;
+
+        },
+        handleWebsocketMessage(action: string, data: any) {
 
-            const { action, data } = event.detail;
+            // const { action, data } = event.detail;
 
             if (action) {
                 if (
@@ -170,6 +275,8 @@ export default defineComponent({
                     const _data: ChapterUpdateData = data;
                     console.log("chapter_update", data);
                     this.store.updateVodFromData(_data.vod);
+                } else {
+                    console.warn("Unknown action", action, data);
                 }
 
                 /*

client-vue/src/assets/_darkmode.scss

@@ -163,4 +163,28 @@
     .input-help {
         color: #bbb;
     }
+
+    .table {
+        &.is-striped {
+            tr {
+                &:nth-child(even) {
+                    background: rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+        &.is-hoverable {
+            tr {
+                &:hover {
+                    background: rgba(255, 255, 255, 0.05);
+                }
+            }
+            &.is-striped {
+                tr:hover {
+                    &:nth-child(even) {
+                        background: rgba(255, 255, 255, 0.15);
+                    }
+                }
+            }
+        }
+    }
 }

client-vue/src/assets/style.scss

@@ -89,20 +89,20 @@ a {
     &.is-striped {
         tr {
             &:nth-child(even) {
-                background: rgba(255, 255, 255, 0.1);
+                background: rgba(0, 0, 0, 0.05);
             }
         }
     }
     &.is-hoverable {
         tr {
             &:hover {
-                background: rgba(255, 255, 255, 0.05);
+                background: rgba(0, 0, 0, 0.03);
             }
         }
         &.is-striped {
             tr:hover {
                 &:nth-child(even) {
-                    background: rgba(255, 255, 255, 0.15);
+                    background: rgba(0, 0, 0, 0.15);
                 }
             }
         }

client-vue/src/components/LogViewer.vue

@@ -42,15 +42,36 @@ export default defineComponent({
         logFromLine: number;
         logVisible: boolean;
         logModule: string;
+        watcher: () => void;
     } {
         return {
             logFilename: "",
             logFilenames: [],
             logFromLine: 0,
             logVisible: false,
             logModule: "",
+            watcher: () => {},
         };
     },
+    mounted() {
+        this.watcher = this.store.$onAction(({ name, store, args, after, onError }) => {
+            if (!args) return;
+            if (name !== "addLog" && name !== "clearLog") return;
+            console.debug("log added, scroll");
+            after(() => {
+                console.debug("log added, scroll after");
+                setTimeout(() => {
+                    this.scrollLog();
+                }, 100);
+            })
+        });
+        setTimeout(() => {
+            this.scrollLog();
+        }, 100);
+    },
+    unmounted() {
+        this.watcher(); // remove listener
+    },
     methods: {
         async fetchLog(clear = false) {
 

client-vue/src/components/forms/FavouritesForm.vue

@@ -7,6 +7,9 @@
                     <span class="is-gray">{{ formatDate(game.added) }}</span>
                 </label>
             </div>
+            <div v-if="!favouritesData || favouritesData.length == 0">
+                <p>No games in cache. When streamers change games, they will be added to the cache.</p>
+            </div>                
         </div>
         <br />
         <div class="control">