@maas/vue-equipment 0.20.1 → 0.21.0

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

@@ -0,0 +1,297 @@
+import { ref, computed, watch, toValue } from "vue";
+import {
+  useResizeObserver,
+  useEventListener,
+  defaultWindow
+} from "@vueuse/core";
+import { clampValue, mapValue } from "@maas/vue-equipment/utils";
+import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { usePlayerVideoApi } from "./usePlayerVideoApi.mjs";
+import { usePlayerStateEmitter } from "./usePlayerStateEmitter.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 { trackRef, barRef, popoverRef } = args;
+  const { buffered, duration, playing, currentTime } = usePlayerMediaApi({
+    id: toValue(args.id)
+  });
+  const { play, pause, seek } = usePlayerVideoApi({
+    id: toValue(args.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 bufferedPercentage = computed(() => {
+    if (!buffered)
+      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);
+  });
+  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() {
+    if (!toValue(trackRef)) {
+      return;
+    }
+    trackRect.value = toValue(trackRef).getBoundingClientRect();
+    thumbPercentage.value = 100 - trackRect.value.height / trackRect.value.width * 100;
+  }
+  function getPopoverSizes() {
+    if (!toValue(barRef) || !toValue(popoverRef)) {
+      return;
+    }
+    barRect.value = toValue(barRef).getBoundingClientRect();
+    popoverRect.value = toValue(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();
+    mouseEntered.value = true;
+  }
+  function onMouseleave() {
+    mouseEntered.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(() => 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
+    }
+  );
+  const emitter = usePlayerStateEmitter();
+  emitter.on("update", (payload) => {
+    if (payload.id !== toValue(args.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;
+        }
+      }
+    }
+  });
+  watch(dragging, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "dragging",
+      value
+    });
+  });
+  watch(mouseEntered, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "mouseEntered",
+      value
+    });
+  });
+  watch(seekedTime, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "seekedTime",
+      value
+    });
+  });
+  watch(seekedPercentage, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "seekedPercentage",
+      value
+    });
+  });
+  watch(scrubbedPercentage, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "scrubbedPercentage",
+      value
+    });
+  });
+  watch(bufferedPercentage, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "bufferedPercentage",
+      value
+    });
+  });
+  watch(thumbPercentage, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "thumbPercentage",
+      value
+    });
+  });
+  watch(popoverOffsetX, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "popoverOffsetX",
+      value
+    });
+  });
+  watch(resumePlay, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "resumePlay",
+      value
+    });
+  });
+  watch(barRect, (value) => {
+    if (!value)
+      return;
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "barRect",
+      value
+    });
+  });
+  watch(trackRect, (value) => {
+    if (!value)
+      return;
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "trackRect",
+      value
+    });
+  });
+  watch(popoverRect, (value) => {
+    if (!value)
+      return;
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "controls",
+      key: "popoverRect",
+      value
+    });
+  });
+  return {
+    mouseEntered,
+    dragging,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    bufferedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    onMouseenter,
+    onMouseleave,
+    onPointerdown,
+    onPointerup,
+    onPointermove,
+    trackRect
+  };
+}

package/dist/plugins/MagicPlayer/src/composables/private/{useMediaApi.d.ts → usePlayerMediaApi.d.ts}

@@ -1,15 +1,19 @@
-import type { UseMediaApiArgs } from '../../types.js';
-export declare function useMediaApi(args: UseMediaApiArgs): {
+import { 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>;
     duration: import("vue").Ref<number>;
-    waiting: import("vue").Ref<boolean>;
     seeking: import("vue").Ref<boolean>;
+    volume: import("vue").Ref<number>;
+    rate: import("vue").Ref<number>;
+    waiting: import("vue").Ref<boolean>;
     ended: import("vue").Ref<boolean>;
+    playing: 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>;
+export type UsePlayerMediaApiReturn = ReturnType<typeof usePlayerMediaApi>;

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

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

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

@@ -0,0 +1,12 @@
+import { type MaybeRef } from 'vue';
+import type { SourceType } from '../../types.js';
+export type UsePlayerRuntimeArgs = {
+    id: MaybeRef<string>;
+    mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
+    srcType?: SourceType;
+    src?: string;
+};
+export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
+    loaded: import("vue").Ref<boolean>;
+};
+export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;

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

@@ -0,0 +1,70 @@
+import { ref, watch, onMounted, onUnmounted, toValue } from "vue";
+import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+export function usePlayerRuntime(args) {
+  let hls;
+  const loaded = ref(false);
+  const { mediaRef, srcType, src } = args;
+  const useNative = () => {
+    const el = toValue(mediaRef);
+    if (!el || !src)
+      return;
+    el.src = src;
+    el.addEventListener(
+      "loadeddata",
+      () => {
+        loaded.value = true;
+      },
+      { once: true }
+    );
+    el.load();
+  };
+  const useHlsJS = async () => {
+    const el = toValue(mediaRef);
+    if (!el)
+      return;
+    const { default: Hls } = await import("hls.js");
+    hls = new Hls();
+    if (!Hls.isSupported()) {
+      useNative();
+    } else if (src) {
+      hls.loadSource(src);
+      hls.attachMedia(el);
+      hls.on(Hls.Events.FRAG_LOADED, () => {
+        loaded.value = true;
+      });
+    }
+  };
+  onMounted(() => {
+    if (srcType === "native") {
+      useNative();
+    } else if (srcType === "hls") {
+      useHlsJS();
+    }
+  });
+  onUnmounted(() => {
+    hls?.destroy();
+  });
+  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
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { PlayerPrivateEvents } from '../../types.js';
+export declare function usePlayerStateEmitter(): {
+    on: {
+        <Key extends "update">(type: Key, handler: import("mitt").Handler<PlayerPrivateEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<PlayerPrivateEvents>): void;
+    };
+    off: {
+        <Key_1 extends "update">(type: Key_1, handler?: import("mitt").Handler<PlayerPrivateEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<PlayerPrivateEvents>): void;
+    };
+    emit: {
+        <Key_2 extends "update">(type: Key_2, event: PlayerPrivateEvents[Key_2]): void;
+        <Key_3 extends "update">(type: undefined extends PlayerPrivateEvents[Key_3] ? Key_3 : never): void;
+    };
+};

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

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function usePlayerStateEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}