All files / app/component/playlist playlist.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
16x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
@if (sources()) {
  <div class="playlist-container">
    <h6>{{ title(current.get()?.url) }}</h6>
    <app-viewer [ref]="current.get()"
                [autoplay]="autoplay()"
                (playing)="autoplay.set(true)"
                (pausing)="autoplay.set(false)"
                (ended)="next(repeat())"></app-viewer>
    <div class="playlist-controls">
      <button class="previous-track" type="button" (click)="back()">◀️</button>
      <button class="repeat-toggle" type="button" (click)="repeat.set(!repeat())" [class.selected]="repeat()">��</button>
      <button class="next-track" type="button" (click)="next()">▶️</button>
    </div>
  </div>
  @if (ref()?.sources?.length) {
    <details open>
      <summary i18n>Playlist</summary>
      <ol class="playlist-menu">
        @for (s of ref()!.sources; track s; let i = $index) {
          <li tabindex="0"
              [class.selected]="s === current.get()?.url"
              (keydown)="$event.key === 'Enter' && seek(i) || true"
              (click)="seek(i)">{{ title(s) }}</li>
        }
      </ol>
    </details>
  }
} @else {
  <app-loading></app-loading>
}