minor design update for index page.

app/library/HttpSocket.py

@@ -55,7 +55,7 @@ class HttpSocket(Common):
             async_handlers=True,
             async_mode="aiohttp",
             cors_allowed_origins=[],
-            transports=["websocket"],
+            transports=["websocket", "polling"],
             logger=self.config.debug,
             engineio_logger=self.config.debug,
             ping_interval=10,

ui/components/History.vue

@@ -336,23 +336,13 @@
       </LateLoader>
     </div>
 
-    <div class="content has-text-centered" v-if="!hasItems">
+    <div class="columns is-multiline" v-if="!hasItems">
-      <p v-if="socket.isConnected">
+      <div class="column is-12">
-        <span class="icon-text">
+        <Message message_class="has-background-success-90 has-text-dark" title="No records in history."
-          <span class="icon has-text-success">
+          icon="fas fa-circle-check" v-if="socket.isConnected" />
-            <i class="fa-solid fa-circle-check" />
+        <Message message_class="has-background-info-90 has-text-dark" title="Connecting.." icon="fas fa-spinner fa-spin"
-          </span>
+          v-else />
-          <span>No records.</span>
+      </div>
-        </span>
-      </p>
-      <p v-else>
-        <span class="icon-text">
-          <span class="icon">
-            <i class="fa-solid fa-spinner fa-spin" />
-          </span>
-          <span>Connecting...</span>
-        </span>
-      </p>
     </div>
 
     <div class="modal is-active" v-if="video_item">

ui/components/Queue.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="mt-3 is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
+  <h1 class="mt-3 is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue" v-if="hasQueuedItems">
     <span class="icon-text title is-4">
       <span class="icon">
         <i class="fas" :class="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
@@ -218,24 +218,6 @@
       </LateLoader>
     </div>
 
-    <div class="content has-text-centered" v-if="!hasQueuedItems">
-      <p v-if="socket.isConnected">
-        <span class="icon-text">
-          <span class="icon has-text-success">
-            <i class="fa-solid fa-circle-check" />
-          </span>
-          <span>No queued items.</span>
-        </span>
-      </p>
-      <p v-else>
-        <span class="icon-text">
-          <span class="icon">
-            <i class="fa-solid fa-spinner fa-spin" />
-          </span>
-          <span>Connecting...</span>
-        </span>
-      </p>
-    </div>
 
     <div class="modal is-active" v-if="embed_url">
       <div class="modal-background" @click="embed_url = ''"></div>

ui/nuxt.config.ts

@@ -2,7 +2,7 @@ import path from "path";
 
 let extraNitro = {}
 try {
-  const API_URL = import.meta.env.NUXT_API_URL;
+  const API_URL = process.env.NUXT_API_URL;
   if (API_URL) {
     extraNitro = {
       devProxy: {
@@ -31,7 +31,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       APP_ENV: process.env.APP_ENV || "production",
-      wss: process.env.VUE_APP_BASE_URL ?? '',
+      wss: process.env.NUXT_PUBLIC_WSS ?? '',
       sentry: process.env.NUXT_PUBLIC_SENTRY_DSN ?? '',
     }
   },
@@ -67,7 +67,7 @@ export default defineNuxtConfig({
 
   nitro: {
     output: {
-      publicDir: path.join(__dirname, 'dev' == process.env.APP_ENV ? 'dist' : 'exported')
+      publicDir: path.join(__dirname, 'dev' === process.env.APP_ENV ? 'dist' : 'exported')
     },
     ...extraNitro,
   },

ui/package.json

@@ -11,19 +11,19 @@
   },
   "web-types": "./web-types.json",
   "dependencies": {
-    "@pinia/nuxt": "^0.11.0",
+    "@pinia/nuxt": "^0.11.1",
-    "@sentry/nuxt": "^9.24.0",
+    "@sentry/nuxt": "^9.27.0",
     "@vueuse/core": "^13.3.0",
     "@vueuse/nuxt": "^13.3.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
-    "cron-parser": "^5.2.0",
+    "cron-parser": "^5.3.0",
     "cronstrue": "^2.61.0",
     "floating-vue": "^5.2.2",
     "hls.js": "^1.6.5",
     "moment": "^2.30.1",
-    "nuxt": "^3.17.4",
+    "nuxt": "^3.17.5",
-    "pinia": "^3.0.2",
+    "pinia": "^3.0.3",
     "socket.io-client": "^4.8.1",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1",

ui/pages/browser/[...slug].vue

@@ -27,8 +27,7 @@
             </div>
 
             <div class="control">
-              <button class="button is-danger is-light" @click="toggleFilter"
+              <button class="button is-danger is-light" @click="toggleFilter" v-tooltip.bottom="'Filter content'">
-                v-tooltip.bottom="'Filter content'">
                 <span class="icon"><i class="fas fa-filter" /></span>
               </button>
             </div>
@@ -94,7 +93,8 @@
                 <td class="is-text-overflow is-vcentered">
                   <div class="field is-grouped">
                     <div class="control is-text-overflow is-expanded">
-                      <a :href="uri(`/browser/${item.path}`)" v-if="'dir' === item.type" @click.prevent="handleClick(item)">
+                      <a :href="uri(`/browser/${item.path}`)" v-if="'dir' === item.type"
+                        @click.prevent="handleClick(item)">
                         {{ item.name }}
                       </a>
                       <a :href="makeDownload({}, { filename: item.path, folder: '' })"
@@ -126,7 +126,8 @@
         </div>
       </div>
       <div class="column is-12" v-else>
-        <Message title="Loading content" class="is-background-info-80" icon="fas fa-refresh fa-spin" v-if="isLoading">
+        <Message title="Loading content" class="has-background-info-90 has-text-dark" icon="fas fa-refresh fa-spin"
+          v-if="isLoading">
           Loading file browser contents...
         </Message>
         <Message v-else title="No Content" class="is-background-warning-80 has-text-dark"

ui/stores/SocketStore.js

@@ -12,7 +12,7 @@ export const useSocketStore = defineStore('socket', () => {
 
   const connect = () => {
     let opts = {
-      transports: ['websocket'],
+      transports: ['websocket', 'polling'],
       withCredentials: true,
     }