Stop Global Audio player from playing loose audio

src/components/VGlobalAudioSection/VGlobalAudioSection.vue

@@ -20,6 +20,7 @@ import {
 
 import { AUDIO } from '~/constants/media'
 import { useActiveAudio } from '~/composables/use-active-audio'
+import { isMinScreen } from '~/composables/use-media-query'
 import { useActiveMediaStore } from '~/stores/active-media'
 import { useMediaStore } from '~/stores/media'
 import { useSingleResultStore } from '~/stores/media/single-result'
@@ -112,13 +113,21 @@ export default defineComponent({
       activeMediaStore.ejectActiveMediaItem()
     }
 
-    /* Router observation */
-
-    const routeName = computed(() => route.value.name)
-    watch(routeName, (routeNameVal, oldRouteNameVal) => {
+    /**
+     * Router observation
+     *
+     * The player will continue only within 'search-audio' and 'audio-id' routes,
+     * and on desktop, only if the next route if the 'audio-id' page of the
+     * track currently playing, or the search page where it comes from.
+     */
+    const routeValue = computed(() => route.value)
+    watch(routeValue, (newRouteVal, oldRouteVal) => {
       if (
-        oldRouteNameVal?.includes('audio') &&
-        !routeNameVal?.includes('audio')
+        (oldRouteVal.name?.includes('audio') &&
+          !newRouteVal.name?.includes('audio')) ||
+        (isMinScreen('md') &&
+          newRouteVal.name?.includes('audio-id') &&
+          newRouteVal.params.id != activeMediaStore.id)
       ) {
         activeAudio.obj.value?.pause()
         activeMediaStore.ejectActiveMediaItem()

test/playwright/e2e/global-audio.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect, Page, Locator } from '@playwright/test'
+
+import { sleep } from '~~/test/playwright/utils/navigation'
+
+const getNthAudioRow = async (page: Page, num: number) => {
+  const rowSelector = `[aria-label*="Audio Player"] >> nth=${num}`
+  const nthAudioRow = await page.locator(rowSelector).locator('article')
+  expect(nthAudioRow).toHaveAttribute('status', 'paused')
+  return nthAudioRow
+}
+
+const play = async (audioRow: Locator) => {
+  await audioRow.locator('button[aria-label="Play"] >> visible=true').click()
+  expect(audioRow).toHaveAttribute('status', /(loading|playing)/)
+}
+
+test.describe('global audio', () => {
+  test('track continues to play when navigating from audio search to its details page', async ({
+    page,
+  }) => {
+    await page.goto('/search/audio?q=honey')
+
+    // Find and play the first audio result
+    const firstAudioRow = await getNthAudioRow(page, 0)
+    await play(firstAudioRow)
+    // Navigate to the details page of the playing audio track
+    await firstAudioRow.locator('a').click()
+    // and confirm is still playing (or loading to play)
+    const mainPlayerButton = await page.locator('.main-track >> button')
+    sleep(600) // Doesn't seem to make a difference here
+    expect(mainPlayerButton).toHaveAttribute('aria-label', /(Loading|Pause)/)
+  })
+})