@frameset/plex-player 1.0.6 → 2.0.1

package/src/vue/index.js

@@ -1,304 +0,0 @@
-/**
- * @frameset/plex-player - Vue Component
- * Professional Video Player by FRAMESET Studio
- * https://frameset.dev
- */
-
-import { 
-  defineComponent, 
-  ref, 
-  onMounted, 
-  onBeforeUnmount, 
-  watch,
-  provide,
-  inject,
-  h
-} from 'vue';
-
-// Import core player
-import PlexPlayer from '../core/index.js';
-
-// Provide/inject key
-const PlexPlayerKey = Symbol('PlexPlayer');
-
-/**
- * Composable to access player instance
- */
-export function usePlexPlayer() {
-  return inject(PlexPlayerKey, ref(null));
-}
-
-/**
- * PlexPlayer Vue Component
- */
-export const PlexPlayerVue = defineComponent({
-  name: 'PlexPlayer',
-
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    playlist: {
-      type: Array,
-      default: () => [],
-    },
-    autoplay: {
-      type: Boolean,
-      default: false,
-    },
-    muted: {
-      type: Boolean,
-      default: false,
-    },
-    loop: {
-      type: Boolean,
-      default: false,
-    },
-    volume: {
-      type: Number,
-      default: 1,
-    },
-    poster: {
-      type: String,
-      default: '',
-    },
-    preload: {
-      type: String,
-      default: 'metadata',
-    },
-    keyboard: {
-      type: Boolean,
-      default: true,
-    },
-    touch: {
-      type: Boolean,
-      default: true,
-    },
-    pip: {
-      type: Boolean,
-      default: true,
-    },
-    cast: {
-      type: Boolean,
-      default: true,
-    },
-    fullscreen: {
-      type: Boolean,
-      default: true,
-    },
-    controlsHideDelay: {
-      type: Number,
-      default: 3000,
-    },
-    theme: {
-      type: Object,
-      default: () => ({}),
-    },
-    subtitles: {
-      type: Object,
-      default: () => ({}),
-    },
-    ads: {
-      type: Object,
-      default: () => ({}),
-    },
-    i18n: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  emits: [
-    'play',
-    'pause',
-    'ended',
-    'timeupdate',
-    'progress',
-    'volumechange',
-    'fullscreenchange',
-    'error',
-    'ready',
-  ],
-
-  setup(props, { emit, slots, expose }) {
-    const containerRef = ref(null);
-    const playerRef = ref(null);
-    const isReady = ref(false);
-
-    // Provide player to child components
-    provide(PlexPlayerKey, playerRef);
-
-    onMounted(() => {
-      if (!containerRef.value) return;
-
-      // Create player instance
-      const player = new PlexPlayer({
-        container: containerRef.value,
-        autoplay: props.autoplay,
-        muted: props.muted,
-        loop: props.loop,
-        volume: props.volume,
-        poster: props.poster,
-        preload: props.preload,
-        keyboard: props.keyboard,
-        touch: props.touch,
-        pip: props.pip,
-        cast: props.cast,
-        fullscreen: props.fullscreen,
-        controlsHideDelay: props.controlsHideDelay,
-        theme: props.theme,
-        subtitles: props.subtitles,
-        ads: props.ads,
-        i18n: props.i18n,
-      });
-
-      playerRef.value = player;
-
-      // Bind events
-      player.on('play', () => emit('play'));
-      player.on('pause', () => emit('pause'));
-      player.on('ended', () => emit('ended'));
-      player.on('timeupdate', (data) => emit('timeupdate', data.currentTime));
-      player.on('progress', (data) => emit('progress', data.buffered));
-      player.on('volumechange', (data) => emit('volumechange', data));
-      player.on('fullscreenchange', (data) => emit('fullscreenchange', data.isFullscreen));
-      player.on('error', (error) => emit('error', error));
-
-      isReady.value = true;
-      emit('ready', player);
-
-      // Load initial source
-      if (props.src) {
-        player.load(props.src);
-      } else if (props.playlist.length > 0) {
-        player.loadPlaylist(props.playlist);
-      }
-    });
-
-    onBeforeUnmount(() => {
-      if (playerRef.value) {
-        playerRef.value.destroy();
-        playerRef.value = null;
-      }
-    });
-
-    // Watch for src changes
-    watch(() => props.src, (newSrc) => {
-      if (playerRef.value && newSrc) {
-        playerRef.value.load(newSrc);
-      }
-    });
-
-    // Watch for playlist changes
-    watch(() => props.playlist, (newPlaylist) => {
-      if (playerRef.value && newPlaylist?.length > 0) {
-        playerRef.value.loadPlaylist(newPlaylist);
-      }
-    }, { deep: true });
-
-    // Watch for volume changes
-    watch(() => props.volume, (newVolume) => {
-      if (playerRef.value) {
-        playerRef.value.setVolume(newVolume);
-      }
-    });
-
-    // Watch for muted changes
-    watch(() => props.muted, (newMuted) => {
-      if (playerRef.value) {
-        if (newMuted) {
-          playerRef.value.mute();
-        } else {
-          playerRef.value.unmute();
-        }
-      }
-    });
-
-    // Expose methods
-    expose({
-      play: () => playerRef.value?.play(),
-      pause: () => playerRef.value?.pause(),
-      togglePlay: () => playerRef.value?.togglePlay(),
-      seek: (time) => playerRef.value?.seek(time),
-      seekPercent: (percent) => playerRef.value?.seekPercent(percent),
-      setVolume: (vol) => playerRef.value?.setVolume(vol),
-      getVolume: () => playerRef.value?.getVolume(),
-      mute: () => playerRef.value?.mute(),
-      unmute: () => playerRef.value?.unmute(),
-      toggleMute: () => playerRef.value?.toggleMute(),
-      setPlaybackRate: (rate) => playerRef.value?.setPlaybackRate(rate),
-      enterFullscreen: () => playerRef.value?.enterFullscreen(),
-      exitFullscreen: () => playerRef.value?.exitFullscreen(),
-      toggleFullscreen: () => playerRef.value?.toggleFullscreen(),
-      enterPiP: () => playerRef.value?.enterPiP(),
-      exitPiP: () => playerRef.value?.exitPiP(),
-      togglePiP: () => playerRef.value?.togglePiP(),
-      cast: () => playerRef.value?.cast(),
-      getState: () => playerRef.value?.getState(),
-      getPlayer: () => playerRef.value,
-      next: () => playerRef.value?.next(),
-      previous: () => playerRef.value?.previous(),
-      playAt: (index) => playerRef.value?.playAt(index),
-    });
-
-    return () => h(
-      'div',
-      {
-        ref: containerRef,
-        class: 'plex-player-container',
-        style: {
-          width: '100%',
-          aspectRatio: '16 / 9',
-          position: 'relative',
-        },
-      },
-      slots.default?.()
-    );
-  },
-});
-
-// Composables
-export function usePlexPlayerState() {
-  const player = usePlexPlayer();
-  const state = ref(null);
-
-  watch(player, (p) => {
-    if (!p) return;
-
-    const updateState = () => {
-      state.value = p.getState();
-    };
-
-    p.on('timeupdate', updateState);
-    p.on('play', updateState);
-    p.on('pause', updateState);
-    p.on('volumechange', updateState);
-
-    updateState();
-  }, { immediate: true });
-
-  return state;
-}
-
-export function usePlexPlayerTime() {
-  const player = usePlexPlayer();
-  const time = ref({ current: 0, duration: 0 });
-
-  watch(player, (p) => {
-    if (!p) return;
-
-    p.on('timeupdate', (data) => {
-      time.value = {
-        current: data.currentTime,
-        duration: data.duration,
-      };
-    });
-  }, { immediate: true });
-
-  return time;
-}
-
-// Named exports
-export { PlexPlayer };
-export default PlexPlayerVue;