Merge pull request #864 from alexta69/dependabot/github_actions/github-actions-151e9c363d

Bump the github-actions group with 5 updates

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# Keep GitHub Actions up to date with GitHub's Dependabot...
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/keeping-your-actions-up-to-date-with-dependabot
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/dependabot-options-reference#package-ecosystem
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    groups:
+      github-actions:
+        patterns:
+          - "*"  # Group all Actions updates into a single larger pull request
+    schedule:
+      interval: weekly

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
         run: echo "::set-output name=date::$(date +'%Y.%m.%d')"
       -
         name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -37,7 +37,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
       -
         name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           platforms: linux/amd64,linux/arm64
@@ -74,7 +74,7 @@ jobs:
         id: date
         run: echo "date=$(date +'%Y.%m.%d')" >> $GITHUB_OUTPUT
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
       - name: Get commits since last release
@@ -167,7 +167,7 @@ jobs:
             git push origin ":refs/tags/$TAG_NAME" || true
           fi
       - name: Create GitHub Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ steps.date.outputs.date }}
           name: Release ${{ steps.date.outputs.date }}

.github/workflows/update-yt-dlp.yml

@@ -10,17 +10,17 @@ jobs:
     steps:
       -
         name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           token: ${{ secrets.AUTOUPDATE_PAT }}
       -
         name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v6
         with:
           python-version: '3.13'
       -
         name: Install uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
       -
         name: Update yt-dlp
         run: |

Dockerfile

@@ -2,8 +2,8 @@ FROM node:lts-alpine AS builder
 
 WORKDIR /metube
 COPY ui ./
-RUN npm ci && \
+RUN corepack enable && corepack prepare pnpm --activate
-    node_modules/.bin/ng build --configuration production
+RUN pnpm install && pnpm run build
 
 
 FROM python:3.13-alpine

README.md

@@ -246,7 +246,7 @@ The engine which powers the actual video downloads in MeTube is [yt-dlp](https:/
 
 There's an automatic nightly build of MeTube which looks for a new version of yt-dlp, and if one exists, the build pulls it and publishes an updated docker image. Therefore, in order to keep up with the changes, it's recommended that you update your MeTube container regularly with the latest image.
 
-I recommend installing and setting up [watchtower](https://github.com/containrrr/watchtower) for this purpose.
+I recommend installing and setting up [watchtower](https://github.com/nicholas-fedor/watchtower) for this purpose.
 
 ## 🔧 Troubleshooting and submitting issues
 
@@ -267,13 +267,13 @@ MeTube development relies on code contributions by the community. The program as
 
 ## 🛠️ Building and running locally
 
-Make sure you have Node.js and Python 3.13 installed.
+Make sure you have Node.js 22+ and Python 3.13 installed.
 
 ```bash
 cd metube/ui
 # install Angular and build the UI
-npm install
+pnpm install
-node_modules/.bin/ng build
+pnpm run build
 # install python dependencies
 cd ..
 curl -LsSf https://astral.sh/uv/install.sh | sh

app/main.py

@@ -21,6 +21,26 @@ from yt_dlp.version import __version__ as yt_dlp_version
 
 log = logging.getLogger('main')
 
+def parseLogLevel(logLevel):
+    match logLevel:
+        case 'DEBUG':
+            return logging.DEBUG
+        case 'INFO':
+            return logging.INFO
+        case 'WARNING':
+            return logging.WARNING
+        case 'ERROR':
+            return logging.ERROR
+        case 'CRITICAL':
+            return logging.CRITICAL
+        case _:
+            return None
+
+# Configure logging before Config() uses it so early messages are not dropped.
+# Only configure if no handlers are set (avoid clobbering hosting app settings).
+if not logging.getLogger().hasHandlers():
+    logging.basicConfig(level=parseLogLevel(os.environ.get('LOGLEVEL', 'INFO')) or logging.INFO)
+
 class Config:
     _DEFAULTS = {
         'DOWNLOAD_DIR': '.',
@@ -36,7 +56,7 @@ class Config:
         'PUBLIC_HOST_URL': 'download/',
         'PUBLIC_HOST_AUDIO_URL': 'audio_download/',
         'OUTPUT_TEMPLATE': '%(title)s.%(ext)s',
-        'OUTPUT_TEMPLATE_CHAPTER': '%(title)s - %(section_number)s %(section_title)s.%(ext)s',
+        'OUTPUT_TEMPLATE_CHAPTER': '%(title)s - %(section_number)02d - %(section_title)s.%(ext)s',
         'OUTPUT_TEMPLATE_PLAYLIST': '%(playlist_title)s/%(title)s.%(ext)s',
         'DEFAULT_OPTION_PLAYLIST_STRICT_MODE' : 'false',
         'DEFAULT_OPTION_PLAYLIST_ITEM_LIMIT' : '0',
@@ -112,6 +132,10 @@ class Config:
         return (True, '')
 
 config = Config()
+# Align root logger level with Config (keeps a single source of truth).
+# This re-applies the log level after Config loads, in case LOGLEVEL was
+# overridden by config file settings or differs from the environment variable.
+logging.getLogger().setLevel(parseLogLevel(str(config.LOGLEVEL)) or logging.INFO)
 
 class ObjectSerializer(json.JSONEncoder):
     def default(self, obj):
@@ -140,7 +164,7 @@ class Notifier(DownloadQueueNotifier):
         await sio.emit('added', serializer.encode(dl))
 
     async def updated(self, dl):
-        log.info(f"Notifier: Download updated - {dl.title}")
+        log.debug(f"Notifier: Download updated - {dl.title}")
         await sio.emit('updated', serializer.encode(dl))
 
     async def completed(self, dl):
@@ -223,6 +247,8 @@ async def add(request):
     playlist_strict_mode = post.get('playlist_strict_mode')
     playlist_item_limit = post.get('playlist_item_limit')
     auto_start = post.get('auto_start')
+    split_by_chapters = post.get('split_by_chapters')
+    chapter_template = post.get('chapter_template')
 
     if custom_name_prefix is None:
         custom_name_prefix = ''
@@ -232,10 +258,14 @@ async def add(request):
         playlist_strict_mode = config.DEFAULT_OPTION_PLAYLIST_STRICT_MODE
     if playlist_item_limit is None:
         playlist_item_limit = config.DEFAULT_OPTION_PLAYLIST_ITEM_LIMIT
+    if split_by_chapters is None:
+        split_by_chapters = False
+    if chapter_template is None:
+        chapter_template = config.OUTPUT_TEMPLATE_CHAPTER
 
     playlist_item_limit = int(playlist_item_limit)
 
-    status = await dqueue.add(url, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start)
+    status = await dqueue.add(url, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, split_by_chapters, chapter_template)
     return web.Response(text=serializer.encode(status))
 
 @routes.post(config.URL_PREFIX + 'delete')
@@ -386,21 +416,6 @@ def supports_reuse_port():
     except (AttributeError, OSError):
         return False
 
-def parseLogLevel(logLevel):
-    match logLevel:
-        case 'DEBUG':
-            return logging.DEBUG
-        case 'INFO':
-            return logging.INFO
-        case 'WARNING':
-            return logging.WARNING
-        case 'ERROR':
-            return logging.ERROR
-        case 'CRITICAL':
-            return logging.CRITICAL
-        case _:
-            return None
-
 def isAccessLogEnabled():
     if config.ENABLE_ACCESSLOG:
         return access_logger
@@ -408,7 +423,7 @@ def isAccessLogEnabled():
         return None
 
 if __name__ == '__main__':
-    logging.basicConfig(level=parseLogLevel(config.LOGLEVEL))
+    logging.getLogger().setLevel(parseLogLevel(config.LOGLEVEL) or logging.INFO)
     log.info(f"Listening on {config.HOST}:{config.PORT}")
 
     if config.HTTPS:

app/ytdl.py

@@ -43,7 +43,7 @@ class DownloadQueueNotifier:
         raise NotImplementedError
 
 class DownloadInfo:
-    def __init__(self, id, title, url, quality, format, folder, custom_name_prefix, error, entry, playlist_item_limit):
+    def __init__(self, id, title, url, quality, format, folder, custom_name_prefix, error, entry, playlist_item_limit, split_by_chapters, chapter_template):
         self.id = id if len(custom_name_prefix) == 0 else f'{custom_name_prefix}.{id}'
         self.title = title if len(custom_name_prefix) == 0 else f'{custom_name_prefix}.{title}'
         self.url = url
@@ -59,6 +59,8 @@ class DownloadInfo:
         # Convert generators to lists to make entry pickleable
         self.entry = _convert_generators_to_lists(entry) if entry is not None else None
         self.playlist_item_limit = playlist_item_limit
+        self.split_by_chapters = split_by_chapters
+        self.chapter_template = chapter_template
 
 class Download:
     manager = None
@@ -83,6 +85,7 @@ class Download:
     def _download(self):
         log.info(f"Starting download for: {self.info.title} ({self.info.url})")
         try:
+            debug_logging = logging.getLogger().isEnabledFor(logging.DEBUG)
             def put_status(st):
                 self.status_queue.put({k: v for k, v in st.items() if k in (
                     'tmpfilename',
@@ -104,8 +107,20 @@ class Download:
                         filename = d['info_dict']['filepath']
                     self.status_queue.put({'status': 'finished', 'filename': filename})
                 
-            ret = yt_dlp.YoutubeDL(params={
+                # Capture all chapter files when SplitChapters finishes
-                'quiet': True,
+                elif d.get('postprocessor') == 'SplitChapters' and d.get('status') == 'finished':
+                    chapters = d.get('info_dict', {}).get('chapters', [])
+                    if chapters:
+                        for chapter in chapters:
+                            if isinstance(chapter, dict) and 'filepath' in chapter:
+                                log.info(f"Captured chapter file: {chapter['filepath']}")
+                                self.status_queue.put({'chapter_file': chapter['filepath']})
+                    else:
+                        log.warning("SplitChapters finished but no chapter files found in info_dict")
+
+            ytdl_params = {
+                'quiet': not debug_logging,
+                'verbose': debug_logging,
                 'no_color': True,
                 'paths': {"home": self.download_dir, "temp": self.temp_dir},
                 'outtmpl': { "default": self.output_template, "chapter": self.output_template_chapter },
@@ -115,7 +130,19 @@ class Download:
                 'progress_hooks': [put_status],
                 'postprocessor_hooks': [put_status_postprocessor],
                 **self.ytdl_opts,
-            }).download([self.info.url])
+            }
+            
+            # Add chapter splitting options if enabled
+            if self.info.split_by_chapters:
+                ytdl_params['outtmpl']['chapter'] = self.info.chapter_template
+                if 'postprocessors' not in ytdl_params:
+                    ytdl_params['postprocessors'] = []
+                ytdl_params['postprocessors'].append({
+                    'key': 'FFmpegSplitChapters',
+                    'force_keyframes': False
+                })
+            
+            ret = yt_dlp.YoutubeDL(params=ytdl_params).download([self.info.url])
             self.status_queue.put({'status': 'finished' if ret == 0 else 'error'})
             log.info(f"Finished download for: {self.info.title}")
         except yt_dlp.utils.YoutubeDLError as exc:
@@ -179,6 +206,22 @@ class Download:
                 self.info.size = os.path.getsize(fileName) if os.path.exists(fileName) else None
                 if self.info.format == 'thumbnail':
                     self.info.filename = re.sub(r'\.webm$', '.jpg', self.info.filename)
+
+            # Handle chapter files
+            log.debug(f"Update status for {self.info.title}: {status}") 
+            if 'chapter_file' in status:
+                chapter_file = status.get('chapter_file')
+                if not hasattr(self.info, 'chapter_files'):
+                    self.info.chapter_files = []
+                rel_path = os.path.relpath(chapter_file, self.download_dir)
+                file_size = os.path.getsize(chapter_file) if os.path.exists(chapter_file) else None
+                #Postprocessor hook called multiple times with chapters. Only insert if not already present.
+                existing = next((cf for cf in self.info.chapter_files if cf['filename'] == rel_path), None)
+                if not existing:
+                    self.info.chapter_files.append({'filename': rel_path, 'size': file_size})
+                # Skip the rest of status processing for chapter files
+                continue
+            
             self.info.status = status['status']
             self.info.msg = status.get('msg')
             if 'downloaded_bytes' in status:
@@ -187,7 +230,7 @@ class Download:
                     self.info.percent = status['downloaded_bytes'] / total * 100
             self.info.speed = status.get('speed')
             self.info.eta = status.get('eta')
-            log.info(f"Updating status for {self.info.title}: {status}")
+            log.debug(f"Updating status for {self.info.title}: {status}")
             await self.notifier.updated(self.info)
 
 class PersistentQueue:
@@ -314,8 +357,10 @@ class DownloadQueue:
                 asyncio.create_task(self.notifier.completed(download.info))
 
     def __extract_info(self, url, playlist_strict_mode):
+        debug_logging = logging.getLogger().isEnabledFor(logging.DEBUG)
         return yt_dlp.YoutubeDL(params={
-            'quiet': True,
+            'quiet': not debug_logging,
+            'verbose': debug_logging,
             'no_color': True,
             'extract_flat': True,
             'ignore_no_formats_error': True,
@@ -368,7 +413,7 @@ class DownloadQueue:
             self.pending.put(download)
         await self.notifier.added(dl)
 
-    async def __add_entry(self, entry, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, already):
+    async def __add_entry(self, entry, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, split_by_chapters, chapter_template, already):
         if not entry:
             return {'status': 'error', 'msg': "Invalid/empty data was given."}
 
@@ -384,7 +429,7 @@ class DownloadQueue:
 
         if etype.startswith('url'):
             log.debug('Processing as an url')
-            return await self.add(entry['url'], quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, already)
+            return await self.add(entry['url'], quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, split_by_chapters, chapter_template, already)
         elif etype == 'playlist':
             log.debug('Processing as a playlist')
             entries = entry['entries']
@@ -404,7 +449,7 @@ class DownloadQueue:
                 for property in ("id", "title", "uploader", "uploader_id"):
                     if property in entry:
                         etr[f"playlist_{property}"] = entry[property]
-                results.append(await self.__add_entry(etr, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, already))
+                results.append(await self.__add_entry(etr, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, split_by_chapters, chapter_template, already))
             if any(res['status'] == 'error' for res in results):
                 return {'status': 'error', 'msg': ', '.join(res['msg'] for res in results if res['status'] == 'error' and 'msg' in res)}
             return {'status': 'ok'}
@@ -412,13 +457,13 @@ class DownloadQueue:
             log.debug('Processing as a video')
             key = entry.get('webpage_url') or entry['url']
             if not self.queue.exists(key):
-                dl = DownloadInfo(entry['id'], entry.get('title') or entry['id'], key, quality, format, folder, custom_name_prefix, error, entry, playlist_item_limit)
+                dl = DownloadInfo(entry['id'], entry.get('title') or entry['id'], key, quality, format, folder, custom_name_prefix, error, entry, playlist_item_limit, split_by_chapters, chapter_template)
                 await self.__add_download(dl, auto_start)
             return {'status': 'ok'}
         return {'status': 'error', 'msg': f'Unsupported resource "{etype}"'}
 
-    async def add(self, url, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start=True, already=None):
+    async def add(self, url, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start=True, split_by_chapters=False, chapter_template=None, already=None):
-        log.info(f'adding {url}: {quality=} {format=} {already=} {folder=} {custom_name_prefix=} {playlist_strict_mode=} {playlist_item_limit=} {auto_start=}')
+        log.info(f'adding {url}: {quality=} {format=} {already=} {folder=} {custom_name_prefix=} {playlist_strict_mode=} {playlist_item_limit=} {auto_start=} {split_by_chapters=} {chapter_template=}')
         already = set() if already is None else already
         if url in already:
             log.info('recursion detected, skipping')
@@ -429,7 +474,7 @@ class DownloadQueue:
             entry = await asyncio.get_running_loop().run_in_executor(None, self.__extract_info, url, playlist_strict_mode)
         except yt_dlp.utils.YoutubeDLError as exc:
             return {'status': 'error', 'msg': str(exc)}
-        return await self.__add_entry(entry, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, already)
+        return await self.__add_entry(entry, quality, format, folder, custom_name_prefix, playlist_strict_mode, playlist_item_limit, auto_start, split_by_chapters, chapter_template, already)
 
     async def start_pending(self, ids):
         for id in ids:

ui/angular.json

@@ -15,17 +15,13 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/metube"
             },
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -41,17 +37,14 @@
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ],
             "serviceWorker": "ngsw-config.json",
-            "browser": "src/main.ts"
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js",
+              "@angular/localize/init"
+            ]
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -68,75 +61,45 @@
                   "maximumError": "10kb"
                 }
               ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
-          "options": {
-            "buildTarget": "metube:build"
-          },
           "configurations": {
             "production": {
               "buildTarget": "metube:build:production"
-            }
+            },
+             "development": {
+              "buildTarget": "metube:build:development"
             }
           },
-        "extract-i18n": {
+           "defaultConfiguration": "development"
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "metube:build"
-          }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest",
-              "src/custom-service-worker.js"
-            ],
-            "styles": [
-              "src/styles.sass"
-            ],
-            "scripts": []
-          }
         },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "lintFilePatterns": [
-              "tsconfig.app.json",
+              "src/**/*.ts",
-              "tsconfig.spec.json",
+              "src/**/*.html"
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "metube:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "metube:serve:production"
-            }
-          }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "packageManager": "pnpm"
   },
   "schematics": {
     "@schematics/angular:component": {

ui/e2e/protractor.conf.js

@@ -1,36 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    browserName: 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({
-      spec: {
-        displayStacktrace: StacktraceOption.PRETTY
-      }
-    }));
-  }
-};

ui/e2e/src/app.e2e-spec.ts

@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('metube app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});

ui/e2e/src/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo(): Promise<unknown> {
-    return browser.get(browser.baseUrl) as Promise<unknown>;
-  }
-
-  getTitleText(): Promise<string> {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
-  }
-}

ui/e2e/tsconfig.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

ui/eslint.config.js

@@ -0,0 +1,44 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const { defineConfig } = require("eslint/config");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = defineConfig([
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      tseslint.configs.recommended,
+      tseslint.configs.stylistic,
+      angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      angular.configs.templateRecommended,
+      angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+]);

ui/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/metube'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

ui/package.json

@@ -5,44 +5,58 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:watch": "ng build --watch",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint"
-    "e2e": "ng e2e"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.15",
+    "@angular/animations": "^21.0.0",
-    "@angular/common": "^20.3.15",
+    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^20.3.15",
+    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^20.3.15",
+    "@angular/core": "^21.0.0",
-    "@angular/forms": "^20.3.15",
+    "@angular/forms": "^21.0.0",
-    "@angular/localize": "^20.3.15",
+    "@angular/platform-browser": "^21.0.0",
-    "@angular/platform-browser": "^20.3.15",
+    "@angular/platform-browser-dynamic": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^20.3.15",
+    "@angular/service-worker": "^21.0.0",
-    "@angular/router": "^20.3.15",
+    "@fortawesome/angular-fontawesome": "~4.0.0",
-    "@angular/service-worker": "^20.3.15",
-    "@fortawesome/angular-fontawesome": "~3.0.0",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@ng-select/ng-select": "^20.0.0",
+    "@ng-select/ng-select": "^21.1.0",
     "bootstrap": "^5.3.6",
-    "ngx-cookie-service": "^20.0.0",
+    "ngx-cookie-service": "^21.1.0",
-    "ngx-socket-io": "~4.9.0",
+    "ngx-socket-io": "~4.9.3",
     "rxjs": "~7.8.0",
     "tslib": "^2.8.1",
-    "zone.js": "~0.15.1"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.13",
+    "@angular-eslint/builder": "21.1.0",
-    "@angular/cli": "^20.3.13",
+    "@angular/build": "^21.0.3",
-    "@angular/compiler-cli": "^20.3.15",
+    "@angular/cli": "^21.0.3",
-    "@types/node": "^22.15.29",
+    "@angular/compiler-cli": "^21.0.0",
-    "codelyzer": "^6.0.2",
+    "@angular/localize": "^21.0.0",
-    "ts-node": "~10.9.1",
+    "@eslint/js": "^9.39.1",
-    "tslint": "~6.1.3",
+    "angular-eslint": "21.1.0",
-    "typescript": "~5.8.3"
+    "eslint": "^9.39.1",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "8.47.0",
+    "vitest": "^4.0.8"
   }
 }

ui/src/app/app.component.html

@@ -1,402 +0,0 @@
-<nav class="navbar navbar-expand-md navbar-dark">
-  <div class="container-fluid">
-    <a class="navbar-brand d-flex align-items-center" href="#">
-      <img src="assets/icons/android-chrome-192x192.png" alt="MeTube Logo" height="32" class="me-2">
-      MeTube
-    </a>
-    <div class="download-metrics">
-      <div class="metric" *ngIf="activeDownloads > 0">
-        <fa-icon [icon]="faDownload" class="text-primary"></fa-icon>
-        <span>{{activeDownloads}} downloading</span>
-      </div>
-      <div class="metric" *ngIf="queuedDownloads > 0">
-        <fa-icon [icon]="faClock" class="text-warning"></fa-icon>
-        <span>{{queuedDownloads}} queued</span>
-      </div>
-      <div class="metric" *ngIf="completedDownloads > 0">
-        <fa-icon [icon]="faCheck" class="text-success"></fa-icon>
-        <span>{{completedDownloads}} completed</span>
-      </div>
-      <div class="metric" *ngIf="failedDownloads > 0">
-        <fa-icon [icon]="faTimesCircle" class="text-danger"></fa-icon>
-        <span>{{failedDownloads}} failed</span>
-      </div>
-      <div class="metric" *ngIf="(totalSpeed | speed) !== ''">
-        <fa-icon [icon]="faTachometerAlt" class="text-info"></fa-icon>
-        <span>{{totalSpeed | speed }}</span>
-      </div>
-    </div>
-    <!--
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarsDefault">
-      <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-        </li>
-      </ul>
-    </div>
-    -->
-    <div class="navbar-nav ms-auto">
-      <div class="nav-item dropdown">
-        <button class="btn btn-link nav-link py-2 px-0 px-sm-2 dropdown-toggle d-flex align-items-center"
-                id="theme-select"
-                type="button"
-                aria-expanded="false"
-                data-bs-toggle="dropdown"
-                data-bs-display="static">
-          <fa-icon [icon]="activeTheme.icon"></fa-icon>
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="theme-select">
-          <li *ngFor="let theme of themes">
-            <button type="button" class="dropdown-item d-flex align-items-center" [ngClass]="{'active' : activeTheme == theme}" (click)="themeChanged(theme)">
-              <span class="me-2 opacity-50">
-                <fa-icon [icon]="theme.icon"></fa-icon>
-              </span>
-              {{ theme.displayName }}
-              <span class="ms-auto" [ngClass]="{'d-none' : activeTheme != theme}">
-                <fa-icon [icon]="faCheck"></fa-icon>
-              </span>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</nav>
-
-<main role="main" class="container container-xl">
-  <form #f="ngForm">
-    <div class="container add-url-box">
-      <!-- Main URL Input with Download Button -->
-      <div class="row mb-4">
-        <div class="col">
-          <div class="input-group input-group-lg shadow-sm">
-            <input type="text" 
-                   autocomplete="off" 
-                   spellcheck="false" 
-                   class="form-control form-control-lg" 
-                   placeholder="Enter video or playlist URL" 
-                   name="addUrl" 
-                   [(ngModel)]="addUrl" 
-                   [disabled]="addInProgress || downloads.loading">
-            <button class="btn btn-primary btn-lg px-4" 
-                    type="submit" 
-                    (click)="addDownload()" 
-                    [disabled]="addInProgress || downloads.loading">
-              <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span>
-              {{ addInProgress ? "Adding..." : "Download" }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Options Row -->
-      <div class="row mb-3 g-3">
-        <div class="col-md-4">
-          <div class="input-group">
-            <span class="input-group-text">Quality</span>
-            <select class="form-select" 
-                    name="quality" 
-                    [(ngModel)]="quality" 
-                    (change)="qualityChanged()" 
-                    [disabled]="addInProgress || downloads.loading">
-              <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="col-md-4">
-          <div class="input-group">
-            <span class="input-group-text">Format</span>
-            <select class="form-select" 
-                    name="format" 
-                    [(ngModel)]="format" 
-                    (change)="formatChanged()" 
-                    [disabled]="addInProgress || downloads.loading">
-              <option *ngFor="let f of formats" [ngValue]="f.id">{{ f.text }}</option>
-            </select>
-          </div>
-        </div>
-        <div class="col-md-4">
-          <button type="button" 
-                  class="btn btn-outline-secondary w-100 h-100" 
-                  (click)="toggleAdvanced()">
-            Advanced Options
-          </button>
-        </div>
-      </div>
-
-      <!-- Advanced Options Panel -->
-      <div class="row">
-        <div class="col-12">
-          <div class="collapse show" id="advancedOptions" [ngbCollapse]="!isAdvancedOpen">
-            <div class="card card-body">
-              <!-- Advanced Settings -->
-              <div class="row g-3 mb-2">
-                <div class="col-md-6">
-                  <div class="input-group">
-                    <span class="input-group-text">Auto Start</span>
-                    <select class="form-select" 
-                            name="autoStart" 
-                            [(ngModel)]="autoStart" 
-                            (change)="autoStartChanged()" 
-                            [disabled]="addInProgress || downloads.loading"
-                            ngbTooltip="Automatically start downloads when added">
-                      <option [ngValue]="true">Yes</option>
-                      <option [ngValue]="false">No</option>
-                    </select>
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="input-group">
-                    <span class="input-group-text">Download Folder</span>
-                    <ng-select [items]="customDirs$ | async" 
-                              placeholder="Default" 
-                              [addTag]="allowCustomDir.bind(this)" 
-                              addTagText="Create directory" 
-                              bindLabel="folder" 
-                              [(ngModel)]="folder" 
-                              [disabled]="addInProgress || downloads.loading"
-                              [virtualScroll]="true"
-                              [clearable]="true"
-                              [loading]="downloads.loading"
-                              [searchable]="true"
-                              [closeOnSelect]="true"
-                              ngbTooltip="Choose where to save downloads. Type to create a new folder.">
-                    </ng-select>
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="input-group">
-                    <span class="input-group-text">Custom Name Prefix</span>
-                    <input type="text" 
-                           class="form-control" 
-                           placeholder="Default" 
-                           name="customNamePrefix" 
-                           [(ngModel)]="customNamePrefix" 
-                           [disabled]="addInProgress || downloads.loading"
-                           ngbTooltip="Add a prefix to downloaded filenames">
-                  </div>
-                </div>
-                <div class="col-md-6">
-                  <div class="input-group">
-                    <span class="input-group-text">Items Limit</span>
-                    <input type="number" 
-                           min="0" 
-                           class="form-control" 
-                           placeholder="Default" 
-                           name="playlistItemLimit" 
-                           (keydown)="isNumber($event)" 
-                           [(ngModel)]="playlistItemLimit" 
-                           [disabled]="addInProgress || downloads.loading"
-                           ngbTooltip="Maximum number of items to download from a playlist (0 = no limit)">
-                  </div>
-                </div>
-                <div class="col-12">
-                  <div class="form-check form-switch">
-                    <input class="form-check-input" 
-                           type="checkbox" 
-                           role="switch" 
-                           name="playlistStrictMode" 
-                           [(ngModel)]="playlistStrictMode" 
-                           [disabled]="addInProgress || downloads.loading"
-                           ngbTooltip="Only download playlists when URL explicitly points to a playlist">
-                    <label class="form-check-label">Strict Playlist Mode</label>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Advanced Actions -->
-              <div class="row">
-                <div class="col-12">
-                  <hr class="my-3">
-                  <div class="row g-2">
-                    <div class="col-md-4">
-                      <button type="button" 
-                              class="btn btn-secondary w-100" 
-                              (click)="openBatchImportModal()">
-                        <fa-icon [icon]="faFileImport" class="me-2"></fa-icon>
-                        Import URLs
-                      </button>
-                    </div>
-                    <div class="col-md-4">
-                      <button type="button" 
-                              class="btn btn-secondary w-100" 
-                              (click)="exportBatchUrls('all')">
-                        <fa-icon [icon]="faFileExport" class="me-2"></fa-icon>
-                        Export URLs
-                      </button>
-                    </div>
-                    <div class="col-md-4">
-                      <button type="button" 
-                              class="btn btn-secondary w-100" 
-                              (click)="copyBatchUrls('all')">
-                        <fa-icon [icon]="faCopy" class="me-2"></fa-icon>
-                        Copy URLs
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-  
-  <!-- Batch Import Modal -->
-  <div class="modal fade" tabindex="-1" role="dialog" [ngClass]="{'show': batchImportModalOpen}" [ngStyle]="{'display': batchImportModalOpen ? 'block' : 'none'}">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Batch Import URLs</h5>
-          <button type="button" class="btn-close" aria-label="Close" (click)="closeBatchImportModal()"></button>
-        </div>
-        <div class="modal-body">
-          <textarea [(ngModel)]="batchImportText" class="form-control" rows="6"
-            placeholder="Paste one video URL per line"></textarea>
-          <div class="mt-2">
-            <small *ngIf="batchImportStatus">{{ batchImportStatus }}</small>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-danger me-auto" *ngIf="importInProgress" (click)="cancelBatchImport()">
-            Cancel Import
-          </button>
-          <button type="button" class="btn btn-secondary" (click)="closeBatchImportModal()">Close</button>
-          <button type="button" class="btn btn-primary" (click)="startBatchImport()" [disabled]="importInProgress">
-            Import URLs
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-  
-
-  <div *ngIf="downloads.loading" class="alert alert-info" role="alert">
-    Connecting to server...
-  </div>
-  <div class="metube-section-header">Downloading</div>
-  <div class="px-2 py-3 border-bottom">
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDelSelected (click)="delSelectedDownloads('queue')"><fa-icon [icon]="faTrashAlt"></fa-icon>&nbsp; Cancel selected</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDownloadSelected (click)="startSelectedDownloads('queue')"><fa-icon [icon]="faDownload"></fa-icon>&nbsp; Download selected</button>
-  </div>
-  <div class="overflow-auto">
-    <table class="table">
-      <thead>
-        <tr>
-          <th scope="col" style="width: 1rem;">
-            <app-master-checkbox #queueMasterCheckbox [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)"></app-master-checkbox>
-          </th>
-          <th scope="col">Video</th>
-          <th scope="col" style="width: 8rem;">Speed</th>
-          <th scope="col" style="width: 7rem;">ETA</th>
-          <th scope="col" style="width: 6rem;"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
-          <td>
-            <app-slave-checkbox [id]="download.key" [master]="queueMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
-          </td>
-          <td title="{{ download.value.filename }}">
-            <div class="d-flex flex-column flex-sm-row align-items-center row-gap-2 column-gap-3">
-              <div>{{ download.value.title }}</div>
-              <ngb-progressbar height="1.5rem" [showValue]="download.value.status != 'preparing'" [striped]="download.value.status == 'preparing'" [animated]="download.value.status == 'preparing'" type="success" [value]="download.value.status == 'preparing' ? 100 : download.value.percent | number:'1.0-0'" class="download-progressbar"></ngb-progressbar>
-            </div>
-          </td>
-          <td>{{ download.value.speed | speed }}</td>
-          <td>{{ download.value.eta | eta }}</td>
-          <td>
-            <div class="d-flex">
-              <button *ngIf="download.value.status === 'pending'" type="button" class="btn btn-link" (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload"></fa-icon></button>
-              <button type="button" class="btn btn-link" (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button>
-              <a href="{{download.value.url}}" target="_blank" class="btn btn-link"><fa-icon [icon]="faExternalLinkAlt"></fa-icon></a>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div class="metube-section-header">Completed</div>
-  <div class="px-2 py-3 border-bottom">
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDelSelected (click)="delSelectedDownloads('done')"><fa-icon [icon]="faTrashAlt"></fa-icon>&nbsp; Clear selected</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle"></fa-icon>&nbsp; Clear completed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle"></fa-icon>&nbsp; Clear failed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneRetryFailed (click)="retryFailedDownloads()"><fa-icon [icon]="faRedoAlt"></fa-icon>&nbsp; Retry failed</button>
-    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDownloadSelected (click)="downloadSelectedFiles()"><fa-icon [icon]="faDownload"></fa-icon>&nbsp; Download Selected</button>
-  </div>
-  <div class="overflow-auto">
-    <table class="table">
-      <thead>
-        <tr>
-          <th scope="col" style="width: 1rem;">
-            <app-master-checkbox #doneMasterCheckbox [id]="'done'" [list]="downloads.done" (changed)="doneSelectionChanged($event)"></app-master-checkbox>
-          </th>
-          <th scope="col">Video</th>
-          <th scope="col">File Size</th>
-          <th scope="col" style="width: 8rem;"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let download of downloads.done | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
-          <td>
-            <app-slave-checkbox [id]="download.key" [master]="doneMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
-          </td>
-          <td>
-            <div style="display: inline-block; width: 1.5rem;">
-              <fa-icon *ngIf="download.value.status == 'finished'" [icon]="faCheckCircle" class="text-success"></fa-icon>
-              <fa-icon *ngIf="download.value.status == 'error'" [icon]="faTimesCircle" class="text-danger"></fa-icon>
-            </div>
-            <span ngbTooltip="{{download.value.msg}} | {{download.value.error}}"><a *ngIf="!!download.value.filename; else noDownloadLink" href="{{buildDownloadLink(download.value)}}" target="_blank">{{ download.value.title }}</a></span>
-            <ng-template #noDownloadLink>
-              {{download.value.title}}
-              <span *ngIf="download.value.msg"><br>{{download.value.msg}}</span>
-              <span *ngIf="download.value.error"><br>Error: {{download.value.error}}</span>
-            </ng-template>
-          </td>
-          <td>
-            <span *ngIf="download.value.size">{{ download.value.size | fileSize }}</span>
-          </td>
-          <td>
-            <div class="d-flex">
-              <button *ngIf="download.value.status == 'error'" type="button" class="btn btn-link" (click)="retryDownload(download.key, download.value)"><fa-icon [icon]="faRedoAlt"></fa-icon></button>
-              <a *ngIf="download.value.filename" href="{{buildDownloadLink(download.value)}}" download class="btn btn-link"><fa-icon [icon]="faDownload"></fa-icon></a>
-              <a href="{{download.value.url}}" target="_blank" class="btn btn-link"><fa-icon [icon]="faExternalLinkAlt"></fa-icon></a>
-              <button type="button" class="btn btn-link" (click)="delDownload('done', download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</main><!-- /.container -->
-
-<footer class="footer navbar-dark bg-dark py-3 mt-5">
-  <div class="container text-center">
-    <div class="footer-content" *ngIf="ytDlpVersion && metubeVersion">
-      <div class="version-item">
-        <span class="version-label">yt-dlp</span>
-        <span class="version-value">{{ytDlpVersion}}</span>
-      </div>
-      <div class="version-separator"></div>
-      <div class="version-item">
-        <span class="version-label">MeTube</span>
-        <span class="version-value">{{metubeVersion}}</span>
-      </div>
-      <div class="version-separator"></div>
-      <div class="version-item" *ngIf="ytDlpOptionsUpdateTime">
-        <span class="version-label">yt-dlp-options</span>
-        <span class="version-value">{{ytDlpOptionsUpdateTime}}</span>
-      </div>
-      <div class="version-separator" *ngIf="ytDlpOptionsUpdateTime"></div>
-      <a href="https://github.com/alexta69/metube" target="_blank" class="github-link">
-        <fa-icon [icon]="faGithub"></fa-icon>
-        <span>GitHub</span>
-      </a>
-    </div>
-  </div>
-</footer>

ui/src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'metube'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('metube');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('metube app is running!');
-  });
-});

ui/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, isDevMode, provideZonelessChangeDetection, provideZoneChangeDetection } from '@angular/core';
+import { provideServiceWorker } from '@angular/service-worker';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideServiceWorker('custom-service-worker.js', {
+            enabled: !isDevMode(),
+            // Register the ServiceWorker as soon as the application is stable
+            // or after 30 seconds (whichever comes first).
+            registrationStrategy: 'registerWhenStable:30000'
+          }),
+    provideHttpClient(withInterceptorsFromDi()),
+  ]
+};

ui/src/app/app.html

@@ -0,0 +1,512 @@
+<nav class="navbar navbar-expand-md navbar-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand d-flex align-items-center" href="#">
+      <img src="assets/icons/android-chrome-192x192.png" alt="MeTube Logo" height="32" class="me-2">
+      MeTube
+    </a>
+    <div class="download-metrics">
+      @if (activeDownloads > 0) {
+        <div class="metric">
+          <fa-icon [icon]="faDownload" class="text-primary" />
+          <span>{{activeDownloads}} downloading</span>
+        </div>
+      }
+      @if (queuedDownloads > 0) {
+        <div class="metric">
+          <fa-icon [icon]="faClock" class="text-warning" />
+          <span>{{queuedDownloads}} queued</span>
+        </div>
+      }
+      @if (completedDownloads > 0) {
+        <div class="metric">
+          <fa-icon [icon]="faCheck" class="text-success" />
+          <span>{{completedDownloads}} completed</span>
+        </div>
+      }
+      @if (failedDownloads > 0) {
+        <div class="metric">
+          <fa-icon [icon]="faTimesCircle" class="text-danger" />
+          <span>{{failedDownloads}} failed</span>
+        </div>
+      }
+      @if ((totalSpeed | speed) !== '') {
+        <div class="metric">
+          <fa-icon [icon]="faTachometerAlt" class="text-info" />
+          <span>{{totalSpeed | speed }}</span>
+        </div>
+      }
+    </div>
+    <!--
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarsDefault">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+      </ul>
+    </div>
+    -->
+    <div class="navbar-nav ms-auto">
+      <div class="nav-item dropdown">
+        <button class="btn btn-link nav-link py-2 px-0 px-sm-2 dropdown-toggle d-flex align-items-center"
+          id="theme-select"
+          type="button"
+          aria-expanded="false"
+          data-bs-toggle="dropdown"
+          data-bs-display="static">
+          @if(activeTheme){
+          <fa-icon [icon]="activeTheme.icon" />
+          }
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end position-absolute" aria-labelledby="theme-select">
+          @for (theme of themes; track theme) {
+            <li>
+              <button type="button" class="dropdown-item d-flex align-items-center" 
+              [class.active]="activeTheme === theme"
+              (click)="themeChanged(theme)">
+                <span class="me-2 opacity-50">
+                  <fa-icon [icon]="theme.icon" />
+                </span>
+                {{ theme.displayName }}
+                <span class="ms-auto"
+                [class.d-none]="activeTheme !== theme">
+                <fa-icon [icon]="faCheck" />
+                </span>
+              </button>
+            </li>
+          }
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<main role="main" class="container container-xl">
+  <form #f="ngForm">
+    <div class="container add-url-box">
+      <!-- Main URL Input with Download Button -->
+      <div class="row mb-4">
+        <div class="col">
+          <div class="input-group input-group-lg shadow-sm">
+            <input type="text"
+              autocomplete="off"
+              spellcheck="false"
+              class="form-control form-control-lg"
+              placeholder="Enter video or playlist URL"
+              name="addUrl"
+              [(ngModel)]="addUrl"
+              [disabled]="addInProgress || downloads.loading">
+            <button class="btn btn-primary btn-lg px-4"
+              type="submit"
+              (click)="addDownload()"
+              [disabled]="addInProgress || downloads.loading">
+              @if (addInProgress) {
+                <span class="spinner-border spinner-border-sm" role="status" id="add-spinner"></span>
+              }
+              {{ addInProgress ? "Adding..." : "Download" }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Options Row -->
+      <div class="row mb-3 g-3">
+        <div class="col-md-4">
+          <div class="input-group">
+            <span class="input-group-text">Quality</span>
+            <select class="form-select"
+              name="quality"
+              [(ngModel)]="quality"
+              (change)="qualityChanged()"
+              [disabled]="addInProgress || downloads.loading">
+              @for (q of qualities; track q) {
+                <option [ngValue]="q.id">{{ q.text }}</option>
+              }
+            </select>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <div class="input-group">
+            <span class="input-group-text">Format</span>
+            <select class="form-select"
+              name="format"
+              [(ngModel)]="format"
+              (change)="formatChanged()"
+              [disabled]="addInProgress || downloads.loading">
+              @for (f of formats; track f) {
+                <option [ngValue]="f.id">{{ f.text }}</option>
+              }
+            </select>
+          </div>
+        </div>
+        <div class="col-md-4">
+          <button type="button"
+            class="btn btn-outline-secondary w-100 h-100"
+            (click)="toggleAdvanced()">
+            Advanced Options
+          </button>
+        </div>
+      </div>
+
+      <!-- Advanced Options Panel -->
+      <div class="row">
+        <div class="col-12">
+          <div class="collapse show" id="advancedOptions" [ngbCollapse]="!isAdvancedOpen">
+            <div class="card card-body">
+              <!-- Advanced Settings -->
+              <div class="row g-3 mb-2">
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <span class="input-group-text">Auto Start</span>
+                    <select class="form-select"
+                      name="autoStart"
+                      [(ngModel)]="autoStart"
+                      (change)="autoStartChanged()"
+                      [disabled]="addInProgress || downloads.loading"
+                      ngbTooltip="Automatically start downloads when added">
+                      <option [ngValue]="true">Yes</option>
+                      <option [ngValue]="false">No</option>
+                    </select>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <span class="input-group-text">Download Folder</span>
+                    @if (customDirs$ | async; as customDirs) {
+                    <ng-select [items]="customDirs"
+                      placeholder="Default"
+                      [addTag]="allowCustomDir.bind(this)"
+                      addTagText="Create directory"
+                      bindLabel="folder"
+                      [(ngModel)]="folder"
+                      [disabled]="addInProgress || downloads.loading"
+                      [virtualScroll]="true"
+                      [clearable]="true"
+                      [loading]="downloads.loading"
+                      [searchable]="true"
+                      [closeOnSelect]="true"
+                      ngbTooltip="Choose where to save downloads. Type to create a new folder." />
+                  }
+                  </div>
+           
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <span class="input-group-text">Custom Name Prefix</span>
+                    <input type="text"
+                      class="form-control"
+                      placeholder="Default"
+                      name="customNamePrefix"
+                      [(ngModel)]="customNamePrefix"
+                      [disabled]="addInProgress || downloads.loading"
+                      ngbTooltip="Add a prefix to downloaded filenames">
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <span class="input-group-text">Items Limit</span>
+                    <input type="number"
+                      min="0"
+                      class="form-control"
+                      placeholder="Default"
+                      name="playlistItemLimit"
+                      (keydown)="isNumber($event)"
+                      [(ngModel)]="playlistItemLimit"
+                      [disabled]="addInProgress || downloads.loading"
+                      ngbTooltip="Maximum number of items to download from a playlist (0 = no limit)">
+                  </div>
+                </div>
+                <div class="col-12">
+                  <div class="form-check form-switch">
+                    <input class="form-check-input"
+                      type="checkbox"
+                      role="switch"
+                      id="checkbox-strict-mode"
+                      name="playlistStrictMode"
+                      [(ngModel)]="playlistStrictMode"
+                      [disabled]="addInProgress || downloads.loading"
+                      ngbTooltip="Only download playlists when URL explicitly points to a playlist">
+                    <label class="form-check-label" for="checkbox-strict-mode">Strict Playlist Mode</label>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <div class="row g-2 align-items-center">
+                    <div class="col-auto">
+                      <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="checkbox-split-chapters"
+                          name="splitByChapters" [(ngModel)]="splitByChapters" (change)="splitByChaptersChanged()"
+                          [disabled]="addInProgress || downloads.loading"
+                          ngbTooltip="Split video into separate files by chapters">
+                        <label class="form-check-label" for="checkbox-split-chapters">Split by chapters</label>
+                      </div>
+                    </div>
+                    @if (splitByChapters) {
+                    <div class="col">
+                      <div class="input-group">
+                        <span class="input-group-text">Template</span>
+                        <input type="text" class="form-control" name="chapterTemplate" [(ngModel)]="chapterTemplate"
+                          (change)="chapterTemplateChanged()" [disabled]="addInProgress || downloads.loading"
+                          ngbTooltip="Output template for chapter files">
+                      </div>
+                    </div>
+                    }
+                  </div>
+                </div>
+              </div>
+
+              <!-- Advanced Actions -->
+              <div class="row">
+                <div class="col-12">
+                  <hr class="my-3">
+                  <div class="row g-2">
+                    <div class="col-md-4">
+                      <button type="button"
+                        class="btn btn-secondary w-100"
+                        (click)="openBatchImportModal()">
+                        <fa-icon [icon]="faFileImport" class="me-2" />
+                        Import URLs
+                      </button>
+                    </div>
+                    <div class="col-md-4">
+                      <button type="button"
+                        class="btn btn-secondary w-100"
+                        (click)="exportBatchUrls('all')">
+                        <fa-icon [icon]="faFileExport" class="me-2" />
+                        Export URLs
+                      </button>
+                    </div>
+                    <div class="col-md-4">
+                      <button type="button"
+                        class="btn btn-secondary w-100"
+                        (click)="copyBatchUrls('all')">
+                        <fa-icon [icon]="faCopy" class="me-2" />
+                        Copy URLs
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+
+  <!-- Batch Import Modal -->
+  <div class="modal fade" tabindex="-1" role="dialog" 
+  [class.show]="batchImportModalOpen"
+  [style.display]="batchImportModalOpen ? 'block' : 'none'">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Batch Import URLs</h5>
+          <button type="button" class="btn-close" aria-label="Close" (click)="closeBatchImportModal()"></button>
+        </div>
+        <div class="modal-body">
+          <textarea [(ngModel)]="batchImportText" class="form-control" rows="6"
+          placeholder="Paste one video URL per line"></textarea>
+          <div class="mt-2">
+            @if (batchImportStatus) {
+              <small>{{ batchImportStatus }}</small>
+            }
+          </div>
+        </div>
+        <div class="modal-footer">
+          @if (importInProgress) {
+            <button type="button" class="btn btn-danger me-auto" (click)="cancelBatchImport()">
+              Cancel Import
+            </button>
+          }
+          <button type="button" class="btn btn-secondary" (click)="closeBatchImportModal()">Close</button>
+          <button type="button" class="btn btn-primary" (click)="startBatchImport()" [disabled]="importInProgress">
+            Import URLs
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  @if (downloads.loading) {
+    <div class="alert alert-info" role="alert">
+      Connecting to server...
+    </div>
+  }
+  <div class="metube-section-header">Downloading</div>
+  <div class="px-2 py-3 border-bottom">
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDelSelected (click)="delSelectedDownloads('queue')"><fa-icon [icon]="faTrashAlt" />&nbsp; Cancel selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #queueDownloadSelected (click)="startSelectedDownloads('queue')"><fa-icon [icon]="faDownload" />&nbsp; Download selected</button>
+  </div>
+  <div class="overflow-auto">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col" style="width: 1rem;">
+            <app-master-checkbox #queueMasterCheckboxRef [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)" />
+          </th>
+          <th scope="col">Video</th>
+          <th scope="col" style="width: 8rem;">Speed</th>
+          <th scope="col" style="width: 7rem;">ETA</th>
+          <th scope="col" style="width: 6rem;"></th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (download of downloads.queue | keyvalue: asIsOrder; track download.value.id) {
+          <tr [class.disabled]='download.value.deleting'>
+            <td>
+              <app-slave-checkbox [id]="download.key" [master]="queueMasterCheckboxRef" [checkable]="download.value" />
+            </td>
+            <td title="{{ download.value.filename }}">
+              <div class="d-flex flex-column flex-sm-row align-items-center row-gap-2 column-gap-3">
+                <div>{{ download.value.title }} </div>
+                <ngb-progressbar height="1.5rem" [showValue]="download.value.status !== 'preparing'" [striped]="download.value.status === 'preparing'" [animated]="download.value.status === 'preparing'" type="success" 
+                [value]="download.value.status === 'preparing' ? 100 : download.value.percent" class="download-progressbar" />
+              </div>
+            </td>
+            <td>{{ download.value.speed | speed }}</td>
+            <td>{{ download.value.eta | eta }}</td>
+            <td>
+              <div class="d-flex">
+                @if (download.value.status === 'pending') {
+                  <button type="button" class="btn btn-link" (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload" /></button>
+                }
+                <button type="button" class="btn btn-link" (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt" /></button>
+                <a href="{{download.value.url}}" target="_blank" class="btn btn-link"><fa-icon [icon]="faExternalLinkAlt" /></a>
+              </div>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+
+  <div class="metube-section-header">Completed</div>
+  <div class="px-2 py-3 border-bottom">
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDelSelected (click)="delSelectedDownloads('done')"><fa-icon [icon]="faTrashAlt" />&nbsp; Clear selected</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle" />&nbsp; Clear completed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle" />&nbsp; Clear failed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneRetryFailed (click)="retryFailedDownloads()"><fa-icon [icon]="faRedoAlt" />&nbsp; Retry failed</button>
+    <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneDownloadSelected (click)="downloadSelectedFiles()"><fa-icon [icon]="faDownload" />&nbsp; Download Selected</button>
+  </div>
+  <div class="overflow-auto">
+    <table class="table">
+      <thead>
+        <tr>
+          <th scope="col" style="width: 1rem;">
+            <app-master-checkbox #doneMasterCheckboxRef [id]="'done'" [list]="downloads.done" (changed)="doneSelectionChanged($event)" />
+          </th>
+          <th scope="col">Video</th>
+          <th scope="col">File Size</th>
+          <th scope="col" style="width: 8rem;"></th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (download of downloads.done | keyvalue: asIsOrder; track download.value.id) {
+          <tr [class.disabled]='download.value.deleting'>
+            <td>
+              <app-slave-checkbox [id]="download.key" [master]="doneMasterCheckboxRef" [checkable]="download.value" />
+            </td>
+            <td>
+              <div style="display: inline-block; width: 1.5rem;">
+                @if (download.value.status === 'finished') {
+                  <fa-icon [icon]="faCheckCircle" class="text-success" />
+                }
+                @if (download.value.status === 'error') {
+                  <fa-icon [icon]="faTimesCircle" class="text-danger" />
+                }
+              </div>
+              <span ngbTooltip="{{buildResultItemTooltip(download.value)}}">@if (!!download.value.filename) {
+                <a href="{{buildDownloadLink(download.value)}}" target="_blank">{{ download.value.title }}</a>
+              } @else {
+                {{download.value.title}}
+                @if (download.value.msg) {
+                  <span><br>{{download.value.msg}}</span>
+                }
+                @if (download.value.error) {
+                  <span><br>Error: {{download.value.error}}</span>
+                }
+              }</span>
+            </td>
+            <td>
+              @if (download.value.size) {
+                <span>{{ download.value.size | fileSize }}</span>
+              }
+            </td>
+            <td>
+              <div class="d-flex">
+                @if (download.value.status === 'error') {
+                  <button type="button" class="btn btn-link" (click)="retryDownload(download.key, download.value)"><fa-icon [icon]="faRedoAlt" /></button>
+                }
+                @if (download.value.filename) {
+                  <a href="{{buildDownloadLink(download.value)}}" download class="btn btn-link"><fa-icon [icon]="faDownload" /></a>
+                }
+                <a href="{{download.value.url}}" target="_blank" class="btn btn-link"><fa-icon [icon]="faExternalLinkAlt" /></a>
+                <button type="button" class="btn btn-link" (click)="delDownload('done', download.key)"><fa-icon [icon]="faTrashAlt" /></button>
+              </div>
+            </td>
+          </tr>
+        @if (download.value.chapter_files && download.value.chapter_files.length > 0) {
+          @for (chapterFile of download.value.chapter_files; track chapterFile.filename) {
+            <tr [class.disabled]='download.value.deleting'>
+              <td></td>
+              <td>
+                <div style="padding-left: 2rem;">
+              <fa-icon [icon]="faCheckCircle" class="text-success me-2" />
+              <a href="{{buildChapterDownloadLink(download.value, chapterFile.filename)}}" target="_blank">{{
+                getChapterFileName(chapterFile.filename) }}</a>
+            </div>
+          </td>
+          <td>
+            @if (chapterFile.size) {
+            <span>{{ chapterFile.size | fileSize }}</span>
+            }
+          </td>
+          <td>
+            <div class="d-flex">
+              <a href="{{buildChapterDownloadLink(download.value, chapterFile.filename)}}" download
+                class="btn btn-link"><fa-icon [icon]="faDownload" /></a>
+            </div>
+          </td>
+        </tr>
+        }
+      }
+    }
+      </tbody>
+    </table>
+  </div>
+</main><!-- /.container -->
+
+<footer class="footer navbar-dark bg-dark py-3 mt-5">
+  <div class="container text-center">
+    @if (ytDlpVersion && metubeVersion) {
+      <div class="footer-content">
+        <div class="version-item">
+          <span class="version-label">yt-dlp</span>
+          <span class="version-value">{{ytDlpVersion}}</span>
+        </div>
+        <div class="version-separator"></div>
+        <div class="version-item">
+          <span class="version-label">MeTube</span>
+          <span class="version-value">{{metubeVersion}}</span>
+        </div>
+        <div class="version-separator"></div>
+        @if (ytDlpOptionsUpdateTime) {
+          <div class="version-item">
+            <span class="version-label">yt-dlp-options</span>
+            <span class="version-value">{{ytDlpOptionsUpdateTime}}</span>
+          </div>
+        }
+        @if (ytDlpOptionsUpdateTime) {
+          <div class="version-separator"></div>
+        }
+        <a href="https://github.com/alexta69/metube" target="_blank" class="github-link">
+          <fa-icon [icon]="faGithub" />
+          <span>GitHub</span>
+        </a>
+      </div>
+    }
+  </div>
+</footer>

ui/src/app/app.module.ts

@@ -1,36 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, isDevMode } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { CookieService } from 'ngx-cookie-service';
-
-import { AppComponent } from './app.component';
-import { EtaPipe, SpeedPipe, EncodeURIComponent, FileSizePipe } from './downloads.pipe';
-import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
-import { MeTubeSocket } from './metube-socket';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { ServiceWorkerModule } from '@angular/service-worker';
-
-@NgModule({ declarations: [
-        AppComponent,
-        EtaPipe,
-        SpeedPipe,
-        FileSizePipe,
-        EncodeURIComponent,
-        MasterCheckboxComponent,
-        SlaveCheckboxComponent
-    ],
-    bootstrap: [AppComponent], imports: [BrowserModule,
-        FormsModule,
-        NgbModule,
-        FontAwesomeModule,
-        NgSelectModule,
-        ServiceWorkerModule.register('custom-service-worker.js', {
-            enabled: !isDevMode(),
-            // Register the ServiceWorker as soon as the application is stable
-            // or after 30 seconds (whichever comes first).
-            registrationStrategy: 'registerWhenStable:30000'
-        })], providers: [CookieService, MeTubeSocket, provideHttpClient(withInterceptorsFromDi())] })
-export class AppModule { }

ui/src/app/app.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+vi.hoisted(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    enumerable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+ })),
+ });
+});
+
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+});

ui/src/app/app.ts

@@ -1,39 +1,60 @@
-import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { AsyncPipe, KeyValuePipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { faTrashAlt, faCheckCircle, faTimesCircle, IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import { AfterViewInit, Component, ElementRef, viewChild, inject, OnInit } from '@angular/core';
-import { faRedoAlt, faSun, faMoon, faCircleHalfStroke, faCheck, faExternalLinkAlt, faDownload, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
+import { Observable, map, distinctUntilChanged } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgSelectModule } from '@ng-select/ng-select';  
+import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
-import { map, Observable, of, distinctUntilChanged } from 'rxjs';
+import { DownloadsService } from './services/downloads.service';
-
+import { Themes } from './theme';
-import { Download, DownloadsService, Status } from './downloads.service';
+import { Download, Status, Theme , Quality, Format, Formats, State } from './interfaces';
-import { MasterCheckboxComponent } from './master-checkbox.component';
+import { EtaPipe, SpeedPipe, FileSizePipe } from './pipes';
-import { Formats, Format, Quality } from './formats';
+import { MasterCheckboxComponent , SlaveCheckboxComponent} from './components/';
-import { Theme, Themes } from './theme';
-import {KeyValue} from "@angular/common";
 
 @Component({
   selector: 'app-root',
-    templateUrl: './app.component.html',
+  imports: [
-    styleUrls: ['./app.component.sass'],
+        FormsModule,
-    standalone: false
+        KeyValuePipe,
+        AsyncPipe,
+        FontAwesomeModule,
+        NgbModule,
+        NgSelectModule,
+        EtaPipe,
+        SpeedPipe,
+        FileSizePipe,
+        MasterCheckboxComponent,
+        SlaveCheckboxComponent,
+  ],
+  templateUrl: './app.html',
+  styleUrl: './app.sass',
 })
-export class AppComponent implements AfterViewInit {
+export class App implements AfterViewInit, OnInit {
-  addUrl: string;
+  downloads = inject(DownloadsService);
+  private cookieService = inject(CookieService);
+  private http = inject(HttpClient);
+
+  addUrl!: string;
   formats: Format[] = Formats;
-  qualities: Quality[];
+  qualities!: Quality[];
   quality: string;
   format: string;
-  folder: string;
+  folder!: string;
-  customNamePrefix: string;
+  customNamePrefix!: string;
   autoStart: boolean;
-  playlistStrictMode: boolean;
+  playlistStrictMode!: boolean;
-  playlistItemLimit: number;
+  playlistItemLimit!: number;
+  splitByChapters: boolean;
+  chapterTemplate: string;
   addInProgress = false;
   themes: Theme[] = Themes;
-  activeTheme: Theme;
+  activeTheme: Theme | undefined;
-  customDirs$: Observable<string[]>;
+  customDirs$!: Observable<string[]>;
-  showBatchPanel: boolean = false; 
+  showBatchPanel = false; 
   batchImportModalOpen = false;
   batchImportText = '';
   batchImportStatus = '';
@@ -51,15 +72,15 @@ export class AppComponent implements AfterViewInit {
   failedDownloads = 0;
   totalSpeed = 0;
 
-  @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
+  readonly queueMasterCheckbox = viewChild<MasterCheckboxComponent>('queueMasterCheckboxRef');
-  @ViewChild('queueDelSelected') queueDelSelected: ElementRef;
+  readonly queueDelSelected = viewChild.required<ElementRef>('queueDelSelected');
-  @ViewChild('queueDownloadSelected') queueDownloadSelected: ElementRef;
+  readonly queueDownloadSelected = viewChild.required<ElementRef>('queueDownloadSelected');
-  @ViewChild('doneMasterCheckbox') doneMasterCheckbox: MasterCheckboxComponent;
+  readonly doneMasterCheckbox = viewChild<MasterCheckboxComponent>('doneMasterCheckboxRef');
-  @ViewChild('doneDelSelected') doneDelSelected: ElementRef;
+  readonly doneDelSelected = viewChild.required<ElementRef>('doneDelSelected');
-  @ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
+  readonly doneClearCompleted = viewChild.required<ElementRef>('doneClearCompleted');
-  @ViewChild('doneClearFailed') doneClearFailed: ElementRef;
+  readonly doneClearFailed = viewChild.required<ElementRef>('doneClearFailed');
-  @ViewChild('doneRetryFailed') doneRetryFailed: ElementRef;
+  readonly doneRetryFailed = viewChild.required<ElementRef>('doneRetryFailed');
-  @ViewChild('doneDownloadSelected') doneDownloadSelected: ElementRef;
+  readonly doneDownloadSelected = viewChild.required<ElementRef>('doneDownloadSelected');
 
   faTrashAlt = faTrashAlt;
   faCheckCircle = faCheckCircle;
@@ -78,14 +99,17 @@ export class AppComponent implements AfterViewInit {
   faClock = faClock;
   faTachometerAlt = faTachometerAlt;
 
-  constructor(public downloads: DownloadsService, private cookieService: CookieService, private http: HttpClient) {
+  constructor() {
-    this.format = cookieService.get('metube_format') || 'any';
+    this.format = this.cookieService.get('metube_format') || 'any';
     // Needs to be set or qualities won't automatically be set
     this.setQualities()
-    this.quality = cookieService.get('metube_quality') || 'best';
+    this.quality = this.cookieService.get('metube_quality') || 'best';
-    this.autoStart = cookieService.get('metube_auto_start') !== 'false';
+    this.autoStart = this.cookieService.get('metube_auto_start') !== 'false';
+    this.splitByChapters = this.cookieService.get('metube_split_chapters') === 'true';
+    // Will be set from backend configuration, use empty string as placeholder
+    this.chapterTemplate = this.cookieService.get('metube_chapter_template') || '';
 
-    this.activeTheme = this.getPreferredTheme(cookieService);
+    this.activeTheme = this.getPreferredTheme(this.cookieService);
 
     // Subscribe to download updates
     this.downloads.queueChanged.subscribe(() => {
@@ -104,10 +128,10 @@ export class AppComponent implements AfterViewInit {
     this.getConfiguration();
     this.getYtdlOptionsUpdateTime();
     this.customDirs$ = this.getMatchingCustomDir();
-    this.setTheme(this.activeTheme);
+    this.setTheme(this.activeTheme!);
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-      if (this.activeTheme.id === 'auto') {
+      if (this.activeTheme && this.activeTheme.id === 'auto') {
          this.setTheme(this.activeTheme);
       }
     });
@@ -115,27 +139,30 @@ export class AppComponent implements AfterViewInit {
 
   ngAfterViewInit() {
     this.downloads.queueChanged.subscribe(() => {
-      this.queueMasterCheckbox.selectionChanged();
+      this.queueMasterCheckbox()?.selectionChanged();
     });
     this.downloads.doneChanged.subscribe(() => {
-      this.doneMasterCheckbox.selectionChanged();
+      this.doneMasterCheckbox()?.selectionChanged();
-      let completed: number = 0, failed: number = 0;
+      let completed = 0, failed = 0;
       this.downloads.done.forEach(dl => {
         if (dl.status === 'finished')
           completed++;
         else if (dl.status === 'error')
           failed++;
       });
-      this.doneClearCompleted.nativeElement.disabled = completed === 0;
+      this.doneClearCompleted().nativeElement.disabled = completed === 0;
-      this.doneClearFailed.nativeElement.disabled = failed === 0;
+      this.doneClearFailed().nativeElement.disabled = failed === 0;
-      this.doneRetryFailed.nativeElement.disabled = failed === 0;
+      this.doneRetryFailed().nativeElement.disabled = failed === 0;
     });
     this.fetchVersionInfo();
   }
 
   // workaround to allow fetching of Map values in the order they were inserted
   //  https://github.com/angular/angular/issues/31420
-  asIsOrder(a, b) {
+    
+   
+      
+  asIsOrder() {
     return 1;
   }
 
@@ -162,7 +189,8 @@ export class AppComponent implements AfterViewInit {
 
   getMatchingCustomDir() : Observable<string[]> {
     return this.downloads.customDirsChanged.asObservable().pipe(
-      map((output) => {
+       // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      map((output: any) => {
         // Keep logic consistent with app/ytdl.py
         if (this.isAudioType()) {
           console.debug("Showing audio-specific download directories");
@@ -178,7 +206,8 @@ export class AppComponent implements AfterViewInit {
 
   getYtdlOptionsUpdateTime() {
     this.downloads.ytdlOptionsChanged.subscribe({
-      next: (data) => {
+       // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      next: (data:any) => {
         if (data['success']){
           const date = new Date(data['update_time'] * 1000);
           this.ytDlpOptionsUpdateTime=date.toLocaleString();
@@ -190,12 +219,17 @@ export class AppComponent implements AfterViewInit {
   }
   getConfiguration() {
     this.downloads.configurationChanged.subscribe({
-      next: (config) => {
+       // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      next: (config: any) => {
         this.playlistStrictMode = config['DEFAULT_OPTION_PLAYLIST_STRICT_MODE'];
         const playlistItemLimit = config['DEFAULT_OPTION_PLAYLIST_ITEM_LIMIT'];
         if (playlistItemLimit !== '0') {
           this.playlistItemLimit = playlistItemLimit;
         }
+        // Set chapter template from backend config if not already set by cookie
+        if (!this.chapterTemplate) {
+          this.chapterTemplate = config['OUTPUT_TEMPLATE_CHAPTER'];
+        }
       }
     });
   }
@@ -235,24 +269,39 @@ export class AppComponent implements AfterViewInit {
     this.cookieService.set('metube_auto_start', this.autoStart ? 'true' : 'false', { expires: 3650 });
   }
 
+  splitByChaptersChanged() {
+    this.cookieService.set('metube_split_chapters', this.splitByChapters ? 'true' : 'false', { expires: 3650 });
+  }
+
+  chapterTemplateChanged() {
+    // Restore default if template is cleared - get from configuration
+    if (!this.chapterTemplate || this.chapterTemplate.trim() === '') {
+      this.chapterTemplate = this.downloads.configuration['OUTPUT_TEMPLATE_CHAPTER'];
+    }
+    this.cookieService.set('metube_chapter_template', this.chapterTemplate, { expires: 3650 });
+  }
+
   queueSelectionChanged(checked: number) {
-    this.queueDelSelected.nativeElement.disabled = checked == 0;
+    this.queueDelSelected().nativeElement.disabled = checked == 0;
-    this.queueDownloadSelected.nativeElement.disabled = checked == 0;
+    this.queueDownloadSelected().nativeElement.disabled = checked == 0;
   }
 
   doneSelectionChanged(checked: number) {
-    this.doneDelSelected.nativeElement.disabled = checked == 0;
+    this.doneDelSelected().nativeElement.disabled = checked == 0;
-    this.doneDownloadSelected.nativeElement.disabled = checked == 0;
+    this.doneDownloadSelected().nativeElement.disabled = checked == 0;
   }
 
   setQualities() {
     // qualities for specific format
-    this.qualities = this.formats.find(el => el.id == this.format).qualities
+    const format = this.formats.find(el => el.id == this.format)
+    if (format) {
+      this.qualities = format.qualities
       const exists = this.qualities.find(el => el.id === this.quality)
       this.quality = exists ? this.quality : 'best'
   }
+}
 
-  addDownload(url?: string, quality?: string, format?: string, folder?: string, customNamePrefix?: string, playlistStrictMode?: boolean, playlistItemLimit?: number, autoStart?: boolean) {
+  addDownload(url?: string, quality?: string, format?: string, folder?: string, customNamePrefix?: string, playlistStrictMode?: boolean, playlistItemLimit?: number, autoStart?: boolean, splitByChapters?: boolean, chapterTemplate?: string) {
     url = url ?? this.addUrl
     quality = quality ?? this.quality
     format = format ?? this.format
@@ -261,10 +310,18 @@ export class AppComponent implements AfterViewInit {
     playlistStrictMode = playlistStrictMode ?? this.playlistStrictMode
     playlistItemLimit = playlistItemLimit ?? this.playlistItemLimit
     autoStart = autoStart ?? this.autoStart
+    splitByChapters = splitByChapters ?? this.splitByChapters
+    chapterTemplate = chapterTemplate ?? this.chapterTemplate
 
-    console.debug('Downloading: url='+url+' quality='+quality+' format='+format+' folder='+folder+' customNamePrefix='+customNamePrefix+' playlistStrictMode='+playlistStrictMode+' playlistItemLimit='+playlistItemLimit+' autoStart='+autoStart);
+    // Validate chapter template if chapter splitting is enabled
+    if (splitByChapters && !chapterTemplate.includes('%(section_number)')) {
+      alert('Chapter template must include %(section_number)');
+      return;
+    }
+
+    console.debug('Downloading: url=' + url + ' quality=' + quality + ' format=' + format + ' folder=' + folder + ' customNamePrefix=' + customNamePrefix + ' playlistStrictMode=' + playlistStrictMode + ' playlistItemLimit=' + playlistItemLimit + ' autoStart=' + autoStart + ' splitByChapters=' + splitByChapters + ' chapterTemplate=' + chapterTemplate);
     this.addInProgress = true;
-    this.downloads.add(url, quality, format, folder, customNamePrefix, playlistStrictMode, playlistItemLimit, autoStart).subscribe((status: Status) => {
+    this.downloads.add(url, quality, format, folder, customNamePrefix, playlistStrictMode, playlistItemLimit, autoStart, splitByChapters, chapterTemplate).subscribe((status: Status) => {
       if (status.status === 'error') {
         alert(`Error adding URL: ${status.msg}`);
       } else {
@@ -279,20 +336,20 @@ export class AppComponent implements AfterViewInit {
   }
 
   retryDownload(key: string, download: Download) {
-    this.addDownload(download.url, download.quality, download.format, download.folder, download.custom_name_prefix, download.playlist_strict_mode, download.playlist_item_limit, true);
+    this.addDownload(download.url, download.quality, download.format, download.folder, download.custom_name_prefix, download.playlist_strict_mode, download.playlist_item_limit, true, download.split_by_chapters, download.chapter_template);
     this.downloads.delById('done', [key]).subscribe();
   }
 
-  delDownload(where: string, id: string) {
+  delDownload(where: State, id: string) {
     this.downloads.delById(where, [id]).subscribe();
   }
 
-  startSelectedDownloads(where: string){
+  startSelectedDownloads(where: State){
-    this.downloads.startByFilter(where, dl => dl.checked).subscribe();
+    this.downloads.startByFilter(where, dl => !!dl.checked).subscribe();
   }
 
-  delSelectedDownloads(where: string) {
+  delSelectedDownloads(where: State) {
-    this.downloads.delByFilter(where, dl => dl.checked).subscribe();
+    this.downloads.delByFilter(where, dl => !!dl.checked).subscribe();
   }
 
   clearCompletedDownloads() {
@@ -312,7 +369,8 @@ export class AppComponent implements AfterViewInit {
   }
 
   downloadSelectedFiles() {
-    this.downloads.done.forEach((dl, key) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.downloads.done.forEach((dl, _) => {
       if (dl.status === 'finished' && dl.checked) {
         const link = document.createElement('a');
         link.href = this.buildDownloadLink(dl);
@@ -338,12 +396,38 @@ export class AppComponent implements AfterViewInit {
     return baseDir + encodeURIComponent(download.filename);
   }
 
-  identifyDownloadRow(index: number, row: KeyValue<string, Download>) {
+  buildResultItemTooltip(download: Download) {
-    return row.key;
+    const parts = [];
+    if (download.msg) {
+      parts.push(download.msg);
+    }
+    if (download.error) {
+      parts.push(download.error);
+    }
+    return parts.join(' | ');
   }
 
-  isNumber(event) {
+  buildChapterDownloadLink(download: Download, chapterFilename: string) {
-    const charCode = (event.which) ? event.which : event.keyCode;
+    let baseDir = this.downloads.configuration["PUBLIC_HOST_URL"];
+    if (download.quality == 'audio' || chapterFilename.endsWith('.mp3')) {
+      baseDir = this.downloads.configuration["PUBLIC_HOST_AUDIO_URL"];
+    }
+
+    if (download.folder) {
+      baseDir += download.folder + '/';
+    }
+
+    return baseDir + encodeURIComponent(chapterFilename);
+  }
+
+  getChapterFileName(filepath: string) {
+    // Extract just the filename from the path
+    const parts = filepath.split('/');
+    return parts[parts.length - 1];
+  }
+
+  isNumber(event: KeyboardEvent) {
+    const charCode = +event.code || event.keyCode;
     if (charCode > 31 && (charCode  < 48 || charCode > 57)) {
       event.preventDefault();
     }
@@ -398,7 +482,7 @@ export class AppComponent implements AfterViewInit {
       this.batchImportStatus = `Importing URL ${index + 1} of ${urls.length}: ${url}`;
       // Now pass the selected quality, format, folder, etc. to the add() method
       this.downloads.add(url, this.quality, this.format, this.folder, this.customNamePrefix,
-        this.playlistStrictMode, this.playlistItemLimit, this.autoStart)
+        this.playlistStrictMode, this.playlistItemLimit, this.autoStart, this.splitByChapters, this.chapterTemplate)
         .subscribe({
           next: (status: Status) => {
             if (status.status === 'error') {
@@ -485,6 +569,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   fetchVersionInfo(): void {
+    // eslint-disable-next-line no-useless-escape    
     const baseUrl = `${window.location.origin}${window.location.pathname.replace(/\/[^\/]*$/, '/')}`;
     const versionUrl = `${baseUrl}version`;
     this.http.get<{ 'yt-dlp': string, version: string }>(versionUrl)

ui/src/app/components/index.ts

@@ -0,0 +1,2 @@
+export { MasterCheckboxComponent } from './master-checkbox.component';
+export { SlaveCheckboxComponent } from './slave-checkbox.component';

ui/src/app/components/master-checkbox.component.ts

@@ -0,0 +1,40 @@
+import { Component, ElementRef, viewChild, output, input } from "@angular/core";
+import { Checkable } from "../interfaces";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+    selector: 'app-master-checkbox',
+    template: `
+  <div class="form-check">
+    <input type="checkbox" class="form-check-input" id="{{id()}}-select-all" #masterCheckbox [(ngModel)]="selected" (change)="clicked()">
+    <label class="form-check-label" for="{{id()}}-select-all"></label>
+  </div>
+`,
+imports: [
+  FormsModule
+]
+})
+export class MasterCheckboxComponent {
+  readonly id = input.required<string>();
+  readonly list = input.required<Map<string, Checkable>>();
+  readonly changed = output<number>();
+
+  readonly masterCheckbox = viewChild.required<ElementRef>('masterCheckbox');
+  selected!: boolean;
+
+  clicked() {
+    this.list().forEach(item => item.checked = this.selected);
+    this.selectionChanged();
+  }
+
+  selectionChanged() {
+    const masterCheckbox = this.masterCheckbox();
+    if (!masterCheckbox)
+      return;
+    let checked = 0;
+    this.list().forEach(item => { if(item.checked) checked++ });
+    this.selected = checked > 0 && checked == this.list().size;
+    masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.list().size;
+    this.changed.emit(checked);
+  }
+}

ui/src/app/components/slave-checkbox.component.ts

@@ -0,0 +1,22 @@
+import { Component, input } from '@angular/core';
+import { MasterCheckboxComponent } from './master-checkbox.component';
+import { Checkable } from '../interfaces';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+    selector: 'app-slave-checkbox',
+    template: `
+  <div class="form-check">
+    <input type="checkbox" class="form-check-input" id="{{master().id()}}-{{id()}}-select" [(ngModel)]="checkable().checked" (change)="master().selectionChanged()">
+    <label class="form-check-label" for="{{master().id()}}-{{id()}}-select"></label>
+  </div>
+`,
+imports: [  
+  FormsModule
+]
+})
+export class SlaveCheckboxComponent {
+  readonly id = input.required<string>();
+  readonly master = input.required<MasterCheckboxComponent>();
+  readonly checkable = input.required<Checkable>();
+}

ui/src/app/downloads.pipe.ts

@@ -1,93 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { SpeedService } from './speed.service';
-import { BehaviorSubject } from 'rxjs';
-import { throttleTime } from 'rxjs/operators';
-
-@Pipe({
-    name: 'eta',
-    standalone: false
-})
-export class EtaPipe implements PipeTransform {
-  transform(value: number, ...args: any[]): any {
-    if (value === null) {
-      return null;
-    }
-    if (value < 60) {
-      return `${Math.round(value)}s`;
-    }
-    if (value < 3600) {
-      return `${Math.floor(value/60)}m ${Math.round(value%60)}s`;
-    }
-    const hours = Math.floor(value/3600)
-    const minutes = value % 3600
-    return `${hours}h ${Math.floor(minutes/60)}m ${Math.round(minutes%60)}s`;
-  }
-}
-
-@Pipe({
-    name: 'speed',
-    standalone: false,
-    pure: false // Make the pipe impure so it can handle async updates
-})
-export class SpeedPipe implements PipeTransform {
-  private speedSubject = new BehaviorSubject<number>(0);
-  private formattedSpeed: string = '';
-
-  constructor(private speedService: SpeedService) {
-    // Throttle updates to once per second
-    this.speedSubject.pipe(
-      throttleTime(1000)
-    ).subscribe(speed => {
-      // If speed is invalid or 0, return empty string
-      if (speed === null || speed === undefined || isNaN(speed) || speed <= 0) {
-        this.formattedSpeed = '';
-        return;
-      }
-      
-      const k = 1024;
-      const dm = 2;
-      const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
-      const i = Math.floor(Math.log(speed) / Math.log(k));
-      this.formattedSpeed = parseFloat((speed / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-    });
-  }
-
-  transform(value: number, ...args: any[]): any {
-    // If speed is invalid or 0, return empty string
-    if (value === null || value === undefined || isNaN(value) || value <= 0) {
-      return '';
-    }
-    
-    // Update the speed subject
-    this.speedSubject.next(value);
-    
-    // Return the last formatted speed
-    return this.formattedSpeed;
-  }
-}
-
-@Pipe({
-    name: 'encodeURIComponent',
-    standalone: false
-})
-export class EncodeURIComponent implements PipeTransform {
-  transform(value: string, ...args: any[]): any {
-    return encodeURIComponent(value);
-  }
-}
-
-@Pipe({
-    name: 'fileSize',
-    standalone: false
-})
-export class FileSizePipe implements PipeTransform {
-  transform(value: number): string {
-      if (isNaN(value) || value === 0) return '0 Bytes';
-
-      const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-      const unitIndex = Math.floor(Math.log(value) / Math.log(1000)); // Use 1000 for common units
-
-      const unitValue = value / Math.pow(1000, unitIndex);
-      return `${unitValue.toFixed(2)} ${units[unitIndex]}`;
-  }
-}

ui/src/app/downloads.service.ts

@@ -1,161 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Observable, of, Subject } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { MeTubeSocket } from './metube-socket';
-
-export interface Status {
-  status: string;
-  msg?: string;
-}
-
-export interface Download {
-  id: string;
-  title: string;
-  url: string;
-  quality: string;
-  format: string;
-  folder: string;
-  custom_name_prefix: string;
-  playlist_strict_mode: boolean;
-  playlist_item_limit: number;
-  status: string;
-  msg: string;
-  percent: number;
-  speed: number;
-  eta: number;
-  filename: string;
-  checked?: boolean;
-  deleting?: boolean;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DownloadsService {
-  loading = true;
-  queue = new Map<string, Download>();
-  done = new Map<string, Download>();
-  queueChanged = new Subject();
-  doneChanged = new Subject();
-  customDirsChanged = new Subject();
-  ytdlOptionsChanged = new Subject();
-  configurationChanged = new Subject();
-  updated = new Subject();
-
-  configuration = {};
-  customDirs = {};
-
-  constructor(private http: HttpClient, private socket: MeTubeSocket) {
-    socket.fromEvent('all').subscribe((strdata: string) => {
-      this.loading = false;
-      let data: [[[string, Download]], [[string, Download]]] = JSON.parse(strdata);
-      this.queue.clear();
-      data[0].forEach(entry => this.queue.set(...entry));
-      this.done.clear();
-      data[1].forEach(entry => this.done.set(...entry));
-      this.queueChanged.next(null);
-      this.doneChanged.next(null);
-    });
-    socket.fromEvent('added').subscribe((strdata: string) => {
-      let data: Download = JSON.parse(strdata);
-      this.queue.set(data.url, data);
-      this.queueChanged.next(null);
-    });
-    socket.fromEvent('updated').subscribe((strdata: string) => {
-      let data: Download = JSON.parse(strdata);
-      let dl: Download = this.queue.get(data.url);
-      data.checked = dl.checked;
-      data.deleting = dl.deleting;
-      this.queue.set(data.url, data);
-      this.updated.next(null);
-    });
-    socket.fromEvent('completed').subscribe((strdata: string) => {
-      let data: Download = JSON.parse(strdata);
-      this.queue.delete(data.url);
-      this.done.set(data.url, data);
-      this.queueChanged.next(null);
-      this.doneChanged.next(null);
-    });
-    socket.fromEvent('canceled').subscribe((strdata: string) => {
-      let data: string = JSON.parse(strdata);
-      this.queue.delete(data);
-      this.queueChanged.next(null);
-    });
-    socket.fromEvent('cleared').subscribe((strdata: string) => {
-      let data: string = JSON.parse(strdata);
-      this.done.delete(data);
-      this.doneChanged.next(null);
-    });
-    socket.fromEvent('configuration').subscribe((strdata: string) => {
-      let data = JSON.parse(strdata);
-      console.debug("got configuration:", data);
-      this.configuration = data;
-      this.configurationChanged.next(data);
-    });
-    socket.fromEvent('custom_dirs').subscribe((strdata: string) => {
-      let data = JSON.parse(strdata);
-      console.debug("got custom_dirs:", data);
-      this.customDirs = data;
-      this.customDirsChanged.next(data);
-    });
-    socket.fromEvent('ytdl_options_changed').subscribe((strdata: string) => {
-      let data = JSON.parse(strdata);
-      this.ytdlOptionsChanged.next(data);
-    });
-  }
-
-  handleHTTPError(error: HttpErrorResponse) {
-    var msg = error.error instanceof ErrorEvent ? error.error.message : error.error;
-    return of({status: 'error', msg: msg})
-  }
-
-  public add(url: string, quality: string, format: string, folder: string, customNamePrefix: string, playlistStrictMode: boolean, playlistItemLimit: number, autoStart: boolean) {
-    return this.http.post<Status>('add', {url: url, quality: quality, format: format, folder: folder, custom_name_prefix: customNamePrefix, playlist_strict_mode: playlistStrictMode, playlist_item_limit: playlistItemLimit, auto_start: autoStart}).pipe(
-      catchError(this.handleHTTPError)
-    );
-  }
-
-  public startById(ids: string[]) {
-    return this.http.post('start', {ids: ids});
-  }
-
-  public delById(where: string, ids: string[]) {
-    ids.forEach(id => this[where].get(id).deleting = true);
-    return this.http.post('delete', {where: where, ids: ids});
-  }
-
-  public startByFilter(where: string, filter: (dl: Download) => boolean) {
-    let ids: string[] = [];
-    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
-    return this.startById(ids);
-  }
-
-  public delByFilter(where: string, filter: (dl: Download) => boolean) {
-    let ids: string[] = [];
-    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
-    return this.delById(where, ids);
-  }
-  public addDownloadByUrl(url: string): Promise<any> {
-    const defaultQuality = 'best';
-    const defaultFormat = 'mp4';
-    const defaultFolder = ''; 
-    const defaultCustomNamePrefix = '';
-    const defaultPlaylistStrictMode = false;
-    const defaultPlaylistItemLimit = 0;
-    const defaultAutoStart = true;
-    
-    return new Promise((resolve, reject) => {
-      this.add(url, defaultQuality, defaultFormat, defaultFolder, defaultCustomNamePrefix, defaultPlaylistStrictMode, defaultPlaylistItemLimit, defaultAutoStart)
-        .subscribe(
-          response => resolve(response),
-          error => reject(error)
-        );
-    });
-  }
-  public exportQueueUrls(): string[] {
-    return Array.from(this.queue.values()).map(download => download.url);
-  }
-  
-  
-}

ui/src/app/interfaces/checkable.ts

@@ -0,0 +1,3 @@
+export interface Checkable {
+  checked: boolean;
+}

ui/src/app/interfaces/download.ts

@@ -0,0 +1,25 @@
+
+export interface Download {
+  id: string;
+  title: string;
+  url: string;
+  quality: string;
+  format: string;
+  folder: string;
+  custom_name_prefix: string;
+  playlist_strict_mode: boolean;
+  playlist_item_limit: number;
+  split_by_chapters?: boolean;
+  chapter_template?: string;
+  status: string;
+  msg: string;
+  percent: number;
+  speed: number;
+  eta: number;
+  filename: string;
+  checked: boolean;
+  size?: number;
+  error?: string;
+  deleting?: boolean;
+  chapter_files?: Array<{ filename: string, size: number }>;
+}

ui/src/app/interfaces/format.ts

@@ -0,0 +1,7 @@
+import { Quality } from "./quality";
+
+export interface Format {
+  id: string;
+  text: string;
+  qualities: Quality[];
+}

ui/src/app/interfaces/formats.ts

@@ -1,13 +1,5 @@
-export interface Format {
+import { Format } from "./format";
-  id: string;
-  text: string;
-  qualities: Quality[];
-}
 
-export interface Quality {
-  id: string;
-  text: string;
-}
 
 export const Formats: Format[] = [
   {

ui/src/app/interfaces/index.ts

@@ -0,0 +1,9 @@
+export * from './theme';
+export * from './status';
+export * from './quality';
+export * from './state';    
+export * from './download'; 
+export * from './checkable';
+export * from './format';
+export * from './formats';
+

ui/src/app/interfaces/quality.ts

@@ -0,0 +1,5 @@
+
+export interface Quality {
+  id: string;
+  text: string;
+}

ui/src/app/interfaces/state.ts

@@ -0,0 +1 @@
+export type State =  'queue' | 'done';

ui/src/app/interfaces/status.ts

@@ -0,0 +1,4 @@
+export interface Status {
+  status: string;
+  msg?: string;
+}

ui/src/app/interfaces/theme.ts

@@ -0,0 +1,7 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+export interface Theme {
+  id: string;
+  displayName: string;
+  icon: IconDefinition;
+}

ui/src/app/master-checkbox.component.ts

@@ -1,55 +0,0 @@
-import { Component, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
-
-interface Checkable {
-  checked: boolean;
-}
-
-@Component({
-    selector: 'app-master-checkbox',
-    template: `
-  <div class="form-check">
-    <input type="checkbox" class="form-check-input" id="{{id}}-select-all" #masterCheckbox [(ngModel)]="selected" (change)="clicked()">
-    <label class="form-check-label" for="{{id}}-select-all"></label>
-  </div>
-`,
-    standalone: false
-})
-export class MasterCheckboxComponent {
-  @Input() id: string;
-  @Input() list: Map<String, Checkable>;
-  @Output() changed = new EventEmitter<number>();
-
-  @ViewChild('masterCheckbox') masterCheckbox: ElementRef;
-  selected: boolean;
-
-  clicked() {
-    this.list.forEach(item => item.checked = this.selected);
-    this.selectionChanged();
-  }
-
-  selectionChanged() {
-    if (!this.masterCheckbox)
-      return;
-    let checked: number = 0;
-    this.list.forEach(item => { if(item.checked) checked++ });
-    this.selected = checked > 0 && checked == this.list.size;
-    this.masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.list.size;
-    this.changed.emit(checked);
-  }
-}
-
-@Component({
-    selector: 'app-slave-checkbox',
-    template: `
-  <div class="form-check">
-    <input type="checkbox" class="form-check-input" id="{{master.id}}-{{id}}-select" [(ngModel)]="checkable.checked" (change)="master.selectionChanged()">
-    <label class="form-check-label" for="{{master.id}}-{{id}}-select"></label>
-  </div>
-`,
-    standalone: false
-})
-export class SlaveCheckboxComponent {
-  @Input() id: string;
-  @Input() master: MasterCheckboxComponent;
-  @Input() checkable: Checkable;
-}

ui/src/app/pipes/eta.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'eta',
+})
+export class EtaPipe implements PipeTransform {
+  transform(value: number): string | null {
+    if (value === null) {
+      return null;
+    }
+    if (value < 60) {
+      return `${Math.round(value)}s`;
+    }
+    if (value < 3600) {
+      return `${Math.floor(value/60)}m ${Math.round(value%60)}s`;
+    }
+    const hours = Math.floor(value/3600)
+    const minutes = value % 3600
+    return `${hours}h ${Math.floor(minutes/60)}m ${Math.round(minutes%60)}s`;
+  }
+}

ui/src/app/pipes/file-size.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'fileSize',
+})
+export class FileSizePipe implements PipeTransform {
+  transform(value: number): string {
+      if (isNaN(value) || value === 0) return '0 Bytes';
+
+      const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      const unitIndex = Math.floor(Math.log(value) / Math.log(1000)); // Use 1000 for common units
+
+      const unitValue = value / Math.pow(1000, unitIndex);
+      return `${unitValue.toFixed(2)} ${units[unitIndex]}`;
+  }
+}

ui/src/app/pipes/index.ts

@@ -0,0 +1,3 @@
+export { EtaPipe } from './eta.pipe';
+export { SpeedPipe } from './speed.pipe';
+export { FileSizePipe } from './file-size.pipe';

ui/src/app/pipes/speed.pipe.ts

@@ -0,0 +1,43 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { BehaviorSubject, throttleTime } from "rxjs";
+
+@Pipe({
+    name: 'speed',
+    pure: false // Make the pipe impure so it can handle async updates
+})
+export class SpeedPipe implements PipeTransform {
+  private speedSubject = new BehaviorSubject<number>(0);
+  private formattedSpeed = '';
+
+  constructor() {
+    // Throttle updates to once per second
+    this.speedSubject.pipe(
+      throttleTime(1000)
+    ).subscribe(speed => {
+      // If speed is invalid or 0, return empty string
+      if (speed === null || speed === undefined || isNaN(speed) || speed <= 0) {
+        this.formattedSpeed = '';
+        return;
+      }
+      
+      const k = 1024;
+      const dm = 2;
+      const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
+      const i = Math.floor(Math.log(speed) / Math.log(k));
+      this.formattedSpeed = parseFloat((speed / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    });
+  }
+
+  transform(value: number): string {
+    // If speed is invalid or 0, return empty string
+    if (value === null || value === undefined || isNaN(value) || value <= 0) {
+      return '';
+    }
+    
+    // Update the speed subject
+    this.speedSubject.next(value);
+    
+    // Return the last formatted speed
+    return this.formattedSpeed;
+  }
+}

ui/src/app/services/downloads.service.ts

@@ -0,0 +1,169 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { of, Subject } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { MeTubeSocket } from './metube-socket.service';
+import { Download, Status, State } from '../interfaces';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+@Injectable({
+  providedIn: 'root'
+})
+export class DownloadsService {
+  private http = inject(HttpClient);
+  private socket = inject(MeTubeSocket);
+  loading = true;
+  queue = new Map<string, Download>();
+  done = new Map<string, Download>();
+  queueChanged = new Subject();
+  doneChanged = new Subject();
+  customDirsChanged = new Subject();
+  ytdlOptionsChanged = new Subject();
+  configurationChanged = new Subject();
+  updated = new Subject();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  configuration: any = {};
+  customDirs = {};
+
+  constructor() {
+    this.socket.fromEvent('all')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      this.loading = false;
+      const data: [[[string, Download]], [[string, Download]]] = JSON.parse(strdata);
+      this.queue.clear();
+      data[0].forEach(entry => this.queue.set(...entry));
+      this.done.clear();
+      data[1].forEach(entry => this.done.set(...entry));
+      this.queueChanged.next(null);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('added')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      this.queue.set(data.url, data);
+      this.queueChanged.next(null);
+    });
+    this.socket.fromEvent('updated')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      const dl: Download | undefined  = this.queue.get(data.url);
+      data.checked = !!dl?.checked;
+      data.deleting = !!dl?.deleting;
+      this.queue.set(data.url, data);
+      this.updated.next(null);
+    });
+    this.socket.fromEvent('completed')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: Download = JSON.parse(strdata);
+      this.queue.delete(data.url);
+      this.done.set(data.url, data);
+      this.queueChanged.next(null);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('canceled')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: string = JSON.parse(strdata);
+      this.queue.delete(data);
+      this.queueChanged.next(null);
+    });
+    this.socket.fromEvent('cleared')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data: string = JSON.parse(strdata);
+      this.done.delete(data);
+      this.doneChanged.next(null);
+    });
+    this.socket.fromEvent('configuration')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      console.debug("got configuration:", data);
+      this.configuration = data;
+      this.configurationChanged.next(data);
+    });
+    this.socket.fromEvent('custom_dirs')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      console.debug("got custom_dirs:", data);
+      this.customDirs = data;
+      this.customDirsChanged.next(data);
+    });
+    this.socket.fromEvent('ytdl_options_changed')
+    .pipe(takeUntilDestroyed())
+    .subscribe((strdata: string) => {
+      const data = JSON.parse(strdata);
+      this.ytdlOptionsChanged.next(data);
+    });
+  }
+
+  handleHTTPError(error: HttpErrorResponse) {
+    const msg = error.error instanceof ErrorEvent ? error.error.message : error.error;
+    return of({status: 'error', msg: msg})
+  }
+
+  public add(url: string, quality: string, format: string, folder: string, customNamePrefix: string, playlistStrictMode: boolean, playlistItemLimit: number, autoStart: boolean, splitByChapters: boolean, chapterTemplate: string) {
+    return this.http.post<Status>('add', { url: url, quality: quality, format: format, folder: folder, custom_name_prefix: customNamePrefix, playlist_strict_mode: playlistStrictMode, playlist_item_limit: playlistItemLimit, auto_start: autoStart, split_by_chapters: splitByChapters, chapter_template: chapterTemplate }).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
+
+  public startById(ids: string[]) {
+    return this.http.post('start', {ids: ids});
+  }
+
+  public delById(where: State, ids: string[]) {
+    ids.forEach(id => {
+      const obj = this[where].get(id)
+      if (obj) {
+        obj.deleting = true
+      }
+  });
+    return this.http.post('delete', {where: where, ids: ids});
+  }
+
+  public startByFilter(where: State, filter: (dl: Download) => boolean) {
+    const ids: string[] = [];
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    return this.startById(ids);
+  }
+
+  public delByFilter(where: State, filter: (dl: Download) => boolean) {
+    const ids: string[] = [];
+    this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.url) });
+    return this.delById(where, ids);
+  }
+  public addDownloadByUrl(url: string): Promise<{
+    response: Status} | {
+    status: string;
+    msg?: string;
+  }> {
+    const defaultQuality = 'best';
+    const defaultFormat = 'mp4';
+    const defaultFolder = ''; 
+    const defaultCustomNamePrefix = '';
+    const defaultPlaylistStrictMode = false;
+    const defaultPlaylistItemLimit = 0;
+    const defaultAutoStart = true;
+    const defaultSplitByChapters = false;
+    const defaultChapterTemplate = this.configuration['OUTPUT_TEMPLATE_CHAPTER'];
+
+    return new Promise((resolve, reject) => {
+      this.add(url, defaultQuality, defaultFormat, defaultFolder, defaultCustomNamePrefix, defaultPlaylistStrictMode, defaultPlaylistItemLimit, defaultAutoStart, defaultSplitByChapters, defaultChapterTemplate)
+        .subscribe({
+          next: (response) => resolve(response),
+          error: (error) => reject(error)
+        });
+    });
+  }
+  public exportQueueUrls(): string[] {
+    return Array.from(this.queue.values()).map(download => download.url);
+  }
+  
+  
+}

ui/src/app/services/index.ts

@@ -0,0 +1,3 @@
+export { DownloadsService } from './downloads.service';
+export { SpeedService } from './speed.service';
+export { MeTubeSocket } from './metube-socket.service';

ui/src/app/services/metube-socket.service.ts

@@ -1,10 +1,15 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ApplicationRef } from '@angular/core';
 import { Socket } from 'ngx-socket-io';
 
-@Injectable()
+@Injectable(
+  { providedIn: 'root' }
+)
 export class MeTubeSocket extends Socket {
-  constructor(appRef: ApplicationRef) {
+
+  constructor() {
+    const appRef = inject(ApplicationRef);
+
     const path =
       document.location.pathname.replace(/share-target/, '') + 'socket.io';
     super({ url: '', options: { path } }, appRef);

ui/src/app/theme.ts

@@ -1,11 +1,6 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faCircleHalfStroke, faMoon, faSun  } from "@fortawesome/free-solid-svg-icons";
+import { Theme } from "./interfaces/theme";
 
-export interface Theme {
-  id: string;
-  displayName: string;
-  icon: IconDefinition;
-}
 
 export const Themes: Theme[] = [
   {

ui/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

ui/src/environments/environment.ts

@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

ui/src/main.ts

@@ -1,12 +1,9 @@
-import { enableProdMode } from '@angular/core';
+/// <reference types="@angular/localize" />
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
-import { environment } from './environments/environment';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
 
-if (environment.production) {
-  enableProdMode();
-}
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(App, appConfig)
-  .catch(err => console.error(err));
+  .catch((err) => console.error(err));

ui/src/polyfills.ts

@@ -1,69 +0,0 @@
-/***************************************************************************************************
- * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
- */
-import '@angular/localize/init';
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * IE11 requires the following for NgClass support on SVG elements
- */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

ui/src/test.ts

@@ -1,14 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

ui/tsconfig.app.json

@@ -3,13 +3,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
+  ],
+    "exclude": [
+    "src/**/*.spec.ts"
   ]
 }

ui/tsconfig.json

@@ -2,20 +2,30 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "strict": true,
-    "outDir": "./dist/out-tsc",
+    "noImplicitOverride": true,
-    "sourceMap": true,
+    "noPropertyAccessFromIndexSignature": true,
-    "esModuleInterop": true,
+    "noImplicitReturns": true,
-    "declaration": false,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "es2020",
+    "module": "preserve"
-    "lib": [
+  },
-      "es2018",
+  "angularCompilerOptions": {
-      "dom"
+    "strictInjectionParameters": true,
-    ],
+    "strictInputAccessModifiers": true,
-    "useDefineForClassFields": false
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
     }
+  ]
 }

ui/tsconfig.spec.json

@@ -4,13 +4,9 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"

ui/tslint.json

@@ -1,152 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rulesDirectory": [
-    "codelyzer"
-  ],
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "typedef": [
-      true,
-      "call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ]
-  }
-}

uv.lock

@@ -922,11 +922,11 @@ wheels = [
 
 [[package]]
 name = "yt-dlp"
-version = "2025.11.12"
+version = "2025.12.8"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/cf/41/53ad8c6e74d6627bd598dfbb8ad7c19d5405e438210ad0bbaf1b288387e7/yt_dlp-2025.11.12.tar.gz", hash = "sha256:5f0795a6b8fc57a5c23332d67d6c6acf819a0b46b91a6324bae29414fa97f052", size = 3076928, upload-time = "2025-11-12T01:00:38.43Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/14/77/db924ebbd99d0b2b571c184cb08ed232cf4906c6f9b76eed763cd2c84170/yt_dlp-2025.12.8.tar.gz", hash = "sha256:b773c81bb6b71cb2c111cfb859f453c7a71cf2ef44eff234ff155877184c3e4f", size = 3088947, upload-time = "2025-12-08T00:16:01.649Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/5f/16/fdebbee6473473a1c0576bd165a50e4a70762484d638c1d59fa9074e175b/yt_dlp-2025.11.12-py3-none-any.whl", hash = "sha256:b47af37bbb16b08efebb36825a280ea25a507c051f93bf413a6e4a0e586c6e79", size = 3279151, upload-time = "2025-11-12T01:00:35.813Z" },
+    { url = "https://files.pythonhosted.org/packages/6e/2f/98c3596ad923f8efd32c90dca62e241e8ad9efcebf20831173c357042ba0/yt_dlp-2025.12.8-py3-none-any.whl", hash = "sha256:36e2584342e409cfbfa0b5e61448a1c5189e345cf4564294456ee509e7d3e065", size = 3291464, upload-time = "2025-12-08T00:15:58.556Z" },
 ]
 
 [package.optional-dependencies]
@@ -947,9 +947,9 @@ default = [
 
 [[package]]
 name = "yt-dlp-ejs"
-version = "0.3.1"
+version = "0.3.2"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/fe/02/58b16dee54ad7f9f8c4b5b490960478dbbd31a27da4be2c876d8c09ac8e3/yt_dlp_ejs-0.3.1.tar.gz", hash = "sha256:7f2119eb02864800f651fa33825ddfe13d152a1f730fa103d9864f091df24227", size = 33805, upload-time = "2025-11-07T20:36:29.144Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/de/72/57d02cf78eb45126bd171298d6a58a5bd48ce1a398b6b7ff00fc904f1f0c/yt_dlp_ejs-0.3.2.tar.gz", hash = "sha256:31a41292799992bdc913e03c9fac2a8c90c82a5cbbc792b2e3373b01da841e3e", size = 34678, upload-time = "2025-12-07T23:44:48.258Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/e7/fd/34fbdaf0d53386c47e219c532a479766cd9336fde34c00834c8e0123df7a/yt_dlp_ejs-0.3.1-py3-none-any.whl", hash = "sha256:a6e3548874db7c774388931752bb46c7f4642c044b2a189e56968f3d5ecab622", size = 53155, upload-time = "2025-11-07T20:36:27.952Z" },
+    { url = "https://files.pythonhosted.org/packages/9d/0d/1f0d7a735ca60b87953271b15d00eff5eef05f6118390ddf6f81982526ed/yt_dlp_ejs-0.3.2-py3-none-any.whl", hash = "sha256:f2dc6b3d1b909af1f13e021621b0af048056fca5fb07c4db6aa9bbb37a4f66a9", size = 53252, upload-time = "2025-12-07T23:44:46.605Z" },
 ]