@maas/vue-equipment 0.1.2 → 0.2.0

package/dist/plugins/MagicPlayer/src/components/icons/VolumeOn.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.4 4.2C17.0592 3.70557 18 4.17595 18 5V19C18 19.824 17.0592 20.2944 16.4 19.8L11.3333 16H7C6.44772 16 6 15.5523 6 15V9C6 8.44772 6.44772 8 7 8H11.3333L16.4 4.2Z"
+    />
+  </svg>
+</template>

package/dist/plugins/MagicPlayer/src/components/icons/VolumeOn.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/Waiting.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg viewBox="0 0 48 48">
+    <circle
+      cx="24"
+      cy="24"
+      r="20"
+      fill="none"
+      stroke-width="4"
+      stroke-linecap="round"
+    ></circle>
+  </svg>
+</template>
+
+<style scoped>
+svg > circle {
+  fill: none;
+  transform-origin: center;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: spinner 2.5s ease-in-out infinite;
+  stroke: currentColor;
+}
+
+@keyframes spinner {
+  0% {
+    stroke-dasharray: 1, 200;
+    transform: rotate(0deg);
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    transform: rotate(360deg);
+  }
+  100% {
+    stroke-dasharray: 1, 200;
+    transform: rotate(720deg);
+  }
+}
+</style>

package/dist/plugins/MagicPlayer/src/components/icons/Waiting.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { type UseControlsApiReturn } from './useControlsApi.js';
+import type { UseControlsArgs } from '../types.js';
+type UseControlsReturn = {
+    controlsApi: UseControlsApiReturn;
+};
+export declare function useProvideControls(args: UseControlsArgs): UseControlsReturn;
+export declare function useInjectControls(): UseControlsReturn;
+export {};

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

@@ -0,0 +1,15 @@
+import { provide, inject } from "vue";
+import { useControlsApi } from "./useControlsApi.mjs";
+import { ControlsApiInjectionKey } from "./../types/index.mjs";
+export function useProvideControls(args) {
+  const controlsApi = useControlsApi(args);
+  provide(ControlsApiInjectionKey, controlsApi);
+  return {
+    controlsApi
+  };
+}
+export function useInjectControls() {
+  return {
+    controlsApi: inject(ControlsApiInjectionKey)
+  };
+}

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

@@ -0,0 +1,17 @@
+import type { UseControlsArgs } from '../types.js';
+export declare function useControlsApi(args: UseControlsArgs): {
+    entered: import("vue").Ref<boolean>;
+    dragging: import("vue").Ref<boolean>;
+    seekedTime: import("vue").Ref<number>;
+    seekedPercentage: import("vue").Ref<number>;
+    scrubbedPercentage: import("vue").Ref<number>;
+    bufferedPercentage: import("vue").ComputedRef<number>;
+    thumbPercentage: import("vue").Ref<number>;
+    popoverOffsetX: import("vue").Ref<number>;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onPointerDown: (e: MouseEvent | TouchEvent) => void;
+    onPointerUp: () => void;
+    onPointerMove: (e: MouseEvent | TouchEvent) => void;
+};
+export type UseControlsApiReturn = ReturnType<typeof useControlsApi>;

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

@@ -0,0 +1,129 @@
+import { ref, computed, watch } from "vue";
+import { toValue } from "@vueuse/shared";
+import {
+  useResizeObserver,
+  useEventListener,
+  defaultWindow
+} from "@vueuse/core";
+import { clampValue, mapValue } from "./../utils/index.mjs";
+import { useInjectPlayer } from "./usePlayer.mjs";
+export function useControlsApi(args) {
+  const { mediaApi, playerApi } = useInjectPlayer();
+  const { playing, buffered, duration, currentTime } = mediaApi;
+  const { play, pause, seek } = playerApi;
+  const entered = ref(false);
+  const dragging = ref(false);
+  const seekedTime = ref(0);
+  const seekedPercentage = ref(0);
+  const scrubbedPercentage = ref(0);
+  const thumbPercentage = ref(0);
+  const popoverOffsetX = ref(0);
+  const bufferedPercentage = computed(() => {
+    const endBuffer = buffered.value.length > 0 ? buffered.value[0][1] : 0;
+    const percentage = endBuffer / duration.value * 100;
+    return clampValue(percentage, 0, thumbPercentage.value);
+  });
+  const resumePlay = ref(false);
+  const barRect = ref(void 0);
+  const trackRect = ref(void 0);
+  const popoverRect = ref(void 0);
+  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);
+    }
+  }
+  function getTimelineTrackSize() {
+    trackRect.value = toValue(args.trackRef)?.getBoundingClientRect();
+    thumbPercentage.value = 100 - trackRect.value.height / trackRect.value.width * 100;
+  }
+  function getPopoverSizes() {
+    barRect.value = toValue(args.barRef)?.getBoundingClientRect();
+    popoverRect.value = toValue(args.popoverRef)?.getBoundingClientRect();
+  }
+  function seekToTrackPosition(absX) {
+    if (!trackRect.value) {
+      throw new Error("trackRect is undefined");
+    }
+    const relX = absX - trackRect.value.x - trackRect.value.height / 2;
+    const percentage = Math.round(relX / trackRect.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) {
+      scrubbedPercentage.value = seekedPercentage.value;
+      seek(seekedTime.value);
+    }
+    getPopoverOffsetX();
+  }
+  function onMouseEnter() {
+    getTimelineTrackSize();
+    getPopoverSizes();
+    entered.value = true;
+  }
+  function onMouseLeave() {
+    entered.value = false;
+    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);
+  }
+  function onPointerUp() {
+    dragging.value = false;
+    if (resumePlay.value) {
+      play();
+    }
+  }
+  function onPointerMove(e) {
+    const x = e instanceof MouseEvent ? e.pageX : e.touches[0].pageX;
+    seekToTrackPosition(x);
+  }
+  watch(currentTime, (value) => {
+    const percentage = value / duration.value * 100;
+    scrubbedPercentage.value = mapValue(
+      percentage,
+      0,
+      100,
+      0,
+      thumbPercentage.value
+    );
+  });
+  useResizeObserver(args.trackRef, getTimelineTrackSize);
+  useResizeObserver(args.popoverRef, getPopoverSizes);
+  useEventListener(
+    defaultWindow,
+    "resize",
+    () => {
+      getTimelineTrackSize;
+      getPopoverSizes;
+    },
+    {
+      passive: true
+    }
+  );
+  return {
+    entered,
+    dragging,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    bufferedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    onPointerUp,
+    onPointerMove
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { MaybeRef } from '@vueuse/shared';
+export declare function useMediaApi(target: MaybeRef<HTMLMediaElement | null | undefined>): {
+    currentTime: import("vue").Ref<number>;
+    duration: import("vue").Ref<number>;
+    waiting: import("vue").Ref<boolean>;
+    seeking: import("vue").Ref<boolean>;
+    ended: import("vue").Ref<boolean>;
+    stalled: import("vue").Ref<boolean>;
+    buffered: import("vue").Ref<[number, number][]>;
+    playing: import("vue").Ref<boolean>;
+    rate: import("vue").Ref<number>;
+    volume: import("vue").Ref<number>;
+    muted: import("vue").Ref<boolean>;
+};
+export type UseMediaApiReturn = ReturnType<typeof useMediaApi>;

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

@@ -0,0 +1,122 @@
+import { ref, watch, unref } from "vue";
+import { toValue, watchIgnorable } from "@vueuse/shared";
+import { useEventListener } from "@vueuse/core";
+export function useMediaApi(target) {
+  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);
+  function timeRangeToArray(timeRanges) {
+    let ranges = [];
+    for (let i = 0; i < timeRanges.length; ++i)
+      ranges = [...ranges, [timeRanges.start(i), timeRanges.end(i)]];
+    return ranges;
+  }
+  watch([target, volume], () => {
+    const el = toValue(target);
+    if (!el)
+      return;
+    el.volume = volume.value;
+  });
+  watch([target, muted], () => {
+    const el = toValue(target);
+    if (!el)
+      return;
+    el.muted = muted.value;
+  });
+  watch([target, rate], () => {
+    const el = toValue(target);
+    if (!el)
+      return;
+    el.playbackRate = rate.value;
+  });
+  const { ignoreUpdates: ignoreCurrentTimeUpdates } = watchIgnorable(
+    currentTime,
+    (time) => {
+      const el = toValue(target);
+      if (!el)
+        return;
+      el.currentTime = unref(time);
+    }
+  );
+  const { ignoreUpdates: ignorePlayingUpdates } = watchIgnorable(
+    playing,
+    (isPlaying) => {
+      const el = toValue(target);
+      if (!el)
+        return;
+      isPlaying ? el.play() : el.pause();
+    }
+  );
+  useEventListener(target, "timeupdate", () => {
+    ignoreCurrentTimeUpdates(
+      () => currentTime.value = toValue(target).currentTime
+    );
+  });
+  useEventListener(target, "durationchange", () => {
+    duration.value = toValue(target).duration;
+  });
+  useEventListener(target, "progress", () => {
+    buffered.value = timeRangeToArray(toValue(target).buffered);
+  });
+  useEventListener(target, "seeking", () => {
+    seeking.value = true;
+  });
+  useEventListener(target, "seeked", () => {
+    seeking.value = false;
+  });
+  useEventListener(target, ["waiting", "loadstart"], () => {
+    waiting.value = true;
+    ignorePlayingUpdates(() => playing.value = false);
+  });
+  useEventListener(target, "loadeddata", () => {
+    waiting.value = false;
+  });
+  useEventListener(target, "playing", () => {
+    waiting.value = false;
+    ended.value = false;
+    ignorePlayingUpdates(() => playing.value = true);
+  });
+  useEventListener(target, "ratechange", () => {
+    rate.value = toValue(target).playbackRate;
+  });
+  useEventListener(target, "stalled", () => {
+    stalled.value = true;
+  });
+  useEventListener(target, "ended", () => {
+    ended.value = true;
+  });
+  useEventListener(target, "pause", () => {
+    playing.value = false;
+  });
+  useEventListener(target, "play", () => {
+    playing.value = true;
+  });
+  useEventListener(target, "volumechange", () => {
+    const el = toValue(target);
+    if (!el)
+      return;
+    volume.value = el.volume;
+    muted.value = el.muted;
+  });
+  return {
+    currentTime,
+    duration,
+    waiting,
+    seeking,
+    ended,
+    stalled,
+    buffered,
+    playing,
+    rate,
+    volume,
+    muted
+  };
+}

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

@@ -0,0 +1,12 @@
+import { type UseMediaApiReturn } from './useMediaApi.js';
+import { type UsePlayerApiReturn } from './usePlayerApi.js';
+import { type UseRuntimeSourceProviderReturn } from './useRuntimeSourceProvider.js';
+import { type UsePlayerArgs } from './../types.js';
+type UsePlayerReturn = {
+    playerApi: UsePlayerApiReturn;
+    mediaApi: UseMediaApiReturn;
+    runtimeProvider: UseRuntimeSourceProviderReturn;
+};
+export declare function useProvidePlayer(args: UsePlayerArgs): UsePlayerReturn;
+export declare function useInjectPlayer(): UsePlayerReturn;
+export {};

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

@@ -0,0 +1,33 @@
+import { provide, inject } from "vue";
+import { useMediaApi } from "./useMediaApi.mjs";
+import { usePlayerApi } from "./usePlayerApi.mjs";
+import {
+  useRuntimeSourceProvider
+} from "./useRuntimeSourceProvider.mjs";
+import {
+  MediaApiInjectionKey,
+  PlayerApiInjectionKey,
+  RuntimeSourceProviderInjectionKey
+} from "./../types/index.mjs";
+export function useProvidePlayer(args) {
+  const mediaApi = useMediaApi(args.videoRef);
+  provide(MediaApiInjectionKey, mediaApi);
+  const playerApi = usePlayerApi({ ...args, mediaApi });
+  provide(PlayerApiInjectionKey, playerApi);
+  const runtimeProvider = useRuntimeSourceProvider(args);
+  provide(RuntimeSourceProviderInjectionKey, runtimeProvider);
+  return {
+    playerApi,
+    mediaApi,
+    runtimeProvider
+  };
+}
+export function useInjectPlayer() {
+  return {
+    playerApi: inject(PlayerApiInjectionKey),
+    mediaApi: inject(MediaApiInjectionKey),
+    runtimeProvider: inject(
+      RuntimeSourceProviderInjectionKey
+    )
+  };
+}

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

@@ -0,0 +1,20 @@
+import type { UseMediaApiReturn } from './useMediaApi.js';
+import type { UsePlayerArgs } from '../types.js';
+type UsePlayerApiArgs = Pick<UsePlayerArgs, 'playerRef' | 'videoRef'> & {
+    mediaApi: UseMediaApiReturn;
+};
+export declare function usePlayerApi(args: UsePlayerApiArgs): {
+    isFullscreen: import("vue").Ref<boolean>;
+    touched: import("vue").Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
+    toggleFullscreen: () => Promise<void>;
+};
+export type UsePlayerApiReturn = ReturnType<typeof usePlayerApi>;
+export {};

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

@@ -0,0 +1,50 @@
+import { ref, watch } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import { isIOS } from "./../utils/index.mjs";
+export function usePlayerApi(args) {
+  const touched = ref(false);
+  const fullscreenTarget = isIOS() ? args.videoRef : args.playerRef;
+  const { currentTime, playing, muted } = args.mediaApi;
+  const {
+    isFullscreen,
+    enter: enterFullscreen,
+    exit: exitFullscreen,
+    toggle: toggleFullscreen
+  } = useFullscreen(fullscreenTarget);
+  function play() {
+    playing.value = true;
+  }
+  function pause() {
+    playing.value = false;
+  }
+  function togglePlay() {
+    playing.value = !playing.value;
+  }
+  function seek(time) {
+    currentTime.value = time;
+  }
+  function mute() {
+    muted.value = true;
+  }
+  function unmute() {
+    muted.value = false;
+  }
+  watch(playing, () => {
+    if (!touched.value) {
+      touched.value = true;
+    }
+  });
+  return {
+    isFullscreen,
+    touched,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    mute,
+    unmute,
+    enterFullscreen,
+    exitFullscreen,
+    toggleFullscreen
+  };
+}

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

@@ -0,0 +1,8 @@
+import { type Ref } from 'vue';
+import type { UsePlayerArgs } from './../types.js';
+export type UseRuntimeSourceProviderReturn = {
+    loaded: Ref<boolean>;
+};
+type UseRuntimeSourceProviderArgs = Pick<UsePlayerArgs, 'videoRef' | 'srcType' | 'src'>;
+export declare function useRuntimeSourceProvider(args: UseRuntimeSourceProviderArgs): UseRuntimeSourceProviderReturn;
+export {};

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

@@ -0,0 +1,49 @@
+import { toValue } from "@vueuse/shared";
+import { ref, onMounted, onUnmounted } from "vue";
+export function useRuntimeSourceProvider(args) {
+  let hls;
+  const loaded = ref(false);
+  const useNative = () => {
+    const el = toValue(args.videoRef);
+    if (!el)
+      return;
+    el.src = args.src;
+    el.addEventListener(
+      "loadeddata",
+      () => {
+        loaded.value = true;
+      },
+      { once: true }
+    );
+    el.load();
+  };
+  const useHlsJS = async () => {
+    const el = toValue(args.videoRef);
+    if (!el)
+      return;
+    const { default: Hls } = await import("hls.js");
+    hls = new Hls();
+    if (!Hls.isSupported()) {
+      useNative();
+    } else {
+      hls.loadSource(args.src);
+      hls.attachMedia(el);
+      hls.on(Hls.Events.FRAG_LOADED, () => {
+        loaded.value = true;
+      });
+    }
+  };
+  onMounted(() => {
+    if (args.srcType === "native") {
+      useNative();
+    } else if (args.srcType === "hls") {
+      useHlsJS();
+    }
+  });
+  onUnmounted(() => {
+    hls?.destroy();
+  });
+  return {
+    loaded
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { MaybeRef } from '@vueuse/core';
+type SourceType = 'native' | 'hls';
+type UseControlsArgs = {
+    barRef?: MaybeRef<HTMLDivElement | undefined>;
+    trackRef: MaybeRef<HTMLDivElement | undefined>;
+    popoverRef?: MaybeRef<HTMLDivElement | undefined>;
+};
+type UsePlayerArgs = {
+    playerRef: MaybeRef<HTMLElement | undefined>;
+    videoRef: MaybeRef<HTMLVideoElement | undefined>;
+    srcType: SourceType;
+    src: string;
+};
+export * from './injectionKeys.js';
+export type { SourceType, UseControlsArgs, UsePlayerArgs };

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

@@ -0,0 +1 @@
+export * from "./injectionKeys.mjs";

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

@@ -0,0 +1,45 @@
+import type { InjectionKey } from 'vue';
+import type { UseRuntimeSourceProviderReturn } from '../composables/useRuntimeSourceProvider.js';
+declare const MediaApiInjectionKey: InjectionKey<{
+    currentTime: import("vue").Ref<number>;
+    duration: import("vue").Ref<number>;
+    waiting: import("vue").Ref<boolean>;
+    seeking: import("vue").Ref<boolean>;
+    ended: import("vue").Ref<boolean>;
+    stalled: import("vue").Ref<boolean>;
+    buffered: import("vue").Ref<[number, number][]>;
+    playing: import("vue").Ref<boolean>;
+    rate: import("vue").Ref<number>;
+    volume: import("vue").Ref<number>;
+    muted: import("vue").Ref<boolean>;
+}>;
+declare const PlayerApiInjectionKey: InjectionKey<{
+    isFullscreen: import("vue").Ref<boolean>;
+    touched: import("vue").Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
+    toggleFullscreen: () => Promise<void>;
+}>;
+declare const RuntimeSourceProviderInjectionKey: InjectionKey<UseRuntimeSourceProviderReturn>;
+declare const ControlsApiInjectionKey: InjectionKey<{
+    entered: import("vue").Ref<boolean>;
+    dragging: import("vue").Ref<boolean>;
+    seekedTime: import("vue").Ref<number>;
+    seekedPercentage: import("vue").Ref<number>;
+    scrubbedPercentage: import("vue").Ref<number>;
+    bufferedPercentage: import("vue").ComputedRef<number>;
+    thumbPercentage: import("vue").Ref<number>;
+    popoverOffsetX: import("vue").Ref<number>;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onPointerDown: (e: MouseEvent | TouchEvent) => void;
+    onPointerUp: () => void;
+    onPointerMove: (e: MouseEvent | TouchEvent) => void;
+}>;
+export { MediaApiInjectionKey, PlayerApiInjectionKey, RuntimeSourceProviderInjectionKey, ControlsApiInjectionKey, };

package/dist/plugins/MagicPlayer/src/types/injectionKeys.mjs

@@ -0,0 +1,10 @@
+const MediaApiInjectionKey = Symbol();
+const PlayerApiInjectionKey = Symbol();
+const RuntimeSourceProviderInjectionKey = Symbol();
+const ControlsApiInjectionKey = Symbol();
+export {
+  MediaApiInjectionKey,
+  PlayerApiInjectionKey,
+  RuntimeSourceProviderInjectionKey,
+  ControlsApiInjectionKey
+};

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

@@ -0,0 +1,4 @@
+export declare function formatTime(s: number): string;
+export declare function clampValue(value: number, min: number, max: number): number;
+export declare function mapValue(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;
+export declare function isIOS(): boolean;

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

@@ -0,0 +1,19 @@
+export function formatTime(s) {
+  const hours = Math.floor(s / 3600);
+  const minutes = Math.floor((s - hours * 3600) / 60);
+  const seconds = Math.floor(s - hours * 3600 - minutes * 60);
+  const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;
+  return `${hours > 0 ? `${hours}:` : ""}${minutesString}:${secondsString}`;
+}
+export function clampValue(value, min, max) {
+  return value <= min ? min : value >= max ? max : value;
+}
+export function mapValue(value, inMin, inMax, outMin, outMax) {
+  return (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+}
+export function isIOS() {
+  if (typeof window === "undefined")
+    return false;
+  return /iPad|iPhone|iPod/.test(navigator?.userAgent);
+}

package/dist/plugins/MagicScroll/index.d.ts

@@ -0,0 +1,7 @@
+import { useEmitter } from './src/composables/useEmitter.js';
+import { useProgress } from './src/composables/useProgress.js';
+import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
+import type { Plugin } from 'vue';
+export type * from './src/types';
+declare const MagicScroll: Plugin;
+export { MagicScroll, useEmitter, useProgress, useCollisionDetect };