우측 하단 플로팅 플레이어 위젯

[Jang990]

Closes #27

무엇을 바꿨나

트랙 목록이 있는 영상에서 화면 우측 하단에 플로팅 플레이어가 뜬다. 접힘 상태는 아이콘 하나고, 누르면 두 줄짜리 카드가 열린다 — 위는 곡 제목과 접기 버튼, 아래는 이전·재생/일시정지·다음·반복과 목록으로 이동. 제목이 폭을 넘으면 좌우로 흐른다. 목록이 비어 있거나 전체화면이면 DOM에 없다.

새 core 로직은 없다. 조작부는 패널이 쓰던 parts/playbackControls.js를 그대로 재사용해서 두 곳이 어긋날 수 없게 했고, wiring.js는 view 하나를 만들어 패널과 위젯에 나눠 준다(toPanelView → toView).

설명이 필요한 선택 다섯:

• 여닫는 것은 클릭뿐이다. hover로 펼치면, 클릭하려고 마우스를 올린 시점에 이미 펼쳐져 있어서 클릭이 아무 일도 하지 않는 것처럼 보인다.
• 아이콘과 카드는 CSS로 숨기지 않고 서로 갈아끼운다. 화면에 있는 것이 곧 상태여야 눌렀을 때 무엇이 달라졌는지가 눈에 보인다.
• 전체화면에서는 위젯을 지운다. position: fixed면 브라우저가 알아서 감춰줄 것 같지만, 전체화면이 문서 루트에 걸리면 위젯도 그 자손이라 그대로 그려진다. 어느 요소에 걸렸는지는 따지지 않고 document.fullscreenElement가 비었는지만 본다. 자동 스킵은 위젯 없이도 돈다.
• 제목은 그려놓고 재본 뒤에 흐른다. 넘치지 않는 제목까지 흔들리면 읽기만 힘들어진다. 끝까지 흐른 뒤 잠깐 머물고 처음으로 돌아온다. 움직임을 줄이는 설정에서는 흐르지 않고 말줄임으로 둔다.
• 다시 그리기 서명은 네 값뿐이다 — 재생 중 트랙 이름 · 재생 여부 · 반복 여부 · 펼침 여부. 위젯에 보이는 것이 이 넷이라 목록이 바뀌어도 넷이 그대로면 그릴 이유가 없다. 버튼 핸들러는 state를 통해 현재 값을 읽으므로 오래된 뷰에 묶이지 않는다.

reveal()이 panel.js가 아니라 panelReveal.js에 있다. panel.js가 이미 153줄이라 더 넣으면 150줄 기준에서 더 멀어진다.

확인

npm test 133개 통과, npm run test:e2e 19개 통과 (플로팅 12개 신규).

전체화면 테스트가 보장하는 것은 위젯이 DOM에서 사라진다는 것이다. Playwright의 가시성 판정은 가려진 요소를 구분하지 못해서(전체화면 요소에 덮인 요소도 "보인다"고 답한다) 칠해지는지는 검증 대상이 아니다.

미확인

픽스처는 셀렉터가 낡은 것을 잡지 못한다. 실제 유튜브에서 확인할 것:

1. 타임라인 댓글이 있는 영상에서 목록을 불러온다 → 우측 하단에 파란 원형 아이콘이 뜬다. 마우스를 올려도 펼쳐지지 않는다.
2. 아이콘을 누른다 → 두 줄 카드가 열린다. 유튜브 헤더나 플레이어 컨트롤에 가려지지 않는지 본다(z-index: 2500).
3. 제목이 아주 긴 트랙으로 넘어간다 → 끝까지 흐르고 잠깐 멈췄다가 처음으로 돌아온다. 짧은 제목에서는 멈춰 있다.
4. 전체화면(f)으로 들어간다 → 위젯이 사라진다. 나오면 다시 뜬다. 체크 해제한 구간은 전체화면에서도 자동으로 넘어간다.
5. 극장모드(t)로 바꾼다 → 위젯이 그대로 보인다. ≡를 누르면 패널로 스크롤되며 파란 테두리가 잠깐 켜진다.
6. 다크/라이트 테마를 각각 본다. 배경색을 유튜브 변수로 잡아서 라이트 테마에서 대비가 충분한지 확인이 필요하다.

🤖 Generated with Claude Code

https://claude.ai/code/session_01PuyL1VJDKFV2CL9XK86onP