@maas/vue-equipment 1.0.0-beta.33 → 1.0.0-beta.35

package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue

@@ -25,18 +25,28 @@ import {
   useTemplateRef
 } from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 const { playbackId } = defineProps({
   playbackId: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerMuxPopover"
+});
 const instanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-if (!instanceId || !injectedOptions) {
-  throw new Error(
-    "MagicPlayerMuxPopover must be nested inside MagicPlayerVideoControls."
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicPlayerMuxPopover must be nested inside MagicPlayerVideoControls",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(injectedOptions, {
+  message: "MagicPlayerMuxPopover must be nested inside MagicPlayerVideoControls",
+  errorCode: "missing_options"
+});
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
 const { seekedTime } = toRefs(state);
@@ -93,25 +103,30 @@ async function initialize() {
   const parsedPlaybackId = getMuxId(injectedOptions?.src);
   const mappedPlaybackId = playbackId ?? parsedPlaybackId;
   if (!mappedPlaybackId) {
-    console.error(
-      "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
-    );
-    return;
+    magicError.throwError({
+      errorCode: "missing_instance_id",
+      message: "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
+    });
   }
   try {
     storyboard.value = await fetch(
       `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
     ).then((res) => res.json());
-    if (!storyboard.value) {
-      throw new Error();
-    }
+    magicError.assert(storyboard.value, {
+      message: "Failed to fetch timeline preview",
+      errorCode: "fetch_timeline_error"
+    });
     image = new Image();
     image.src = storyboard.value.url;
     await image.decode();
     context = canvasRef.value?.getContext("2d");
     drawFrame(seekedTime.value);
-  } catch (e) {
-    console.error("Can not initialize timeline preview", e);
+  } catch (error) {
+    magicError.throwError({
+      errorCode: "initialize_timeline_error",
+      message: "Can not initialize timeline preview",
+      cause: error
+    });
   }
 }
 onMounted(() => {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue

@@ -50,6 +50,9 @@
 <script setup>
 import { watch, ref, computed, inject, toRefs } from "vue";
 import { useIdle } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconWaiting from "./icons/Waiting.vue";
@@ -59,13 +62,16 @@ import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 const { transition } = defineProps({
   transition: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerOverlay"
+});
 const instanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicPlayerOverlay must be nested inside MagicPlayerProvider",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
 const {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue

@@ -6,14 +6,20 @@
 
 <script setup>
 import { inject, toRefs, computed } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerPoster"
+});
 const instanceId = inject(MagicPlayerInstanceId, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicPlayerPoster must be nested inside MagicPlayerProvider."
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicPlayerPoster must be nested inside MagicPlayerProvider",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
 const { loaded, started } = toRefs(state);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerTimeline.vue

@@ -34,6 +34,9 @@
 
 <script setup>
 import { inject, toRefs } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import {
@@ -42,12 +45,15 @@ import {
   MagicPlayerPopoverRef,
   MagicPlayerBarRef
 } from "../symbols";
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerTimeline"
+});
 const instanceId = inject(MagicPlayerInstanceId, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicPlayerTimeline must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicPlayerTimeline must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
 const { controlsMouseEntered, seekedPercentage, scrubbedPercentage } = toRefs(state);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideo.vue

@@ -26,6 +26,9 @@ import {
   useEventListener,
   defaultWindow
 } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
@@ -36,21 +39,28 @@ import {
   MagicPlayerOptionsKey,
   MagicPlayerRef
 } from "../symbols";
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerVideo"
+});
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const injectedPlayerRef = inject(MagicPlayerRef, void 0);
-if (!injectedInstanceId) {
-  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-}
-if (!injectedOptions) {
-  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-}
+magicError.assert(injectedInstanceId, {
+  message: "MagicPlayerVideo must be used within a MagicPlayerProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(injectedOptions, {
+  message: "MagicPlayerVideo must be used within a MagicPlayerProvider",
+  errorCode: "missing_options"
+});
 const elRef = useTemplateRef("el");
 const { initialize, destroy } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
   src: injectedOptions.src,
-  srcType: injectedOptions.srcType
+  srcType: injectedOptions.srcType,
+  debug: injectedOptions.debug
 });
 const { initializeState } = usePlayerState(injectedInstanceId);
 const state = initializeState();

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue

@@ -93,6 +93,9 @@ import {
   onBeforeUnmount
 } from "vue";
 import { useIdle } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconVolumeOn from "./icons/VolumeOn.vue";
@@ -120,14 +123,17 @@ const {
   standalone: { type: Boolean, required: false },
   transition: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicPlayer",
+  source: "MagicPlayerVideoControls"
+});
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const mappedInstanceId = computed(() => id ?? injectedInstanceId);
-if (!mappedInstanceId.value) {
-  throw new Error(
-    "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
-  );
-}
+magicError.assert(mappedInstanceId.value, {
+  message: "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop",
+  errorCode: "missing_instance_id"
+});
 const mappedTransition = computed(
   () => transition ?? injectedOptions?.transition?.videoControls
 );

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

@@ -1,5 +1,5 @@
 import { toRefs, watch, toValue } from "vue";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerEmitter(args) {
   const { id } = args;

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

@@ -1,26 +1,73 @@
 import { toRefs, watch, unref, toValue } from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerMediaApi(args) {
-  const { mediaRef, id } = args;
+  const { id, mediaRef } = args;
+  const { throwError } = useMagicError({
+    prefix: "MagicPlayer",
+    source: "usePlayerMediaApi"
+  });
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
   const {
+    buffered,
     currentTime,
     duration,
-    seeking,
-    volume,
-    rate,
-    loaded,
-    waiting,
-    started,
     ended,
-    playing,
+    loaded,
+    muted,
     paused,
+    playing,
+    rate,
+    seeking,
     stalled,
-    buffered,
-    muted
+    started,
+    volume,
+    waiting
   } = toRefs(state);
+  function handlePlayPromiseError(originalError) {
+    let message = "Play promise was rejected";
+    let errorCode = "play_promise_rejected";
+    switch (originalError.name) {
+      case "AbortError":
+        message = "The play() request was aborted";
+        errorCode = "play_promise_aborted";
+        break;
+      case "NotAllowedError":
+        message = "Autoplay was prevented, user interaction required";
+        errorCode = "play_promise_not_allowed";
+        break;
+      case "NotSupportedError":
+        message = "Media format not supported";
+        errorCode = "play_promise_not_supported";
+        break;
+    }
+    throwError({ message, errorCode, cause: originalError });
+  }
+  function handleMediaElementError(originalError) {
+    let message = "Media element error";
+    let errorCode = "media_element_error";
+    switch (originalError.code) {
+      case MediaError.MEDIA_ERR_ABORTED:
+        message = "Media loading was aborted by the user";
+        errorCode = "media_element_aborted";
+        break;
+      case MediaError.MEDIA_ERR_NETWORK:
+        message = "A network error occurred while loading the media";
+        errorCode = "media_element_network";
+        break;
+      case MediaError.MEDIA_ERR_DECODE:
+        message = "An error occurred while decoding the media";
+        errorCode = "media_element_decode";
+        break;
+      case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+        message = "The media source is not supported";
+        errorCode = "media_element_src_not_supported";
+        break;
+    }
+    throwError({ message, errorCode, cause: originalError });
+  }
   function timeRangeToArray(timeRanges) {
     let ranges = [];
     for (let i = 0; i < timeRanges.length; ++i)
@@ -81,8 +128,9 @@ export function usePlayerMediaApi(args) {
       }
       if (value) {
         const playPromise = el.play();
-        playPromise?.catch(() => {
+        playPromise?.catch((error) => {
           playing.value = false;
+          handlePlayPromiseError(error);
         });
       } else {
         el.pause();
@@ -146,4 +194,10 @@ export function usePlayerMediaApi(args) {
       muted.value = el.muted;
     }
   });
+  useEventListener(mediaRef, "error", () => {
+    const el = toValue(mediaRef);
+    if (el?.error) {
+      handleMediaElementError(el.error);
+    }
+  });
 }

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

@@ -5,6 +5,7 @@ export type UsePlayerRuntimeArgs = {
     mediaRef?: Ref<HTMLVideoElement | HTMLAudioElement | null>;
     srcType?: MagicPlayerOptions['srcType'];
     src?: string;
+    debug?: boolean;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
     initialize: (autoplay?: boolean) => void;

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

@@ -1,26 +1,88 @@
 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 deferredLoading = shallowRef(false);
-  const { id, mediaRef, srcType, src } = args;
+  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 }
-    );
+    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(autoplay = false) {
     const el = toValue(mediaRef);
@@ -28,11 +90,16 @@ export function usePlayerRuntime(args) {
       return;
     }
     deferredLoading.value = autoplay;
-    const { default: Hls } = await import("hls.js");
-    hls = new Hls({ autoStartLoad: false });
-    if (!Hls.isSupported()) {
-      useNative();
-    } else if (src) {
+    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;
       });
@@ -44,6 +111,9 @@ export function usePlayerRuntime(args) {
           hls?.startLoad();
         }
       });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        handleHlsRuntimeError({ data, hls });
+      });
       useEventListener(mediaRef, "pause", () => {
         hls?.stopLoad();
       });
@@ -52,6 +122,12 @@ 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(autoplay = false) {
@@ -62,8 +138,12 @@ export function usePlayerRuntime(args) {
     }
   }
   function destroy() {
-    hls?.destroy();
-    deferredLoading.value = false;
+    try {
+      hls?.destroy();
+    } finally {
+      hls = void 0;
+      deferredLoading.value = false;
+    }
   }
   return {
     initialize,

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

@@ -1,9 +1,14 @@
 import { toRefs, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
+  const { logError } = useMagicError({
+    prefix: "MagicPlayer",
+    source: "usePlayerVideoApi"
+  });
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
   const { currentTime, playing, paused, muted, fullscreenTarget, fullscreen } = toRefs(state);
@@ -64,14 +69,14 @@ export function usePlayerVideoApi(args) {
   }
   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();

package/dist/plugins/MagicPlayer/src/types/index.d.ts

@@ -7,6 +7,7 @@ export interface MagicPlayerOptions {
     autoplay?: boolean;
     playback?: ('viewport' | 'window')[] | false;
     loop?: boolean;
+    debug?: boolean;
     transition?: {
         videoControls?: string;
         overlay?: string;
@@ -23,6 +24,7 @@ export interface RequiredMagicPlayerOptions {
     preload: 'auto' | 'metadata' | 'none';
     autoplay: boolean;
     loop: boolean;
+    debug: boolean;
     transition: {
         videoControls: string;
         overlay: string;

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.mjs

@@ -5,6 +5,7 @@ const defaultOptions = {
   preload: "metadata",
   autoplay: false,
   loop: false,
+  debug: false,
   transition: {
     videoControls: "magic-player-video-controls",
     overlay: "magic-player-overlay",

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="magic-scroll-collision">
+  <div ref="el" :data-id="mappedId" class="magic-scroll-collision">
     <slot />
   </div>
 </template>
@@ -18,17 +18,23 @@ import {
 import { useCollisionDetection } from "../composables/private/useCollisionDetection";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
 import { useIntersectionObserver } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 const { id, offset } = defineProps({
   id: { type: String, required: false },
   offset: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicScroll",
+  source: "MagicScrollCollision"
+});
 const scrollReturn = inject(MagicScrollReturn, void 0);
 const scrollTarget = inject(MagicScrollTarget);
-if (!scrollTarget) {
-  console.error(
-    "MagicScrollCollision must be used within a MagicScrollProvider"
-  );
-}
+magicError.assert(scrollTarget, {
+  message: "MagicScrollCollision must be used within a MagicScrollProvider",
+  errorCode: "missing_scroll_target"
+});
 const intersecting = shallowRef(false);
 const elRef = useTemplateRef("el");
 const scrollY = computed(() => toValue(scrollReturn?.y) || 0);

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -15,6 +15,9 @@ import {
   useTemplateRef
 } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useScrollApi } from "../composables/private/useScrollApi";
 import {
   MagicScrollTarget,
@@ -25,11 +28,16 @@ const { from = "top-bottom", to = "bottom-top" } = defineProps({
   from: { type: String, required: false },
   to: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicScroll",
+  source: "MagicScrollScene"
+});
 const scrollReturn = inject(MagicScrollReturn, void 0);
 const scrollTarget = inject(MagicScrollTarget, void 0);
-if (!scrollTarget) {
-  console.error("MagicScrollScene must be used within a MagicScrollProvider");
-}
+magicError.assert(scrollTarget, {
+  message: "MagicScrollScene must be used within a MagicScrollProvider",
+  errorCode: "missing_scroll_target"
+});
 const progress = shallowRef(0);
 const intersecting = shallowRef(false);
 const elRef = useTemplateRef("el");

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -1,6 +1,6 @@
 import { shallowRef, reactive, computed, toValue } from "vue";
 import { useElementBounding, useWindowSize } from "@vueuse/core";
-import { useMagicEmitter } from "@maas/vue-equipment/plugins";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useCollisionDetection(args) {
   const { id, scrollY, child, parent, offset } = args;
   const alerted = reactive({