@frameset/plex-player 1.0.6 → 2.0.1

package/src/core/player-core.js

@@ -1,225 +0,0 @@
-/**
- * PlexPlayer - Core Module
- * Handles video element and basic playback functionality
- */
-const PlexPlayerCore = (function() {
-    'use strict';
-
-    let container = null;
-    let video = null;
-    let player = null;
-    let state = {
-        isPlaying: false,
-        currentTime: 0,
-        duration: 0,
-        playbackRate: 1
-    };
-
-    function init(playerInstance) {
-        player = playerInstance;
-        container = player.container;
-
-        createVideoElement();
-        bindEvents();
-
-        // Apply initial settings
-        if (player.options.muted) {
-            video.muted = true;
-        }
-        if (player.options.volume !== undefined) {
-            video.volume = player.options.volume;
-        }
-        if (player.options.loop) {
-            video.loop = true;
-        }
-        if (player.options.poster) {
-            video.poster = player.options.poster;
-        }
-        if (player.options.preload) {
-            video.preload = player.options.preload;
-        }
-    }
-
-    function createVideoElement() {
-        video = document.createElement('video');
-        video.className = 'plex-video';
-        video.setAttribute('playsinline', '');
-        video.setAttribute('webkit-playsinline', '');
-        container.insertBefore(video, container.firstChild);
-    }
-
-    function bindEvents() {
-        video.addEventListener('play', onPlay);
-        video.addEventListener('pause', onPause);
-        video.addEventListener('ended', onEnded);
-        video.addEventListener('timeupdate', onTimeUpdate);
-        video.addEventListener('progress', onProgress);
-        video.addEventListener('loadedmetadata', onLoadedMetadata);
-        video.addEventListener('error', onError);
-        video.addEventListener('waiting', onWaiting);
-        video.addEventListener('canplay', onCanPlay);
-    }
-
-    function onPlay() {
-        state.isPlaying = true;
-        container.classList.add('plex-playing');
-        container.classList.remove('plex-paused');
-        player._emit('play');
-    }
-
-    function onPause() {
-        state.isPlaying = false;
-        container.classList.remove('plex-playing');
-        container.classList.add('plex-paused');
-        player._emit('pause');
-    }
-
-    function onEnded() {
-        state.isPlaying = false;
-        container.classList.remove('plex-playing');
-        player._emit('ended');
-    }
-
-    function onTimeUpdate() {
-        state.currentTime = video.currentTime;
-        state.duration = video.duration;
-        player._emit('timeupdate', {
-            currentTime: video.currentTime,
-            duration: video.duration
-        });
-    }
-
-    function onProgress() {
-        const buffered = video.buffered;
-        let loaded = 0;
-        if (buffered.length > 0) {
-            loaded = buffered.end(buffered.length - 1) / video.duration * 100;
-        }
-        player._emit('progress', { buffered: loaded });
-    }
-
-    function onLoadedMetadata() {
-        state.duration = video.duration;
-        player._emit('loadedmetadata', { duration: video.duration });
-    }
-
-    function onError(e) {
-        player._emit('error', {
-            code: video.error?.code,
-            message: video.error?.message
-        });
-    }
-
-    function onWaiting() {
-        container.classList.add('plex-loading');
-        player._emit('waiting');
-    }
-
-    function onCanPlay() {
-        container.classList.remove('plex-loading');
-        player._emit('canplay');
-    }
-
-    // Public API
-    function load(src) {
-        video.src = src;
-        video.load();
-        
-        if (player.options.autoplay) {
-            play();
-        }
-    }
-
-    function play() {
-        return video.play();
-    }
-
-    function pause() {
-        video.pause();
-    }
-
-    function togglePlay() {
-        if (video.paused) {
-            play();
-        } else {
-            pause();
-        }
-    }
-
-    function seek(time) {
-        video.currentTime = Math.max(0, Math.min(time, video.duration));
-    }
-
-    function seekPercent(percent) {
-        const time = (percent / 100) * video.duration;
-        seek(time);
-    }
-
-    function setPlaybackRate(rate) {
-        video.playbackRate = rate;
-        state.playbackRate = rate;
-        player._emit('ratechange', { rate });
-    }
-
-    function getPlaybackRate() {
-        return video.playbackRate;
-    }
-
-    function getCurrentTime() {
-        return video.currentTime;
-    }
-
-    function getDuration() {
-        return video.duration;
-    }
-
-    function isPlaying() {
-        return !video.paused && !video.ended;
-    }
-
-    function isPaused() {
-        return video.paused;
-    }
-
-    function getVideo() {
-        return video;
-    }
-
-    function destroy() {
-        video.removeEventListener('play', onPlay);
-        video.removeEventListener('pause', onPause);
-        video.removeEventListener('ended', onEnded);
-        video.removeEventListener('timeupdate', onTimeUpdate);
-        video.removeEventListener('progress', onProgress);
-        video.removeEventListener('loadedmetadata', onLoadedMetadata);
-        video.removeEventListener('error', onError);
-        video.removeEventListener('waiting', onWaiting);
-        video.removeEventListener('canplay', onCanPlay);
-        video.remove();
-    }
-
-    return {
-        init,
-        load,
-        play,
-        pause,
-        togglePlay,
-        seek,
-        seekPercent,
-        setPlaybackRate,
-        getPlaybackRate,
-        getCurrentTime,
-        getDuration,
-        isPlaying,
-        isPaused,
-        getVideo,
-        destroy
-    };
-})();
-
-// Export for ES modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { PlexPlayerCore };
-}
-
-export { PlexPlayerCore };

package/src/react/index.jsx

@@ -1,277 +0,0 @@
-/**
- * @frameset/plex-player - React Component
- * Professional Video Player by FRAMESET Studio
- * https://frameset.dev
- */
-
-import React, {
-  useEffect,
-  useRef,
-  useImperativeHandle,
-  forwardRef,
-  useState,
-  useCallback,
-  createContext,
-  useContext,
-} from 'react';
-
-// Import core player
-import PlexPlayer from '../core/index.js';
-
-// Context for nested components
-const PlexPlayerContext = createContext(null);
-
-/**
- * Hook to access player instance from child components
- */
-export const usePlexPlayer = () => {
-  const player = useContext(PlexPlayerContext);
-  return player;
-};
-
-/**
- * PlexPlayer React Component
- */
-export const PlexPlayerReact = forwardRef(function PlexPlayerReact(props, ref) {
-  const {
-    src,
-    playlist,
-    className = '',
-    style = {},
-    autoplay = false,
-    muted = false,
-    loop = false,
-    volume = 1,
-    poster,
-    preload = 'metadata',
-    keyboard = true,
-    touch = true,
-    pip = true,
-    cast = true,
-    fullscreen = true,
-    controlsHideDelay = 3000,
-    theme,
-    subtitles,
-    ads,
-    i18n,
-    // Event callbacks
-    onPlay,
-    onPause,
-    onEnded,
-    onTimeUpdate,
-    onProgress,
-    onVolumeChange,
-    onFullscreenChange,
-    onError,
-    onReady,
-    // Children for custom overlays
-    children,
-    ...restProps
-  } = props;
-
-  const containerRef = useRef(null);
-  const playerRef = useRef(null);
-  const [isReady, setIsReady] = useState(false);
-
-  // Initialize player
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    // Create player instance
-    const player = new PlexPlayer({
-      container: containerRef.current,
-      autoplay,
-      muted,
-      loop,
-      volume,
-      poster,
-      preload,
-      keyboard,
-      touch,
-      pip,
-      cast,
-      fullscreen,
-      controlsHideDelay,
-      theme,
-      subtitles,
-      ads,
-      i18n,
-    });
-
-    playerRef.current = player;
-
-    // Bind events
-    if (onPlay) player.on('play', onPlay);
-    if (onPause) player.on('pause', onPause);
-    if (onEnded) player.on('ended', onEnded);
-    if (onTimeUpdate) {
-      player.on('timeupdate', (data) => onTimeUpdate(data.currentTime));
-    }
-    if (onProgress) {
-      player.on('progress', (data) => onProgress(data.buffered));
-    }
-    if (onVolumeChange) {
-      player.on('volumechange', (data) => onVolumeChange(data.volume, data.muted));
-    }
-    if (onFullscreenChange) {
-      player.on('fullscreenchange', (data) => onFullscreenChange(data.isFullscreen));
-    }
-    if (onError) {
-      player.on('error', onError);
-    }
-
-    setIsReady(true);
-
-    if (onReady) {
-      onReady(player);
-    }
-
-    // Cleanup
-    return () => {
-      player.destroy();
-      playerRef.current = null;
-    };
-  }, []);
-
-  // Load source when src changes
-  useEffect(() => {
-    if (!playerRef.current || !isReady) return;
-
-    if (src) {
-      playerRef.current.load(src);
-    }
-  }, [src, isReady]);
-
-  // Load playlist when playlist changes
-  useEffect(() => {
-    if (!playerRef.current || !isReady || !playlist) return;
-
-    playerRef.current.loadPlaylist(playlist);
-  }, [playlist, isReady]);
-
-  // Update volume
-  useEffect(() => {
-    if (playerRef.current && isReady) {
-      playerRef.current.setVolume(volume);
-    }
-  }, [volume, isReady]);
-
-  // Update muted
-  useEffect(() => {
-    if (playerRef.current && isReady) {
-      if (muted) {
-        playerRef.current.mute();
-      } else {
-        playerRef.current.unmute();
-      }
-    }
-  }, [muted, isReady]);
-
-  // Expose player methods via ref
-  useImperativeHandle(ref, () => ({
-    play: () => playerRef.current?.play(),
-    pause: () => playerRef.current?.pause(),
-    togglePlay: () => playerRef.current?.togglePlay(),
-    seek: (time) => playerRef.current?.seek(time),
-    seekPercent: (percent) => playerRef.current?.seekPercent(percent),
-    setVolume: (vol) => playerRef.current?.setVolume(vol),
-    getVolume: () => playerRef.current?.getVolume(),
-    mute: () => playerRef.current?.mute(),
-    unmute: () => playerRef.current?.unmute(),
-    toggleMute: () => playerRef.current?.toggleMute(),
-    isMuted: () => playerRef.current?.isMuted(),
-    setPlaybackRate: (rate) => playerRef.current?.setPlaybackRate(rate),
-    enterFullscreen: () => playerRef.current?.enterFullscreen(),
-    exitFullscreen: () => playerRef.current?.exitFullscreen(),
-    toggleFullscreen: () => playerRef.current?.toggleFullscreen(),
-    enterPiP: () => playerRef.current?.enterPiP(),
-    exitPiP: () => playerRef.current?.exitPiP(),
-    togglePiP: () => playerRef.current?.togglePiP(),
-    cast: () => playerRef.current?.cast(),
-    getState: () => playerRef.current?.getState(),
-    getPlayer: () => playerRef.current,
-    next: () => playerRef.current?.next(),
-    previous: () => playerRef.current?.previous(),
-    playAt: (index) => playerRef.current?.playAt(index),
-  }));
-
-  return (
-    <PlexPlayerContext.Provider value={playerRef.current}>
-      <div
-        ref={containerRef}
-        className={`plex-player-container ${className}`}
-        style={{
-          width: '100%',
-          aspectRatio: '16 / 9',
-          position: 'relative',
-          ...style,
-        }}
-        {...restProps}
-      >
-        {children}
-      </div>
-    </PlexPlayerContext.Provider>
-  );
-});
-
-// Additional hooks for convenience
-export const usePlexPlayerState = () => {
-  const player = usePlexPlayer();
-  const [state, setState] = useState(null);
-
-  useEffect(() => {
-    if (!player) return;
-
-    const updateState = () => {
-      setState(player.getState());
-    };
-
-    // Update on every timeupdate
-    player.on('timeupdate', updateState);
-    player.on('play', updateState);
-    player.on('pause', updateState);
-    player.on('volumechange', updateState);
-    player.on('fullscreenchange', updateState);
-
-    // Initial state
-    updateState();
-
-    return () => {
-      player.off('timeupdate', updateState);
-      player.off('play', updateState);
-      player.off('pause', updateState);
-      player.off('volumechange', updateState);
-      player.off('fullscreenchange', updateState);
-    };
-  }, [player]);
-
-  return state;
-};
-
-export const usePlexPlayerTime = () => {
-  const player = usePlexPlayer();
-  const [time, setTime] = useState({ current: 0, duration: 0 });
-
-  useEffect(() => {
-    if (!player) return;
-
-    const updateTime = (data) => {
-      setTime({
-        current: data.currentTime,
-        duration: data.duration,
-      });
-    };
-
-    player.on('timeupdate', updateTime);
-
-    return () => {
-      player.off('timeupdate', updateTime);
-    };
-  }, [player]);
-
-  return time;
-};
-
-// Named exports
-export { PlexPlayer };
-export default PlexPlayerReact;

package/src/styles.js

@@ -1,8 +0,0 @@
-/**
- * @frameset/plex-player - CSS Entry Point
- * Import this file to include all player styles
- */
-import '../css/main.css';
-import '../css/controls.css';
-import '../css/playlist.css';
-import '../css/settings.css';