78 lines
4.5 KiB
HTML
78 lines
4.5 KiB
HTML
<div class="commandbar">
|
|
<div class="cb-row">
|
|
<button class="menu-btn" (click)="menu.emit()" aria-label="打开导航">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
</button>
|
|
<div class="url-wrap">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
<input class="url-input" type="url" placeholder="粘贴视频或播放列表 URL…" aria-label="视频 URL"
|
|
autocomplete="off" spellcheck="false"
|
|
[ngModel]="url" (ngModelChange)="urlChange.emit($event)"
|
|
(keydown.enter)="add.emit(url)" [disabled]="disabled">
|
|
</div>
|
|
<button class="primary-btn" (click)="add.emit(url)" [disabled]="disabled">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
添加到队列
|
|
</button>
|
|
</div>
|
|
|
|
<div class="cb-chips">
|
|
<span class="cb-label">清晰度</span>
|
|
<button *ngFor="let q of quickQualities" type="button" class="chip" [class.on]="quality === q.id" (click)="qualityChange.emit(q.id)">
|
|
{{ qualityLabel(q.id) }}
|
|
</button>
|
|
<div class="more-wrap" *ngIf="moreQualities.length">
|
|
<button type="button" class="chip chip-more" [class.on]="menuOpen === 'quality'" (click)="toggleMenu('quality')">
|
|
更多
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="menu" *ngIf="menuOpen === 'quality'">
|
|
<button *ngFor="let q of moreQualities" type="button" class="menu-item" [class.on]="quality === q.id" (click)="pickQuality(q.id)">
|
|
{{ qualityLabel(q.id) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="chip-sep"></span>
|
|
<span class="cb-label">格式</span>
|
|
<button *ngFor="let f of quickFormats" type="button" class="chip" [class.on]="format === f.id" (click)="formatChange.emit(f.id)">
|
|
{{ formatLabel(f.id) }}
|
|
</button>
|
|
<div class="more-wrap" *ngIf="moreFormats.length">
|
|
<button type="button" class="chip chip-more" [class.on]="menuOpen === 'format'" (click)="toggleMenu('format')">
|
|
更多
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="menu" *ngIf="menuOpen === 'format'">
|
|
<button *ngFor="let f of moreFormats" type="button" class="menu-item" [class.on]="format === f.id" (click)="pickFormat(f.id)">
|
|
{{ formatLabel(f.id) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="chip-sep"></span>
|
|
<ng-select class="folder-select"
|
|
[items]="customDirs$ | async"
|
|
placeholder="默认目录"
|
|
[addTag]="allowCustomDir"
|
|
addTagText="创建目录"
|
|
[clearable]="true"
|
|
[searchable]="true"
|
|
[closeOnSelect]="true"
|
|
[disabled]="disabled"
|
|
[(ngModel)]="folder"
|
|
(ngModelChange)="folderChange.emit($event)"
|
|
appendTo="body"
|
|
[ngbTooltip]="folder || '选择保存目录,可直接输入创建新目录'">
|
|
<ng-template ng-option-tmp let-item="item">
|
|
<span [title]="item">{{ item }}</span>
|
|
</ng-template>
|
|
</ng-select>
|
|
|
|
<button class="advanced-link" (click)="openAdvanced.emit()">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
|
|
高级选项
|
|
</button>
|
|
</div>
|
|
</div>
|