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

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

@@ -1,19 +1,21 @@
-import { ref, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { toRefs, toValue } from "vue";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerAudioApi(args) {
   const { id } = args;
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(false);
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { currentTime, playing, paused, muted } = toRefs(state);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -24,57 +26,12 @@ export function usePlayerAudioApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
-  }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
-  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 "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
-    });
-  });
   return {
-    mouseEntered,
-    touched,
     play,
     pause,
     togglePlay,
     seek,
     mute,
-    unmute,
-    onMouseenter,
-    onMouseleave
+    unmute
   };
 }

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

@@ -1,44 +1,18 @@
 import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerControlsApiArgs = {
     id: MaybeRef<string>;
-    barRef?: Ref<HTMLDivElement | undefined>;
-    trackRef?: Ref<HTMLDivElement | undefined>;
-    popoverRef?: Ref<HTMLDivElement | undefined>;
+    barRef?: Ref<HTMLDivElement | null>;
+    trackRef?: Ref<HTMLDivElement | null>;
+    popoverRef?: Ref<HTMLDivElement | null>;
 };
 export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
-    mouseEntered: Ref<boolean, boolean>;
-    dragging: Ref<boolean, boolean>;
-    seekedTime: Ref<number, number>;
-    seekedPercentage: Ref<number, number>;
-    scrubbedPercentage: Ref<number, number>;
+    initialize: () => void;
+    destroy: () => void;
     bufferedPercentage: import("vue").ComputedRef<number>;
-    thumbPercentage: Ref<number, number>;
-    popoverOffsetX: Ref<number, number>;
     onMouseenter: () => void;
     onMouseleave: () => void;
-    onPointerdown: (e: MouseEvent | TouchEvent) => void;
-    onPointerup: () => void;
-    onPointermove: (e: MouseEvent | TouchEvent) => void;
-    trackRect: 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>;
+    onMouseleaveTimeline: () => void;
+    onPointerdown: (e: PointerEvent) => void;
+    onPointermove: (e: PointerEvent) => void;
 };
 export type UsePlayerControlsApiReturn = ReturnType<typeof usePlayerControlsApi>;

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

@@ -1,66 +1,96 @@
-import { ref, computed, watch, toValue } from "vue";
+import {
+  toRefs,
+  shallowRef,
+  computed,
+  watch,
+  toValue
+} from "vue";
 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 resumePlay = ref(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 = ref(false);
-  const mouseEntered = ref(false);
-  const seekedTime = ref(0);
-  const seekedPercentage = ref(0);
-  const scrubbedPercentage = ref(0);
-  const thumbPercentage = ref(0);
-  const popoverOffsetX = ref(0);
+  const { id, barRef, trackRef, popoverRef } = args;
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const {
+    currentTime,
+    duration,
+    dragging,
+    touched,
+    controlsMouseEntered,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    playing,
+    buffered,
+    controlsBarRect,
+    controlsTrackRect,
+    controlsPopoverRect,
+    hasControls
+  } = toRefs(state);
+  const resumePlay = shallowRef(false);
+  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) {
@@ -69,220 +99,126 @@ export function usePlayerControlsApi(args) {
     }
     getPopoverOffsetX();
   }
-  function onMouseenter() {
-    getTimelineTrackSize();
-    getPopoverSizes();
-    mouseEntered.value = true;
+  function resetTimelineState() {
+    seekedTime.value = null;
+    seekedPercentage.value = 0;
+    popoverOffsetX.value = null;
   }
-  function onMouseleave() {
-    mouseEntered.value = false;
+  function resetStateAndListeners() {
     dragging.value = false;
-    seekedTime.value = 0;
-  }
-  function onPointerdown(e) {
-    dragging.value = true;
-    resumePlay.value = playing.value;
-    pause();
-    const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
-    seekToTrackPosition(x);
+    touched.value = false;
+    cancelTouchend?.();
+    cancelPointerup?.();
+    cancelPointermove?.();
   }
-  function onPointerup() {
-    dragging.value = false;
+  function onPointerup(e) {
+    resetStateAndListeners();
+    resetTimelineState();
+    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;
+      touched.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) {
+      resetTimelineState();
     }
-  });
-  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
+  }
+  function onMouseleaveTimeline() {
+    if (!dragging.value) {
+      resetTimelineState();
+    }
+  }
+  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() {
+    hasControls.value = true;
+    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,
+    onMouseleaveTimeline,
     onPointerdown,
-    onPointerup,
-    onPointermove,
-    trackRect
+    onPointermove
   };
 }

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

@@ -0,0 +1,8 @@
+import { type MaybeRef } from 'vue';
+export type UsePlayerEmitterArgs = {
+    id: MaybeRef<string>;
+};
+export declare function usePlayerEmitter(args: UsePlayerEmitterArgs): {
+    initializeEmitter: () => void;
+};
+export type UsePlayerEmitterReturn = ReturnType<typeof usePlayerEmitter>;