import { TourMedia } from '@tour-kit/media';

<TourMedia
  src="https://youtube.com/watch?v=abc123"
  alt="Tutorial video"
  aspectRatio="16/9"
  autoplay={false}
  muted={true}
  controls={true}
  poster="/images/poster.jpg"
/>

import { YouTubeEmbed } from '@tour-kit/media';

<YouTubeEmbed
  videoId="abc123"
  autoplay
  muted
  startTime={30}
/>

import { VimeoEmbed } from '@tour-kit/media';

<VimeoEmbed
  videoId="123456"
  autoplay
  muted
/>

import { LoomEmbed } from '@tour-kit/media';

<LoomEmbed
  videoId="abc123"
  hideOwner
  hideTitle
/>

import { WistiaEmbed } from '@tour-kit/media';

<WistiaEmbed
  videoId="abc123"
  autoplay
/>

import { NativeVideo } from '@tour-kit/media';

<NativeVideo
  src="/videos/intro.mp4"
  poster="/images/poster.jpg"
  controls
  captions={[
    { src: '/captions/en.vtt', srclang: 'en', label: 'English', default: true }
  ]}
/>

import { GifPlayer } from '@tour-kit/media';

<GifPlayer
  src="/images/demo.gif"
  alt="Demo animation"
  playOnHover
  showControls
/>

import { LottiePlayer } from '@tour-kit/media';

<LottiePlayer
  src="/animations/success.json"
  loop
  autoplay
  speed={1.5}
/>

import { MediaHeadless } from '@tour-kit/media/headless';

<MediaHeadless src={src} alt={alt}>
  {({
    mediaType,
    src,
    embedUrl,
    videoId,
    isPlaying,
    isLoaded,
    hasError,
    currentTime,
    duration,
    play,
    pause,
    seek,
    prefersReducedMotion,
    containerRef,
  }) => (
    <CustomMediaPlayer />
  )}
</MediaHeadless>

import { useMediaEvents } from '@tour-kit/media';

const {
  ref,
  isPlaying,
  currentTime,
  duration,
} = useMediaEvents({
  onPlay: () => {},
  onPause: () => {},
  onEnded: () => {},
  onError: (error) => {},
  onTimeUpdate: (time) => {},
  onLoadedMetadata: (duration) => {},
});

import { usePrefersReducedMotion } from '@tour-kit/media';

const prefersReducedMotion = usePrefersReducedMotion();

import { useResponsiveSource } from '@tour-kit/media';

const source = useResponsiveSource([
  { src: '/video-mobile.mp4', media: '(max-width: 768px)' },
  { src: '/video-desktop.mp4' },
]);

import {
  parseMediaUrl,
  detectMediaType,
  isSupportedMediaUrl,
  isYouTubeUrl,
  isVimeoUrl,
  isLoomUrl,
  isWistiaUrl,
} from '@tour-kit/media';

const { type, id } = parseMediaUrl('https://youtube.com/watch?v=abc');
// { type: 'youtube', id: 'abc' }

const type = detectMediaType('/video.mp4');
// 'video'

const isSupported = isSupportedMediaUrl(url);

import {
  extractYouTubeId,
  extractVimeoId,
  extractLoomId,
  extractWistiaId,
} from '@tour-kit/media';

const id = extractYouTubeId('https://youtu.be/abc123');
// 'abc123'

import {
  buildYouTubeEmbedUrl,
  buildVimeoEmbedUrl,
  buildLoomEmbedUrl,
  buildWistiaEmbedUrl,
} from '@tour-kit/media';

const embedUrl = buildYouTubeEmbedUrl('abc123', {
  autoplay: true,
  muted: true,
  startTime: 30,
});

import {
  getYouTubeThumbnailUrl,
  getVimeoThumbnailUrl,
} from '@tour-kit/media';

const thumbnail = getYouTubeThumbnailUrl('abc123');
// https://img.youtube.com/vi/abc123/maxresdefault.jpg

import { selectResponsiveSource } from '@tour-kit/media';

const source = selectResponsiveSource(sources, window.innerWidth);

type MediaType =
  | 'youtube'
  | 'vimeo'
  | 'loom'
  | 'wistia'
  | 'video'
  | 'gif'
  | 'lottie'
  | 'image';

interface TourMediaConfig {
  src: string;
  type?: MediaType;
  alt: string;
  poster?: string;
  aspectRatio?: '16/9' | '4/3' | '1/1' | '9/16' | '21/9' | 'auto';
  autoplay?: boolean;
  muted?: boolean;
  controls?: boolean;
  loop?: boolean;
  playsInline?: boolean;
  startTime?: number;
  captions?: CaptionTrack[];
  sources?: ResponsiveSource[];
  lottieOptions?: LottieOptions;
  reducedMotionFallback?: string;
  loading?: 'eager' | 'lazy';
  preload?: 'none' | 'metadata' | 'auto';
}

interface CaptionTrack {
  src: string;
  srclang: string;
  label: string;
  default?: boolean;
}

interface ResponsiveSource {
  src: string;
  media?: string;
  type?: string;
}