@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.14

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

@@ -1,27 +1,23 @@
-import {
-  ref,
-  shallowRef,
-  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 = shallowRef(0);
-  const duration = shallowRef(0);
-  const seeking = shallowRef(false);
-  const volume = shallowRef(1);
-  const rate = shallowRef(1);
-  const waiting = shallowRef(false);
-  const ended = shallowRef(false);
-  const playing = shallowRef(false);
-  const stalled = shallowRef(false);
-  const buffered = ref([]);
-  const muted = shallowRef(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,
+    waiting,
+    ended,
+    playing,
+    stalled,
+    buffered,
+    muted
+  } = toRefs(state);
   function timeRangeToArray(timeRanges) {
     let ranges = [];
     for (let i = 0; i < timeRanges.length; ++i)
@@ -127,147 +123,4 @@ export function usePlayerMediaApi(args) {
     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;
-      }
-    }
-  });
-  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/usePlayerRuntime.d.ts

@@ -7,7 +7,6 @@ export type UsePlayerRuntimeArgs = {
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
-    loaded: import("vue").ShallowRef<boolean, boolean>;
     initialize: () => void;
     destroy: () => void;
 };

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

@@ -1,11 +1,13 @@
-import { shallowRef, 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 = shallowRef(false);
   const defferedLoading = shallowRef(false);
-  const { mediaRef, srcType, src } = args;
+  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;
@@ -61,27 +63,7 @@ export function usePlayerRuntime(args) {
     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;
-      }
-    }
-  });
-  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,56 @@
+import { ref, reactive, toValue } from "vue";
+const playerStateStore = ref([]);
+export function usePlayerState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      currentTime: 0,
+      duration: 0,
+      seeking: false,
+      volume: 1,
+      rate: 1,
+      loaded: false,
+      waiting: false,
+      ended: false,
+      playing: false,
+      stalled: false,
+      buffered: [],
+      muted: false,
+      touched: false,
+      isFullscreen: false,
+      fullscreenTarget: null,
+      mouseEntered: false,
+      controlsMouseEntered: false,
+      dragging: false,
+      seekedTime: 0,
+      seekedPercentage: 0,
+      scrubbedPercentage: 0,
+      thumbPercentage: 0,
+      popoverOffsetX: 0,
+      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

@@ -5,9 +5,6 @@ export type UsePlayerVideoApiArgs = {
     videoRef?: Ref<HTMLVideoElement | null>;
 };
 export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
-    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-    isFullscreen: Ref<boolean, boolean>;
-    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
@@ -16,7 +13,5 @@ export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
     unmute: () => 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,15 +1,13 @@
-import { ref, shallowRef, 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 { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
-  const fullscreenTarget = ref(null);
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = shallowRef(false);
-  const mouseEntered = shallowRef(false);
-  const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { currentTime, playing, muted, touched, fullscreenTarget } = toRefs(state);
+  const { enter, exit } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;
   }
@@ -28,12 +26,6 @@ export function usePlayerVideoApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
-  }
   function enterFullscreen() {
     if (!fullscreenTarget.value) {
       console.error("No fullscreen target found");
@@ -78,52 +70,7 @@ export function usePlayerVideoApi(args) {
       }
     });
   }
-  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,
@@ -131,8 +78,6 @@ export function usePlayerVideoApi(args) {
     mute,
     unmute,
     enterFullscreen,
-    exitFullscreen,
-    onMouseenter,
-    onMouseleave
+    exitFullscreen
   };
 }

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

@@ -1,23 +1,34 @@
-import type { MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 export declare function useMagicPlayer(id: MaybeRef<string>): {
-    mediaApi: {
-        currentTime: import("vue").ShallowRef<number, number>;
-        remainingTime: import("vue").ComputedRef<number>;
-        duration: import("vue").ShallowRef<number, number>;
-        seeking: import("vue").ShallowRef<boolean, boolean>;
-        volume: import("vue").ShallowRef<number, number>;
-        rate: import("vue").ShallowRef<number, number>;
-        waiting: import("vue").ShallowRef<boolean, boolean>;
-        ended: import("vue").ShallowRef<boolean, boolean>;
-        playing: import("vue").ShallowRef<boolean, boolean>;
-        stalled: import("vue").ShallowRef<boolean, boolean>;
-        buffered: import("vue").Ref<[number, number][], import("../types").Buffered | [number, number][]>;
-        muted: import("vue").ShallowRef<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>;
+    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>;
+    isFullscreen: import("vue").Ref<boolean, boolean>;
+    seekedTime: import("vue").Ref<number, number>;
+    seekedPercentage: import("vue").Ref<number, number>;
+    scrubbedPercentage: import("vue").Ref<number, number>;
+    thumbPercentage: import("vue").Ref<number, number>;
+    popoverOffsetX: import("vue").Ref<number, number>;
+    audioApi: {
+        play: () => void;
+        pause: () => void;
+        togglePlay: () => void;
+        seek: (time: number) => void;
+        mute: () => void;
+        unmute: () => void;
     };
+    mediaApi: void;
     videoApi: {
-        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-        isFullscreen: import("vue").Ref<boolean, boolean>;
-        touched: import("vue").ShallowRef<boolean, boolean>;
         play: () => void;
         pause: () => void;
         togglePlay: () => void;
@@ -26,47 +37,17 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         unmute: () => void;
         enterFullscreen: () => void;
         exitFullscreen: () => void;
-        onMouseenter: () => void;
-        onMouseleave: () => void;
     };
     controlsApi: {
-        mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-        dragging: import("vue").ShallowRef<boolean, boolean>;
-        seekedTime: import("vue").ShallowRef<number, number>;
-        seekedPercentage: import("vue").ShallowRef<number, number>;
-        scrubbedPercentage: import("vue").ShallowRef<number, number>;
+        initialize: () => void;
+        destroy: () => void;
         bufferedPercentage: import("vue").ComputedRef<number>;
-        thumbPercentage: import("vue").ShallowRef<number, number>;
-        popoverOffsetX: import("vue").ShallowRef<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>;
+        onPointerdown: (e: PointerEvent) => void;
+        onPointermove: (e: PointerEvent) => void;
     };
     playerRuntime: {
-        loaded: import("vue").ShallowRef<boolean, boolean>;
         initialize: () => void;
         destroy: () => void;
     };

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

@@ -1,13 +1,60 @@
+import { toRefs } from "vue";
 import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
 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 audioApi = usePlayerAudioApi({ id });
   const mediaApi = usePlayerMediaApi({ id });
   const videoApi = usePlayerVideoApi({ id });
   const controlsApi = usePlayerControlsApi({ id });
   const playerRuntime = usePlayerRuntime({ id });
+  const { initializeState } = usePlayerState(id);
+  const state = initializeState();
+  const {
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    isFullscreen,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX
+  } = toRefs(state);
   return {
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    isFullscreen,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    audioApi,
     mediaApi,
     videoApi,
     controlsApi,

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

@@ -1,5 +1,8 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicPlayerOptions } from '../types/index.js';
 declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+declare const MagicPlayerTrackRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerBarRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerPopoverRef: InjectionKey<Ref<HTMLDivElement | null>>;
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey, MagicPlayerTrackRef, MagicPlayerBarRef, MagicPlayerPopoverRef, };

package/dist/plugins/MagicPlayer/src/symbols/index.mjs

@@ -1,3 +1,12 @@
 const MagicPlayerInstanceId = Symbol();
 const MagicPlayerOptionsKey = Symbol();
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+const MagicPlayerTrackRef = Symbol();
+const MagicPlayerBarRef = Symbol();
+const MagicPlayerPopoverRef = Symbol();
+export {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef,
+  MagicPlayerPopoverRef
+};

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

@@ -19,4 +19,33 @@ export type PlayerPrivateEvents = {
         value: string | number | boolean | Buffered | DOMRect | HTMLElement;
     };
 };
+export interface PlayerState {
+    id: string;
+    currentTime: number;
+    duration: number;
+    seeking: boolean;
+    volume: number;
+    rate: number;
+    loaded: boolean;
+    waiting: boolean;
+    ended: boolean;
+    playing: boolean;
+    stalled: boolean;
+    buffered: Buffered;
+    muted: boolean;
+    touched: boolean;
+    isFullscreen: boolean;
+    fullscreenTarget: HTMLElement | null;
+    mouseEntered: boolean;
+    controlsMouseEntered: boolean;
+    dragging: boolean;
+    seekedTime: number;
+    seekedPercentage: number;
+    scrubbedPercentage: number;
+    thumbPercentage: number;
+    popoverOffsetX: number;
+    controlsBarRect: DOMRect | undefined;
+    controlsTrackRect: DOMRect | undefined;
+    controlsPopoverRect: DOMRect | undefined;
+}
 export {};