@frameset/plex-player 1.0.0

package/src/vue/index.js

@@ -0,0 +1,304 @@
+/**
+ * @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%',
+          height: '100%',
+          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;