for some reason, people were exposing ytptube directly to internet without any authentication. therefore, we have disabled the console access by default.

app/library/HttpSocket.py

@@ -93,6 +93,10 @@ class HttpSocket(Common):
 
     @ws_event
     async def cli_post(self, sid: str, data):
+        if not self.config.console_enabled:
+            await self.emitter.error("Console is disabled.", to=sid)
+            return
+
         if not data:
             await self.emitter.emit(Events.CLI_CLOSE, {"exitcode": 0}, to=sid)
             return

app/library/config.py

@@ -143,6 +143,9 @@ class Config:
     secret_key: str
     "The secret key to use for the application."
 
+    console_enabled: bool = False
+    "Enable direct access to yt-dlp console."
+
     _manual_vars: tuple = (
         "temp_path",
         "config_path",
@@ -200,6 +203,7 @@ class Config:
         "default_preset",
         "instance_title",
         "sentry_dsn",
+        "console_enabled",
     )
     "The variables that are relevant to the frontend."
 
@@ -353,14 +357,13 @@ class Config:
 
         # save key as bytes.
         if os.path.exists(key_file) and os.path.getsize(key_file) > 5:
-            with open(key_file,"rb") as f:
+            with open(key_file, "rb") as f:
                 self.secret_key = f.read().strip()
         else:
             self.secret_key = os.urandom(32)
             with open(key_file, "wb") as f:
                 f.write(self.secret_key)
 
-
         self.started = time.time()
 
     def _get_attributes(self) -> dict:

ui/assets/css/style.css

@@ -259,3 +259,7 @@ hr {
 .is-pre {
   white-space: pre;
 }
+
+.has-text-bold {
+  font-weight: bold;
+}

ui/layouts/default.vue

@@ -5,9 +5,9 @@
         <NuxtLink class="navbar-item  has-tooltip-bottom" to="/"
           v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
           <span>
-            <span class="icon"> <i class="fas fa-home" /></span>
+            <span class="icon"><i class="fas fa-home" /></span>
-            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'">
+            <span class="has-text-bold" :class="`has-text-${socket.isConnected ? 'success' : 'danger'}`">
-              <b>YTPTube</b>
+              YTPTube
             </span>
             <span v-if="config?.app?.instance_title">: {{ config.app.instance_title }}</span>
           </span>
@@ -18,8 +18,8 @@
 
         <div class="navbar-item is-hidden-tablet">
           <NuxtLink class="button is-dark has-tooltip-bottom" to="/" v-tooltip.bottom="'Downloads'">
-            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'" class="icon"><i
+            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'" class="icon">
-                class="fa-solid fa-home" /></span>
+              <img src="/favicon.ico" /></span>
           </NuxtLink>
         </div>
 
@@ -29,7 +29,7 @@
           </NuxtLink>
         </div>
 
-        <div class="navbar-item" v-if="!config.app.basic_mode">
+        <div class="navbar-item" v-if="!config.app.basic_mode && config.app.console_enabled">
           <NuxtLink class="button is-dark has-tooltip-bottom" to="/console" v-tooltip.bottom="'Terminal'">
             <span class="icon"><i class="fa-solid fa-terminal" /></span>
           </NuxtLink>

ui/pages/console.vue

@@ -77,6 +77,20 @@ watch(() => isLoading.value, async value => {
   focusInput()
 }, { immediate: true })
 
+watch(() => config.app.basic_mode, async () => {
+  if (!config.app.basic_mode) {
+    return
+  }
+  await navigateTo('/')
+})
+
+watch(() => config.app.console_enabled, async () => {
+  if (config.app.console_enabled) {
+    return
+  }
+  await navigateTo('/')
+})
+
 const reSizeTerminal = () => {
   if (!terminal.value) {
     return

ui/pages/presets.vue

@@ -66,10 +66,22 @@ div.is-centered {
               </header>
               <div class="card-content">
                 <div class="content">
-                  <p>
+                  <p class="is-text-overflow">
                     <span class="icon"><i class="fa-solid fa-f" /></span>
                     <span v-text="item.format" />
                   </p>
+                  <p class="is-text-overflow" v-if="item.folder">
+                    <span class="icon"><i class="fa-solid fa-folder" /></span>
+                    <span>{{ calcPath(item.folder) }}</span>
+                  </p>
+                  <p class="is-text-overflow" v-if="item.template">
+                    <span class="icon"><i class="fa-solid fa-file" /></span>
+                    <span>{{ item.template }}</span>
+                  </p>
+                  <p class="is-text-overflow" v-if="item.cookies">
+                    <span class="icon"><i class="fa-solid fa-cookie" /></span>
+                    <span>Has cookies</span>
+                  </p>
                 </div>
               </div>
               <div class="card-content" v-if="item?.raw">
@@ -269,4 +281,14 @@ const copyItem = item => {
 
   return copyText(JSON.stringify(data))
 }
+
+const calcPath = path => {
+  const loc = config.app.download_path || '/downloads'
+
+  if (path) {
+    return loc + '/' + sTrim(path, '/')
+  }
+
+  return loc
+}
 </script>

ui/pages/tasks.vue

@@ -71,21 +71,19 @@ div.is-centered {
               </header>
               <div class="card-content">
                 <div class="content">
-                  <p>
+                  <p class="is-text-overflow">
                     <span class="icon"><i class="fa-solid fa-clock" /></span>
-                    <span>
+                    <span>{{ tryParse(item.timer) }} - {{ item.timer }}</span>
-                      {{ tryParse(item.timer) }} - {{ item.timer }}
-                    </span>
                   </p>
-                  <p>
+                  <p class="is-text-overflow" v-if="item.folder">
                     <span class="icon"><i class="fa-solid fa-folder" /></span>
-                    <span>{{ item.folder ? calcPath(item.folder) : config.app.download_path }}</span>
+                    <span>{{ calcPath(item.folder) }}</span>
                   </p>
-                  <p>
+                  <p class="is-text-overflow" v-if="item.template">
                     <span class="icon"><i class="fa-solid fa-file" /></span>
-                    <span>{{ item.template ? item.template : config.app.output_template }}</span>
+                    <span>{{ item.template }}</span>
                   </p>
-                  <p>
+                  <p class="is-text-overflow">
                     <span class="icon"><i class="fa-solid fa-tv" /></span>
                     <span>{{ item.preset ?? config.app.default_preset }}</span>
                   </p>
@@ -286,7 +284,7 @@ const calcPath = path => {
 }
 
 onMounted(async () => {
-  if (!socket.isConnected){
+  if (!socket.isConnected) {
     return;
   }
   socket.on('status', statusHandler)

ui/stores/ConfigStore.js

@@ -16,6 +16,7 @@ const CONFIG_KEYS = {
     default_preset: 'default',
     instance_title: null,
     sentry_dsn: null,
+    console_enabled: false,
   },
   presets: [
     {