69 lines
2.6 KiB
HTML
69 lines
2.6 KiB
HTML
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<p class="title">
|
|
<i class="fa-brands fa-spotify"></i>
|
|
<span>Spooty</span>
|
|
</p>
|
|
<p class="subtitle">Self-hosted spotify downloader</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="hero">
|
|
<div class="hero-body">
|
|
<div class="box">
|
|
<p class="subtitle">Download</p>
|
|
<div class="is-flex">
|
|
<input class="input" type="text" [(ngModel)]="url" placeholder="Paste playlist/song/artist url"/>
|
|
<button class="button is-primary" [class.is-loading]="(createLoading$ | async)?.isLoading" (click)="download()">
|
|
<i class="fa-solid fa-download"></i> Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="box">
|
|
<div class="is-flex is-align-items-center">
|
|
<p class="subtitle">List</p>
|
|
<i class="fa-solid fa-arrows-rotate is-clickable" [class.loading-animation]="(loading$ | async)?.isLoading" (click)="fetchPlaylists()"></i>
|
|
</div>
|
|
|
|
<article class="panel is-primary" *ngFor="let playlist of playlists$ | async">
|
|
<p class="panel-heading is-flex is-justify-content-space-between">
|
|
<span>
|
|
<i class="is-clickable fa-solid"
|
|
[ngClass]="playlist.collapsed ? 'fa-caret-up' : 'fa-caret-down'"
|
|
(click)="toggleCollapse(playlist.id)"
|
|
></i>
|
|
<span>{{playlist.name}}</span>
|
|
</span>
|
|
<a [href]="playlist.spotifyUrl" target="_blank" class="is-color-black"><i class="fa-brands fa-spotify"></i></a>
|
|
</p>
|
|
<ng-container *ngIf="playlist.collapsed">
|
|
<a class="panel-block is-flex is-justify-content-space-between" *ngFor="let track of playlist.tracks">
|
|
<div>
|
|
<a href="api/track/download/{{track.id}}" class="panel-icon is-color-info" download>
|
|
<i class="fa-solid fa-download"></i>
|
|
</a>
|
|
<span>{{track.artist}} - {{track.song}}</span>
|
|
<a [href]="track.spotifyUrl" target="_blank" class="is-color-primary margin-left">
|
|
<i class="fa-brands fa-spotify"></i>
|
|
</a>
|
|
<a [href]="track.youtubeUrl" target="_blank" class="is-color-danger is-color-black">
|
|
<i class="fa-brands fa-youtube"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<ng-container [ngSwitch]="track.status">
|
|
<span *ngSwitchCase="0" class="tag is-info">New</span>
|
|
<span *ngSwitchCase="1" class="tag is-warning">Queued</span>
|
|
<span *ngSwitchCase="2" class="tag is-success">Completed</span>
|
|
</ng-container>
|
|
</div>
|
|
</a>
|
|
</ng-container>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|