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

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/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/MagicToast/src/components/MagicToastView.vue

@@ -26,6 +26,9 @@
 
 <script setup>
 import { computed, inject } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { MagicToastInstanceId } from "../../symbols";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastDrag } from "../composables/private/useToastDrag";
@@ -33,10 +36,15 @@ const { id, index } = defineProps({
   id: { type: String, required: true },
   index: { type: Number, required: true }
 });
+const magicError = useMagicError({
+  prefix: "MagicToast",
+  source: "MagicToastView"
+});
 const instanceId = inject(MagicToastInstanceId, void 0);
-if (!instanceId) {
-  throw new Error("MagicToastView must be used within a MagicToastProvider");
-}
+magicError.assert(instanceId, {
+  message: "MagicToastView must be used within a MagicToastProvider",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = useToastState(instanceId);
 const state = initializeState();
 const count = computed(() => state.views.length);

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts

@@ -2,8 +2,8 @@ import { type MaybeRef } from 'vue';
 export declare function useToastCallback(instanceId: MaybeRef<string>): {
     onBeforeEnter: () => void;
     onEnter: () => void;
-    onAfterEnter: (el: HTMLElement) => void;
+    onAfterEnter: (el: Element) => void;
     onBeforeLeave: () => void;
     onLeave: () => void;
-    onAfterLeave: (el: HTMLElement) => void;
+    onAfterLeave: (el: Element) => void;
 };

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -18,12 +18,13 @@ export function useToastCallback(instanceId) {
   }
   function onAfterEnter(el) {
     emitter.emit("afterEnter", toValue(instanceId));
-    const view = getView(el.dataset.id ?? "");
+    const mappedEl = el;
+    const view = getView(mappedEl.dataset.id ?? "");
     if (view) {
-      const mappedEl = el;
-      const style = window.getComputedStyle(mappedEl);
+      const mappedEl2 = el;
+      const style = window.getComputedStyle(mappedEl2);
       const dimensions = {
-        height: mappedEl.offsetHeight,
+        height: mappedEl2.offsetHeight,
         padding: {
           top: parseInt(style.paddingTop),
           bottom: parseInt(style.paddingBottom)
@@ -39,7 +40,8 @@ export function useToastCallback(instanceId) {
     emitter.emit("leave", toValue(instanceId));
   }
   function onAfterLeave(el) {
-    const view = getView(el.dataset.id ?? "");
+    const mappedEl = el;
+    const view = getView(mappedEl.dataset.id ?? "");
     if (view) {
       deleteView(view.id);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.34",
+  "version": "1.0.0-beta.35",
   "contributors": [
     {
       "name": "Robin Scholz",
@@ -34,6 +34,9 @@
       "types": "./dist/composables/*/index.d.ts",
       "import": "./dist/composables/*/index.js"
     },
+    "./plugins/MagicPlayer/css/*.css": {
+      "import": "./dist/plugins/MagicPlayer/src/css/*.css"
+    },
     "./plugins/*/nuxt": {
       "types": "./dist/plugins/*/nuxt.d.ts",
       "import": "./dist/plugins/*/nuxt.mjs"
@@ -42,15 +45,12 @@
       "types": "./dist/plugins/*/index.d.ts",
       "import": "./dist/plugins/*/index.mjs"
     },
-    "./plugins/MagicPlayer/css/*.css": {
-      "import": "./dist/plugins/MagicPlayer/src/css/*.css"
+    "./utils/css/*.css": {
+      "import": "./dist/utils/css/*.css"
     },
     "./utils": {
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js"
-    },
-    "./utils/css/*.css": {
-      "import": "./dist/utils/css/*.css"
     }
   },
   "files": [
@@ -81,7 +81,7 @@
       "optional": false
     },
     "@nuxt/kit": {
-      "optional": false
+      "optional": true
     },
     "@maas/magic-timer": {
       "optional": false
@@ -101,6 +101,9 @@
     "defu": {
       "optional": false
     },
+    "focus-trap": {
+      "optional": false
+    },
     "hls.js": {
       "optional": false
     },
@@ -114,7 +117,7 @@
       "optional": false
     },
     "nuxt": {
-      "optional": false
+      "optional": true
     },
     "universal-cookie": {
       "optional": false