From 6b1b60eda563c0c9b637a05944472bcb590f90cc Mon Sep 17 00:00:00 2001
From: Mahmut YUM <mahmut_yum@hotmail.com>
Date: Sun, 15 Nov 2026 02:22:33 +0300
Subject: [PATCH] fix(radio): unmute always sounds, play state follows the
 audio element, ignore modifier chords

- Mute sets the volume to zero and unmute restores the last audible
  volume (0.5 when none is known), as in the shared player controls; a
  stored volume of zero no longer leaves Unmute silent, and raising the
  volume while muted is heard.
- The Live/Paused badge and play button follow the <audio> element's
  play, pause, ended and error events, so media-key pauses and failed
  stations show; a refused play() shows paused unless a newer one plays.
- Ctrl, Cmd and Alt chords are not radio shortcuts.
- The synthetic Stalker radio setup moves to the radio fixture so a new
  web E2E can reuse it.
---
 .changes/radio-mute-play-state.md             |   6 +
 apps/web-e2e/src/dialog-accessibility.e2e.ts  |  70 +---------
 .../web-e2e/src/stalker-radio-controls.e2e.ts |  64 +++++++++
 .../src/stalker-radio-player.fixture.ts       |  78 ++++++++++-
 docs/architecture/player-controls-contract.md |   7 +
 .../audio-player.component.spec.ts            | 127 +++++++++++++++++-
 .../audio-player/audio-player.component.ts    |  44 +++---
 7 files changed, 309 insertions(+), 87 deletions(-)
 create mode 100644 .changes/radio-mute-play-state.md
 create mode 100644 apps/web-e2e/src/stalker-radio-controls.e2e.ts

diff --git a/.changes/radio-mute-play-state.md b/.changes/radio-mute-play-state.md
new file mode 100644
index 0000000000..fdf9504db3
--- /dev/null
+++ b/.changes/radio-mute-play-state.md
@@ -0,0 +1,6 @@
+---
+type: fix
+area: player
+---
+
+The radio player's Unmute button now always brings sound back, also when the volume was left at zero, and raising the volume while muted is heard. The Live/Paused badge now follows pauses from media keys and stations that fail to play, and Ctrl, Cmd or Alt shortcuts no longer mute the radio or change its volume.
diff --git a/apps/web-e2e/src/dialog-accessibility.e2e.ts b/apps/web-e2e/src/dialog-accessibility.e2e.ts
index 90d2cea9ef..bb31060643 100644
--- a/apps/web-e2e/src/dialog-accessibility.e2e.ts
+++ b/apps/web-e2e/src/dialog-accessibility.e2e.ts
@@ -11,10 +11,7 @@ import {
 import { applyUiTheme, rasterTextContrast } from './ui-consistency.fixture';
 import type { Locator } from '@playwright/test';
 import { configureMockProviderBackend } from './provider-target-route';
-import {
-    addStalkerPortal,
-    interceptStalkerRequests,
-} from './stalker-portal.fixture';
+import { playSyntheticStalkerRadio } from './stalker-radio-player.fixture';
 
 test.use({ serviceWorkers: 'block' });
 
@@ -247,70 +244,7 @@ test('reading account and shortcuts while Stalker radio plays keeps its volume u
     page,
 }) => {
     test.setTimeout(120_000);
-    await interceptStalkerRequests(page);
-    const source = 'http://radio-fixture.invalid/sample.wav';
-    // One minute of synthetic PCM silence, with no external stream or metadata.
-    const bytes = 8000 * 60 * 2;
-    const wav = Buffer.alloc(44 + bytes);
-    wav.write('RIFF', 0);
-    wav.writeUInt32LE(36 + bytes, 4);
-    wav.write('WAVEfmt ', 8);
-    wav.writeUInt32LE(16, 16);
-    wav.writeUInt16LE(1, 20);
-    wav.writeUInt16LE(1, 22);
-    wav.writeUInt32LE(8000, 24);
-    wav.writeUInt32LE(16000, 28);
-    wav.writeUInt16LE(2, 32);
-    wav.writeUInt16LE(16, 34);
-    wav.write('data', 36);
-    wav.writeUInt32LE(bytes, 40);
-    await page.route(source, (route) =>
-        route.fulfill({ contentType: 'audio/wav', body: wav })
-    );
-    await page.route('**/localhost:3000/stalker**', async (route) => {
-        const url = new URL(route.request().url());
-        if (url.searchParams.get('type') !== 'radio') return route.fallback();
-        const action = url.searchParams.get('action');
-        if (action === 'create_link') {
-            await route.fulfill({ json: { payload: { js: { cmd: source } } } });
-        } else if (action === 'get_ordered_list') {
-            await route.fulfill({
-                json: {
-                    payload: {
-                        js: {
-                            data: [
-                                {
-                                    id: '9001',
-                                    name: 'Synthetic Radio Alpha',
-                                    o_name: 'Synthetic Radio Alpha',
-                                    cmd: source,
-                                    logo: '',
-                                    category_id:
-                                        url.searchParams.get('genre') ?? '1',
-                                    tv_genre_id:
-                                        url.searchParams.get('genre') ?? '1',
-                                    number: '1',
-                                    radio: true,
-                                },
-                            ],
-                            total_items: 1,
-                            max_page_items: 20,
-                            cur_page: 1,
-                            total_pages: 1,
-                        },
-                    },
-                },
-            });
-        } else await route.fallback();
-    });
-    await addStalkerPortal(page);
-    await page.getByRole('link', { name: /radio/i }).click();
-    await page.locator('.category-item').nth(1).click();
-    await page.getByText('Synthetic Radio Alpha', { exact: true }).click();
-    const audio = page.locator('app-audio-player audio');
-    await expect
-        .poll(() => audio.evaluate((el: HTMLAudioElement) => el.currentTime))
-        .toBeGreaterThan(0);
+    const audio = await playSyntheticStalkerRadio(page);
     await page
         .locator('app-audio-player .radio-hero')
         .click({ position: { x: 5, y: 5 } });
diff --git a/apps/web-e2e/src/stalker-radio-controls.e2e.ts b/apps/web-e2e/src/stalker-radio-controls.e2e.ts
new file mode 100644
index 0000000000..995511fd50
--- /dev/null
+++ b/apps/web-e2e/src/stalker-radio-controls.e2e.ts
@@ -0,0 +1,64 @@
+import { expect, test } from './fixtures';
+import { configureMockProviderBackend } from './provider-target-route';
+import { playSyntheticStalkerRadio } from './stalker-radio-player.fixture';
+
+test.use({ serviceWorkers: 'block' });
+
+test.beforeEach(async ({ page }) => {
+    await page.route('https://**', (route) => route.abort());
+    await configureMockProviderBackend(page);
+    await page.goto('/');
+});
+
+/**
+ * The radio player's state follows its `<audio>` element, unmute always
+ * sounds, and Ctrl/Alt chords are left to the app.
+ */
+test('@stalker @playback radio play state, unmute from zero and modifier chords', async ({
+    page,
+}) => {
+    test.setTimeout(120_000);
+    const audio = await playSyntheticStalkerRadio(page);
+    const player = page.locator('app-audio-player');
+    const playButton = player.locator('.play-btn');
+    const muteButton = player.locator('.vol-icon');
+    await expect(player.locator('.station-badge')).toHaveClass(/live/);
+
+    // A pause the player did not ask for (media keys, the OS) shows.
+    await audio.evaluate((element: HTMLAudioElement) => element.pause());
+    await expect(player.locator('.station-badge')).not.toHaveClass(/live/);
+    await expect(playButton).toHaveAttribute('aria-label', 'Play');
+    await audio.evaluate((element: HTMLAudioElement) => element.play());
+    await expect(player.locator('.station-badge')).toHaveClass(/live/);
+    await expect(playButton).toHaveAttribute('aria-label', 'Pause');
+
+    // Ctrl/Alt chords leave the volume alone.
+    await player.locator('.radio-hero').click({ position: { x: 5, y: 5 } });
+    const volume = await audio.evaluate((el: HTMLAudioElement) => el.volume);
+    for (const chord of ['Control+m', 'Alt+ArrowDown', 'Control+ArrowUp']) {
+        await page.keyboard.press(chord);
+        await expect(audio).toHaveJSProperty('volume', volume);
+        await expect(audio).toHaveJSProperty('muted', false);
+    }
+
+    // The volume taken all the way down: Unmute brings sound back.
+    for (let step = 0; step < 21; step += 1) {
+        await page.keyboard.press('ArrowDown');
+    }
+    await expect(audio).toHaveJSProperty('volume', 0);
+    await expect(muteButton).toHaveAttribute('aria-label', 'Unmute');
+    await muteButton.click();
+    await expect
+        .poll(() => audio.evaluate((el: HTMLAudioElement) => el.volume))
+        .toBeGreaterThan(0);
+    await expect(audio).toHaveJSProperty('muted', false);
+    await expect(muteButton).toHaveAttribute('aria-label', 'Mute');
+
+    // Muted, then raising the volume is heard.
+    await muteButton.click();
+    await expect(audio).toHaveJSProperty('volume', 0);
+    await player.locator('.radio-hero').click({ position: { x: 5, y: 5 } });
+    await page.keyboard.press('ArrowUp');
+    await expect(audio).toHaveJSProperty('volume', 0.05);
+    await expect(audio).toHaveJSProperty('muted', false);
+});
diff --git a/apps/web-e2e/src/stalker-radio-player.fixture.ts b/apps/web-e2e/src/stalker-radio-player.fixture.ts
index 58a0238ad4..3ff4575df8 100644
--- a/apps/web-e2e/src/stalker-radio-player.fixture.ts
+++ b/apps/web-e2e/src/stalker-radio-player.fixture.ts
@@ -1,6 +1,82 @@
-import type { Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import { pressTab } from './e2e-helpers';
 import { expect } from './fixtures';
+import {
+    addStalkerPortal,
+    interceptStalkerRequests,
+} from './stalker-portal.fixture';
+
+/**
+ * Adds the mock Stalker portal and plays a radio station whose stream is a
+ * minute of synthetic PCM silence. Resolves once the audio has advanced.
+ */
+export async function playSyntheticStalkerRadio(page: Page): Promise<Locator> {
+    await interceptStalkerRequests(page);
+    const source = 'http://radio-fixture.invalid/sample.wav';
+    // One minute of synthetic PCM silence, with no external stream or metadata.
+    const bytes = 8000 * 60 * 2;
+    const wav = Buffer.alloc(44 + bytes);
+    wav.write('RIFF', 0);
+    wav.writeUInt32LE(36 + bytes, 4);
+    wav.write('WAVEfmt ', 8);
+    wav.writeUInt32LE(16, 16);
+    wav.writeUInt16LE(1, 20);
+    wav.writeUInt16LE(1, 22);
+    wav.writeUInt32LE(8000, 24);
+    wav.writeUInt32LE(16000, 28);
+    wav.writeUInt16LE(2, 32);
+    wav.writeUInt16LE(16, 34);
+    wav.write('data', 36);
+    wav.writeUInt32LE(bytes, 40);
+    await page.route(source, (route) =>
+        route.fulfill({ contentType: 'audio/wav', body: wav })
+    );
+    await page.route('**/localhost:3000/stalker**', async (route) => {
+        const url = new URL(route.request().url());
+        if (url.searchParams.get('type') !== 'radio') return route.fallback();
+        const action = url.searchParams.get('action');
+        if (action === 'create_link') {
+            await route.fulfill({ json: { payload: { js: { cmd: source } } } });
+        } else if (action === 'get_ordered_list') {
+            await route.fulfill({
+                json: {
+                    payload: {
+                        js: {
+                            data: [
+                                {
+                                    id: '9001',
+                                    name: 'Synthetic Radio Alpha',
+                                    o_name: 'Synthetic Radio Alpha',
+                                    cmd: source,
+                                    logo: '',
+                                    category_id:
+                                        url.searchParams.get('genre') ?? '1',
+                                    tv_genre_id:
+                                        url.searchParams.get('genre') ?? '1',
+                                    number: '1',
+                                    radio: true,
+                                },
+                            ],
+                            total_items: 1,
+                            max_page_items: 20,
+                            cur_page: 1,
+                            total_pages: 1,
+                        },
+                    },
+                },
+            });
+        } else await route.fallback();
+    });
+    await addStalkerPortal(page);
+    await page.getByRole('link', { name: /radio/i }).click();
+    await page.locator('.category-item').nth(1).click();
+    await page.getByText('Synthetic Radio Alpha', { exact: true }).click();
+    const audio = page.locator('app-audio-player audio');
+    await expect
+        .poll(() => audio.evaluate((el: HTMLAudioElement) => el.currentTime))
+        .toBeGreaterThan(0);
+    return audio;
+}
 
 /** The computed colour a custom property resolves to on this page. */
 async function computedColor(page: Page, property: string): Promise<string> {
diff --git a/docs/architecture/player-controls-contract.md b/docs/architecture/player-controls-contract.md
index dcfc9583c3..ee51c24e01 100644
--- a/docs/architecture/player-controls-contract.md
+++ b/docs/architecture/player-controls-contract.md
@@ -1945,6 +1945,13 @@ live together; routing/integration stays in the M3U player template.
 When focus is inside a dialog or alertdialog, its reading region owns the
 arrows and M key. Radio leaves those events unconsumed and does not change or
 persist background volume; keyboard volume control resumes after dismissal.
+Ctrl, Cmd and Alt chords are never radio shortcuts (Cmd+M minimizes on macOS).
+Mute works as in the shared controls: it sets the volume to zero, and unmute
+restores the last audible volume (`LegacyMuteMemory`, 0.5 when none is known,
+e.g. a stored volume of zero), so raising the volume is also an unmute. The
+LIVE/paused badge and the play button follow the `<audio>` element's `play`,
+`pause`, `ended` and `error` events, so a media-key pause or a failed station
+shows; a refused `play()` shows paused unless a newer one already plays.
 
 ### Display sleep during playback
 
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.spec.ts b/libs/ui/playback/src/lib/audio-player/audio-player.component.spec.ts
index d40395f553..86a5b882cd 100644
--- a/libs/ui/playback/src/lib/audio-player/audio-player.component.spec.ts
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.spec.ts
@@ -191,17 +191,135 @@ describe('AudioPlayerComponent', () => {
         component.setVolume(0.65);
 
         component.mute();
-        expect(audio.muted).toBe(true);
+        expect(audio.volume).toBe(0);
         expect(component.isMuted()).toBe(true);
         expect(component.volume()).toBe(0);
 
         component.mute();
         expect(audio.muted).toBe(false);
+        expect(audio.volume).toBe(0.65);
         expect(component.isMuted()).toBe(false);
         expect(component.volume()).toBe(0.65);
         expect(localStorage.getItem('volume')).toBe('0.65');
     });
 
+    it('unmutes to an audible volume when the stored volume is zero', () => {
+        localStorage.setItem('volume', '0');
+        const audio = createComponent();
+        expect(component.isMuted()).toBe(true);
+
+        component.mute();
+
+        expect(component.isMuted()).toBe(false);
+        expect(component.volume()).toBe(0.5);
+        expect(audio.volume).toBe(0.5);
+        expect(audio.muted).toBe(false);
+    });
+
+    it('treats raising the volume while muted as an unmute', () => {
+        const audio = createComponent();
+        component.setVolume(0.8);
+        component.mute();
+
+        component.setVolume(0.3);
+
+        expect(component.isMuted()).toBe(false);
+        expect(audio.volume).toBe(0.3);
+        expect(audio.muted).toBe(false);
+    });
+
+    it('restores the volume a slider drag to zero left behind', () => {
+        createComponent();
+        component.setVolume(0.7);
+        component.setVolume(0);
+
+        component.mute();
+
+        expect(component.volume()).toBe(0.7);
+    });
+
+    it('unmutes to the last audible volume after the host pushed zero', () => {
+        createComponent();
+        fixture.componentRef.setInput('volume', 0.6);
+        fixture.detectChanges();
+        fixture.componentRef.setInput('volume', 0);
+        fixture.detectChanges();
+        expect(component.isMuted()).toBe(true);
+
+        component.mute();
+
+        expect(component.volume()).toBe(0.6);
+    });
+
+    describe('play state follows the audio element', () => {
+        it.each(['pause', 'ended', 'error'] as const)(
+            'shows paused after %s (media keys, a failed station)',
+            (eventType) => {
+                const audio = createComponent();
+                expect(component.playState()).toBe('play');
+
+                audio.dispatchEvent(new Event(eventType));
+
+                expect(component.playState()).toBe('paused');
+            }
+        );
+
+        it('shows playing when the element resumes on its own', () => {
+            const audio = createComponent();
+            audio.dispatchEvent(new Event('pause'));
+
+            audio.dispatchEvent(new Event('play'));
+
+            expect(component.playState()).toBe('play');
+        });
+
+        it('shows paused when playback is refused', async () => {
+            jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+            playSpy.mockRejectedValueOnce(new Error('synthetic refusal'));
+
+            createComponent();
+            await Promise.resolve();
+            await Promise.resolve();
+
+            expect(component.playState()).toBe('paused');
+        });
+
+        it('keeps a station playing when an older play() is rejected late', async () => {
+            jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+            let rejectOld: (error: Error) => void = () => undefined;
+            playSpy.mockImplementationOnce(
+                () => new Promise<void>((_, reject) => (rejectOld = reject))
+            );
+            const audio = createComponent();
+            Object.defineProperty(audio, 'paused', {
+                configurable: true,
+                get: () => false,
+            });
+
+            rejectOld(new Error('synthetic abort'));
+            await Promise.resolve();
+            await Promise.resolve();
+
+            expect(component.playState()).toBe('play');
+        });
+    });
+
+    it.each([
+        { ctrlKey: true },
+        { metaKey: true },
+        { altKey: true },
+    ])('leaves %o chords to the app and the system', (modifier) => {
+        createComponent();
+        component.setVolume(0.5);
+
+        for (const key of ['m', 'M', 'ArrowUp', 'ArrowDown']) {
+            const event = createKeyboardEvent(key, { init: modifier });
+            component.handleKeyboard(event);
+            expect(event.preventDefault).not.toHaveBeenCalled();
+        }
+        expect(component.volume()).toBe(0.5);
+    });
+
     it('emits or dispatches adjacent channel switches based on input mode', () => {
         createComponent();
         const emitted: string[] = [];
@@ -277,9 +395,12 @@ describe('AudioPlayerComponent', () => {
 
 function createKeyboardEvent(
     key: string,
-    options: { target?: EventTarget } = {}
+    options: { target?: EventTarget; init?: KeyboardEventInit } = {}
 ): KeyboardEvent & { preventDefault: jest.Mock } {
-    const event = new KeyboardEvent('keydown', { key }) as KeyboardEvent & {
+    const event = new KeyboardEvent('keydown', {
+        key,
+        ...options.init,
+    }) as KeyboardEvent & {
         preventDefault: jest.Mock;
     };
     Object.defineProperty(event, 'preventDefault', {
diff --git a/libs/ui/playback/src/lib/audio-player/audio-player.component.ts b/libs/ui/playback/src/lib/audio-player/audio-player.component.ts
index 546b79423d..818297eb60 100644
--- a/libs/ui/playback/src/lib/audio-player/audio-player.component.ts
+++ b/libs/ui/playback/src/lib/audio-player/audio-player.component.ts
@@ -24,6 +24,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { ChannelActions } from '@iptvnator/m3u-state';
 import { PlaybackHistoryGate } from '@iptvnator/playback/data-access';
 import { PlaybackHistoryConfirmation } from '../playback-history/playback-history-confirmation';
+import { LegacyMuteMemory } from '../player-controls/legacy-player-shortcuts';
 
 @Component({
     selector: 'app-audio-player',
@@ -125,13 +126,13 @@ import { PlaybackHistoryConfirmation } from '../playback-history/playback-histor
                         mat-icon-button
                         class="vol-icon"
                         [matTooltip]="
-                            (isMuted() || volume() === 0
+                            (isMuted()
                                 ? 'AUDIO_PLAYER.UNMUTE'
                                 : 'AUDIO_PLAYER.MUTE'
                             ) | translate
                         "
                         [attr.aria-label]="
-                            (isMuted() || volume() === 0
+                            (isMuted()
                                 ? 'AUDIO_PLAYER.UNMUTE'
                                 : 'AUDIO_PLAYER.MUTE'
                             ) | translate
@@ -164,6 +165,10 @@ import { PlaybackHistoryConfirmation } from '../playback-history/playback-histor
                 autoplay
                 #audio
                 (timeupdate)="onTimeUpdate()"
+                (play)="playState.set('play')"
+                (pause)="playState.set('paused')"
+                (ended)="playState.set('paused')"
+                (error)="playState.set('paused')"
             ></audio>
         </div>
     `,
@@ -191,13 +196,17 @@ export class AudioPlayerComponent {
 
     readonly playState = signal<'play' | 'paused'>('paused');
     readonly volume = signal(1);
-    readonly isMuted = signal(false);
+    /**
+     * Muting sets the volume to zero, as in the shared player controls: the
+     * slider then shows it, and raising the volume is also an unmute.
+     */
+    readonly isMuted = computed(() => this.volume() === 0);
     readonly logoError = signal(false);
 
     readonly displayIcon = computed(() => this.icon() || null);
     readonly volumeIcon = computed(() => {
         const v = this.volume();
-        if (v === 0 || this.isMuted()) return 'volume_off';
+        if (v === 0) return 'volume_off';
         return v < 0.5 ? 'volume_down' : 'volume_up';
     });
 
@@ -207,7 +216,7 @@ export class AudioPlayerComponent {
     private store = inject(Store);
     private destroyRef = inject(DestroyRef);
     private hostEl = inject(ElementRef);
-    private fallbackVolume = 1;
+    private readonly muteMemory = new LegacyMuteMemory();
     /** Commits the deferred "recently viewed" write once the station plays. */
     private readonly historyConfirmation = new PlaybackHistoryConfirmation({
         gate: inject(PlaybackHistoryGate),
@@ -221,6 +230,7 @@ export class AudioPlayerComponent {
         const saved = parseFloat(localStorage.getItem('volume') ?? '1');
         if (!isNaN(saved)) {
             this.volume.set(Math.max(0, Math.min(1, saved)));
+            this.muteMemory.rememberIfAudible(this.volume());
         }
 
         effect(() => {
@@ -275,6 +285,9 @@ export class AudioPlayerComponent {
         // pointer and Tab access, but this document-level listener still
         // fires, so it must opt out itself.
         if (this.hostEl.nativeElement.closest('[inert]')) return;
+        // Cmd/Ctrl/Alt chords belong to the app and the system (Cmd+M
+        // minimizes on macOS), not to the radio's M and arrow keys.
+        if (event.ctrlKey || event.metaKey || event.altKey) return;
 
         if (event.key === 'ArrowUp') {
             event.preventDefault();
@@ -303,6 +316,9 @@ export class AudioPlayerComponent {
         if (!audio) return;
         audio.play().catch((err) => {
             console.warn('[AudioPlayer] Audio playback failed:', err);
+            // A rejection superseded by a newer play() of the next station
+            // must not flip the state of a stream that is playing.
+            if (audio.paused) this.playState.set('paused');
         });
         this.playState.set('play');
     }
@@ -315,6 +331,7 @@ export class AudioPlayerComponent {
     setVolume(value: number, options: { emitChange?: boolean } = {}) {
         const clamped = Math.round(Math.max(0, Math.min(1, value)) * 100) / 100;
         this.volume.set(clamped);
+        this.muteMemory.rememberIfAudible(clamped);
         const audio = this.audioRef()?.nativeElement;
         if (audio) audio.volume = clamped;
         localStorage.setItem('volume', String(clamped));
@@ -323,17 +340,14 @@ export class AudioPlayerComponent {
         }
     }
 
+    /**
+     * Toggles between silence and the last audible volume (0.5 when none
+     * is known, e.g. a stored volume of zero), so unmute always sounds.
+     */
     mute() {
-        const audio = this.audioRef()?.nativeElement;
-        if (!audio) return;
-        audio.muted = !audio.muted;
-        this.isMuted.set(audio.muted);
-        if (audio.muted) {
-            this.fallbackVolume = this.volume();
-            this.setVolume(0);
-        } else {
-            this.setVolume(this.fallbackVolume);
-        }
+        this.setVolume(
+            this.isMuted() ? this.muteMemory.unmuteVolume(0) : 0
+        );
     }
 
     switchChannel(direction: 'next' | 'previous') {