refactor: simplify filename generation by removing unnecessary relative path computation (closes #916, closes #917)

app/main.py

@@ -302,6 +302,11 @@ async def add(request):
     )
     return web.Response(text=serializer.encode(status))
 
+@routes.post(config.URL_PREFIX + 'cancel-add')
+async def cancel_add(request):
+    dqueue.cancel_add()
+    return web.Response(text=serializer.encode({'status': 'ok'}), content_type='application/json')
+
 @routes.post(config.URL_PREFIX + 'delete')
 async def delete(request):
     post = await request.json()
@@ -433,6 +438,7 @@ async def add_cors(request):
     return web.Response(text=serializer.encode({"status": "ok"}))
 
 app.router.add_route('OPTIONS', config.URL_PREFIX + 'add', add_cors)
+app.router.add_route('OPTIONS', config.URL_PREFIX + 'cancel-add', add_cors)
 
 async def on_prepare(request, response):
     if 'Origin' in request.headers:

app/ytdl.py

@@ -214,16 +214,7 @@ class Download:
                     filepath = d['info_dict']['filepath']
                     if '__finaldir' in d['info_dict']:
                         finaldir = d['info_dict']['__finaldir']
-                        # Compute relative path from temp dir to preserve
-                        # subdirectory structure from the output template.
-                        try:
-                            rel_path = os.path.relpath(filepath, self.temp_dir)
-                        except ValueError:
-                            rel_path = os.path.basename(filepath)
-                        if rel_path.startswith('..'):
-                            # filepath is not under temp_dir, fall back to basename
-                            rel_path = os.path.basename(filepath)
-                        filename = os.path.join(finaldir, rel_path)
+                        filename = os.path.join(finaldir, os.path.basename(filepath))
                     else:
                         filename = filepath
                     self.status_queue.put({'status': 'finished', 'filename': filename})
@@ -535,6 +526,11 @@ class DownloadQueue:
         self.active_downloads = set()
         self.semaphore = asyncio.Semaphore(int(self.config.MAX_CONCURRENT_DOWNLOADS))
         self.done.load()
+        self._add_generation = 0
+
+    def cancel_add(self):
+        self._add_generation += 1
+        log.info('Playlist add operation canceled by user')
 
     async def __import_queue(self):
         for k, v in self.queue.saved_items():
@@ -655,6 +651,7 @@ class DownloadQueue:
         subtitle_language,
         subtitle_mode,
         already,
+        _add_gen=None,
     ):
         if not entry:
             return {'status': 'error', 'msg': "Invalid/empty data was given."}
@@ -685,6 +682,7 @@ class DownloadQueue:
                 subtitle_language,
                 subtitle_mode,
                 already,
+                _add_gen,
             )
         elif etype == 'playlist' or etype == 'channel':
             log.debug(f'Processing as a {etype}')
@@ -699,6 +697,9 @@ class DownloadQueue:
                 log.info(f'Item limit is set. Processing only first {playlist_item_limit} entries')
                 entries = entries[:playlist_item_limit]
             for index, etr in enumerate(entries, start=1):
+                if _add_gen is not None and self._add_generation != _add_gen:
+                    log.info(f'Playlist add canceled after processing {len(already)} entries')
+                    return {'status': 'ok', 'msg': f'Canceled - added {len(already)} items before cancel'}
                 etr["_type"] = "video"
                 etr[etype] = entry.get("id") or entry.get("channel_id") or entry.get("channel")
                 etr[f"{etype}_index"] = '{{0:0{0:d}d}}'.format(index_digits).format(index)
@@ -720,6 +721,7 @@ class DownloadQueue:
                         subtitle_language,
                         subtitle_mode,
                         already,
+                        _add_gen,
                     )
                 )
             if any(res['status'] == 'error' for res in results):
@@ -765,12 +767,15 @@ class DownloadQueue:
         subtitle_language="en",
         subtitle_mode="prefer_manual",
         already=None,
+        _add_gen=None,
     ):
         log.info(
             f'adding {url}: {quality=} {format=} {already=} {folder=} {custom_name_prefix=} '
             f'{playlist_item_limit=} {auto_start=} {split_by_chapters=} {chapter_template=} '
             f'{subtitle_format=} {subtitle_language=} {subtitle_mode=}'
         )
+        if already is None:
+            _add_gen = self._add_generation
         already = set() if already is None else already
         if url in already:
             log.info('recursion detected, skipping')
@@ -795,6 +800,7 @@ class DownloadQueue:
             subtitle_language,
             subtitle_mode,
             already,
+            _add_gen,
         )
 
     async def start_pending(self, ids):

ui/src/app/app.html

@@ -98,15 +98,22 @@
               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>
+            @if (addInProgress && cancelRequested) {
+              <button class="btn btn-warning btn-lg px-3" type="button" disabled>
+                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
+                Canceling...
+              </button>
+            } @else if (addInProgress) {
+              <button class="btn btn-danger btn-lg px-3" type="button" (click)="cancelAdding()">
+                <fa-icon [icon]="faTimesCircle" class="me-1" /> Cancel
+              </button>
+            } @else {
+              <button class="btn btn-primary btn-lg px-4" type="submit"
+                (click)="addDownload()"
+                [disabled]="downloads.loading">
+                Download
+              </button>
+            }
           </div>
         </div>
       </div>
@@ -426,6 +433,7 @@
 
   <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" (click)="toggleSortOrder()" ngbTooltip="{{ sortAscending ? 'Oldest first' : 'Newest first' }}"><fa-icon [icon]="sortAscending ? faSortAmountUp : faSortAmountDown" />&nbsp; {{ sortAscending ? 'Oldest first' : 'Newest first' }}</button>
     <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>
@@ -445,58 +453,89 @@
         </tr>
       </thead>
       <tbody>
-        @for (download of downloads.done | keyvalue: asIsOrder; track download.value.id) {
-          <tr [class.disabled]='download.value.deleting'>
+        @for (entry of cachedSortedDone; track entry[1].id) {
+          <tr [class.disabled]='entry[1].deleting'>
             <td>
-              <app-slave-checkbox [id]="download.key" [master]="doneMasterCheckboxRef" [checkable]="download.value" />
+              <app-slave-checkbox [id]="entry[0]" [master]="doneMasterCheckboxRef" [checkable]="entry[1]" />
             </td>
             <td>
               <div style="display: inline-block; width: 1.5rem;">
-                @if (download.value.status === 'finished') {
+                @if (entry[1].status === 'finished') {
                   <fa-icon [icon]="faCheckCircle" class="text-success" />
                 }
-                @if (download.value.status === 'error') {
-                  <fa-icon [icon]="faTimesCircle" class="text-danger" />
+                @if (entry[1].status === 'error') {
+                  <button type="button" class="btn btn-link p-0"
+                    (click)="toggleErrorDetail(entry[0])"
+                    [attr.aria-label]="'Toggle error details for ' + entry[1].title"
+                    [attr.aria-expanded]="isErrorExpanded(entry[0])">
+                    <fa-icon [icon]="faTimesCircle" class="text-danger" />
+                  </button>
                 }
               </div>
-              <span ngbTooltip="{{buildResultItemTooltip(download.value)}}">@if (!!download.value.filename) {
-                <a href="{{buildDownloadLink(download.value)}}" target="_blank">{{ download.value.title }}</a>
+              <span ngbTooltip="{{buildResultItemTooltip(entry[1])}}">@if (!!entry[1].filename) {
+                <a href="{{buildDownloadLink(entry[1])}}" target="_blank">{{ entry[1].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 [style.cursor]="entry[1].status === 'error' ? 'pointer' : 'default'"
+                  (click)="entry[1].status === 'error' ? toggleErrorDetail(entry[0]) : null">
+                  {{entry[1].title}}
+                  @if (entry[1].status === 'error' && !isErrorExpanded(entry[0])) {
+                    <small class="text-danger ms-2">
+                      <fa-icon [icon]="faChevronRight" size="xs" class="me-1" />Click for details
+                    </small>
+                  }
+                </span>
               }</span>
+              @if (entry[1].status === 'error' && isErrorExpanded(entry[0])) {
+                <div class="alert alert-danger py-2 px-3 mt-2 mb-0 small" style="border-left: 4px solid var(--bs-danger);">
+                  <div class="d-flex justify-content-between align-items-start">
+                    <div class="flex-grow-1">
+                      @if (entry[1].msg) {
+                        <div class="mb-1"><strong>Message:</strong> {{entry[1].msg}}</div>
+                      }
+                      @if (entry[1].error) {
+                        <div class="mb-1"><strong>Error:</strong> {{entry[1].error}}</div>
+                      }
+                      <div class="text-muted" style="word-break: break-all;"><strong>URL:</strong> {{entry[1].url}}</div>
+                    </div>
+                    <button type="button" class="btn btn-sm btn-outline-danger ms-2 flex-shrink-0"
+                      (click)="copyErrorMessage(entry[0], entry[1]); $event.stopPropagation()"
+                      ngbTooltip="Copy error details to clipboard">
+                      @if (lastCopiedErrorId === entry[0]) {
+                        <span class="text-success">Copied!</span>
+                      } @else {
+                        <fa-icon [icon]="faCopy" />
+                      }
+                    </button>
+                  </div>
+                </div>
+              }
             </td>
             <td>
-              @if (download.value.size) {
-                <span>{{ download.value.size | fileSize }}</span>
+              @if (entry[1].size) {
+                <span>{{ entry[1].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 (entry[1].status === 'error') {
+                  <button type="button" class="btn btn-link" (click)="retryDownload(entry[0], entry[1])"><fa-icon [icon]="faRedoAlt" /></button>
                 }
-                @if (download.value.filename) {
-                  <a href="{{buildDownloadLink(download.value)}}" download class="btn btn-link"><fa-icon [icon]="faDownload" /></a>
+                @if (entry[1].filename) {
+                  <a href="{{buildDownloadLink(entry[1])}}" 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>
+                <a href="{{entry[1].url}}" target="_blank" class="btn btn-link"><fa-icon [icon]="faExternalLinkAlt" /></a>
+                <button type="button" class="btn btn-link" (click)="delDownload('done', entry[0])"><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'>
+        @if (entry[1].chapter_files && entry[1].chapter_files.length > 0) {
+          @for (chapterFile of entry[1].chapter_files; track chapterFile.filename) {
+            <tr [class.disabled]='entry[1].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">{{
+              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" target="_blank">{{
                 getChapterFileName(chapterFile.filename) }}</a>
             </div>
           </td>
@@ -507,7 +546,7 @@
           </td>
           <td>
             <div class="d-flex">
-              <a href="{{buildChapterDownloadLink(download.value, chapterFile.filename)}}" download
+              <a href="{{buildChapterDownloadLink(entry[1], chapterFile.filename)}}" download
                 class="btn btn-link"><fa-icon [icon]="faDownload" /></a>
             </div>
           </td>

ui/src/app/app.ts

@@ -6,7 +6,7 @@ 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 { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { DownloadsService } from './services/downloads.service';
@@ -53,6 +53,7 @@ export class App implements AfterViewInit, OnInit {
   subtitleLanguage: string;
   subtitleMode: string;
   addInProgress = false;
+  cancelRequested = false;
   themes: Theme[] = Themes;
   activeTheme: Theme | undefined;
   customDirs$!: Observable<string[]>;
@@ -66,6 +67,10 @@ export class App implements AfterViewInit, OnInit {
   ytDlpVersion: string | null = null;
   metubeVersion: string | null = null;
   isAdvancedOpen = false;
+  sortAscending = false;
+  expandedErrors: Set<string> = new Set();
+  cachedSortedDone: [string, Download][] = [];
+  lastCopiedErrorId: string | null = null;
 
   // Download metrics
   activeDownloads = 0;
@@ -100,6 +105,9 @@ export class App implements AfterViewInit, OnInit {
   faGithub = faGithub;
   faClock = faClock;
   faTachometerAlt = faTachometerAlt;
+  faSortAmountDown = faSortAmountDown;
+  faSortAmountUp = faSortAmountUp;
+  faChevronRight = faChevronRight;
   subtitleFormats = [
     { id: 'srt', text: 'SRT' },
     { id: 'txt', text: 'TXT (Text only)' },
@@ -178,6 +186,7 @@ export class App implements AfterViewInit, OnInit {
     if (!allowedSubtitleModes.has(this.subtitleMode)) {
       this.subtitleMode = 'prefer_manual';
     }
+    this.sortAscending = this.cookieService.get('metube_sort_ascending') === 'true';
 
     this.activeTheme = this.getPreferredTheme(this.cookieService);
 
@@ -187,6 +196,7 @@ export class App implements AfterViewInit, OnInit {
     });
     this.downloads.doneChanged.subscribe(() => {
       this.updateMetrics();
+      this.rebuildSortedDone();
     });
     // Subscribe to real-time updates
     this.downloads.updated.subscribe(() => {
@@ -417,13 +427,24 @@ export class App implements AfterViewInit, OnInit {
 
     console.debug('Downloading: url=' + url + ' quality=' + quality + ' format=' + format + ' folder=' + folder + ' customNamePrefix=' + customNamePrefix + ' playlistItemLimit=' + playlistItemLimit + ' autoStart=' + autoStart + ' splitByChapters=' + splitByChapters + ' chapterTemplate=' + chapterTemplate + ' subtitleFormat=' + subtitleFormat + ' subtitleLanguage=' + subtitleLanguage + ' subtitleMode=' + subtitleMode);
     this.addInProgress = true;
+    this.cancelRequested = false;
     this.downloads.add(url, quality, format, folder, customNamePrefix, playlistItemLimit, autoStart, splitByChapters, chapterTemplate, subtitleFormat, subtitleLanguage, subtitleMode).subscribe((status: Status) => {
-      if (status.status === 'error') {
+      if (status.status === 'error' && !this.cancelRequested) {
         alert(`Error adding URL: ${status.msg}`);
-      } else {
+      } else if (status.status !== 'error') {
         this.addUrl = '';
       }
       this.addInProgress = false;
+      this.cancelRequested = false;
+    });
+  }
+
+  cancelAdding() {
+    this.cancelRequested = true;
+    this.downloads.cancelAdd().subscribe({
+      error: (err) => {
+        console.error('Failed to cancel adding:', err?.message || err);
+      }
     });
   }
 
@@ -699,6 +720,68 @@ export class App implements AfterViewInit, OnInit {
     this.isAdvancedOpen = !this.isAdvancedOpen;
   }
 
+  toggleSortOrder() {
+    this.sortAscending = !this.sortAscending;
+    this.cookieService.set('metube_sort_ascending', this.sortAscending ? 'true' : 'false', { expires: 3650 });
+    this.rebuildSortedDone();
+  }
+
+  private rebuildSortedDone() {
+    const result: [string, Download][] = [];
+    this.downloads.done.forEach((dl, key) => {
+      result.push([key, dl]);
+    });
+    if (!this.sortAscending) {
+      result.reverse();
+    }
+    this.cachedSortedDone = result;
+  }
+
+  toggleErrorDetail(id: string) {
+    if (this.expandedErrors.has(id)) this.expandedErrors.delete(id);
+    else this.expandedErrors.add(id);
+  }
+
+  copyErrorMessage(id: string, download: Download) {
+    const parts: string[] = [];
+    if (download.title) parts.push(`Title: ${download.title}`);
+    if (download.url) parts.push(`URL: ${download.url}`);
+    if (download.msg) parts.push(`Message: ${download.msg}`);
+    if (download.error) parts.push(`Error: ${download.error}`);
+    const text = parts.join('\n');
+    if (!text.trim()) return;
+    const done = () => {
+      this.lastCopiedErrorId = id;
+      setTimeout(() => { this.lastCopiedErrorId = null; }, 1500);
+    };
+    const fail = (err?: unknown) => {
+      console.error('Clipboard write failed:', err);
+      alert('Failed to copy to clipboard. Your browser may require HTTPS for clipboard access.');
+    };
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).then(done).catch(fail);
+    } else {
+      try {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        done();
+      } catch (e) {
+        fail(e);
+      }
+    }
+  }
+
+  isErrorExpanded(id: string): boolean {
+    return this.expandedErrors.has(id);
+  }
+
   private updateMetrics() {
     this.activeDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'downloading' || d.status === 'preparing').length;
     this.queuedDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'pending').length;

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

@@ -208,6 +208,9 @@ export class DownloadsService {
   public exportQueueUrls(): string[] {
     return Array.from(this.queue.values()).map(download => download.url);
   }
-  
-  
+  public cancelAdd() {
+    return this.http.post<Status>('cancel-add', {}).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
 }