Merge pull request #431 from arabcoders/dev

Add experimental simple view mode

Author: arabcoders

.github/workflows/main.yml

@@ -47,8 +47,10 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Install uv
-        uses: astral-sh/setup-uv@v4
+        uses: astral-sh/setup-uv@v6.7
         with:
+          enable-cache: true
+          save-cache: true
           version: "latest"
 
       - name: Install Python dependencies
@@ -160,7 +162,7 @@ jobs:
           echo "APP_SHA=${SHA}" >> "$GITHUB_ENV"
           echo "APP_DATE=${DATE}" >> "$GITHUB_ENV"
           echo "APP_BRANCH=${BRANCH}" >> "$GITHUB_ENV"
-          
+
           sed -i \
             -e "s/^APP_VERSION = \".*\"/APP_VERSION = \"${VERSION}\"/" \
             -e "s/^APP_COMMIT_SHA = \".*\"/APP_COMMIT_SHA = \"${SHA}\"/" \

app/library/config.py

@@ -45,6 +45,9 @@ class Config(metaclass=Singleton):
     temp_path: str = "/tmp"
     """The path to the temporary directory."""
 
+    simple_mode: bool = False
+    """Enable simple mode."""
+
     temp_keep: bool = False
     """Keep temporary files after the download is complete."""
 
@@ -244,6 +247,7 @@ class Config(metaclass=Singleton):
         "prevent_premiere_live",
         "temp_disabled",
         "allow_internal_urls",
+        "simple_mode",
     )
     "The variables that are booleans."
 
@@ -259,6 +263,7 @@ class Config(metaclass=Singleton):
         "default_preset",
         "instance_title",
         "console_enabled",
+        "simple_mode",
         "browser_control_enabled",
         "file_logging",
         "base_path",

ui/app/assets/css/style.css

@@ -358,6 +358,10 @@ div.is-centered {
   justify-content: center;
 }
 
+.is-overflow-visible {
+  overflow: visible !important
+}
+
 .modal-content-max {
   width: calc(100% - 20px);
   max-width: 1344px;

ui/app/components/ConditionForm.vue

@@ -268,6 +268,7 @@ import { useStorage } from '@vueuse/core'
 import TextareaAutocomplete from '~/components/TextareaAutocomplete.vue'
 import type { AutoCompleteOptions } from '~/types/autocomplete';
 import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
+import {useConfirm} from '~/composables/useConfirm'
 
 const emitter = defineEmits<{
   (e: 'cancel'): void
@@ -410,7 +411,7 @@ const importItem = async (): Promise<void> => {
       return
     }
 
-    if ((form.filter || form.cli || Object.keys(form.extras).length > 0) && !(await box.confirm('Overwrite the current form fields?', true))) {
+    if ((form.filter || form.cli || Object.keys(form.extras).length > 0) && !(await box.confirm('Overwrite the current form fields?'))) {
       return
     }
 

ui/app/components/History.vue

@@ -450,6 +450,7 @@
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 import type { StoreItem } from '~/types/store'
+import {useConfirm} from '~/composables/useConfirm'
 
 const emitter = defineEmits<{
   (e: 'getInfo', url: string, preset: string, cli: string): void
@@ -588,7 +589,7 @@ const deleteSelectedItems = async () => {
   if (true === config.app.remove_files) {
     msg += ' This will remove any associated files if they exists.'
   }
-  if (false === (await box.confirm(msg, config.app.remove_files))) {
+  if (false === (await box.confirm(msg))) {
     return
   }
   for (const key in selectedElms.value) {
@@ -750,7 +751,7 @@ const removeItem = async (item: StoreItem) => {
   if (item.status === 'finished' && config.app.remove_files) {
     msg += ' This will remove any associated files if they exists.'
   }
-  if (false === (await box.confirm(msg, Boolean(item.filename && config.app.remove_files)))) {
+  if (false === (await box.confirm(msg))) {
     return false
   }
 

ui/app/components/NotificationForm.vue

@@ -308,6 +308,7 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import type { notification, notificationImport } from '~/types/notification'
+import {useConfirm} from '~/composables/useConfirm'
 
 const emitter = defineEmits(['cancel', 'submit'])
 const toast = useNotification()
@@ -412,7 +413,7 @@ const importItem = async () => {
     }
 
     if (form.name || form.request?.url) {
-      if (false === (await box.confirm('Overwrite the current form fields?', true))) {
+      if (false === (await box.confirm('Overwrite the current form fields?'))) {
         return
       }
     }

ui/app/components/Queue.vue

@@ -313,6 +313,7 @@
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 import type { StoreItem } from '~/types/store'
+import {useConfirm} from '~/composables/useConfirm'
 
 const emitter = defineEmits<{
   (e: 'getInfo', url: string, preset: string, cli: string): void

ui/app/components/Settings.vue

@@ -12,6 +12,25 @@
           <div class="columns is-multiline">
             <div class="column is-6">
 
+              <div class="field">
+                <label class="label is-unselectable">
+                  <span class="icon"><i class="fa-solid fa-computer" /></span>
+                  Page View
+                </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">
+                      &nbsp;{{ simpleMode ? 'Simple View (Experimental)' : 'Regular View (Default)' }}
+                    </label>
+                  </div>
+                </div>
+                <p class="help is-bold has-text-danger">
+                  <span class="icon"> <i class="fa-solid fa-info-circle" /></span>
+                  The simple view is experimental and will change without notice and maybe even deleted in the future.
+                </p>
+              </div>
+
               <div class="field">
                 <label class="label is-unselectable">Color scheme</label>
                 <div class="control">
@@ -35,7 +54,7 @@
 
               <div class="field">
                 <label class="label is-unselectable">
-                  Backgrounds
+                  Show Background
                   <template v-if="bg_enable">
                     <NuxtLink @click="$emit('reload_bg')" class="is-bold">Reload</NuxtLink>
                     <span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
@@ -44,7 +63,7 @@
                 <div class="control">
                   <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
                   <label for="random_bg" class="is-unselectable">
-                    &nbsp;{{ bg_enable ? 'Enabled' : 'Disabled' }}
+                    &nbsp;{{ bg_enable ? 'Yes' : 'No' }}
                   </label>
                 </div>
               </div>
@@ -59,17 +78,7 @@
                 </div>
               </div>
 
-              <div class="field">
-                <label class="label is-unselectable" for="show_thumbnail">Show Videos Thumbnail when possible</label>
-                <div class="control">
-                  <input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
-                  <label for="show_thumbnail" class="is-unselectable">
-                    &nbsp;{{ show_thumbnail ? 'Enabled' : 'Disabled' }}
-                  </label>
-                </div>
-              </div>
-
-              <div class="field">
+              <div class="field" v-if="!simpleMode">
                 <label class="label is-unselectable" for="show_thumbnail">URLs Separator</label>
                 <div class="control">
                   <div class="select is-fullwidth">
@@ -85,27 +94,28 @@
             </div>
             <div class="column is-6">
               <div class="field">
-                <label class="label is-unselectable" for="reduce_confirm">Reduce confirm box usage</label>
+                <label class="label is-unselectable" for="show_thumbnail">Show Thumbnails</label>
                 <div class="control">
-                  <input id="reduce_confirm" type="checkbox" class="switch is-success" v-model="reduce_confirm">
-                  <label for="reduce_confirm" class="is-unselectable">
-                    &nbsp;{{ reduce_confirm ? 'Enabled' : 'Disabled' }}
+                  <input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
+                  <label for="show_thumbnail" class="is-unselectable">
+                    &nbsp;{{ show_thumbnail ? 'Yes' : 'No' }}
                   </label>
                 </div>
+                <p class="help is-bold"> Show videos thumbnail if available.</p>
               </div>
 
               <div class="field">
-                <label class="label" for="allow_toasts">Show notifications toasts</label>
+                <label class="label" for="allow_toasts">Show notifications</label>
                 <div class="control">
                   <input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
                   <label for="allow_toasts" class="is-unselectable">
-                    &nbsp;{{ allow_toasts ? 'Enabled' : 'Disabled' }}
+                    &nbsp;{{ allow_toasts ? 'Yes' : 'No' }}
                   </label>
                 </div>
               </div>
 
               <div class="field" v-if="allow_toasts">
-                <label class="label">Toasts position</label>
+                <label class="label">Notification position</label>
                 <div class="control">
                   <div class="select is-fullwidth">
                     <select v-model="toast_position">
@@ -121,12 +131,12 @@
               </div>
 
               <div class="field" v-if="allow_toasts">
-                <label class="label" for="dismiss_on_click">Dismiss toasts on click</label>
+                <label class="label" for="dismiss_on_click">Dismiss notification on click</label>
                 <div class="control">
                   <input id="dismiss_on_click" type="checkbox" class="switch is-success"
                     v-model="toast_dismiss_on_click">
                   <label for="dismiss_on_click" class="is-unselectable">
-                    &nbsp;{{ toast_dismiss_on_click ? 'Enabled' : 'Disabled' }}
+                    &nbsp;{{ toast_dismiss_on_click ? 'Yes' : 'No' }}
                   </label>
                 </div>
               </div>
@@ -142,6 +152,7 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import { POSITION } from 'vue-toastification'
+import { useConfigStore } from '~/stores/ConfigStore'
 
 defineProps<{ isLoading: boolean }>()
 defineEmits<{ (e: 'reload_bg'): void }>()
@@ -150,9 +161,9 @@ const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
 const selectedTheme = useStorage<'auto' | 'light' | 'dark'>('theme', 'auto')
 const allow_toasts = useStorage<boolean>('allow_toasts', true)
-const reduce_confirm = useStorage<boolean>('reduce_confirm', false)
 const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
 const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
 const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
 const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
+const simpleMode = useStorage<boolean>('simple_mode', useConfigStore().app.simple_mode || false)
 </script>