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

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

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";
+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>;