From 1f2db7ad5ec8f9f3b9d0aeba94d42533ef7b8986 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Sun, 29 Dec 2024 21:17:17 +0300
Subject: [PATCH] Added option to update page title with stats.

---
 README.md                |  1 +
 app/library/config.py    |  3 +++
 ui/layouts/default.vue   | 10 +++++++++-
 ui/stores/ConfigStore.js |  1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 436edf2b..1420b88e 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ Certain values can be set via environment variables, using the `-e` parameter on
 * __YTP_EXTRACT_INFO_TIMEOUT__: The timeout for extracting video information. Defaults to `70`.
 * __YTP_DB_FILE__: The path to the SQLite database file. Defaults to `{config_path}/ytptube.db`.
 * __YTP_MANUAL_ARCHIVE__: The path to the manual archive file. Defaults to `{config_path}/manual_archive.log`.
+* __YTP_UI_UPDATE_TITLE__: Whether to update the title of the page with the current stats. Defaults to `true`.
 
 ## Running behind a reverse proxy
 
diff --git a/app/library/config.py b/app/library/config.py
index f4c1bdc1..43b16537 100644
--- a/app/library/config.py
+++ b/app/library/config.py
@@ -55,6 +55,7 @@ class Config:
 
     db_file: str = "{config_path}/ytptube.db"
     manual_archive: str = "{config_path}/archive.manual.log"
+    ui_update_title: bool = True
 
     # immutable config vars.
     version: str = APP_VERSION
@@ -144,6 +145,7 @@ class Config:
         "access_log",
         "remove_files",
         "ignore_ui",
+        "ui_update_title",
     )
 
     _frontend_vars: tuple = (
@@ -156,6 +158,7 @@ class Config:
         "started",
         "url_prefix",
         "remove_files",
+        "ui_update_title",
     )
 
     @staticmethod
diff --git a/ui/layouts/default.vue b/ui/layouts/default.vue
index 4c5cf870..e65c48f1 100644
--- a/ui/layouts/default.vue
+++ b/ui/layouts/default.vue
@@ -31,7 +31,7 @@
         </div>
 
         <div class="navbar-item" v-if="config.tasks.length > 0">
-          <NuxtLink  class="button is-dark has-tooltip-bottom" to="/tasks">
+          <NuxtLink class="button is-dark has-tooltip-bottom" to="/tasks">
             <span class="icon"><i class="fa-solid fa-tasks" /></span>
             <span class="is-hidden-mobile">Tasks</span>
           </NuxtLink>
@@ -135,6 +135,14 @@ const applyPreferredColorScheme = scheme => {
 
 onMounted(async () => {
   try {
+    if (config.app.ui_update_title) {
+      const s = useStateStore()
+      useHead({ title: `YTPTube: ( ${Object.keys(s.queue).length || 0} | ${Object.keys(s.history).length || 0} )` })
+      watch([s.queue, s.history], () => {
+        const title = `YTPTube: ( ${Object.keys(s.queue.length) || 0} | ${Object.keys(s.history.length) || 0} )`
+        useHead({ title })
+      })
+    }
     applyPreferredColorScheme(selectedTheme.value)
   } catch (e) {
   }
diff --git a/ui/stores/ConfigStore.js b/ui/stores/ConfigStore.js
index 5afa0d78..93e25ccc 100644
--- a/ui/stores/ConfigStore.js
+++ b/ui/stores/ConfigStore.js
@@ -4,6 +4,7 @@ const CONFIG_KEYS = {
     download_path: '/downloads',
     keep_archive: false,
     remove_files: false,
+    ui_update_title: true,
     output_template: '',
     ytdlp_version: '',
     version: '',