@maas/vue-equipment 1.0.0-beta.11 → 1.0.0-beta.13

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

@@ -1,5 +1,5 @@
 import {
-  ref,
+  toRefs,
   shallowRef,
   computed,
   watch,
@@ -8,65 +8,87 @@ import {
 import {
   useResizeObserver,
   useEventListener,
-  defaultWindow
+  defaultWindow,
+  useThrottleFn
 } from "@vueuse/core";
+import {
+  isIOS,
+  guardedReleasePointerCapture,
+  guardedSetPointerCapture
+} from "@maas/vue-equipment/utils";
 import { clampValue, mapValue } from "@maas/vue-equipment/utils";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./usePlayerVideoApi.mjs";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerControlsApi(args) {
+  const { id, barRef, trackRef, popoverRef } = args;
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    currentTime,
+    duration,
+    dragging,
+    controlsMouseEntered,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    playing,
+    buffered,
+    controlsBarRect,
+    controlsTrackRect,
+    controlsPopoverRect
+  } = toRefs(state);
   const resumePlay = shallowRef(false);
-  const barRect = ref(void 0);
-  const trackRect = ref(void 0);
-  const popoverRect = ref(void 0);
-  const { id, trackRef, barRef, popoverRef } = args;
-  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({ id });
-  const { play, pause, seek } = usePlayerVideoApi({ id });
-  const dragging = shallowRef(false);
-  const mouseEntered = shallowRef(false);
-  const seekedTime = shallowRef(0);
-  const seekedPercentage = shallowRef(0);
-  const scrubbedPercentage = shallowRef(0);
-  const thumbPercentage = shallowRef(0);
-  const popoverOffsetX = shallowRef(0);
+  let cancelPointerup = void 0;
+  let cancelPointermove = void 0;
+  let cancelTouchend = void 0;
   const bufferedPercentage = computed(() => {
-    if (!buffered) return 0;
+    if (!buffered.value) {
+      return 0;
+    }
     const endBuffer = buffered.value?.length > 0 ? buffered.value[0][1] : 0;
     const percentage = endBuffer / duration.value * 100;
     return clampValue(percentage, 0, thumbPercentage.value);
   });
+  const { play, pause, seek } = usePlayerVideoApi({ id });
   function getPopoverOffsetX() {
-    if (!trackRect.value || !popoverRect.value || !barRect.value) {
-      return 0;
-    } else {
-      const trackFactor = barRect.value.width / trackRect.value.width;
-      const offsetXPercentage = Math.abs(trackRect.value.x - barRect.value.x) / barRect.value.width * 100;
-      const popoverWidthPercentage = popoverRect.value.width / barRect.value.width * 100;
-      const maxPercentage = 100 - popoverWidthPercentage;
-      const percentage = seekedPercentage.value / trackFactor + offsetXPercentage - popoverWidthPercentage / 2;
-      popoverOffsetX.value = clampValue(percentage, 0, maxPercentage);
+    if (!controlsTrackRect.value || !controlsPopoverRect.value || !controlsBarRect.value) {
+      return;
     }
+    const trackFactor = controlsBarRect.value.width / controlsTrackRect.value.width;
+    const offsetXPercentage = Math.abs(controlsTrackRect.value.x - controlsBarRect.value.x) / controlsBarRect.value.width * 100;
+    const popoverWidthPercentage = controlsPopoverRect.value.width / controlsBarRect.value.width * 100;
+    const maxPercentage = 100 - popoverWidthPercentage;
+    const percentage = seekedPercentage.value / trackFactor + offsetXPercentage - popoverWidthPercentage / 2;
+    popoverOffsetX.value = clampValue(percentage, 0, maxPercentage);
   }
   function getTimelineTrackSize() {
     if (!toValue(trackRef)) {
       return;
     }
-    trackRect.value = toValue(trackRef).getBoundingClientRect();
-    thumbPercentage.value = 100 - trackRect.value.height / trackRect.value.width * 100;
+    controlsTrackRect.value = toValue(trackRef).getBoundingClientRect();
+    thumbPercentage.value = 100 - controlsTrackRect.value.height / controlsTrackRect.value.width * 100;
   }
   function getPopoverSizes() {
     if (!toValue(barRef) || !toValue(popoverRef)) {
       return;
     }
-    barRect.value = toValue(barRef).getBoundingClientRect();
-    popoverRect.value = toValue(popoverRef).getBoundingClientRect();
+    controlsBarRect.value = toValue(barRef).getBoundingClientRect();
+    controlsPopoverRect.value = toValue(popoverRef).getBoundingClientRect();
   }
+  function getSizes() {
+    getTimelineTrackSize();
+    getPopoverSizes();
+    getPopoverOffsetX();
+  }
+  const getSizesThrottled = useThrottleFn(getSizes, 100);
   function seekToTrackPosition(absX) {
-    if (!trackRect.value) {
-      throw new Error("trackRect is undefined");
+    if (!controlsTrackRect.value) {
+      return;
     }
-    const relX = absX - trackRect.value.x - trackRect.value.height / 2;
-    const percentage = Math.round(relX / trackRect.value.width * 100);
+    const relX = absX - controlsTrackRect.value.x - controlsTrackRect.value.height / 2;
+    const percentage = Math.round(relX / controlsTrackRect.value.width * 100);
     seekedPercentage.value = clampValue(percentage, 0, thumbPercentage.value);
     seekedTime.value = duration.value * mapValue(seekedPercentage.value, 0, thumbPercentage.value, 0, 100) / 100;
     if (dragging.value) {
@@ -75,220 +97,111 @@ export function usePlayerControlsApi(args) {
     }
     getPopoverOffsetX();
   }
-  function onMouseenter() {
-    getTimelineTrackSize();
-    getPopoverSizes();
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
+  function resetStateAndListeners() {
     dragging.value = false;
-    seekedTime.value = 0;
+    cancelTouchend?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
   }
-  function onPointerdown(e) {
-    dragging.value = true;
-    resumePlay.value = playing.value;
-    pause();
-    const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
-    seekToTrackPosition(x);
-  }
-  function onPointerup() {
-    dragging.value = false;
+  function onPointerup(e) {
+    resetStateAndListeners();
+    guardedReleasePointerCapture({ event: e, element: barRef?.value });
     if (resumePlay.value) {
       play();
     }
   }
   function onPointermove(e) {
-    const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
-    seekToTrackPosition(x);
+    if (!e.isPrimary) {
+      return;
+    }
+    getSizesThrottled();
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    seekToTrackPosition(e.clientX);
   }
-  watch(() => trackRef, getTimelineTrackSize);
-  watch(() => popoverRef, getPopoverSizes);
-  watch(() => barRef, getPopoverSizes);
-  watch(currentTime, (value) => {
-    const percentage = value / duration?.value * 100;
-    scrubbedPercentage.value = mapValue(
-      percentage,
-      0,
-      100,
-      0,
-      thumbPercentage.value
-    );
-  });
-  useResizeObserver(trackRef, getTimelineTrackSize);
-  useResizeObserver(popoverRef, getPopoverSizes);
-  useEventListener(
-    defaultWindow,
-    "resize",
-    () => {
-      getTimelineTrackSize();
-      getPopoverSizes();
-    },
-    {
-      passive: true
+  function onPointerdown(e) {
+    if (dragging.value) {
+      return;
+    } else {
+      guardedSetPointerCapture({ event: e, element: barRef?.value });
+      resumePlay.value = playing.value;
+      dragging.value = true;
+      pause();
+      getSizes();
+      cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+      cancelPointermove = useEventListener(
+        document,
+        "pointermove",
+        onPointermove,
+        { passive: false }
+      );
+      cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+      onPointermove(e);
     }
-  );
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(id)) return;
-    if (payload.api === "controls") {
-      switch (payload.key) {
-        case "dragging": {
-          dragging.value = payload.value;
-          break;
-        }
-        case "mouseEntered": {
-          mouseEntered.value = payload.value;
-          break;
-        }
-        case "seekedTime": {
-          seekedTime.value = payload.value;
-          break;
-        }
-        case "seekedPercentage": {
-          seekedPercentage.value = payload.value;
-          break;
-        }
-        case "scrubbedPercentage": {
-          scrubbedPercentage.value = payload.value;
-          break;
-        }
-        case "thumbPercentage": {
-          thumbPercentage.value = payload.value;
-          break;
-        }
-        case "popoverOffsetX": {
-          popoverOffsetX.value = payload.value;
-          break;
-        }
-        case "barRect": {
-          barRect.value = payload.value;
-          break;
-        }
-        case "trackRect": {
-          trackRect.value = payload.value;
-          break;
-        }
-        case "popoverRect": {
-          popoverRect.value = payload.value;
-          break;
-        }
-      }
+  }
+  function onMouseenter() {
+    getSizes();
+    controlsMouseEntered.value = true;
+  }
+  function onMouseleave() {
+    controlsMouseEntered.value = false;
+    if (!dragging.value) {
+      seekedTime.value = 0;
     }
-  });
-  watch(dragging, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "dragging",
-      value
-    });
-  });
-  watch(mouseEntered, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "mouseEntered",
-      value
-    });
-  });
-  watch(seekedTime, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "seekedTime",
-      value
-    });
-  });
-  watch(seekedPercentage, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "seekedPercentage",
-      value
-    });
-  });
-  watch(scrubbedPercentage, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "scrubbedPercentage",
-      value
-    });
-  });
-  watch(bufferedPercentage, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "bufferedPercentage",
-      value
-    });
-  });
-  watch(thumbPercentage, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "thumbPercentage",
-      value
-    });
-  });
-  watch(popoverOffsetX, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "popoverOffsetX",
-      value
-    });
-  });
-  watch(resumePlay, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "resumePlay",
-      value
-    });
-  });
-  watch(barRect, (value) => {
-    if (!value) return;
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "barRect",
-      value
-    });
-  });
-  watch(trackRect, (value) => {
-    if (!value) return;
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "trackRect",
-      value
-    });
-  });
-  watch(popoverRect, (value) => {
-    if (!value) return;
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "controls",
-      key: "popoverRect",
-      value
+  }
+  let watchTrack = null;
+  let watchPopover = null;
+  let watchBar = null;
+  let watchCurrentTime = null;
+  let resizeObserverTrack = null;
+  let resizeObserverPopover = null;
+  let resizeObserverBar = null;
+  let windowResizeCleanup = null;
+  function initialize() {
+    watchTrack = watch(() => trackRef, getTimelineTrackSize);
+    watchPopover = watch(() => popoverRef, getPopoverSizes);
+    watchBar = watch(() => barRef, getPopoverSizes);
+    watchCurrentTime = watch(currentTime, (value) => {
+      const percentage = value / duration?.value * 100;
+      scrubbedPercentage.value = mapValue(
+        percentage,
+        0,
+        100,
+        0,
+        thumbPercentage.value
+      );
     });
-  });
+    resizeObserverTrack = useResizeObserver(trackRef, getTimelineTrackSize);
+    resizeObserverPopover = useResizeObserver(popoverRef, getPopoverSizes);
+    resizeObserverBar = useResizeObserver(barRef, getPopoverSizes);
+    windowResizeCleanup = useEventListener(
+      defaultWindow,
+      "resize",
+      () => {
+        getSizes();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  function destroy() {
+    watchTrack?.();
+    watchPopover?.();
+    watchBar?.();
+    watchCurrentTime?.();
+    resizeObserverTrack?.stop();
+    resizeObserverPopover?.stop();
+    resizeObserverBar?.stop();
+    windowResizeCleanup?.();
+  }
   return {
-    mouseEntered,
-    dragging,
-    seekedTime,
-    seekedPercentage,
-    scrubbedPercentage,
+    initialize,
+    destroy,
     bufferedPercentage,
-    thumbPercentage,
-    popoverOffsetX,
     onMouseenter,
     onMouseleave,
     onPointerdown,
-    onPointerup,
-    onPointermove,
-    trackRect
+    onPointermove
   };
 }

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

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

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;
 };