feat(page): 주요 음악 서비스 관행에 맞춰 조작 보완 + 화면·버튼 동작 문서화
화면별 사용 흐름과 버튼 동작을 전수 정리한 뒤, 스포티파이 웹 플레이어·유튜브 뮤직·애플 뮤직에서 공통으로 쓰이는 관행과 대조해 빠져 있던 것을 채웠다. 추가/변경: - 스피커 아이콘을 장식에서 음소거 토글 버튼으로(해제 시 직전 볼륨 복원). 세 서비스 공통 동작. - 키보드 단축키: Space 재생/일시정지, M 음소거, 좌우 5초 탐색, Ctrl/Cmd+오른쪽 다음 곡. 입력창에 포커스가 있으면 가로채지 않는다. - 대기열 맨 위에 "지금 재생 중" 블록 추가. 재생바가 이미 폴링하는 값을 위로 올려 공유하므로 같은 API 를 두 번 호출하지 않는다. - 대기열의 곡을 누르면 그 곡부터 재생. 봇에 점프 액션이 없어 queue/set 으로 대상 곡부터 남긴 뒤 skip 하는 방식이며, 건너뛴 곡이 빠지는 것까지 스포티파이 대기열과 동일하다. - 검색 결과 카드에 재생시간 표기(같은 제목의 짧은 클립과 원곡 구분에 필요). 문서(page/README.md 5-1~5-3): - 화면(ViewMode)별 진입 경로·보이는 것·할 수 있는 일 표 - 버튼/조작별 동작·호출 API·비활성 조건 전수 표 - 타 서비스 관행 대비 개선 항목과 미지원 항목(이전 곡·반복 재생: 봇 API 한계) 명시 검증: tsc 통과, lint 에러 0. 브라우저에서 음소거 토글(볼륨 0↔60 복원), Space 로 재생↔일시정지 전환, "지금 재생 중" 표시, 대기열 곡의 "…부터 재생" 동작, 재생시간 표기를 실제 렌더링으로 확인.
This commit is contained in:
@@ -7,6 +7,13 @@ import { ViewMode } from "@/app/page";
|
||||
import { useToast } from "@/components/ToastProvider";
|
||||
import type { DiscordServer, SearchTrack, SearchResults } from "@/types/music";
|
||||
|
||||
/** ms -> m:ss (검색 결과 재생시간 표기용) */
|
||||
function formatDuration(ms?: number) {
|
||||
if (!ms || Number.isNaN(ms)) return "";
|
||||
const total = Math.floor(ms / 1000);
|
||||
return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
interface MainContentProps {
|
||||
viewMode: ViewMode;
|
||||
setViewMode: (mode: ViewMode) => void;
|
||||
@@ -211,7 +218,13 @@ export default function MainContent({
|
||||
</span>
|
||||
</span>
|
||||
<span className="block truncate text-sm font-medium text-white">{track.title}</span>
|
||||
<span className="block truncate text-xs text-neutral-400">{track.artist}</span>
|
||||
<span className="flex items-center justify-between gap-2 text-xs text-neutral-400">
|
||||
<span className="truncate">{track.artist}</span>
|
||||
{/* 재생시간 표기는 어느 음악 서비스에나 있는 정보다(같은 제목의 짧은 클립/전체 곡 구분에 필요). */}
|
||||
{track.duration ? (
|
||||
<span className="flex-shrink-0 tabular-nums text-neutral-500">{formatDuration(track.duration)}</span>
|
||||
) : null}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user