@maas/vue-equipment 0.11.6 → 0.12.0

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

@@ -1,50 +1,69 @@
-import { ref, watch } from "vue";
-import { useFullscreen } from "@vueuse/core";
-import { isIOS } from "@maas/vue-equipment/utils";
+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";
 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;
+  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 unmute() {
-    muted.value = false;
+  function destroy(id) {
+    if (!id)
+      return;
+    removeInstance(toValue(id));
   }
-  watch(playing, () => {
-    if (!touched.value) {
-      touched.value = true;
-    }
+  onUnmounted(() => {
+    destroy(toValue(mappedId));
   });
+  initialize();
   return {
-    isFullscreen,
-    touched,
-    play,
-    pause,
-    togglePlay,
-    seek,
-    mute,
-    unmute,
-    enterFullscreen,
-    exitFullscreen,
-    toggleFullscreen
+    instance
   };
 }

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

@@ -1,14 +1,25 @@
 import { type MaybeRef } from 'vue';
 type SourceType = 'native' | 'hls';
-type UseControlsArgs = {
+type UseMediaApiArgs = {
+    mediaRef: MaybeRef<HTMLMediaElement | undefined>;
+};
+type UseControlsApiArgs = {
+    id: MaybeRef<string>;
     barRef?: MaybeRef<HTMLDivElement | undefined>;
     trackRef: MaybeRef<HTMLDivElement | undefined>;
     popoverRef?: MaybeRef<HTMLDivElement | undefined>;
 };
-type UsePlayerArgs = {
+type UsePlayerInternalApiArgs = {
+    id: MaybeRef<string>;
     playerRef: MaybeRef<HTMLElement | undefined>;
     videoRef: MaybeRef<HTMLVideoElement | undefined>;
+};
+type UseRuntimeSourceProviderArgs = {
+    videoRef: MaybeRef<HTMLVideoElement | undefined>;
     srcType: SourceType;
     src: string;
 };
-export type { SourceType, UseControlsArgs, UsePlayerArgs };
+type UsePlayerApiArgs = MaybeRef<string> | (Partial<UseMediaApiArgs & UseControlsApiArgs & UsePlayerInternalApiArgs & UseRuntimeSourceProviderArgs> & {
+    id: MaybeRef<string>;
+});
+export type { SourceType, UseMediaApiArgs, UsePlayerApiArgs, UseControlsApiArgs, UsePlayerInternalApiArgs, UseRuntimeSourceProviderArgs, };

package/package.json

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import { provide, inject } from "vue";
-import { useControlsApi } from "./useControlsApi.mjs";
-import { ControlsApiInjectionKey } from "./../symbols/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/usePlayer.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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 "./../symbols/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/symbols/index.d.ts

@@ -1,45 +0,0 @@
-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<any>;
-    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/symbols/index.mjs

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