fix(media): confina auto-follow da letra ao aside

src/modules/media/__tests__/media-aside-scroll.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { revealItemScrollTop } from '../services/media-aside-scroll'
+
+describe('media aside auto-follow', () => {
+  it('centraliza o item no scroll do aside, sem depender do documento', () => {
+    expect(
+      revealItemScrollTop({
+        scrollTop: 200,
+        containerTop: 100,
+        containerHeight: 400,
+        itemTop: 350,
+        itemHeight: 40,
+      }),
+    ).toBe(270)
+  })
+
+  it('não gera scroll negativo para o primeiro item', () => {
+    expect(
+      revealItemScrollTop({
+        scrollTop: 0,
+        containerTop: 100,
+        containerHeight: 400,
+        itemTop: 110,
+        itemHeight: 40,
+      }),
+    ).toBe(0)
+  })
+})

src/modules/media/services/media-aside-scroll.ts

@@ -0,0 +1,34 @@
+export function revealItemScrollTop({
+  scrollTop,
+  containerTop,
+  containerHeight,
+  itemTop,
+  itemHeight,
+}: {
+  scrollTop: number
+  containerTop: number
+  containerHeight: number
+  itemTop: number
+  itemHeight: number
+}): number {
+  return Math.max(
+    0,
+    scrollTop + itemTop - containerTop - (containerHeight - itemHeight) / 2,
+  )
+}
+
+export function revealItemInAside(aside: HTMLElement, item: HTMLElement): void {
+  const asideBox = aside.getBoundingClientRect()
+  const itemBox = item.getBoundingClientRect()
+
+  aside.scrollTo({
+    top: revealItemScrollTop({
+      scrollTop: aside.scrollTop,
+      containerTop: asideBox.top,
+      containerHeight: aside.clientHeight,
+      itemTop: itemBox.top,
+      itemHeight: itemBox.height,
+    }),
+    behavior: 'auto',
+  })
+}

src/modules/media/views/MediaView.vue

@@ -8,6 +8,7 @@ import StagePaletteButton from '../../settings/components/StagePaletteButton.vue
 import MediaPlayerPill from '../components/MediaPlayerPill.vue'
 import MediaSlideStage from '../components/MediaSlideStage.vue'
 import { useMediaPlayer } from '../composables/useMediaPlayer'
+import { revealItemInAside } from '../services/media-aside-scroll'
 import { stripHtmlBreaks } from '../services/media-slides'
 import type { MediaPlaybackMode } from '../types/media'
 
@@ -63,7 +64,7 @@ const {
   syncProjectionFlag,
 } = useMediaPlayer()
 
-const playlistListEl = ref<HTMLUListElement | null>(null)
+const playlistAsideEl = ref<HTMLElement | null>(null)
 
 /** Slide/faixa em reprodução visível no painel lateral (auto-scroll). */
 const activeListIndex = computed(() =>
@@ -73,11 +74,9 @@ const activeListIndex = computed(() =>
 watch(activeListIndex, async (index) => {
   if (index < 0) return
   await nextTick()
-  const list = playlistListEl.value
-  const active = list?.querySelector('.media-window__playlist-item--active')
-  // Letra em execução sempre no topo do painel (center vertical do item
-  // no primeiro terço) — evidência contínua enquanto toca.
-  active?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+  const aside = playlistAsideEl.value
+  const active = aside?.querySelector<HTMLElement>('.media-window__playlist-item--active')
+  if (aside && active) revealItemInAside(aside, active)
 })
 
 const stageLyric = computed(() => currentSlide.value?.lyric ?? '')
@@ -242,11 +241,12 @@ async function onToggleFullscreen() {
 
       <aside
         v-if="showPlaylist"
+        ref="playlistAsideEl"
         class="media-window__playlist"
       >
         <template v-if="queue.length > 1">
           <h2 class="media-window__playlist-title">Fila de reprodução</h2>
-          <ul ref="playlistListEl" class="media-window__playlist-list">
+          <ul class="media-window__playlist-list">
             <li v-for="(item, index) in queue" :key="`${item.musicId}-${index}`">
               <button
                 type="button"
@@ -264,7 +264,7 @@ async function onToggleFullscreen() {
           <h2 class="media-window__playlist-title">
             {{ t('media.playlist') }}
           </h2>
-          <ul ref="playlistListEl" class="media-window__playlist-list">
+          <ul class="media-window__playlist-list">
             <li
               v-for="item in playlist"
               :key="item.index"