Merge pull request #436 from arabcoders/dev

Fixes issue with simple view and background toggle

Author: arabcoders

API.md

@@ -585,7 +585,8 @@ or on error
       "title": "Example title",
       "archive_id": "generic 1",
       "metadata": {
-        "source_task": "...",
+        "source_id": "...",
+        "source_name": "...",
         "source_handler": "GenericTaskHandler"
       }
     }

Dockerfile

@@ -51,9 +51,12 @@ RUN mkdir /config /downloads && ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime
   ARCH="$(dpkg --print-architecture)" && \
   EXTRA_PACKAGES="" && \
   if [ "$ARCH" = "amd64" ]; then EXTRA_PACKAGES="intel-media-va-driver i965-va-driver libmfx-gen1.2"; fi && \
-  apt-get install -y --no-install-recommends \
+  apt-get install -y --no-install-recommends locales \
   bash mkvtoolnix patch aria2 curl ca-certificates xz-utils git sqlite3 tzdata file libmagic1 vainfo ${EXTRA_PACKAGES} \
-  && useradd -u ${USER_ID:-1000} -U -d /app -s /bin/bash app \
+  && useradd -u ${USER_ID:-1000} -U -d /app -s /bin/bash app && \
+  sed -i -e 's/# en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/' /etc/locale.gen && \
+  dpkg-reconfigure --frontend=noninteractive locales && \
+  update-locale LANG=en_US.UTF-8 \
   && rm -rf /var/lib/apt/lists/*
 
 COPY entrypoint.sh /
@@ -70,6 +73,9 @@ COPY --from=denoland/deno:latest /usr/bin/deno /usr/bin/deno
 COPY --chown=app:app ./healthcheck.sh /usr/local/bin/healthcheck
 
 ENV PATH="/opt/python/bin:$PATH"
+ENV LANG=en_US.UTF-8
+ENV LANGUAGE=en_US:en
+ENV LC_ALL=en_US.UTF-8
 
 RUN chown -R app:app /config /downloads && \
   chmod +x /usr/local/bin/healthcheck /usr/bin/mp4box /usr/bin/ffmpeg /usr/bin/ffprobe /usr/bin/deno

app/library/Tasks.py

@@ -525,6 +525,11 @@ async def _runner(self, task: Task) -> None:
                         "template": template,
                         "cli": cli,
                         "auto_start": task.auto_start,
+                        "extras": {
+                            "source_name": task.name,
+                            "source_id": task.id,
+                            "source_handler": __class__.__name__,
+                        },
                     }
                 )
             )
@@ -778,7 +783,7 @@ async def dispatch(self, task: Task, handler: type | None = None, **kwargs) -> T
                 "template": task.template or "",
                 "cli": task.cli or "",
                 "auto_start": task.auto_start,
-                "extras": {"source_task": task.id, "source_handler": handler.__name__},
+                "extras": {"source_name": task.name, "source_id": task.id, "source_handler": handler.__name__},
             }
         )
 
@@ -876,11 +881,9 @@ async def inspect(
             if extraction.metadata:
                 combined_failure_metadata.update(extraction.metadata)
 
-            failure_error = extraction.error if extraction.error else extraction.message
-
             return TaskFailure(
                 message=extraction.message,
-                error=failure_error,
+                error=extraction.error if extraction.error else extraction.message,
                 metadata=combined_failure_metadata,
             )
 
@@ -918,22 +921,22 @@ def _discover(self) -> list[type]:
         return handlers
 
     async def _handle_item_error(self, event, _name, **_kwargs):
-        item = getattr(event, "data", None)
+        item: ItemDTO | None = getattr(event, "data", None)
         if not isinstance(item, ItemDTO):
             return
 
-        extras = getattr(item, "extras", {}) or {}
-        handler_name = extras.get("source_handler")
+        extras: dict[Any, Any] = getattr(item, "extras", {}) or {}
+        handler_name: Any | None = extras.get("source_handler")
         if not handler_name:
             return
 
-        archive_id = item.archive_id
+        archive_id: str | None = item.archive_id
         if not archive_id:
             return
 
-        queued = self._queued.get(handler_name)
+        queued: set[str] | None = self._queued.get(handler_name)
         if queued:
             queued.discard(archive_id)
 
-        failures = self._failure_count.setdefault(handler_name, {})
+        failures: dict[str, int] = self._failure_count.setdefault(handler_name, {})
         failures[archive_id] = failures.get(archive_id, 0) + 1

app/tests/test_tasks.py

@@ -773,6 +773,11 @@ async def test_tasks_runner_success(
                 "template": "test_template",
                 "cli": "--write-info-json",
                 "auto_start": True,
+                "extras": {
+                    "source_name": "Test Task",
+                    "source_id": "task1",
+                    "source_handler": "Tasks",
+                },
             }
         )
 

ui/app/components/Connection.vue

@@ -0,0 +1,16 @@
+<template>
+  <Message message_class="p-2 m-2 is-success has-background-warning-90 has-text-dark" v-if="status === 'disconnected'">
+    <span class="icon"><i class="fas fa-info-circle" /></span>
+    <span>
+      Connection lost, <NuxtLink class="is-bold" @click.prevent="() => $emit('reconnect')">Click here</NuxtLink>
+      to reconnect.
+    </span>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from '~/components/Message.vue'
+import type { connectionStatus } from '~/stores/SocketStore'
+defineProps<{ 'status': connectionStatus }>()
+defineEmits<{ (e: "reconnect"): void }>()
+</script>

ui/app/components/Settings.vue

@@ -19,8 +19,8 @@
                 </label>
                 <div class="control">
                   <div class="control">
-                    <input id="random_bg" type="checkbox" class="switch is-success" v-model="simpleMode">
-                    <label for="random_bg" class="is-unselectable">
+                    <input id="view_mode" type="checkbox" class="switch is-success" v-model="simpleMode">
+                    <label for="view_mode" class="is-unselectable">
                       &nbsp;{{ simpleMode ? 'Simple View' : 'Regular View' }}
                     </label>
                   </div>

ui/app/components/Simple.vue

@@ -6,8 +6,9 @@
           <label class="label" for="download-url">
             What you would like to download?
             <span class="is-pulled-right">
-              <span class="icon has-text-primary is-pointer" @click="$emit('show_settings')" v-tooltip="'WebUI Settings'"><i
-                  class="fas fa-cogs" /></span>
+              <span class="icon is-pointer" :class="connectionStatusColor" @click="$emit('show_settings')"
+                v-tooltip="'WebUI Settings'">
+                <i class="fas fa-cogs" /></span>
             </span>
           </label>
           <div class="field has-addons">
@@ -542,6 +543,18 @@ const showMessage = (item: StoreItem) => {
   }
   return (item.msg?.length || 0) > 0
 }
+
+const connectionStatusColor = computed(() => {
+  switch (socketStore.connectionStatus) {
+    case 'connected':
+      return 'has-text-success'
+    case 'connecting':
+      return 'has-text-warning fa-spin'
+    case 'disconnected':
+    default:
+      return 'has-text-danger'
+  }
+})
 </script>
 
 <style scoped>

ui/app/layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
 
   <template v-if="simpleMode">
+    <Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
     <Simple @show_settings="() => show_settings = true" />
   </template>
 
@@ -15,14 +16,18 @@
     <Shutdown v-if="app_shutdown" />
     <div id="main_container" class="container" v-else>
       <NewVersion v-if="newVersionIsAvailable" />
+      <Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
       <nav class="navbar is-mobile is-dark">
 
         <div class="navbar-brand pl-5">
           <NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
             v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
             <span class="is-text-overflow">
-              <span class="icon"><i class="fas fa-home" /></span>
-              <span class="has-text-bold" :class="`has-text-${socket.isConnected ? 'success' : 'danger'}`">
+              <span class="icon">
+                <i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
+                <i v-else class="fas fa-home" />
+              </span>
+              <span class="has-text-bold" :class="connectionStatusColor">
                 YTPTube
               </span>
               <span class="has-text-bold" v-if="config?.app?.instance_title">: {{ config.app.instance_title }}</span>
@@ -191,6 +196,7 @@ import Dialog from '~/components/Dialog.vue'
 import Simple from '~/components/Simple.vue'
 import Shutdown from '~/components/shutdown.vue'
 import Markdown from '~/components/Markdown.vue'
+import Connection from '~/components/Connection.vue'
 
 const Year = new Date().getFullYear()
 const selectedTheme = useStorage('theme', 'auto')
@@ -470,4 +476,16 @@ const shutdownApp = async () => {
   }
 }
 
+const connectionStatusColor = computed(() => {
+  switch (socket.connectionStatus) {
+    case 'connected':
+      return 'has-text-success'
+    case 'connecting':
+      return 'has-text-warning'
+    case 'disconnected':
+    default:
+      return 'has-text-danger'
+  }
+})
+
 </script>

ui/app/pages/console.vue

@@ -25,7 +25,7 @@
             <span class="icon">
               <i class="fa-solid fa-desktop" />
             </span>
-            <span class="ml-2">Console Output</span>
+            <span class="ml-2">Output</span>
           </p>
           <p class="card-header-icon">
             <span v-tooltip.top="'Clear console window'" class="icon" @click="clearOutput()">

ui/app/stores/SocketStore.ts

@@ -2,6 +2,8 @@ import { io, type Socket as IOSocket, type SocketOptions, type ManagerOptions }
 import type { ConfigState } from "~/types/config";
 import type { StoreItem } from "~/types/store";
 
+export type connectionStatus = 'connected' | 'disconnected' | 'connecting';
+
 export const useSocketStore = defineStore('socket', () => {
   const runtimeConfig = useRuntimeConfig()
   const config = useConfigStore()
@@ -10,6 +12,7 @@ export const useSocketStore = defineStore('socket', () => {
 
   const socket = ref<IOSocket | null>(null)
   const isConnected = ref<boolean>(false)
+  const connectionStatus = ref<connectionStatus>('disconnected')
 
   const emit = (event: string, data?: any): any => socket.value?.emit(event, data)
   const on = (event: string | string[], callback: (...args: any[]) => void, withEvent: boolean = false) => {
@@ -26,6 +29,24 @@ export const useSocketStore = defineStore('socket', () => {
     event.forEach(e => socket.value?.off(e, callback));
   }
 
+  const reconnect = () => {
+    if (true === isConnected.value) {
+      return;
+    }
+    connect();
+    connectionStatus.value = 'connecting';
+  }
+
+  const disconnect = () => {
+    if (null === socket.value) {
+      return;
+    }
+    socket.value.disconnect();
+    socket.value = null;
+    isConnected.value = false;
+    connectionStatus.value = 'disconnected';
+  }
+
   const connect = () => {
     const opts = {
       transports: ['websocket', 'polling'],
@@ -44,10 +65,18 @@ export const useSocketStore = defineStore('socket', () => {
       window.ws = socket.value;
     }
 
+    connectionStatus.value = 'connecting';
     socket.value = io(url, opts)
 
-    socket.value.on('connect', () => isConnected.value = true);
-    socket.value.on('disconnect', () => isConnected.value = false);
+    socket.value.on('connect', () => {
+      isConnected.value = true
+      connectionStatus.value = 'connected';
+    });
+
+    socket.value.on('disconnect', () => {
+      isConnected.value = false
+      connectionStatus.value = 'disconnected';
+    });
 
     socket.value.on('connected', stream => {
       const json = JSON.parse(stream)
@@ -187,6 +216,10 @@ export const useSocketStore = defineStore('socket', () => {
     connect();
   }
 
-
-  return { connect, on, off, emit, socket, isConnected };
+  return {
+    connect, reconnect, disconnect,
+    on, off, emit,
+    socket, isConnected,
+    connectionStatus: readonly(connectionStatus) as Readonly<Ref<connectionStatus>>,
+  };
 });