56 lines
3.2 KiB
HTML
56 lines
3.2 KiB
HTML
<div class="q-row" [class.selected]="selected">
|
|
<input type="checkbox" class="q-check" [checked]="selected" (change)="selectChange.emit($event.target.checked)" [attr.aria-label]="'选择 ' + row.value.title">
|
|
<div class="thumb">
|
|
<img *ngIf="row.value.thumbnail" [src]="thumbUrl()" [alt]="row.value.title" loading="lazy">
|
|
<span class="thumb-ph" *ngIf="!row.value.thumbnail">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="10 9 15 12 10 15"/></svg>
|
|
</span>
|
|
<span class="dur num" *ngIf="row.value.duration">{{ row.value.duration | duration }}</span>
|
|
</div>
|
|
<div class="q-main">
|
|
<div class="q-title" [title]="row.value.title">{{ row.value.title }}</div>
|
|
<div class="q-meta">
|
|
<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>
|
|
<span *ngIf="status === 'completed' && row.value.file_exists === true" class="file-badge ok" title="文件存在">
|
|
<fa-icon [icon]="faCheckCircle"></fa-icon>
|
|
</span>
|
|
<span *ngIf="status === 'completed' && row.value.file_exists === false" class="file-badge missing" title="文件不存在">
|
|
<fa-icon [icon]="faTimesCircle"></fa-icon>
|
|
</span>
|
|
<ng-select class="row-folder-select"
|
|
[items]="customDirs"
|
|
placeholder="默认"
|
|
[addTag]="allowCustomDir"
|
|
addTagText="创建目录"
|
|
[clearable]="true"
|
|
[searchable]="true"
|
|
[closeOnSelect]="true"
|
|
[ngModel]="row.value.folder"
|
|
(change)="folderChange.emit({ key: row.key, folder: $event || '' })"
|
|
appendTo="body"
|
|
ngbTooltip="更改下载目录">
|
|
</ng-select>
|
|
</div>
|
|
</div>
|
|
<div class="q-side"><span class="num">{{ row.value.size ? (row.value.size | fileSize) : '—' }}</span></div>
|
|
<div class="q-actions">
|
|
<button *ngIf="status === 'queued'" type="button" class="icon-btn neutral" (click)="start.emit(row.key)" title="立即开始" aria-label="立即开始">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg>
|
|
</button>
|
|
<a *ngIf="status === 'completed' && downloadUrl" class="icon-btn neutral" [href]="downloadUrl" target="_blank" title="下载文件">
|
|
<fa-icon [icon]="faDownload"></fa-icon>
|
|
</a>
|
|
<button *ngIf="status === 'completed' && row.value.status === 'error'" type="button" class="icon-btn neutral" (click)="retry.emit({ key: row.key, dl: row.value })" title="重试">
|
|
<fa-icon [icon]="faRedoAlt"></fa-icon>
|
|
</button>
|
|
<a class="icon-btn neutral" [href]="row.value.url" target="_blank" title="打开原链接">
|
|
<fa-icon [icon]="faExternalLinkAlt"></fa-icon>
|
|
</a>
|
|
<button type="button" class="icon-btn" (click)="del.emit(row.key)" title="删除" aria-label="删除">
|
|
<fa-icon [icon]="faTrashAlt"></fa-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|