Feat: add app manifest to allow the app to be installed

app/routes/api/_static.py

@@ -19,6 +19,7 @@ EXT_TO_MIME: dict = {
     ".js": "application/javascript",
     ".json": "application/json",
     ".ico": "image/x-icon",
+    ".webmanifest": "application/manifest+json",
 }
 
 FRONTEND_ROUTES: list[str] = [
@@ -35,7 +36,6 @@ FRONTEND_ROUTES: list[str] = [
     "/browser/{path:.*}",
 ]
 
-
 async def serve_static_file(request: Request, config: Config) -> Response:
     """
     Preload static files from the ui/exported folder.

ui/app/layouts/default.vue

@@ -154,17 +154,18 @@
       <div>
         <NuxtLoadingIndicator />
         <NuxtPage v-if="config.is_loaded" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
-        <Message v-if="!config.is_loaded" class="mt-5" :newStyle="true"
+        <Message v-if="!config.is_loaded" class="mt-5" :newStyle="true" title="Loading Configuration"
-          title="Loading Configuration" icon="fas fa-spinner fa-spin">
+          icon="fas fa-spinner fa-spin">
-          <p>Loading application configuration. This usually takes less than a second.</p>
+          <p>This usually takes less than a second.
-          <p v-if="!socket.isConnected" class="mt-2">
+            <span v-if="!socket.isConnected" class="mt-2">
-            If this is taking too long, please check that the backend server is running and that the WebSocket
+              If this is taking too long, please check that the backend server is running and that the WebSocket
-            connection is functional.
+              connection is functional.
+            </span>
           </p>
           <p v-if="socket.error" class="has-text-danger">
             <span class="icon-text">
               <span class="icon"><i class="fas fa-triangle-exclamation" /></span>
-              {{ socket.error }}
+              {{ socket.error }}. Check the developer console for more information.
             </span>
           </p>
         </Message>

ui/nuxt.config.ts

@@ -43,9 +43,18 @@ export default defineNuxtConfig({
         { "charset": "utf-8" },
         { "name": "viewport", "content": "width=device-width, initial-scale=1.0, maximum-scale=1.0" },
         { "name": "theme-color", "content": "#000000" },
+        { "name": "mobile-web-app-capable", "content": "yes" },
+        { "name": "apple-mobile-web-app-capable", "content": "yes" },
+        { "name": "apple-mobile-web-app-status-bar-style", "content": "black-translucent" },
+        { "name": "apple-mobile-web-app-title", "content": "YTPTube" },
       ],
       base: { "href": "/" },
-      link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico?v=100' }]
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico?v=100' },
+        { rel: 'manifest', href: 'manifest.webmanifest?v=100' },
+        { rel: 'apple-touch-icon', href: 'images/favicon.png' },
+        { rel: 'apple-touch-startup-image', href: 'images/logo.png' }
+      ]
     },
     pageTransition: { name: 'page', mode: 'out-in' }
   },

ui/package.json

@@ -54,7 +54,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^1.10.0",
     "@nuxt/eslint-config": "^1.10.0",
-    "@typescript-eslint/parser": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.4",
     "eslint": "^9.39.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.8",

ui/public/manifest.webmanifest

@@ -0,0 +1,35 @@
+{
+  "short_name": "YTP",
+  "name": "YTPTube",
+  "description": "Web-based GUI for yt-dlp. Download videos, playlists, channels, and live streams from various platforms.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "orientation": "any",
+  "categories": [
+    "downloaders",
+    "video",
+    "audio"
+  ],
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "32x32",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "images/favicon.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "images/logo.png",
+      "sizes": "800x600",
+      "type": "image/png"
+    }
+  ]
+}