@maas/vue-equipment 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,34 +1,105 @@
-import { ref, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { shallowRef, toRefs, toValue } 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 = ref(false);
-  const defferedLoading = ref(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);
+  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() {
     const el = toValue(mediaRef);
-    if (!el || !src) return;
-    el.src = src;
-    el.addEventListener(
-      "loadeddata",
-      () => {
-        loaded.value = true;
-      },
-      { once: true }
-    );
+    if (!el || !src) {
+      return;
+    }
+    try {
+      el.src = src;
+      el.addEventListener(
+        "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;
+    }
+    deferredLoading.value = autoplay;
+    try {
+      const { default: Hls } = await import("hls.js");
+      hls = new Hls({ autoStartLoad: false });
+      if (!Hls.isSupported()) {
+        useNative();
+        return;
+      }
+      if (!src) {
+        return;
+      }
       hls.on(Hls.Events.FRAG_LOADED, () => {
         loaded.value = true;
       });
@@ -36,10 +107,13 @@ export function usePlayerRuntime(args) {
         toValue(mediaRef)?.dispatchEvent(new Event("suspend"));
       });
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        if (defferedLoading.value) {
+        if (deferredLoading.value) {
           hls?.startLoad();
         }
       });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        handleHlsRuntimeError({ data, hls });
+      });
       useEventListener(mediaRef, "pause", () => {
         hls?.stopLoad();
       });
@@ -48,40 +122,30 @@ export function usePlayerRuntime(args) {
       });
       hls.loadSource(src);
       hls.attachMedia(el);
+    } catch (error) {
+      throwError({
+        message: "Player initialization failed",
+        errorCode: "player_initialization_failed",
+        cause: error
+      });
     }
   }
-  function initialize() {
+  function initialize(autoplay = false) {
     if (srcType === "native") {
       useNative();
     } else if (srcType === "hls") {
-      useHlsJS();
+      useHlsJS(autoplay);
     }
   }
   function destroy() {
-    hls?.destroy();
-    defferedLoading.value = 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;
-      }
+    try {
+      hls?.destroy();
+    } finally {
+      hls = void 0;
+      deferredLoading.value = false;
     }
-  });
-  watch(loaded, (value) => {
-    emitter.emit("update", {
-      id: toValue(args.id),
-      api: "runtime",
-      key: "loaded",
-      value
-    });
-  });
+  }
   return {
-    loaded,
     initialize,
     destroy
   };

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

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { PlayerState } from '../../types/index.js';
+export declare function usePlayerState(id: MaybeRef<string>): {
+    initializeState: () => PlayerState;
+    deleteState: () => void;
+    playerStateStore: Ref<PlayerState[], PlayerState[]>;
+};

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

@@ -0,0 +1,62 @@
+import { ref, reactive, toValue } from "vue";
+const playerStateStore = ref([]);
+export function usePlayerState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      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
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    playerStateStore.value = [...playerStateStore.value, state];
+    return state;
+  }
+  function initializeState() {
+    let state = playerStateStore.value.find((entry) => {
+      return entry.id === id;
+    });
+    if (!state) {
+      state = addState(toValue(id));
+    }
+    return state;
+  }
+  function deleteState() {
+    playerStateStore.value = playerStateStore.value.filter((x) => x.id !== id);
+  }
+  return {
+    initializeState,
+    deleteState,
+    playerStateStore
+  };
+}

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

@@ -1,22 +1,18 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerVideoApiArgs = {
     id: MaybeRef<string>;
-    playerRef?: MaybeRef<HTMLElement | undefined>;
-    videoRef?: MaybeRef<HTMLVideoElement | undefined>;
+    playerRef?: Ref<HTMLElement | null>;
+    videoRef?: Ref<HTMLVideoElement | null>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: import("vue").Ref<boolean, boolean>;
-    isFullscreen: import("vue").Ref<boolean, boolean>;
-    touched: import("vue").Ref<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, watch, toValue } from "vue";
+import { toRefs, watch, toValue } 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(void 0);
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(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
   };
 }

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -1,73 +1,58 @@
-import type { MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 export declare function useMagicPlayer(id: MaybeRef<string>): {
-    mediaApi: {
-        currentTime: import("vue").Ref<number, number>;
-        remainingTime: import("vue").ComputedRef<number>;
-        duration: import("vue").Ref<number, number>;
-        seeking: import("vue").Ref<boolean, boolean>;
-        volume: import("vue").Ref<number, number>;
-        rate: import("vue").Ref<number, number>;
-        waiting: import("vue").Ref<boolean, boolean>;
-        ended: import("vue").Ref<boolean, boolean>;
-        playing: import("vue").Ref<boolean, boolean>;
-        stalled: import("vue").Ref<boolean, boolean>;
-        buffered: import("vue").Ref<[number, number][], import("../types").Buffered | [number, number][]>;
-        muted: import("vue").Ref<boolean, boolean>;
+    duration: import("vue").Ref<number, number>;
+    seeking: import("vue").Ref<boolean, boolean>;
+    volume: import("vue").Ref<number, number>;
+    rate: import("vue").Ref<number, number>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    waiting: import("vue").Ref<boolean, boolean>;
+    ended: import("vue").Ref<boolean, boolean>;
+    playing: import("vue").Ref<boolean, boolean>;
+    started: import("vue").Ref<boolean, boolean>;
+    paused: import("vue").Ref<boolean, boolean>;
+    stalled: import("vue").Ref<boolean, boolean>;
+    buffered: import("vue").Ref<import("../types/index.js").Buffered, import("../types/index.js").Buffered>;
+    muted: import("vue").Ref<boolean, boolean>;
+    touched: import("vue").Ref<boolean, boolean>;
+    dragging: import("vue").Ref<boolean, boolean>;
+    fullscreen: import("vue").Ref<boolean, boolean>;
+    currentTime: import("vue").Ref<number, number>;
+    seekedTime: import("vue").Ref<number | null, number | null>;
+    seekedPercentage: import("vue").Ref<number, number>;
+    scrubbedPercentage: import("vue").Ref<number, number>;
+    thumbPercentage: import("vue").Ref<number, number>;
+    popoverOffsetX: import("vue").Ref<number | null, number | null>;
+    audioApi: {
+        play: () => void;
+        pause: () => void;
+        togglePlay: () => void;
+        seek: (time: number) => void;
+        mute: () => void;
+        unmute: () => void;
     };
     videoApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        isFullscreen: import("vue").Ref<boolean, boolean>;
-        touched: import("vue").Ref<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;
     };
     controlsApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<boolean, boolean>;
-        seekedTime: import("vue").Ref<number, number>;
-        seekedPercentage: import("vue").Ref<number, number>;
-        scrubbedPercentage: import("vue").Ref<number, number>;
+        initialize: () => void;
+        destroy: () => void;
         bufferedPercentage: import("vue").ComputedRef<number>;
-        thumbPercentage: import("vue").Ref<number, number>;
-        popoverOffsetX: import("vue").Ref<number, number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
-        onPointerdown: (e: MouseEvent | TouchEvent) => void;
-        onPointerup: () => void;
-        onPointermove: (e: MouseEvent | TouchEvent) => void;
-        trackRect: import("vue").Ref<{
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined, DOMRect | {
-            height: number;
-            width: number;
-            x: number;
-            y: number;
-            readonly bottom: number;
-            readonly left: number;
-            readonly right: number;
-            readonly top: number;
-            toJSON: () => any;
-        } | undefined>;
+        onMouseleaveTimeline: () => void;
+        onPointerdown: (e: PointerEvent) => void;
+        onPointermove: (e: PointerEvent) => void;
     };
     playerRuntime: {
-        loaded: import("vue").Ref<boolean, boolean>;
-        initialize: () => void;
+        initialize: (autoplay?: boolean) => void;
         destroy: () => void;
     };
 };

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.mjs

@@ -1,14 +1,64 @@
-import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
+import { toRefs } from "vue";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
+import { usePlayerAudioApi } from "./private/usePlayerAudioApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
 import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
+import { usePlayerState } from "./private/usePlayerState.mjs";
 export function useMagicPlayer(id) {
-  const mediaApi = usePlayerMediaApi({ id });
+  const audioApi = usePlayerAudioApi({ id });
   const videoApi = usePlayerVideoApi({ id });
   const controlsApi = usePlayerControlsApi({ id });
   const playerRuntime = usePlayerRuntime({ id });
+  const { initializeState } = usePlayerState(id);
+  const state = initializeState();
+  const {
+    currentTime,
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    started,
+    paused,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    fullscreen,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX
+  } = toRefs(state);
   return {
-    mediaApi,
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    started,
+    paused,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    fullscreen,
+    currentTime,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    audioApi,
     videoApi,
     controlsApi,
     playerRuntime

package/dist/plugins/MagicPlayer/src/css/magic-player-audio-controls.css

@@ -1,7 +1,6 @@
 @import './magic-player-timeline.css';
 @import './magic-player-display-time.css';
 
-/* We keep this variable since it's used in multiple places */
 :root {
   --magic-player-audio-controls-height: 3rem;
 }