PlexPlayerDocs

npm install @frameset/plex-player

import { PlexVideoPlayer } from '@frameset/plex-player';
import '@frameset/plex-player/styles.css';

function App() {
  return (
    <PlexVideoPlayer
      src="https://example.com/video.mp4"
      poster="https://example.com/poster.jpg"
      autoPlay={false}
      accentColor="#e5a00d"
      theme="dark"
    />
  );
}

<PlexVideoPlayer
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  autoPlay={false}
  muted={false}
  pip={true}
  fullscreen={true}
  playbackSpeed={true}
  accentColor="#e5a00d"
  theme="dark"
  onPlay={() => console.log('Video started')}
  onEnded={() => console.log('Video ended')}
/>

import { PlexVideoPlayer } from '@frameset/plex-player';
import '@frameset/plex-player/styles.css';

const playlist = [
  {
    id: '1',
    src: 'https://example.com/video1.mp4',
    title: 'Episode 1',
    poster: 'https://example.com/poster1.jpg',
  },
  {
    id: '2',
    src: 'https://example.com/video2.mp4',
    title: 'Episode 2',
    poster: 'https://example.com/poster2.jpg',
  },
  {
    id: '3',
    src: 'https://example.com/video3.mp4',
    title: 'Episode 3',
    poster: 'https://example.com/poster3.jpg',
  },
];

function App() {
  return (
    <PlexVideoPlayer
      src=""
      playlist={playlist}
      onPlaylistItemChange={(index, item) => {
        console.log(`Now playing: ${item.title}`);
      }}
    />
  );
}

<PlexVideoPlayer
  src={[
    { src: 'video-1080p.mp4', quality: '1080p', label: 'Full HD' },
    { src: 'video-720p.mp4', quality: '720p', label: 'HD' },
    { src: 'video-480p.mp4', quality: '480p', label: 'SD' },
    { src: 'video-360p.mp4', quality: '360p', label: 'Low' },
  ]}
  qualitySelector={true}
  onQualityChange={(quality) => console.log(`Quality: ${quality}`)}
/>

<PlexVideoPlayer
  src="https://example.com/video.mp4"
  textTracks={[
    {
      src: '/subtitles/en.vtt',
      kind: 'subtitles',
      srclang: 'en',
      label: 'English',
      default: true,
    },
    {
      src: '/subtitles/es.vtt',
      kind: 'subtitles',
      srclang: 'es',
      label: 'Español',
    },
    {
      src: '/subtitles/uk.vtt',
      kind: 'subtitles',
      srclang: 'uk',
      label: 'Українська',
    },
  ]}
/>

<PlexVideoPlayer
  src="https://example.com/video.mp4"
  vast={{
    url: 'https://example.com/vast.xml',
    position: 'preroll',
    skipDelay: 5, // Skip button after 5 seconds
  }}
  onAdStart={(ad) => console.log('Ad started:', ad.title)}
  onAdEnd={() => console.log('Ad ended')}
  onAdSkip={() => console.log('Ad skipped')}
/>

// Multiple ads
<PlexVideoPlayer
  src="https://example.com/video.mp4"
  vast={[
    { url: 'preroll.xml', position: 'preroll' },
    { url: 'midroll.xml', position: 'midroll', midrollTime: 60 },
    { url: 'postroll.xml', position: 'postroll' },
  ]}
/>

import { useRef } from 'react';
import { PlexVideoPlayer, PlexVideoPlayerRef } from '@frameset/plex-player';

function App() {
  const playerRef = useRef<PlexVideoPlayerRef>(null);

  const handleCustomPlay = () => {
    playerRef.current?.play();
  };

  const handleSeekTo = (time: number) => {
    playerRef.current?.seek(time);
  };

  const handleSkipIntro = () => {
    playerRef.current?.seek(30); // Skip to 30 seconds
  };

  return (
    <>
      <PlexVideoPlayer
        ref={playerRef}
        src="https://example.com/video.mp4"
      />
      <button onClick={handleCustomPlay}>Play</button>
      <button onClick={handleSkipIntro}>Skip Intro</button>
    </>
  );
}

import { usePlayer } from '@frameset/plex-player';

function CustomPlayer() {
  const {
    state,
    videoRef,
    containerRef,
    play,
    pause,
    togglePlay,
    seek,
    setVolume,
    toggleMute,
    toggleFullscreen,
    togglePip,
  } = usePlayer({
    autoPlay: false,
    muted: false,
    volume: 1,
  });

  return (
    <div ref={containerRef}>
      <video ref={videoRef} src="video.mp4" />
      <button onClick={togglePlay}>
        {state.isPlaying ? 'Pause' : 'Play'}
      </button>
      <span>{state.currentTime} / {state.duration}</span>
    </div>
  );
}

import { useKeyboard } from '@frameset/plex-player';

useKeyboard({
  enabled: true,
  containerRef: containerRef,
  onPlay: togglePlay,
  onMute: toggleMute,
  onFullscreen: toggleFullscreen,
  onPip: togglePip,
  onSeek: (delta) => seek(currentTime + delta),
  onVolume: (delta) => setVolume(volume + delta),
});

import {
  formatTime,        // (seconds) => "1:23:45"
  parseTime,         // ("1:23:45") => seconds
  percentage,        // (value, total) => percentage
  clamp,             // (value, min, max) => clamped value
  throttle,          // Throttle function execution
  debounce,          // Debounce function execution
  isFullscreenSupported,
  isPipSupported,
  isMobile,
  isTouchDevice,
  detectVideoType,   // Detect MIME type from URL
  canPlayType,       // Check browser support for format
} from '@frameset/plex-player';

// Example
const time = formatTime(3723); // "1:02:03"
const seconds = parseTime("1:02:03"); // 3723

import type {
  PlexVideoPlayerProps,
  PlexVideoPlayerRef,
  PlayerState,
  VideoSource,
  TextTrack,
  VastConfig,
  VastAdInfo,
  PlaylistItem,
  HotkeyConfig,
  UsePlayerOptions,
  UsePlayerReturn,
} from '@frameset/plex-player';