Video player

import { usePlayer } from '@cskn/sdk';

function Episode({ video, savedPosition }: { video: Video; savedPosition: number }) {
  const { play, availability, playing } = usePlayer();

  // In a browser or an older app version there's no player, so use your own.
  if (!availability?.available) return <video src={video.mp4Url} controls />;

  const watch = async () => {
    const result = await play(
      { src: video.hlsUrl, title: video.title, poster: video.posterUrl, startAt: savedPosition, progressInterval: 10 },
      (event) => {
        if (event.event === 'progress') saveResumePoint(video.id, event.position);
      },
    );
    if (!result.error) saveResumePoint(video.id, result.ended ? 0 : result.position);
  };

  return <button onClick={watch} disabled={playing}>Watch</button>;
}