feat: 恢复下载与媒体库来源网站标签

2026-08-15 02:41:12 +08:00 · 2026-08-15 02:41:12 +08:00 · 6fd0c6e7f6
parent d0ae78e9de
commit 6fd0c6e7f6
11 changed files with 64 additions and 9 deletions
--- a/DEPLOY.md
+++ b/DEPLOY.md
@ -47,8 +47,8 @@ guide to switching back to the official build once the upstream fix lands.
 ./build-ytdlp.sh

 docker buildx build --platform linux/amd64 \
-  --build-arg VERSION=1.22 \
-  -t 192.168.2.212:3000/tigeren/metube:1.22 \
+  --build-arg VERSION=1.25 \
+  -t 192.168.2.212:3000/tigeren/metube:1.25 \
  --push .
 ```

--- a/ui/src/app/download-card.component.html
+++ b/ui/src/app/download-card.component.html
@ -10,6 +10,7 @@
  <div class="card-body">
    <div class="card-title" [title]="row.value.title" [class.clickable]="!!downloadUrl" (click)="downloadUrl && play.emit()">{{ row.value.title }}</div>
    <div class="card-meta">
+      <span *ngIf="row.value.website" class="badge site" [title]="row.value.website">{{ siteLabel(row.value.website) }}</span>
      <span class="badge folder">{{ folderLabel() }}</span>
      <span class="badge fmt">{{ qualityLabel(row.value.quality) }} · {{ formatLabel(row.value.format) }}</span>
      <span class="card-added" [title]="fullTime()">{{ relativeTime(row.value.timestamp) }}</span>
--- a/ui/src/app/download-card.component.sass
+++ b/ui/src/app/download-card.component.sass
@ -114,6 +114,11 @@
    color: var(--fg)
    background: var(--surface)

+  &.site
+    color: var(--accent-strong)
+    background: var(--accent-tint)
+    border-color: oklch(85% 0.05 145)
+
  &.fmt
    font-family: var(--font-mono)
    font-weight: 500
--- a/ui/src/app/download-card.component.ts
+++ b/ui/src/app/download-card.component.ts
@ -3,7 +3,7 @@ import { faDownload, faExternalLinkAlt, faFolderPlus, faPlay, faRedoAlt, faTrash
 import { faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
 import { Download, DownloadsService } from './downloads.service';
 import { KeyedDownload } from './active-downloads.component';
-import { formatLabel, qualityLabel, relativeTime } from './labels';
+import { formatLabel, qualityLabel, relativeTime, siteLabel } from './labels';

@Component({
  selector: 'app-download-card',
@ -37,6 +37,7 @@ export class DownloadCardComponent {
  qualityLabel = qualityLabel;
  formatLabel = formatLabel;
  relativeTime = relativeTime;
+  siteLabel = siteLabel;

  constructor(private downloads: DownloadsService) {}

--- a/ui/src/app/download-row.component.html
+++ b/ui/src/app/download-row.component.html
@ -10,6 +10,7 @@
  <div class="q-main">
      <div class="q-title" [title]="row.value.title" [class.clickable]="canPlay()" (click)="canPlay() && play.emit()">{{ row.value.title }}</div>
    <div class="q-meta">
+      <span *ngIf="row.value.website" class="badge site" [title]="row.value.website">{{ siteLabel(row.value.website) }}</span>
      <span class="badge folder">{{ folderLabel() }}</span>
      <span class="badge fmt">{{ qualityLabel(row.value.quality) }} · {{ formatLabel(row.value.format) }}</span>
      <span class="q-added" [title]="fullTime()">{{ relativeTime(row.value.timestamp) }}</span>
--- a/ui/src/app/download-row.component.sass
+++ b/ui/src/app/download-row.component.sass
@ -103,6 +103,11 @@
    color: var(--fg)
    background: var(--surface)

+  &.site
+    color: var(--accent-strong)
+    background: var(--accent-tint)
+    border-color: oklch(85% 0.05 145)
+
  &.fmt
    font-family: var(--font-mono)
    font-weight: 500
--- a/ui/src/app/download-row.component.ts
+++ b/ui/src/app/download-row.component.ts
@ -3,7 +3,7 @@ import { faDownload, faExternalLinkAlt, faFolderPlus, faPlay, faRedoAlt, faTrash
 import { faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
 import { Download, DownloadsService } from './downloads.service';
 import { KeyedDownload } from './active-downloads.component';
-import { formatLabel, qualityLabel, relativeTime } from './labels';
+import { formatLabel, qualityLabel, relativeTime, siteLabel } from './labels';

@Component({
  selector: 'app-download-row',
@ -39,6 +39,7 @@ export class DownloadRowComponent {
  qualityLabel = qualityLabel;
  formatLabel = formatLabel;
  relativeTime = relativeTime;
+  siteLabel = siteLabel;

  constructor(private downloads: DownloadsService) {}

--- a/ui/src/app/labels.ts
+++ b/ui/src/app/labels.ts
@ -32,6 +32,28 @@ export function formatLabel(id: string): string {
  return FORMAT_LABELS[id] || id;
 }

+const SITE_LABELS: { [id: string]: string } = {
+  'youtube.com': 'YouTube',
+  'm.youtube.com': 'YouTube',
+  'youtu.be': 'YouTube',
+  'vimeo.com': 'Vimeo',
+  'dailymotion.com': 'Dailymotion',
+  'twitch.tv': 'Twitch',
+  'twitter.com': 'Twitter',
+  'x.com': 'X',
+  'facebook.com': 'Facebook',
+  'instagram.com': 'Instagram',
+  'tiktok.com': 'TikTok',
+  'reddit.com': 'Reddit'
+};
+
+/** Short display name for a source site given its domain (e.g. www.youtube.com -> YouTube). */
+export function siteLabel(website: string): string {
+  if (!website) return '';
+  const simplified = website.replace(/^www\./i, '').toLowerCase();
+  return SITE_LABELS[simplified] || simplified.split('.')[0];
+}
+
 /** Relative time for a DownloadInfo timestamp (nanoseconds). */
 export function relativeTime(timestampNs: number): string {
  if (!timestampNs) return '';
--- a/ui/src/app/library-browser.component.html
+++ b/ui/src/app/library-browser.component.html
@ -49,6 +49,7 @@
        <div class="lib-main">
          <div class="lib-title clickable" [title]="file.name" (click)="play.emit(file)">{{ file.name }}</div>
          <div class="lib-meta">
+            <span *ngIf="file.meta?.website" class="lib-badge site" [title]="file.meta?.website">{{ siteLabel(file.meta?.website) }}</span>
            <span class="num">{{ file.size | fileSize }}</span>
            <span>{{ fileTime(file) }}</span>
          </div>
@ -76,10 +77,11 @@
          </div>
          <div class="card-body">
            <div class="card-title clickable" [title]="file.name" (click)="play.emit(file)">{{ file.name }}</div>
-            <div class="card-meta">
-              <span class="num">{{ file.size | fileSize }}</span>
-              <span>{{ fileTime(file) }}</span>
-            </div>
+          <div class="card-meta">
+            <span *ngIf="file.meta?.website" class="lib-badge site" [title]="file.meta?.website">{{ siteLabel(file.meta?.website) }}</span>
+            <span class="num">{{ file.size | fileSize }}</span>
+            <span>{{ fileTime(file) }}</span>
+          </div>
            <div class="card-actions">
              <a *ngIf="file.meta?.url" class="icon-btn neutral" [href]="file.meta?.url" target="_blank" rel="noopener noreferrer" title="打开原始页面" aria-label="打开原始页面">
                <fa-icon [icon]="faExternalLinkAlt"></fa-icon>
--- a/ui/src/app/library-browser.component.sass
+++ b/ui/src/app/library-browser.component.sass
@ -247,6 +247,22 @@
    color: var(--fg)
    font-family: var(--font-mono)

+.lib-badge
+  font-size: 10.5px
+  font-weight: 550
+  padding: 1px 7px
+  border-radius: 20px
+  border: 1px solid var(--border)
+  background: var(--bg)
+  color: var(--muted)
+  letter-spacing: 0.02em
+  white-space: nowrap
+
+  &.site
+    color: var(--accent-strong)
+    background: var(--accent-tint)
+    border-color: oklch(85% 0.05 145)
+
 .lib-actions
  display: flex
  gap: 2px
--- a/ui/src/app/library-browser.component.ts
+++ b/ui/src/app/library-browser.component.ts
@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { faExternalLinkAlt, faList, faPlay, faRedoAlt, faThLarge, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { DownloadsService, LibraryFile } from './downloads.service';
-import { relativeTime } from './labels';
+import { relativeTime, siteLabel } from './labels';

@Component({
  selector: 'app-library-browser',
@ -35,6 +35,7 @@ export class LibraryBrowserComponent implements OnChanges {
  faTrashAlt = faTrashAlt;
  faRedoAlt = faRedoAlt;
  faExternalLinkAlt = faExternalLinkAlt;
+  siteLabel = siteLabel;

  constructor(public downloads: DownloadsService) {}