feat: lecteur média persistant Now Playing (dock audio, mini-vidéo PiP, Media Session, mobile) #110

tests/e2e/media-viewer.spec.js

@@ -1,8 +1,7 @@
 /**
- * E2E tests for the ObsiGate audio/video viewers (roadmap #109).
+ * E2E tests for the ObsiGate media viewers & persistent player (roadmap #109/#110).
  *
- * Fixtures : `test_vault/sample-audio.mp3` (1 s sine, ~5 ko) +
- * `test_vault/sample-video.webm` (64x64 VP8, ~1 ko).
+ * Fixtures : `test_vault/sample-audio.mp3` (1 s sine) + `test_vault/sample-video.webm`.
  *
  * Run (local):
  *   BASE_URL=http://localhost:2029 npx playwright test tests/e2e/media-viewer.spec.js
@@ -44,11 +43,10 @@ test.describe('Media viewers — HTML5 audio/video (#109)', () => {
     await login(page);
     await openFile(page, 'TestVault', 'sample-audio.mp3');
 
-    const audio = page.locator('#content-area .audio-viewer-container audio.audio-player');
+    const audio = page.locator('#content-area .audio-viewer-container audio.np-media--audio');
     await expect(audio).toBeVisible({ timeout: 10000 });
     await expect(audio).toHaveAttribute('src', /\/api\/media\/TestVault\?path=/);
     await expect(audio).toHaveAttribute('controls', '');
-    // La durée est lue côté client via loadedmetadata.
     await expect(page.locator('#content-area .media-duration-badge')).not.toHaveText('--:--', { timeout: 10000 });
   });
 
@@ -56,7 +54,7 @@ test.describe('Media viewers — HTML5 audio/video (#109)', () => {
     await login(page);
     await openFile(page, 'TestVault', 'sample-video.webm');
 
-    const video = page.locator('#content-area .video-viewer-container video.video-player');
+    const video = page.locator('#content-area .video-viewer-container video.np-media--video');
     await expect(video).toBeVisible({ timeout: 10000 });
     await expect(video).toHaveAttribute('src', /\/api\/media\/TestVault\?path=/);
     await expect(video).toHaveAttribute('playsinline', '');
@@ -73,3 +71,67 @@ test.describe('Media viewers — HTML5 audio/video (#109)', () => {
     expect(resp.headers()['accept-ranges']).toBe('bytes');
   });
 });
+
+test.describe('Now Playing — lecture persistante (#110)', () => {
+
+  test('affiche le dock et continue la lecture quand on navigue ailleurs', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-audio.mp3');
+    await expect(page.locator('#content-area audio.np-media--audio')).toBeVisible({ timeout: 10000 });
+
+    // Naviguer vers une note : le média doit passer dans le dock.
+    await openFile(page, 'TestVault', 'note1.md');
+    const dock = page.locator('#now-playing-host .np-dock--audio');
+    await expect(dock).toBeVisible({ timeout: 10000 });
+    await expect(dock.locator('.np-dock-title')).toHaveText('sample-audio.mp3');
+
+    // S'assurer de la lecture (l'autoplay peut être bloqué sans geste).
+    const media = page.locator('#now-playing-host audio.np-media--audio');
+    if (await media.evaluate((el) => el.paused)) {
+      await dock.locator('[data-np="play"]').click();
+    }
+    await expect.poll(() => media.evaluate((el) => !el.paused), { timeout: 5000 }).toBe(true);
+
+    // Naviguer encore : toujours en lecture.
+    await openFile(page, 'TestVault', 'Accueil.md');
+    await expect(dock).toBeVisible();
+    expect(await media.evaluate((el) => !el.paused)).toBe(true);
+  });
+
+  test('revient sur le média depuis le dock', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-audio.mp3');
+    await expect(page.locator('#content-area audio.np-media--audio')).toBeVisible({ timeout: 10000 });
+    await openFile(page, 'TestVault', 'note1.md');
+
+    const dock = page.locator('#now-playing-host .np-dock--audio');
+    await expect(dock).toBeVisible({ timeout: 10000 });
+    await dock.locator('[data-np="reopen"]').click();
+
+    await expect(page.locator('#content-area .audio-viewer-container audio.np-media--audio')).toBeVisible({ timeout: 10000 });
+    await expect(dock).toBeHidden();
+  });
+
+  test('ferme la lecture depuis le dock', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-audio.mp3');
+    await expect(page.locator('#content-area audio.np-media--audio')).toBeVisible({ timeout: 10000 });
+    await openFile(page, 'TestVault', 'note1.md');
+
+    const dock = page.locator('#now-playing-host .np-dock--audio');
+    await expect(dock).toBeVisible({ timeout: 10000 });
+    await dock.locator('[data-np="close"]').click();
+    await expect(page.locator('#now-playing-host .np-dock--audio')).toBeHidden();
+  });
+
+  test('le mini-player vidéo flotte et reste visible en naviguant', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-video.webm');
+    await expect(page.locator('#content-area video.np-media--video')).toBeVisible({ timeout: 10000 });
+    await openFile(page, 'TestVault', 'note1.md');
+
+    const mini = page.locator('#now-playing-host .np-dock--video');
+    await expect(mini).toBeVisible({ timeout: 10000 });
+    await expect(mini.locator('video.np-media--video')).toBeVisible();
+  });
+});