fix(playback): clarify external launch feedback

This commit is contained in:
4gray committed 2026-08-09 12:52:05 +02:00
1 parent c189acf147
commit 7ed1ccfd8e
50 files changed
+2254 -202

No files matched your search

@@ -2,6 +2,7 @@
class="external-playback-dock"
[class.external-playback-dock--compact]="compact()"
[class.external-playback-dock--error]="session().status === 'error'"
[attr.aria-busy]="session().status === 'launching' ? 'true' : null"
>
<button
type="button"
@@ -10,9 +11,7 @@
artworkInteractive()
"
[disabled]="!artworkInteractive()"
[attr.aria-label]="
artworkInteractive() ? 'Open in playlist' : null
"
[attr.aria-label]="artworkInteractive() ? 'Open in playlist' : null"
(click)="onArtworkClick()"
>
@if (showArtwork()) {
@@ -31,39 +30,50 @@
<div class="external-playback-dock__meta">
<div class="external-playback-dock__title">{{ displayTitle() }}</div>
<div class="external-playback-dock__status">
<span class="external-playback-dock__chip">{{ playerLabel() }}</span>
<div class="external-playback-dock__status" aria-live="polite">
<span class="external-playback-dock__chip">{{
playerLabel()
}}</span>
<span
class="external-playback-dock__status-separator"
aria-hidden="true"
>·</span
>
@if (showSpinner()) {
<mat-spinner diameter="12" strokeWidth="2"></mat-spinner>
<mat-spinner
aria-hidden="true"
diameter="12"
strokeWidth="2"
></mat-spinner>
} @else if (showStatusIcon()) {
<mat-icon class="external-playback-dock__status-icon">{{
statusIcon()
}}</mat-icon>
<mat-icon
aria-hidden="true"
class="external-playback-dock__status-icon"
>{{ statusIcon() }}</mat-icon
>
}
<span class="external-playback-dock__status-text">{{
statusLabel()
}}</span>
<span class="external-playback-dock__status-text">
@if (session().status === 'error' && session().error) {
{{ session().error }}
} @else {
{{ statusLabelKey() | translate }}
}
</span>
</div>
</div>
<div class="external-playback-dock__actions">
@if (showCloseButton()) {
@if (showActionButton()) {
<button
type="button"
mat-button
class="external-playback-dock__button"
(click)="closeClicked.emit()"
[attr.aria-label]="actionLabelKey() | translate"
(click)="onActionClick()"
>
<mat-icon>stop_circle</mat-icon>
<mat-icon aria-hidden="true">{{ actionIcon() }}</mat-icon>
@if (!compact()) {
<span>{{
'WORKSPACE.SHELL.EXTERNAL_PLAYBACK_CLOSE' | translate
}}</span>
<span>{{ actionLabelKey() | translate }}</span>
}
</button>
}