@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -1,20 +1,26 @@
-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 { 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 { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    currentTime,
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    started,
+    ended,
+    playing,
+    paused,
+    stalled,
+    buffered,
+    muted
+  } = toRefs(state);
   function timeRangeToArray(timeRanges) {
     let ranges = [];
     for (let i = 0; i < timeRanges.length; ++i)
@@ -23,44 +29,60 @@ 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(() => {
+          playing.value = false;
         });
       } else {
         el.pause();
@@ -92,12 +114,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 +133,17 @@ 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
-    });
-  });
-  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,13 @@
-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;
 };
 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>;

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

@@ -1,14 +1,18 @@
-import { ref, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { shallowRef, toRefs, toValue } from "vue";
 import { useEventListener } from "@vueuse/core";
+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 } = args;
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { loaded } = toRefs(state);
   function useNative() {
     const el = toValue(mediaRef);
-    if (!el || !src) return;
+    if (!el || !src) {
+      return;
+    }
     el.src = src;
     el.addEventListener(
       "loadeddata",
@@ -18,12 +22,12 @@ export function usePlayerRuntime(args) {
       { once: true }
     );
   }
-  async function useHlsJS() {
+  async function useHlsJS(autoplay = false) {
     const el = toValue(mediaRef);
-    if (!el) return;
-    useEventListener(mediaRef, "play", () => {
-      defferedLoading.value = true;
-    });
+    if (!el) {
+      return;
+    }
+    deferredLoading.value = autoplay;
     const { default: Hls } = await import("hls.js");
     hls = new Hls({ autoStartLoad: false });
     if (!Hls.isSupported()) {
@@ -36,7 +40,7 @@ export function usePlayerRuntime(args) {
         toValue(mediaRef)?.dispatchEvent(new Event("suspend"));
       });
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        if (defferedLoading.value) {
+        if (deferredLoading.value) {
           hls?.startLoad();
         }
       });
@@ -50,38 +54,18 @@ export function usePlayerRuntime(args) {
       hls.attachMedia(el);
     }
   }
-  function initialize() {
+  function initialize(autoplay = false) {
     if (srcType === "native") {
       useNative();
     } else if (srcType === "hls") {
-      useHlsJS();
+      useHlsJS(autoplay);
     }
   }
   function destroy() {
     hls?.destroy();
-    defferedLoading.value = false;
+    deferredLoading.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;
-      }
-    }
-  });
-  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,60 @@
+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>;