@maas/vue-equipment 0.11.5 → 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/dist/plugins/MagicToast/src/components/MagicToast.vue

@@ -130,7 +130,8 @@ watch(
   --magic-toast-padding-x: 1rem;
   --magic-toast-padding-y: 1rem;
 
-  --mt-multiplier: 1;
+  --mt-multiplier-x: 1;
+  --mt-multiplier-y: 1;
   --mt-align-items: flex-start;
   --mt-justify-content: center;
 }
@@ -170,10 +171,10 @@ watch(
 .magic-toast.-top-right {
   --magic-toast-transform-y: 10;
   --magic-toast-enter-animation: slide-ttb-in 300ms ease;
-  --mt-multiplier: 1;
-  & .magic-toast__inner {
+  --mt-multiplier-y: 1;
+  --mt-align-items: flex-start;
+  & .magic-toast-component {
     padding-top: var(--magic-toast-padding-y, 1rem);
-    --mt-align-items: flex-start;
   }
 }
 
@@ -182,26 +183,26 @@ watch(
 .magic-toast.-bottom-right {
   --magic-toast-transform-y: 10;
   --magic-toast-enter-animation: slide-btt-in 300ms ease;
-  --mt-multiplier: -1;
-  & .magic-toast__inner {
+  --mt-multiplier-y: -1;
+  --mt-align-items: flex-end;
+  & .magic-toast-component {
     padding-bottom: var(--magic-toast-padding-y, 1rem);
-    --mt-align-items: flex-end;
   }
 }
 
 .magic-toast.-top-left,
 .magic-toast.-bottom-left {
-  & .magic-toast__inner {
+  --mt-justify-content: flex-start;
+  & .magic-toast-component {
     padding-left: var(--magic-toast-padding-x, 1rem);
-    --mt-justify-content: flex-start;
   }
 }
 
 .magic-toast.-top-right,
 .magic-toast.-bottom-right {
-  & .magic-toast__inner {
+  --mt-justify-content: flex-end;
+  & .magic-toast-component {
     padding-right: var(--magic-toast-padding-x, 1rem);
-    --mt-justify-content: flex-end;
   }
 }
 
@@ -209,14 +210,14 @@ watch(
   --magic-toast-enter-animation: slide-ltr-in 300ms ease;
   --magic-toast-transform-y: 0;
   --magic-toast-transform-x: 30;
-  --mt-multiplier: 1;
+  --mt-multiplier-x: 1;
 }
 
 .magic-toast.-from-right {
   --magic-toast-enter-animation: slide-rtl-in 300ms ease;
   --magic-toast-transform-y: 0;
   --magic-toast-transform-x: 30;
-  --mt-multiplier: -1;
+  --mt-multiplier-x: -1;
 }
 
 .magic-toast--list-enter-active {

package/dist/plugins/MagicToast/src/components/MagicToastComponent.vue

@@ -39,7 +39,7 @@ function setIndex() {
 
 function setOffset() {
   const offset = newerSiblings.value.reduce((acc, curr) => {
-    return acc + curr.height
+    return acc + curr.height - curr.padding.top - curr.padding.bottom
   }, 0)
   elRef.value?.style.setProperty('--mt-offset', `${offset}`)
 }
@@ -65,10 +65,10 @@ watchEffect(() => {
   --mt-offset: 0;
   --mt-matrix-scale: calc(1 - (var(--magic-toast-scale) * var(--mt-index, 0)));
   --mt-matrix-transform-x: calc(
-    var(--magic-toast-transform-x) * var(--mt-index, 0) * var(--mt-multiplier)
+    var(--magic-toast-transform-x) * var(--mt-index, 0) * var(--mt-multiplier-x)
   );
   --mt-matrix-transform-y: calc(
-    var(--magic-toast-transform-y) * var(--mt-index, 0) * var(--mt-multiplier)
+    var(--magic-toast-transform-y) * var(--mt-index, 0) * var(--mt-multiplier-y)
   );
   position: absolute;
   list-style: none;
@@ -91,7 +91,7 @@ watchEffect(() => {
 
 .magic-toast-component.expanded {
   --mt-matrix-scale: 1;
-  --mt-matrix-transform-y: calc(var(--mt-offset) * var(--mt-multiplier));
+  --mt-matrix-transform-y: calc(var(--mt-offset) * var(--mt-multiplier-y));
   --mt-matrix-transform-x: 0;
   &:not(:last-child) {
     & .magic-toast-component__inner {

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { Options, Toast } from './../../types.js';
+import type { ToastOptions, Toast } from './../../types.js';
 type Args = {
     id: MaybeRef<string>;
-    mappedOptions: Options;
+    mappedOptions: ToastOptions;
     count: Ref<number | undefined>;
     oldest: Ref<Toast | undefined>;
 };
@@ -16,6 +16,10 @@ export declare function useToastCallback({ id, mappedOptions, count, oldest }: A
     activeElements: Ref<{
         id: string;
         height: number;
+        padding: {
+            top: number;
+            bottom: number;
+        };
     }[]>;
 };
 export {};

package/dist/plugins/MagicToast/src/composables/private/useToastCallback.mjs

@@ -14,9 +14,17 @@ export function useToastCallback({ id, mappedOptions, count, oldest }) {
   function onAfterEnter(el) {
     useToastEmitter().emit("afterEnter", toValue(id));
     const mappedEl = el;
+    const style = window.getComputedStyle(mappedEl);
     activeElements.value = [
       ...activeElements.value,
-      { id: el.id, height: mappedEl.offsetHeight }
+      {
+        id: el.id,
+        height: mappedEl.offsetHeight,
+        padding: {
+          top: parseInt(style.paddingTop),
+          bottom: parseInt(style.paddingBottom)
+        }
+      }
     ];
   }
   function onBeforeLeave(_el) {

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

@@ -28,6 +28,10 @@ type ToastOptions = {
 type ActiveElement = {
     id: string;
     height: number;
+    padding: {
+        top: number;
+        bottom: number;
+    };
 };
 type ToastEvents = {
     beforeEnter: string;

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.5",
+  "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
-};