'use client';

/**
 * `<hls-video slot="media">` — HLS (`.m3u8`) playback via
 * `hls-video-element`, which lazy-loads `hls.js` only on browsers that
 * don't ship native HLS (everything except Safari).
 */

import 'hls-video-element';
import './jsx-augmentation';
import { MediaPosterImage } from 'media-chrome/react';
import type { HlsSource, VideoPlayerSettings } from '../types';

export interface HlsCanvasProps extends VideoPlayerSettings {
  readonly source: HlsSource;
}

export function HlsCanvas({
  source,
  autoPlay,
  muted,
  loop,
  crossOrigin = 'anonymous',
}: HlsCanvasProps) {
  return (
    <>
      <hls-video
        slot="media"
        src={source.url}
        crossOrigin={crossOrigin}
        {...(muted && { muted: true })}
        {...(autoPlay && { autoplay: true })}
        {...(loop && { loop: true })}
        playsInline
      />
      {source.poster && <MediaPosterImage slot="poster" src={source.poster} />}
    </>
  );
}