@maas/vue-equipment 1.0.0-beta.9 → 1.0.1

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerRuntime.mjs

@@ -1,34 +1,117 @@
-import { shallowRef, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { onScopeDispose, shallowRef, toRefs, toValue, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerRuntime(args) {
   let hls;
-  const loaded = shallowRef(false);
-  const defferedLoading = shallowRef(false);
-  const { mediaRef, srcType, src } = args;
+  const deferredLoading = shallowRef(false);
+  const { id, mediaRef, srcType, src, debug = false } = args;
+  const { logWarning, throwError } = useMagicError({
+    prefix: "MagicPlayer",
+    source: "usePlayerRuntime"
+  });
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { loaded } = toRefs(state);
+  let cancelLoaded = void 0;
+  let cancelPlay = void 0;
+  let cancelPause = void 0;
+  let cancelResumeOnLoad = void 0;
+  let initialized = false;
+  function handleHlsRuntimeError(args2) {
+    const { data, hls: hls2 } = args2;
+    const error = new Error(data.details || "HLS error");
+    if (!data.fatal) {
+      if (debug) {
+        logWarning(
+          `HLS Non-fatal error [${data.type}]: ${data.details || "Unknown"}`
+        );
+      }
+      return;
+    }
+    switch (data.type) {
+      case "networkError":
+        throwError({
+          message: "HLS network error",
+          errorCode: "hls_network_error",
+          cause: error
+        });
+        break;
+      case "mediaError":
+        try {
+          if (hls2) {
+            hls2.recoverMediaError();
+            if (debug) {
+              logWarning("HLS media error recovered");
+            }
+            return;
+          }
+        } catch (recoveryError) {
+          throwError({
+            message: "HLS media recovery failed",
+            errorCode: "hls_media_recovery_failed",
+            cause: recoveryError
+          });
+        }
+        throwError({
+          message: "HLS media error",
+          errorCode: "hls_media_error",
+          cause: error
+        });
+        break;
+      default:
+        throwError({
+          message: "HLS fatal error",
+          errorCode: "hls_fatal_error",
+          cause: error
+        });
+    }
+  }
   function useNative() {
+    if (!mediaRef) {
+      return;
+    }
     const el = toValue(mediaRef);
-    if (!el || !src) return;
-    el.src = src;
-    el.addEventListener(
-      "loadeddata",
-      () => {
-        loaded.value = true;
-      },
-      { once: true }
-    );
+    const currentSrc = toValue(src);
+    if (!el || !currentSrc) {
+      return;
+    }
+    try {
+      el.src = currentSrc;
+      cancelLoaded?.();
+      cancelLoaded = useEventListener(
+        mediaRef,
+        "loadeddata",
+        () => {
+          loaded.value = true;
+        },
+        { once: true }
+      );
+    } catch (error) {
+      throwError({
+        message: "Player initialization failed",
+        errorCode: "player_initialization_failed",
+        cause: error
+      });
+    }
   }
-  async function useHlsJS() {
+  async function useHlsJS(autoplay = false) {
     const el = toValue(mediaRef);
-    if (!el) return;
-    useEventListener(mediaRef, "play", () => {
-      defferedLoading.value = true;
-    });
-    const { default: Hls } = await import("hls.js");
-    hls = new Hls({ autoStartLoad: false });
-    if (!Hls.isSupported()) {
-      useNative();
-    } else if (src) {
+    if (!el) {
+      return;
+    }
+    const currentSrc = toValue(src);
+    if (!currentSrc) {
+      return;
+    }
+    deferredLoading.value = autoplay;
+    try {
+      const { default: Hls } = await import("hls.js");
+      hls = new Hls({ autoStartLoad: false });
+      if (!Hls.isSupported()) {
+        useNative();
+        return;
+      }
       hls.on(Hls.Events.FRAG_LOADED, () => {
         loaded.value = true;
       });
@@ -36,53 +119,93 @@ export function usePlayerRuntime(args) {
         toValue(mediaRef)?.dispatchEvent(new Event("suspend"));
       });
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        if (defferedLoading.value) {
+        if (deferredLoading.value) {
           hls?.startLoad();
         }
       });
-      useEventListener(mediaRef, "pause", () => {
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        handleHlsRuntimeError({ data, hls });
+      });
+      cancelPause?.();
+      cancelPause = useEventListener(mediaRef, "pause", () => {
         hls?.stopLoad();
       });
-      useEventListener(mediaRef, "play", () => {
+      cancelPlay?.();
+      cancelPlay = useEventListener(mediaRef, "play", () => {
         hls?.startLoad();
       });
-      hls.loadSource(src);
+      hls.loadSource(currentSrc);
       hls.attachMedia(el);
+    } catch (error) {
+      throwError({
+        message: "Player initialization failed",
+        errorCode: "player_initialization_failed",
+        cause: error
+      });
     }
   }
-  function initialize() {
-    if (srcType === "native") {
-      useNative();
-    } else if (srcType === "hls") {
-      useHlsJS();
+  function destroy() {
+    cancelLoaded?.();
+    cancelPlay?.();
+    cancelPause?.();
+    cancelResumeOnLoad?.();
+    try {
+      hls?.destroy();
+    } finally {
+      hls = void 0;
+      deferredLoading.value = false;
     }
   }
-  function destroy() {
-    hls?.destroy();
-    defferedLoading.value = false;
+  function resetState() {
+    state.playing = false;
+    state.loaded = false;
+    state.started = false;
+    state.ended = false;
+    state.currentTime = 0;
+    state.duration = 0;
+    state.buffered = [];
+    state.waiting = false;
+    state.stalled = false;
   }
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
-    if (payload.api === "runtime") {
-      switch (payload.key) {
-        case "loaded":
-          loaded.value = payload.value;
-          break;
+  watch(
+    () => state.playlistIndex,
+    (newIndex, oldIndex) => {
+      if (!initialized || newIndex === oldIndex || state.playlistCount <= 1) {
+        return;
+      }
+      const wasPlaying = state.playing;
+      state.skipping = true;
+      resetState();
+      destroy();
+      cancelResumeOnLoad = watch(loaded, (value) => {
+        if (value) {
+          state.skipping = false;
+          if (wasPlaying) {
+            state.playing = true;
+          }
+          cancelResumeOnLoad?.();
+          cancelResumeOnLoad = void 0;
+        }
+      });
+      if (srcType === "native") {
+        useNative();
+      } else if (srcType === "hls") {
+        useHlsJS(wasPlaying);
       }
     }
-  });
-  watch(loaded, (value) => {
-    emitter.emit("update", {
-      id: toValue(args.id),
-      api: "runtime",
-      key: "loaded",
-      value
-    });
-  });
+  );
+  function initialize(autoplay = false) {
+    initialized = true;
+    if (srcType === "native") {
+      useNative();
+    } else if (srcType === "hls") {
+      useHlsJS(autoplay);
+    }
+  }
+  onScopeDispose(() => {
+    destroy();
+  }, true);
   return {
-    loaded,
-    initialize,
-    destroy
+    initialize
   };
 }

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRef } from 'vue';
+import type { MagicPlayerOptions } from '../../types/index.js';
+export declare function usePlayerState(id: MaybeRef<string>): {
+    initializeState: (options?: MagicPlayerOptions) => any;
+    playerStateStore: any;
+};

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerState.mjs

@@ -0,0 +1,98 @@
+import { onScopeDispose, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const getPlayerStateStore = createStateStore(
+  "MagicPlayer",
+  () => []
+);
+export function usePlayerState(id) {
+  const playerStateStore = getPlayerStateStore();
+  let scopeCounted = false;
+  function createState(id2) {
+    const state = {
+      id: id2,
+      refCount: 0,
+      buffered: [],
+      currentTime: 0,
+      dragging: false,
+      duration: 0,
+      ended: false,
+      fullscreen: false,
+      loaded: false,
+      muted: false,
+      paused: false,
+      playing: false,
+      rate: 1,
+      seeking: false,
+      stalled: false,
+      started: false,
+      touched: false,
+      volume: 1,
+      waiting: false,
+      fullscreenTarget: null,
+      mouseEntered: false,
+      controlsMouseEntered: false,
+      seekedTime: null,
+      seekedPercentage: 0,
+      scrubbedPercentage: 0,
+      thumbPercentage: 0,
+      popoverOffsetX: null,
+      hasOverlay: false,
+      hasControls: false,
+      controlsBarRect: void 0,
+      controlsTrackRect: void 0,
+      controlsPopoverRect: void 0,
+      playlistIndex: 0,
+      playlistCount: 0,
+      loop: false,
+      skipping: false,
+      options: defaultOptions
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    playerStateStore.value = [...playerStateStore.value, state];
+    return state;
+  }
+  function deleteState() {
+    const currentId = toValue(id);
+    playerStateStore.value = playerStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState(options) {
+    const currentId = toValue(id);
+    let state = playerStateStore.value.find((entry) => entry.id === currentId);
+    if (!state) {
+      state = addState(currentId);
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      state.options = mappedOptions;
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
+    }
+    return state;
+  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = playerStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
+  return {
+    initializeState,
+    playerStateStore
+  };
+}

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.d.ts

@@ -1,22 +1,18 @@
-import { type MaybeRef, type Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
     playerRef?: Ref<HTMLElement | null>;
     videoRef?: Ref<HTMLVideoElement | null>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-    isFullscreen: Ref<boolean, boolean>;
-    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
     seek: (time: number) => void;
     mute: () => void;
     unmute: () => void;
+    initializeFullscreen: () => void;
     enterFullscreen: () => void;
     exitFullscreen: () => void;
-    onMouseenter: () => void;
-    onMouseleave: () => void;
 };
 export type UsePlayerVideoApiReturn = ReturnType<typeof usePlayerVideoApi>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerVideoApi.mjs

@@ -1,23 +1,29 @@
-import { ref, shallowRef, watch, toValue } from "vue";
+import { toRefs, toValue, watch } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
-  const fullscreenTarget = ref(null);
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = shallowRef(false);
-  const mouseEntered = shallowRef(false);
-  const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
+  const { logError } = useMagicError({
+    prefix: "MagicPlayer",
+    source: "usePlayerVideoApi"
+  });
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { currentTime, playing, paused, muted, fullscreenTarget, fullscreen } = toRefs(state);
+  const { enter, exit, isFullscreen } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -28,111 +34,62 @@ export function usePlayerVideoApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
+  function initializeFullscreen() {
+    if (!playerRef || !videoRef) {
+      return;
+    }
+    watch(
+      [playerRef, videoRef],
+      ([player, video]) => {
+        switch (true) {
+          case (!!video && !!player):
+            fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
+            break;
+          case !!player:
+            fullscreenTarget.value = toValue(player);
+            break;
+          case !!video:
+            fullscreenTarget.value = toValue(video);
+            break;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      isFullscreen,
+      (newFullscreen) => {
+        fullscreen.value = newFullscreen;
+      },
+      {
+        immediate: true
+      }
+    );
   }
   function enterFullscreen() {
     if (!fullscreenTarget.value) {
-      console.error("No fullscreen target found");
+      logError("No fullscreen target found");
       return;
     }
     enter();
   }
   function exitFullscreen() {
     if (!fullscreenTarget.value) {
-      console.error("No fullscreen target found");
+      logError("No fullscreen target found");
       return;
     }
     exit();
   }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
-  if (playerRef && !videoRef) {
-    watch(playerRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && !playerRef) {
-    watch(videoRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && playerRef) {
-    watch([playerRef, videoRef], ([player, video]) => {
-      if (player && video) {
-        fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
-      } else if (player) {
-        fullscreenTarget.value = toValue(player);
-      } else if (video) {
-        fullscreenTarget.value = toValue(video);
-      }
-    });
-  }
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(id)) return;
-    if (payload.api === "player") {
-      switch (payload.key) {
-        case "mouseEntered":
-          mouseEntered.value = payload.value;
-          break;
-        case "fullscreenTarget":
-          fullscreenTarget.value = payload.value;
-          break;
-        case "touched":
-          touched.value = payload.value;
-          break;
-      }
-    }
-  });
-  watch(mouseEntered, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "mouseEntered",
-      value
-    });
-  });
-  watch(touched, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "touched",
-      value
-    });
-  });
-  watch(fullscreenTarget, (value) => {
-    if (!value) return;
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "fullscreenTarget",
-      value
-    });
-  });
   return {
-    mouseEntered,
-    isFullscreen,
-    touched,
     play,
     pause,
     togglePlay,
     seek,
     mute,
     unmute,
+    initializeFullscreen,
     enterFullscreen,
-    exitFullscreen,
-    onMouseenter,
-    onMouseleave
+    exitFullscreen
   };
 }