1<!--
2  ~ Copyright 2024 Google LLC
3  ~
4  ~ Licensed under the Apache License, Version 2.0 (the "License");
5  ~ you may not use this file except in compliance with the License.
6  ~ You may obtain a copy of the License at
7  ~
8  ~      http://www.apache.org/licenses/LICENSE-2.0
9  ~
10  ~ Unless required by applicable law or agreed to in writing, software
11  ~ distributed under the License is distributed on an "AS IS" BASIS,
12  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13  ~ See the License for the specific language governing permissions and
14  ~ limitations under the License.
15  -->
16
17<div class="toolbar">
18  <button mat-icon-button (click)="togglePlay()">
19    <mat-icon>{{ playStateIcon }}</mat-icon>
20  </button>
21
22  <div class="spacer"></div>
23  <div class="playbackRate">
24    <button mat-button [matMenuTriggerFor]="playbackRateMenu">
25      <mat-icon>speed</mat-icon>
26      {{ formatPlaybackRateLabel(playbackRate) }}
27    </button>
28
29    <mat-menu #playbackRateMenu="matMenu">
30      @for (rate of playbackRateOptions; track $index) {
31        <button mat-menu-item (click)="setPlaybackRate(rate)">
32          <span>{{ formatPlaybackRateLabel(rate) }}</span>
33        </button>
34      }
35    </mat-menu>
36  </div>
37
38  <button mat-icon-button (click)="toggleRepeat()" class="repeat">
39    <mat-icon>{{ repeatStateIcon }}</mat-icon>
40  </button>
41</div>
42<ng-keyboard-shortcuts [shortcuts]="shortcuts"></ng-keyboard-shortcuts>
43