import React from "react";
import { SpartaPlayer } from "@teamsparta/sparta-player";
import { useNavigate } from "react-router-dom";

const TestPage: React.FC = () => {
  const contentId = 0; // 예시, 실제 코드에서는 URL 파라미터 등에서 가져옴
  const navigate = useNavigate();
  const videoSrc =
    "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8";

  return (
    <SpartaPlayer
      source={videoSrc} // string, required
      videoType="application/x-mpegURL" // string, required
      autoPlay={true}
      controls={true}
      vttSource={vttSource}
      // thumbnail={'https://picsum.photos/1024/500'}
      isNoVttSourceAlert={true}
      noVttSourceAlertMessage="자막을 지원하지 않는 수업이에요."
      title={"제목 긴거 테스트스트스"}
      isNavigationOn={true}
      isAutoPlayButtonOn={true}
      isLoaded={isLoaded}
      defaultQuality={localStorage.getItem("quality") || "auto"}
      defaultPlaybackRate={localStorage.getItem("rate") || "1"}
      defaultSubtitle={localStorage.getItem("subtitle") || false}
      defaultFullscreen={localStorage.getItem("fullscreen") || false}
      defaultVolume={localStorage.getItem("volume") || 1}
      defaultMuted={localStorage.getItem("muted") || false}
      onReady={(player) => {}}
      // onPlay={() => console.log('onPlay')}
      // onPause={() => console.log('onPause')}
      // onEnded={() => console.log('onEnded')}
      // onTimeUpdate={(time) => console.log('onTimeUpdate', time)}
      onVolumeChange={(volume) =>
        localStorage.setItem("volume", JSON.stringify(volume))
      }
      onSeeking={(time) =>
        localStorage.setItem("seeking", JSON.stringify(time))
      }
      onMute={(isMuted) =>
        localStorage.setItem("muted", JSON.stringify(isMuted))
      }
      onPlaybackRateChange={(rate) =>
        localStorage.setItem("rate", JSON.stringify(rate))
      }
      onQualityChange={(quality) =>
        localStorage.setItem("quality", JSON.stringify(quality))
      }
      onSubtitleChange={(isSubtitle) =>
        localStorage.setItem("subtitle", JSON.stringify(isSubtitle))
      }
      onFullscreenChange={(isFullscreen) =>
        localStorage.setItem("fullscreen", JSON.stringify(isFullscreen))
      }
      onChangeAutoPlay={(isAutoPlay) =>
        localStorage.setItem("autoplay", JSON.stringify(isAutoPlay))
      }
      onClickPrev={() => {
        if (contentId > 0) {
          handleNavigate(contentId - 1);
        }
      }}
      // 다음 버튼
      onClickNext={() => {
        if (contentId < videoSources.length - 1) {
          handleNavigate(contentId + 1);
        }
      }}
    />
  );
};

import { SpartaPlayer, SpartaPlayerProps } from "@teamsparta/sparta-player";

// SpartaPlayerProps gives you access to all available prop types
const customProps: Partial<SpartaPlayerProps> = {
  source: "video.mp4",
  videoType: "video/mp4",
  onPlay: (time) => console.log(`Video started playing at ${time}s`),
};

// IDE will now provide type hinting and validation
const MyPlayer = () => <SpartaPlayer {...customProps} autoPlay />;