README updates

README.md

@@ -8,13 +8,19 @@
 video platforms easier and user-friendly. It supports downloading playlists, channels, live streams and 
 includes features like scheduling downloads, sending notifications, and built-in video player.
 
-![Short screenshot](https://raw.githubusercontent.com/ArabCoders/ytptube/master/sc_short.png)
+# Screenshots
+Example of the regular view interface.
+![Short screenshot](https://raw.githubusercontent.com/ArabCoders/ytptube/dev/sc_short.jpg)
+
+Example of the Simple mode interface.
+![Short screenshot](https://raw.githubusercontent.com/ArabCoders/ytptube/dev/sc_simple.jpg)
 
 # YTPTube Features.
 
 * Multi-download support.
 * Random beautiful background.
 * Handles live and upcoming streams.
+* A Dual mode view for both technical and non-technical users.
 * Schedule channels or playlists to be downloaded automatically with support for creating custom download feeds from non-supported sites. See [Feeds documentation](FAQ.md#how-can-i-monitor-sites-without-rss-feeds).
 * Send notification to targets based on selected events. includes [Apprise](https://github.com/caronc/apprise?tab=readme-ov-file#readme) support.
 * Support per link options.

app/routes/api/docs.py

@@ -15,10 +15,11 @@ from app.library.YTDLPOpts import YTDLPOpts
 
 LOG: logging.Logger = logging.getLogger(__name__)
 
-STATIC_FILES = ["README.md", "FAQ.md", "API.md", "sc_short.png"]
+STATIC_FILES = ["README.md", "FAQ.md", "API.md", "sc_short.jpg", "sc_simple.jpg"]
 EXT_TO_MIME: dict = {
     ".md": "text/markdown",
     ".png": "image/png",
+    ".jpg": "image/jpeg",
 }
 
 

ui/app/components/Markdown.vue

@@ -99,7 +99,7 @@ import Message from '~/components/Message.vue'
 const props = defineProps<{ file: string }>()
 const emitter = defineEmits<{ (e: 'closeModel'): void }>()
 
-const urls = ['FAQ.md', 'README.md', 'API.md', 'sc_short.png']
+const urls = ['FAQ.md', 'README.md', 'API.md', 'sc_short.jpg', 'sc_simple.jpg']
 
 const content = ref<string>('')
 const error = ref<string>('')

ui/app/components/Settings.vue

@@ -21,13 +21,13 @@
                   <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)' }}
+                      &nbsp;{{ simpleMode ? 'Simple View' : 'Regular View' }}
                     </label>
                   </div>
                 </div>
-                <p class="help is-bold has-text-danger">
+                <p class="help is-bold">
                   <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.
+                  The simple view is ideal for non-technical users and mobile devices.
                 </p>
               </div>
 
@@ -115,7 +115,7 @@
               </div>
 
               <div class="field" v-if="allow_toasts">
-                <label class="label">Notification position</label>
+                <label class="label">Notifications position</label>
                 <div class="control">
                   <div class="select is-fullwidth">
                     <select v-model="toast_position">

ui/app/components/Simple.vue

@@ -6,7 +6,7 @@
           <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="'Settings'"><i
+              <span class="icon has-text-primary is-pointer" @click="$emit('show_settings')" v-tooltip="'WebUI Settings'"><i
                   class="fas fa-cogs" /></span>
             </span>
           </label>

ui/app/layouts/default.vue

@@ -5,7 +5,8 @@
   </template>
 
   <template v-if="show_settings">
-    <Modal @close="show_settings = false" content-class="modal-content-max is-overflow-visible">
+    <Modal @close="show_settings = false"
+      :content-class="isMobile ? 'modal-content-max is-overflow-scroll ' : 'modal-content-max is-overflow-visible'">
       <Settings v-if="show_settings" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
     </Modal>
   </template>