🎵 Media Session API 완벽 가이드: 브라우저 밖 OS 제어 센터와 이어폰 버튼까지 정복하는 웹 미디어 컨트롤

// 브라우저 지원 여부 확인
if ('mediaSession' in navigator) {
  console.log('🎉 Media Session API를 지원하는 환경입니다.');
} else {
  console.warn('⚠️ Media Session API를 지원하지 않는 레거시 브라우저입니다.');
}

function updateMetadata(track) {
  if (!('mediaSession' in navigator)) return;

  navigator.mediaSession.metadata = new MediaMetadata({
    title: track.title, // 트랙 제목
    artist: track.artist, // 아티스트/가수 이름
    album: track.album, // 앨범/재생목록 이름
    artwork: [
      { src: track.cover96,   sizes: '96x96',   type: 'image/png' },
      { src: track.cover128,  sizes: '128x128', type: 'image/png' },
      { src: track.cover192,  sizes: '192x192', type: 'image/png' },
      { src: track.cover256,  sizes: '256x256', type: 'image/png' },
      { src: track.cover384,  sizes: '384x384', type: 'image/png' },
      { src: track.cover512,  sizes: '512x512', type: 'image/png' },
    ]
  });
}

const audio = document.getElementById('my-audio');

// 1. 재생 (Play)
navigator.mediaSession.setActionHandler('play', async () => {
  try {
    await audio.play();
    navigator.mediaSession.playbackState = 'playing';
  } catch (err) {
    console.error('재생 실패:', err);
  }
});

// 2. 일시정지 (Pause)
navigator.mediaSession.setActionHandler('pause', () => {
  audio.pause();
  navigator.mediaSession.playbackState = 'paused';
});

// 3. 이전 트랙 (Previous Track)
navigator.mediaSession.setActionHandler('previoustrack', () => {
  playPreviousTrack();
});

// 4. 다음 트랙 (Next Track)
navigator.mediaSession.setActionHandler('nexttrack', () => {
  playNextTrack();
});

// 5. 특정 시간으로 이동 (Seek To - 잠금화면 탐색 바 조작 시 발생)
navigator.mediaSession.setActionHandler('seekto', (details) => {
  if (details.fastSeek && 'fastSeek' in audio) {
    audio.fastSeek(details.seekTime);
  } else {
    audio.currentTime = details.seekTime;
  }
  updatePositionState();
});

function updatePositionState() {
  if (!('setPositionState' in navigator.mediaSession)) return;
  
  // 미디어 메타데이터가 아직 로드되지 않았거나 duration이 비정상일 경우 방어
  if (isNaN(audio.duration) || audio.duration === Infinity || audio.duration <= 0) {
    return;
  }

  navigator.mediaSession.setPositionState({
    duration: audio.duration,         // 총 재생 시간(초)
    playbackRate: audio.playbackRate, // 배속 (1.0, 1.5, 2.0 등)
    position: audio.currentTime       // 현재 재생 시점(초)
  });
}

// 오디오 이벤트에 리스너 연결
audio.addEventListener('play', updatePositionState);
audio.addEventListener('pause', updatePositionState);
audio.addEventListener('ratechange', updatePositionState);
audio.addEventListener('seeked', updatePositionState);

import { useEffect, useRef, useState, useCallback } from 'react';

export interface Track {
  id: string;
  title: string;
  artist: string;
  album: string;
  src: string;
  cover: string;
}

export function useMediaSessionPlayer(playlist: Track[]) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef<HTMLAudioElement | null>(null);

  const currentTrack = playlist[currentIndex];

  // 오디오 엘리먼트 초기화 (싱글톤 보장)
  useEffect(() => {
    const audio = new Audio();
    audioRef.current = audio;

    const handlePlay = () => {
      setIsPlaying(true);
      if ('mediaSession' in navigator) {
        navigator.mediaSession.playbackState = 'playing';
      }
    };

    const handlePause = () => {
      setIsPlaying(false);
      if ('mediaSession' in navigator) {
        navigator.mediaSession.playbackState = 'paused';
      }
    };

    audio.addEventListener('play', handlePlay);
    audio.addEventListener('pause', handlePause);

    return () => {
      audio.removeEventListener('play', handlePlay);
      audio.removeEventListener('pause', handlePause);
      audio.pause();
      audio.src = '';
    };
  }, []);

  // 트랙 변경 핸들러
  const playTrack = useCallback((index: number) => {
    const target = playlist[index];
    if (!target || !audioRef.current) return;

    setCurrentIndex(index);
    audioRef.current.src = target.src;
    audioRef.current.play().catch((err) => console.warn('Autoplay blocked:', err));
  }, [playlist]);

  const nextTrack = useCallback(() => {
    if (currentIndex < playlist.length - 1) {
      playTrack(currentIndex + 1);
    } else {
      playTrack(0); // 루프
    }
  }, [currentIndex, playlist.length, playTrack]);

  const prevTrack = useCallback(() => {
    if (currentIndex > 0) {
      playTrack(currentIndex - 1);
    } else {
      playTrack(playlist.length - 1);
    }
  }, [currentIndex, playlist.length, playTrack]);

  // Media Session 메타데이터 및 액션 핸들러 동기화
  useEffect(() => {
    if (!('mediaSession' in navigator) || !currentTrack) return;

    // 1. 메타데이터 갱신
    navigator.mediaSession.metadata = new MediaMetadata({
      title: currentTrack.title,
      artist: currentTrack.artist,
      album: currentTrack.album,
      artwork: [
        { src: currentTrack.cover, sizes: '512x512', type: 'image/jpeg' }
      ]
    });

    const audio = audioRef.current;
    if (!audio) return;

    // 2. 액션 핸들러 등록
    navigator.mediaSession.setActionHandler('play', () => audio.play());
    navigator.mediaSession.setActionHandler('pause', () => audio.pause());
    navigator.mediaSession.setActionHandler('previoustrack', prevTrack);
    navigator.mediaSession.setActionHandler('nexttrack', nextTrack);
    
    navigator.mediaSession.setActionHandler('seekto', (details) => {
      if (details.seekTime !== undefined) {
        audio.currentTime = details.seekTime;
      }
    });

    navigator.mediaSession.setActionHandler('seekbackward', (details) => {
      const offset = details.seekOffset || 10;
      audio.currentTime = Math.max(audio.currentTime - offset, 0);
    });

    navigator.mediaSession.setActionHandler('seekforward', (details) => {
      const offset = details.seekOffset || 10;
      audio.currentTime = Math.min(audio.currentTime + offset, audio.duration);
    });

    // 클린업
    return () => {
      if ('mediaSession' in navigator) {
        navigator.mediaSession.setActionHandler('play', null);
        navigator.mediaSession.setActionHandler('pause', null);
        navigator.mediaSession.setActionHandler('previoustrack', null);
        navigator.mediaSession.setActionHandler('nexttrack', null);
        navigator.mediaSession.setActionHandler('seekto', null);
      }
    };
  }, [currentTrack, nextTrack, prevTrack]);

  return {
    currentTrack,
    isPlaying,
    togglePlay: () => {
      if (!audioRef.current) return;
      if (isPlaying) audioRef.current.pause();
      else audioRef.current.play();
    },
    nextTrack,
    prevTrack
  };
}

// 라이브 스트리밍 안전 처리
if (Number.isFinite(audio.duration) && audio.duration > 0) {
  navigator.mediaSession.setPositionState({
    duration: audio.duration,
    playbackRate: audio.playbackRate,
    position: audio.currentTime
  });
}