67 lines
2.4 KiB
HTML
67 lines
2.4 KiB
HTML
<article class="panel playlist-card" [ngClass]="statusClass$ | async">
|
|
<p class="panel-heading playlist-heading is-flex is-justify-content-space-between" (click)="toggleCollapse(playlist.id)">
|
|
<span class="playlist-title">
|
|
<i class="is-clickable fa-solid"
|
|
[ngClass]="playlist.collapsed ? 'fa-caret-down' : 'fa-caret-right'"></i>
|
|
|
|
<span class="history-label">{{ playlist.isTrack ? 'track' : 'playlist' }}</span>
|
|
|
|
<span *ngIf="playlist.error; else noErrorTemplate" class="is-size-6 has-text-weight-medium">
|
|
{{playlist.error}}
|
|
</span>
|
|
|
|
<ng-template #noErrorTemplate>
|
|
<span class="is-size-6 has-text-weight-semibold">{{playlist.name}}</span>
|
|
</ng-template>
|
|
</span>
|
|
|
|
<span class="playlist-actions" (click)="$event.stopPropagation()">
|
|
<span *ngIf="!playlist.error" class="progress-text">
|
|
{{trackCompletedCount$ | async}}/{{trackCount$ | async}}
|
|
</span>
|
|
|
|
<span *ngIf="(trackErrorCount$ | async) as errors" class="error-count" [class.is-hidden]="errors === 0">
|
|
{{errors}} failed
|
|
</span>
|
|
|
|
<a [href]="playlist.spotifyUrl"
|
|
target="_blank"
|
|
class="has-text-black"
|
|
title="Open Spotify URL">
|
|
<i class="fa-brands fa-spotify"></i>
|
|
</a>
|
|
|
|
<ng-container *ngIf="!playlist.isTrack">
|
|
<i class="fa-solid is-clickable hover-icon"
|
|
[ngClass]="playlist.active ? 'fa-toggle-on' : 'fa-toggle-off'"
|
|
[title]="playlist.active ? '[ON]: Unsubscribe from playlist changes?' : '[OFF]: Subscribe to playlist changes?'"
|
|
(click)="toggleActive(playlist.id, playlist.active)">
|
|
</i>
|
|
</ng-container>
|
|
|
|
<i class="fa-solid fa-repeat is-clickable hover-icon"
|
|
title="Retry failed tracks"
|
|
(click)="retryFailed(playlist.id)">
|
|
</i>
|
|
|
|
<i class="fa-solid fa-xmark is-clickable hover-icon"
|
|
title="Remove playlist from list"
|
|
(click)="delete(playlist.id)">
|
|
</i>
|
|
</span>
|
|
</p>
|
|
|
|
<div class="progress-shell">
|
|
<div class="progress-fill" [style.width.%]="progressPercent$ | async"></div>
|
|
</div>
|
|
|
|
<p class="progress-caption">
|
|
<span>{{progressPercent$ | async}}% complete</span>
|
|
<span *ngIf="playlist.active">subscribed</span>
|
|
</p>
|
|
|
|
<ng-container *ngIf="playlist.collapsed">
|
|
<app-track-list [playlistId]="playlist.id"></app-track-list>
|
|
</ng-container>
|
|
</article>
|