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

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

@@ -0,0 +1,103 @@
+import { toRefs, watch, toValue } from "vue";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { usePlayerState } from "./usePlayerState.mjs";
+export function usePlayerEmitter(args) {
+  const { id } = args;
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    dragging,
+    ended,
+    fullscreen,
+    loaded,
+    muted,
+    paused,
+    playing,
+    rate,
+    stalled,
+    started,
+    touched,
+    volume,
+    waiting
+  } = toRefs(state);
+  const emitter = useMagicEmitter();
+  function initializeEmitter() {
+    watch(dragging, (newDragging) => {
+      if (newDragging) {
+        emitter.emit("onDragStart", toValue(id));
+      }
+      if (!newDragging) {
+        emitter.emit("onDragEnd", toValue(id));
+      }
+    });
+    watch(ended, (newEnded) => {
+      if (newEnded) {
+        emitter.emit("onEnd", toValue(id));
+      }
+    });
+    watch(fullscreen, (newFullscreen) => {
+      if (newFullscreen) {
+        emitter.emit("onFullscreenEnter", toValue(id));
+      }
+      if (!newFullscreen) {
+        emitter.emit("onFullscreenLeave", toValue(id));
+      }
+    });
+    watch(loaded, (newLoaded) => {
+      if (newLoaded) {
+        emitter.emit("onLoad", toValue(id));
+      }
+    });
+    watch(muted, (newMuted) => {
+      if (newMuted) {
+        emitter.emit("onMute", toValue(id));
+      }
+      if (!newMuted) {
+        emitter.emit("onUnmute", toValue(id));
+      }
+    });
+    watch(paused, (newPaused) => {
+      if (newPaused) {
+        emitter.emit("onPause", toValue(id));
+      }
+    });
+    watch(playing, (newPlaying) => {
+      if (newPlaying) {
+        emitter.emit("onPlay", toValue(id));
+      }
+    });
+    watch(rate, (newRate) => {
+      if (newRate) {
+        emitter.emit("onRateChange", toValue(id));
+      }
+    });
+    watch(started, (newStarted) => {
+      if (newStarted) {
+        emitter.emit("onStart", toValue(id));
+      }
+    });
+    watch(stalled, (newStalled) => {
+      if (newStalled) {
+        emitter.emit("onStall", toValue(id));
+      }
+    });
+    watch(touched, (newTouched) => {
+      if (newTouched) {
+        emitter.emit("onTouch", toValue(id));
+      }
+    });
+    watch(volume, (newVolume) => {
+      if (newVolume) {
+        emitter.emit("onVolumeChange", toValue(id));
+      }
+    });
+    watch(waiting, (newWaiting) => {
+      if (newWaiting) {
+        emitter.emit("onWait", toValue(id));
+      }
+    });
+  }
+  return {
+    initializeEmitter
+  };
+}

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

@@ -1,21 +1,7 @@
-import { type MaybeRef } from 'vue';
-import type { Buffered } from '../../types/index.js';
+import { type Ref, type MaybeRef } from 'vue';
 export type UsePlayerMediaApiArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLMediaElement | undefined>;
-};
-export declare function usePlayerMediaApi(args: UsePlayerMediaApiArgs): {
-    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][], Buffered | [number, number][]>;
-    muted: import("vue").Ref<boolean, boolean>;
+    mediaRef?: Ref<HTMLMediaElement | null>;
 };
+export declare function usePlayerMediaApi(args: UsePlayerMediaApiArgs): void;
 export type UsePlayerMediaApiReturn = ReturnType<typeof usePlayerMediaApi>;

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

@@ -1,20 +1,73 @@
-import { ref, computed, watch, unref, toValue } from "vue";
+import { toRefs, watch, unref, toValue } from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerMediaApi(args) {
-  const currentTime = ref(0);
-  const duration = ref(0);
-  const seeking = ref(false);
-  const volume = ref(1);
-  const rate = ref(1);
-  const waiting = ref(false);
-  const ended = ref(false);
-  const playing = ref(false);
-  const stalled = ref(false);
-  const buffered = ref([]);
-  const muted = ref(false);
-  const { mediaRef, id } = args;
-  const remainingTime = computed(() => duration.value - currentTime.value);
+  const { id, mediaRef } = args;
+  const { throwError } = useMagicError({
+    prefix: "MagicPlayer",
+    source: "usePlayerMediaApi"
+  });
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    buffered,
+    currentTime,
+    duration,
+    ended,
+    loaded,
+    muted,
+    paused,
+    playing,
+    rate,
+    seeking,
+    stalled,
+    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)
@@ -23,44 +76,61 @@ export function usePlayerMediaApi(args) {
   }
   watch(volume, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.volume = volume.value;
+    if (el) {
+      el.volume = volume.value;
+    }
   });
   watch(muted, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.muted = muted.value;
+    if (el) {
+      el.muted = muted.value;
+    }
   });
   watch(rate, () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    el.playbackRate = rate.value;
+    if (el) {
+      el.playbackRate = rate.value;
+    }
   });
   if (toValue(mediaRef)) {
     watch([mediaRef], () => {
       const el = toValue(mediaRef);
-      if (!el) return;
-      el.volume = volume.value;
-      el.muted = muted.value;
-      el.playbackRate = rate.value;
+      if (el) {
+        el.volume = volume.value;
+        el.muted = muted.value;
+        el.playbackRate = rate.value;
+      }
     });
   }
+  watch(loaded, () => {
+    if (playing.value) {
+      const el = toValue(mediaRef);
+      if (el) {
+        el.play();
+      }
+    }
+  });
   const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(
     currentTime,
     (time) => {
       const el = toValue(mediaRef);
-      if (!el) return;
-      el.currentTime = unref(time);
+      if (el) {
+        el.currentTime = unref(time);
+      }
     }
   );
   const { ignoreUpdates: ignorePlayingUpdates } = watchIgnorable(
     playing,
-    (isPlaying) => {
+    (value) => {
       const el = toValue(mediaRef);
-      if (!el) return;
-      if (isPlaying) {
+      if (!el) {
+        return;
+      }
+      if (value) {
         const playPromise = el.play();
-        if (playPromise !== void 0) playPromise.catch((error) => {
+        playPromise?.catch((error) => {
+          playing.value = false;
+          handlePlayPromiseError(error);
         });
       } else {
         el.pause();
@@ -92,12 +162,13 @@ export function usePlayerMediaApi(args) {
     waiting.value = false;
   });
   useEventListener(mediaRef, "playing", () => {
+    started.value = true;
     waiting.value = false;
     ended.value = false;
     ignorePlayingUpdates(() => playing.value = true);
   });
   useEventListener(mediaRef, "ratechange", () => {
-    rate.value = toValue(mediaRef).playbackRate;
+    rate.value = toValue(mediaRef)?.playbackRate ?? rate.value;
   });
   useEventListener(mediaRef, "stalled", () => {
     stalled.value = true;
@@ -110,157 +181,23 @@ export function usePlayerMediaApi(args) {
   });
   useEventListener(mediaRef, "pause", () => {
     playing.value = false;
+    paused.value = true;
   });
   useEventListener(mediaRef, "play", () => {
     playing.value = true;
+    started.value = true;
   });
   useEventListener(mediaRef, "volumechange", () => {
     const el = toValue(mediaRef);
-    if (!el) return;
-    volume.value = el.volume;
-    muted.value = el.muted;
-  });
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(id)) return;
-    if (payload.api === "media") {
-      switch (payload.key) {
-        case "currentTime":
-          currentTime.value = payload.value;
-          break;
-        case "duration":
-          duration.value = payload.value;
-          break;
-        case "seeking":
-          seeking.value = payload.value;
-          break;
-        case "volume":
-          volume.value = payload.value;
-          break;
-        case "rate":
-          rate.value = payload.value;
-          break;
-        case "waiting":
-          waiting.value = payload.value;
-          break;
-        case "ended":
-          ended.value = payload.value;
-          break;
-        case "playing":
-          playing.value = payload.value;
-          break;
-        case "stalled":
-          stalled.value = payload.value;
-          break;
-        case "buffered":
-          buffered.value = payload.value;
-          break;
-        case "muted":
-          muted.value = payload.value;
-          break;
-      }
+    if (el) {
+      volume.value = el.volume;
+      muted.value = el.muted;
     }
   });
-  watch(currentTime, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "currentTime",
-      value
-    });
-  });
-  watch(duration, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "duration",
-      value
-    });
-  });
-  watch(seeking, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "seeking",
-      value
-    });
-  });
-  watch(volume, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "volume",
-      value
-    });
-  });
-  watch(rate, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "rate",
-      value
-    });
-  });
-  watch(waiting, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "waiting",
-      value
-    });
-  });
-  watch(ended, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "ended",
-      value
-    });
-  });
-  watch(playing, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "playing",
-      value
-    });
-  });
-  watch(stalled, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "stalled",
-      value
-    });
-  });
-  watch(buffered, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "buffered",
-      value
-    });
-  });
-  watch(muted, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "media",
-      key: "muted",
-      value
-    });
+  useEventListener(mediaRef, "error", () => {
+    const el = toValue(mediaRef);
+    if (el?.error) {
+      handleMediaElementError(el.error);
+    }
   });
-  return {
-    currentTime,
-    remainingTime,
-    duration,
-    seeking,
-    volume,
-    rate,
-    waiting,
-    ended,
-    playing,
-    stalled,
-    buffered,
-    muted
-  };
 }

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

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+export declare function usePlayerProvider(id: MaybeRef<string>): {
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+    onPointerdown: () => void;
+};

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

@@ -0,0 +1,34 @@
+import { toRefs } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { isIOS } from "@maas/vue-equipment/utils";
+import { usePlayerState } from "./usePlayerState.mjs";
+export function usePlayerProvider(id) {
+  const { initializeState } = usePlayerState(id);
+  const state = initializeState();
+  const { mouseEntered, touched } = toRefs(state);
+  let cancelPointerup = void 0;
+  let cancelTouchend = void 0;
+  function onPointerup() {
+    touched.value = false;
+    cancelPointerup?.();
+    cancelTouchend?.();
+    cancelPointerup = void 0;
+    cancelTouchend = void 0;
+  }
+  function onMouseenter() {
+    mouseEntered.value = true;
+  }
+  function onMouseleave() {
+    mouseEntered.value = false;
+  }
+  function onPointerdown() {
+    touched.value = true;
+    cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+  }
+  return {
+    onMouseenter,
+    onMouseleave,
+    onPointerdown
+  };
+}

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

@@ -1,14 +1,14 @@
-import { type MaybeRef } from 'vue';
+import { type MaybeRef, type Ref } from 'vue';
 import type { MagicPlayerOptions } from '../../types/index.js';
 export type UsePlayerRuntimeArgs = {
     id: MaybeRef<string>;
-    mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
+    mediaRef?: Ref<HTMLVideoElement | HTMLAudioElement | null>;
     srcType?: MagicPlayerOptions['srcType'];
     src?: string;
+    debug?: boolean;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
-    loaded: import("vue").Ref<boolean, boolean>;
-    initialize: () => void;
+    initialize: (autoplay?: boolean) => void;
     destroy: () => void;
 };
 export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;