@maas/vue-equipment 0.20.1 → 0.21.0

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

@@ -0,0 +1,22 @@
+import { type MaybeRef, type Ref } from 'vue';
+export type UsePlayerVideoApiArgs = {
+    id: MaybeRef<string>;
+    playerRef?: MaybeRef<HTMLElement | undefined>;
+    videoRef?: MaybeRef<HTMLVideoElement | undefined>;
+};
+export declare function usePlayerVideoApi(args: UsePlayerVideoApiArgs): {
+    mouseEntered: Ref<boolean>;
+    isFullscreen: Ref<boolean>;
+    touched: Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    mute: () => void;
+    unmute: () => void;
+    enterFullscreen: () => void;
+    exitFullscreen: () => void;
+    onMouseenter: () => void;
+    onMouseleave: () => void;
+};
+export type UsePlayerVideoApiReturn = ReturnType<typeof usePlayerVideoApi>;

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

@@ -0,0 +1,142 @@
+import { ref, watch, toValue } from "vue";
+import { useFullscreen } from "@vueuse/core";
+import { isIOS } from "@maas/vue-equipment/utils";
+import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+export function usePlayerVideoApi(args) {
+  const fullscreenTarget = ref(void 0);
+  const { playing, currentTime, muted } = usePlayerMediaApi({
+    id: toValue(args.id)
+  });
+  const { playerRef, videoRef } = args;
+  const touched = ref(false);
+  const mouseEntered = ref(false);
+  const { isFullscreen, enter, exit } = 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;
+  }
+  function onMouseenter() {
+    mouseEntered.value = true;
+  }
+  function onMouseleave() {
+    mouseEntered.value = false;
+  }
+  function enterFullscreen() {
+    if (!fullscreenTarget.value) {
+      console.error("No fullscreen target found");
+      return;
+    }
+    enter();
+  }
+  function exitFullscreen() {
+    if (!fullscreenTarget.value) {
+      console.error("No fullscreen target found");
+      return;
+    }
+    exit();
+  }
+  watch(playing, (value) => {
+    if (!touched.value && value) {
+      touched.value = true;
+    }
+  });
+  if (playerRef && !videoRef) {
+    watch(playerRef, (value) => {
+      if (value) {
+        fullscreenTarget.value = toValue(value);
+      }
+    });
+  }
+  if (videoRef && !playerRef) {
+    watch(videoRef, (value) => {
+      if (value) {
+        fullscreenTarget.value = toValue(value);
+      }
+    });
+  }
+  if (videoRef && playerRef) {
+    watch([playerRef, videoRef], ([player, video]) => {
+      if (player && video) {
+        fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
+      } else if (player) {
+        fullscreenTarget.value = toValue(player);
+      } else if (video) {
+        fullscreenTarget.value = toValue(video);
+      }
+    });
+  }
+  const emitter = usePlayerStateEmitter();
+  emitter.on("update", (payload) => {
+    if (payload.id !== toValue(args.id))
+      return;
+    if (payload.api === "player") {
+      switch (payload.key) {
+        case "mouseEntered":
+          mouseEntered.value = payload.value;
+          break;
+        case "fullscreenTarget":
+          fullscreenTarget.value = payload.value;
+          break;
+        case "touched":
+          touched.value = payload.value;
+          break;
+      }
+    }
+  });
+  watch(mouseEntered, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "player",
+      key: "mouseEntered",
+      value
+    });
+  });
+  watch(touched, (value) => {
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "player",
+      key: "touched",
+      value
+    });
+  });
+  watch(fullscreenTarget, (value) => {
+    if (!value)
+      return;
+    emitter.emit("update", {
+      id: toValue(args.id),
+      api: "player",
+      key: "fullscreenTarget",
+      value
+    });
+  });
+  return {
+    mouseEntered,
+    isFullscreen,
+    touched,
+    play,
+    pause,
+    togglePlay,
+    seek,
+    mute,
+    unmute,
+    enterFullscreen,
+    exitFullscreen,
+    onMouseenter,
+    onMouseleave
+  };
+}

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

@@ -1,6 +1,64 @@
-import { type MaybeRef } from 'vue';
-import type { UsePlayerApiArgs } from '../types.js';
-export declare function usePlayerApi(args: UsePlayerApiArgs | MaybeRef<string>): {
-    instance: import("vue").ComputedRef<import("./private/usePlayerStore").PlayerInstance>;
+import type { MaybeRef } from '@vueuse/core';
+type usePlayerApiArgs = {
+    id: MaybeRef<string>;
 };
-export type UsePlayerApiReturn = ReturnType<typeof usePlayerApi>;
+export declare function usePlayerApi(args: usePlayerApiArgs): {
+    mediaApi: {
+        currentTime: import("vue").Ref<number>;
+        duration: import("vue").Ref<number>;
+        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][]>;
+        muted: import("vue").Ref<boolean>;
+    };
+    videoApi: {
+        mouseEntered: import("vue").Ref<boolean>;
+        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: () => void;
+        exitFullscreen: () => void;
+        onMouseenter: () => void;
+        onMouseleave: () => void;
+    };
+    controlsApi: {
+        mouseEntered: 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;
+        trackRect: import("vue").Ref<{
+            height: number;
+            width: number;
+            x: number;
+            y: number;
+            readonly bottom: number;
+            readonly left: number;
+            readonly right: number;
+            readonly top: number;
+            toJSON: () => any;
+        } | undefined>;
+    };
+    playerRuntime: {
+        loaded: import("vue").Ref<boolean>;
+    };
+};
+export {};

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

@@ -1,69 +1,16 @@
-import { uuid } from "@maas/vue-equipment/utils";
-import { computed, onUnmounted, toValue } from "vue";
-import { usePlayerStore } from "./private/usePlayerStore.mjs";
-import { usePlayerInternalApi } from "./private/usePlayerInternalApi.mjs";
-import { useMediaApi } from "./private/useMediaApi.mjs";
-import { useControlsApi } from "./private/useControlsApi.mjs";
-import { useRuntimeSourceProvider } from "./private/useRuntimeSourceProvider.mjs";
+import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
+import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
+import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
+import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
 export function usePlayerApi(args) {
-  const { findInstance, addInstance, removeInstance } = usePlayerStore();
-  const mappedId = computed(() => {
-    if (typeof args === "string") {
-      return toValue(args) || uuid();
-    } else if ("id" in args) {
-      return toValue(args.id) || uuid();
-    } else {
-      return uuid();
-    }
-  });
-  const instance = computed(() => findInstance(toValue(mappedId)));
-  function initialize() {
-    const id = toValue(mappedId);
-    let instance2 = findInstance(id);
-    if (!instance2) {
-      instance2 = addInstance(id);
-    }
-    if (typeof args !== "string") {
-      if ("mediaRef" in args) {
-        instance2.mediaApi = useMediaApi({ mediaRef: args.mediaRef });
-      } else if ("videoRef" in args) {
-        instance2.mediaApi = useMediaApi({ mediaRef: args.videoRef });
-      }
-      if ("videoRef" in args && "playerRef" in args) {
-        instance2.playerApi = usePlayerInternalApi({
-          id,
-          playerRef: args.playerRef,
-          videoRef: args.videoRef
-        });
-      }
-      if ("videoRef" in args && "srcType" in args && "src" in args) {
-        instance2.runtimeProvider = useRuntimeSourceProvider({
-          videoRef: args.videoRef,
-          srcType: args.srcType,
-          src: args.src
-        });
-      }
-      if ("barRef" in args && "trackRef" in args) {
-        instance2.controlsApi = useControlsApi({
-          id,
-          barRef: args.barRef,
-          trackRef: args.trackRef,
-          popoverRef: args.popoverRef
-        });
-      }
-    }
-    return instance2;
-  }
-  function destroy(id) {
-    if (!id)
-      return;
-    removeInstance(toValue(id));
-  }
-  onUnmounted(() => {
-    destroy(toValue(mappedId));
-  });
-  initialize();
+  const mediaApi = usePlayerMediaApi({ id: args.id });
+  const videoApi = usePlayerVideoApi({ id: args.id });
+  const controlsApi = usePlayerControlsApi({ id: args.id });
+  const playerRuntime = usePlayerRuntime({ id: args.id });
   return {
-    instance
+    mediaApi,
+    videoApi,
+    controlsApi,
+    playerRuntime
   };
 }

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

@@ -1,25 +1,12 @@
-import { type MaybeRef } from 'vue';
-type SourceType = 'native' | 'hls';
-type UseMediaApiArgs = {
-    mediaRef: MaybeRef<HTMLMediaElement | undefined>;
-};
-type UseControlsApiArgs = {
-    id: MaybeRef<string>;
-    barRef?: MaybeRef<HTMLDivElement | undefined>;
-    trackRef: MaybeRef<HTMLDivElement | undefined>;
-    popoverRef?: MaybeRef<HTMLDivElement | undefined>;
-};
-type UsePlayerInternalApiArgs = {
-    id: MaybeRef<string>;
-    playerRef: MaybeRef<HTMLElement | undefined>;
-    videoRef: MaybeRef<HTMLVideoElement | undefined>;
-};
-type UseRuntimeSourceProviderArgs = {
-    videoRef: MaybeRef<HTMLVideoElement | undefined>;
-    srcType: SourceType;
-    src: string;
-};
-type UsePlayerApiArgs = Partial<UseMediaApiArgs & UseControlsApiArgs & UsePlayerInternalApiArgs & UseRuntimeSourceProviderArgs> & {
-    id: MaybeRef<string>;
-};
-export type { SourceType, UseMediaApiArgs, UsePlayerApiArgs, UseControlsApiArgs, UsePlayerInternalApiArgs, UseRuntimeSourceProviderArgs, };
+export type SourceType = 'native' | 'hls';
+type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
+export type Buffered = [number, number][];
+export type PlayerPrivateEvents = {
+    update: {
+        id: string;
+        api: API;
+        key: string;
+        value: string | number | boolean | Buffered | DOMRect | HTMLElement;
+    };
+};
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",

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

@@ -1,17 +0,0 @@
-import type { UseControlsApiArgs } from '../../types.js';
-export declare function useControlsApi(args: UseControlsApiArgs): {
-    mouseEntered: 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/private/useControlsApi.mjs

@@ -1,131 +0,0 @@
-import { ref, computed, watch, toValue } from "vue";
-import {
-  useResizeObserver,
-  useEventListener,
-  defaultWindow
-} from "@vueuse/core";
-import { clampValue, mapValue } from "@maas/vue-equipment/utils";
-import { usePlayerStore } from "./usePlayerStore.mjs";
-export function useControlsApi(args) {
-  const { findInstance } = usePlayerStore();
-  const instance = findInstance(toValue(args.id));
-  const { buffered, duration, playing, currentTime } = instance.mediaApi;
-  const { play, pause, seek } = instance.playerApi;
-  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 (!instance?.mediaApi)
-      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 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();
-    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(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 {
-    mouseEntered,
-    dragging,
-    seekedTime,
-    seekedPercentage,
-    scrubbedPercentage,
-    bufferedPercentage,
-    thumbPercentage,
-    popoverOffsetX,
-    onMouseenter,
-    onMouseleave,
-    onPointerdown,
-    onPointerup,
-    onPointermove
-  };
-}

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

@@ -1,122 +0,0 @@
-import { ref, watch, unref, toValue } from "vue";
-import { useEventListener, watchIgnorable } from "@vueuse/core";
-export function useMediaApi(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([mediaRef, volume], () => {
-    const el = toValue(mediaRef);
-    if (!el)
-      return;
-    el.volume = volume.value;
-  });
-  watch([mediaRef, muted], () => {
-    const el = toValue(mediaRef);
-    if (!el)
-      return;
-    el.muted = muted.value;
-  });
-  watch([mediaRef, rate], () => {
-    const el = toValue(mediaRef);
-    if (!el)
-      return;
-    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;
-  });
-  return {
-    currentTime,
-    duration,
-    waiting,
-    seeking,
-    ended,
-    stalled,
-    buffered,
-    playing,
-    rate,
-    volume,
-    muted
-  };
-}

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

@@ -1,18 +0,0 @@
-import type { UsePlayerInternalApiArgs } from '../../types.js';
-export declare function usePlayerInternalApi(args: UsePlayerInternalApiArgs): {
-    mouseEntered: import("vue").Ref<boolean>;
-    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>;
-    onMouseenter: () => void;
-    onMouseleave: () => void;
-};
-export type UsePlayerInternalApiReturn = ReturnType<typeof usePlayerInternalApi>;