@maas/vue-equipment 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue.d.ts

@@ -8,44 +8,12 @@ interface MagicMenuContentProps {
     transition?: string;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare const viewId: string | undefined;
-declare const view: import("../types/index.js").MenuView | undefined;
-declare const state: import("../types/index.js").MenuState;
-declare const pointerDisabled: import("vue").ComputedRef<boolean>;
-declare const mappedTransition: import("vue").ComputedRef<string>;
-declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
-declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
-declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => void, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
-declare const coords: import("vue").Ref<{
-    x: number;
-    y: number;
-}[], import("../types/index.js").Coordinates[] | {
-    x: number;
-    y: number;
-}[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_13: {}, __VLS_15: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     arrow?: (props: typeof __VLS_13) => any;
 } & {
     default?: (props: typeof __VLS_15) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuContentProps, {
-    viewId: typeof viewId;
-    view: typeof view;
-    state: typeof state;
-    pointerDisabled: typeof pointerDisabled;
-    mappedTransition: typeof mappedTransition;
-    innerActive: typeof innerActive;
-    wrapperActive: typeof wrapperActive;
-    onBeforeEnter: typeof onBeforeEnter;
-    onEnter: typeof onEnter;
-    onAfterEnter: typeof onAfterEnter;
-    onBeforeLeave: typeof onBeforeLeave;
-    onLeave: typeof onLeave;
-    onAfterLeave: typeof onAfterLeave;
-    coords: typeof coords;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/components/MagicMenuFloat.vue.d.ts

@@ -6,43 +6,12 @@ interface MagicMenuFloatProps {
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
 }
-declare const arrow: boolean;
-declare const hasArrow: import("vue").ComputedRef<boolean>;
-declare const floatingStyles: Readonly<import("vue").Ref<{
-    position: import("@floating-ui/vue").Strategy;
-    top: string;
-    left: string;
-    transform?: string;
-    willChange?: string;
-}, {
-    position: import("@floating-ui/vue").Strategy;
-    top: string;
-    left: string;
-    transform?: string;
-    willChange?: string;
-}>>;
-declare const arrowStyles: import("vue").ComputedRef<{
-    transform?: undefined;
-} | {
-    transform: string;
-}>;
-declare const placementClasses: import("vue").ComputedRef<string>;
-declare const polygonPoints: import("vue").ComputedRef<"50,50 100,100 0,100" | "50,50 100,0 0,0" | "50,50 100,100 100,0" | "50,50 0,100 0,0" | undefined>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_3: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     arrow?: (props: typeof __VLS_1) => any;
 } & {
     default?: (props: typeof __VLS_3) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuFloatProps, {
-    arrow: typeof arrow;
-    hasArrow: typeof hasArrow;
-    floatingStyles: typeof floatingStyles;
-    arrowStyles: typeof arrowStyles;
-    placementClasses: typeof placementClasses;
-    polygonPoints: typeof polygonPoints;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuFloatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue.d.ts

@@ -2,32 +2,13 @@ interface MagicMenuItemProps {
     id?: string;
     disabled?: boolean;
 }
-declare const mappedId: import("vue").ComputedRef<string>;
-declare const item: import("../types/index.js").MenuItem;
-declare const pointerDisabled: import("vue").ComputedRef<boolean>;
-declare function guardedSelect(): void;
-declare function guardedUnselect(): void;
-declare function onClick(event: MouseEvent): void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
     itemActive: boolean;
     itemDisabled: boolean;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuItemProps, {
-    mappedId: typeof mappedId;
-    item: typeof item;
-    pointerDisabled: typeof pointerDisabled;
-    guardedSelect: typeof guardedSelect;
-    guardedUnselect: typeof guardedUnselect;
-    onClick: typeof onClick;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicMenuItemProps> & Readonly<{

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue.d.ts

@@ -1,19 +1,14 @@
 import { type MaybeRef } from 'vue';
-import { Primitive } from '@maas/vue-primitive';
 import type { MagicMenuOptions } from '../types/index.js';
 interface MagicMenuProviderProps {
     id: MaybeRef<string>;
     asChild?: boolean;
     options?: MagicMenuOptions;
 }
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_7: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuProviderProps, {
-    Primitive: typeof Primitive;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue.d.ts

@@ -1,4 +1,3 @@
-import { Primitive } from '@maas/vue-primitive';
 import type { Interaction } from '../types/index.js';
 interface MagicMenuRemoteProps {
     channelId: string;
@@ -8,22 +7,13 @@ interface MagicMenuRemoteProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare const onClick: () => void, onMouseenter: () => void;
-declare let channel: import("../types/index.js").MenuChannel;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_11: {
     channelActive: boolean;
     remoteDisabled: boolean;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuRemoteProps, {
-    Primitive: typeof Primitive;
-    onClick: typeof onClick;
-    onMouseenter: typeof onMouseenter;
-    channel: typeof channel;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuRemoteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuRemoteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuRemoteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -1,4 +1,3 @@
-import { Primitive } from '@maas/vue-primitive';
 import type { Interaction } from '../types/index.js';
 interface MagicMenuTriggerProps {
     instanceId?: string;
@@ -7,28 +6,13 @@ interface MagicMenuTriggerProps {
     trigger?: Interaction[];
     asChild?: boolean;
 }
-declare const mappedViewId: import("vue").ComputedRef<string | undefined>;
-declare const view: import("../types/index.js").MenuView | undefined;
-declare const mappedDisabled: import("vue").ComputedRef<boolean>;
-declare const mappedTabindex: import("vue").ComputedRef<0 | undefined>;
-declare const onMouseenter: () => void, onClick: (e: MouseEvent) => void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_13: {
     viewActive: boolean | undefined;
     triggerDisabled: boolean;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_13) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuTriggerProps, {
-    Primitive: typeof Primitive;
-    mappedViewId: typeof mappedViewId;
-    view: typeof view;
-    mappedDisabled: typeof mappedDisabled;
-    mappedTabindex: typeof mappedTabindex;
-    onMouseenter: typeof onMouseenter;
-    onClick: typeof onClick;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -3,19 +3,12 @@ interface MagicMenuViewProps {
     id?: string;
     placement?: Placement;
 }
-declare const mappedId: import("vue").ComputedRef<string>;
-declare const view: import("../types/index.js").MenuView;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
     viewActive: boolean;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicMenuViewProps, {
-    mappedId: typeof mappedId;
-    view: typeof view;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicMenuViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -77,7 +77,7 @@ export interface MenuState {
         view: string | undefined;
     };
 }
-export type MenuEvents = {
+export interface MenuEvents {
     beforeEnter: {
         id: string;
         viewId: string;
@@ -102,5 +102,5 @@ export type MenuEvents = {
         id: string;
         viewId: string;
     };
-};
+}
 export {};

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -7,50 +7,12 @@ interface MagicModalProps {
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils/index.js").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
-    transition: {
-        content?: string;
-        backdrop?: string;
-    };
-    backdrop: boolean;
-    tag: "div" | "dialog";
-    focusTrap: boolean | import("focus-trap").Options;
-    scrollLock: boolean | {
-        padding: boolean;
-    };
-    teleport: {
-        target?: string;
-        disabled?: boolean;
-    };
-    keyListener: {
-        close?: string[] | false;
-    };
-};
-declare const mappedId: string;
-declare const close: () => void;
-declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
-declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
-declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_9: {}, __VLS_32: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     backdrop?: (props: typeof __VLS_9) => any;
 } & {
     default?: (props: typeof __VLS_32) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicModalProps, {
-    mappedOptions: typeof mappedOptions;
-    mappedId: typeof mappedId;
-    close: typeof close;
-    innerActive: typeof innerActive;
-    wrapperActive: typeof wrapperActive;
-    onBeforeEnter: typeof onBeforeEnter;
-    onEnter: typeof onEnter;
-    onAfterEnter: typeof onAfterEnter;
-    onBeforeLeave: typeof onBeforeLeave;
-    onLeave: typeof onLeave;
-    onAfterLeave: typeof onAfterLeave;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -18,11 +18,11 @@ export interface MagicModalOptions {
         close?: string[] | false;
     };
 }
-export type ModalEvents = {
+export interface ModalEvents {
     beforeEnter: string;
     enter: string;
     afterEnter: string;
     beforeLeave: string;
     leave: string;
     afterLeave: string;
-};
+}

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.vue

@@ -6,19 +6,31 @@
 import {
   toRefs,
   useTemplateRef,
-  shallowRef,
   inject,
+  watch,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  shallowRef,
+  computed
 } from "vue";
-import { useIntersectionObserver } from "@vueuse/core";
+import {
+  useElementVisibility,
+  useEventListener,
+  defaultWindow
+} from "@vueuse/core";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
 import { usePlayerState } from "../composables/private/usePlayerState";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import { audioModePlaybackDefaults } from "../utils/playbackDefaults";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef
+} from "../symbols";
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+const injectedPlayerRef = inject(MagicPlayerRef, void 0);
 if (!injectedInstanceId) {
   throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
 }
@@ -26,7 +38,6 @@ if (!injectedOptions) {
   throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
 }
 const elRef = useTemplateRef("el");
-const pausedByIntersection = shallowRef(false);
 const { initialize, destroy } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
@@ -42,22 +53,44 @@ const { play, pause } = usePlayerAudioApi({
 });
 const { initializeState } = usePlayerState(injectedInstanceId);
 const state = initializeState();
-const { playing } = toRefs(state);
-useIntersectionObserver(
-  elRef,
-  ([{ isIntersecting }]) => {
-    if (!isIntersecting && playing.value) {
+const { playing, started } = toRefs(state);
+const wasPlaying = shallowRef(false);
+const isVisible = useElementVisibility(injectedPlayerRef);
+const manageWindow = computed(() => {
+  const playbackOptions = injectedOptions.playback || audioModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("window");
+});
+const manageViewport = computed(() => {
+  const playbackOptions = injectedOptions.playback || audioModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("viewport");
+});
+function onWindowFocus() {
+  if (isVisible.value && wasPlaying.value) {
+    play();
+  }
+}
+function onWindowBlur() {
+  wasPlaying.value = playing.value;
+  pause();
+}
+if (manageWindow.value) {
+  useEventListener(defaultWindow, "focus", onWindowFocus);
+  useEventListener(defaultWindow, "blur", onWindowBlur);
+}
+if (manageViewport.value) {
+  watch(isVisible, (value) => {
+    if (!value) {
+      wasPlaying.value = playing.value;
       pause();
-      pausedByIntersection.value = true;
-    } else if (isIntersecting && !playing.value && pausedByIntersection.value) {
-      pausedByIntersection.value = false;
+    }
+    if (value && wasPlaying.value) {
       play();
     }
-  },
-  {
-    immediate: true
-  }
-);
+    if (value && injectedOptions.autoplay && !started.value) {
+      play();
+    }
+  });
+}
 onMounted(() => {
   initialize();
 });

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -2,9 +2,11 @@
   <div
     class="magic-player-audio-controls"
     :data-touched="touched"
+    :data-started="started"
     :data-playing="playing"
-    :data-paused="!playing"
+    :data-paused="paused"
     :data-waiting="waiting"
+    :data-muted="muted"
     :data-idle="idle"
     :data-hover="controlsMouseEntered"
     @mouseenter="onMouseenter"
@@ -94,7 +96,15 @@ const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi
 });
 const { initializeState } = usePlayerState(mappedInstanceId.value);
 const state = initializeState();
-const { playing, waiting, touched, controlsMouseEntered } = toRefs(state);
+const {
+  playing,
+  paused,
+  started,
+  muted,
+  waiting,
+  touched,
+  controlsMouseEntered
+} = toRefs(state);
 const { idle } = useIdle(3e3);
 initialize();
 onBeforeUnmount(() => {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue.d.ts

@@ -1,32 +1,12 @@
-import IconPlay from './icons/Play.vue.js';
-import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
     instanceId?: string;
 }
-declare const play: () => void, pause: () => void;
-declare const onMouseenter: () => void, onMouseleave: () => void;
-declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>, controlsMouseEntered: import("vue").Ref<boolean, boolean>;
-declare const idle: import("vue").ShallowRef<boolean>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_6: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     playIcon?: (props: typeof __VLS_1) => any;
 } & {
     pauseIcon?: (props: typeof __VLS_6) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {
-    IconPlay: typeof IconPlay;
-    IconPause: typeof IconPause;
-    play: typeof play;
-    pause: typeof pause;
-    onMouseenter: typeof onMouseenter;
-    onMouseleave: typeof onMouseleave;
-    playing: typeof playing;
-    waiting: typeof waiting;
-    touched: typeof touched;
-    controlsMouseEntered: typeof controlsMouseEntered;
-    idle: typeof idle;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue

@@ -2,38 +2,49 @@
   <div
     class="magic-player-overlay"
     :data-playing="playing"
-    :data-paused="!playing"
+    :data-touched="touched"
+    :data-paused="paused"
+    :data-started="started"
     :data-waiting="waiting"
+    :data-loaded="loaded"
+    :data-muted="muted"
     :data-idle="idle"
     :data-hover="mouseEntered"
     @click.stop="togglePlay"
   >
     <slot>
-      <template v-if="waiting">
-        <button class="magic-player-overlay__button">
+      <transition name="fade" mode="out-in">
+        <button
+          v-if="defferedWaiting && started"
+          class="magic-player-overlay__button"
+        >
           <slot name="waitingIcon">
             <icon-waiting />
           </slot>
         </button>
-      </template>
-      <template v-else>
-        <button v-if="!playing" class="magic-player-overlay__button">
+        <button
+          v-else-if="paused || !started"
+          class="magic-player-overlay__button"
+        >
           <slot name="playIcon">
             <icon-play />
           </slot>
         </button>
-        <button v-else class="magic-player-overlay__button">
+        <button
+          v-else-if="started && !paused"
+          class="magic-player-overlay__button"
+        >
           <slot name="pauseIcon">
             <icon-pause />
           </slot>
         </button>
-      </template>
+      </transition>
     </slot>
   </div>
 </template>
 
 <script setup>
-import { inject, toRefs } from "vue";
+import { watch, ref, inject, toRefs } from "vue";
 import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
@@ -49,11 +60,38 @@ if (!instanceId) {
 }
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
-const { mouseEntered, playing, waiting } = toRefs(state);
+const {
+  mouseEntered,
+  playing,
+  paused,
+  started,
+  touched,
+  muted,
+  loaded,
+  waiting,
+  hasOverlay
+} = toRefs(state);
+hasOverlay.value = true;
 const { togglePlay } = usePlayerVideoApi({
   id: instanceId
 });
 const { idle } = useIdle(3e3);
+const defferedWaiting = ref(false);
+watch(
+  () => waiting.value,
+  (value) => {
+    switch (value) {
+      case true:
+        defferedWaiting.value = true;
+        break;
+      case false:
+        setTimeout(() => {
+          defferedWaiting.value = false;
+        }, 500);
+        break;
+    }
+  }
+);
 </script>
 
 <style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerOverlay.vue.d.ts

@@ -1,30 +1,13 @@
-import IconPlay from './icons/Play.vue.js';
-import IconPause from './icons/Pause.vue.js';
-import IconWaiting from './icons/Waiting.vue.js';
-declare const mouseEntered: import("vue").Ref<boolean, boolean>, playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>;
-declare const togglePlay: () => void;
-declare const idle: import("vue").ShallowRef<boolean>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_8: {}, __VLS_13: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_12: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    waitingIcon?: (props: typeof __VLS_3) => any;
+    waitingIcon?: (props: typeof __VLS_7) => any;
 } & {
-    playIcon?: (props: typeof __VLS_8) => any;
+    playIcon?: (props: typeof __VLS_12) => any;
 } & {
-    pauseIcon?: (props: typeof __VLS_13) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    IconPlay: typeof IconPlay;
-    IconPause: typeof IconPause;
-    IconWaiting: typeof IconWaiting;
-    mouseEntered: typeof mouseEntered;
-    playing: typeof playing;
-    waiting: typeof waiting;
-    togglePlay: typeof togglePlay;
-    idle: typeof idle;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    pauseIcon?: (props: typeof __VLS_17) => any;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/MagicPlayerPoster.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-show="!loaded || !touched" class="magic-player-poster">
+  <div v-show="isVisible" class="magic-player-poster">
     <slot />
   </div>
 </template>
 
 <script setup>
-import { inject, toRefs } from "vue";
+import { inject, toRefs, computed } from "vue";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
 const instanceId = inject(MagicPlayerInstanceId, void 0);
@@ -16,7 +16,10 @@ if (!instanceId) {
 }
 const { initializeState } = usePlayerState(instanceId);
 const state = initializeState();
-const { loaded, touched } = toRefs(state);
+const { loaded, started } = toRefs(state);
+const isVisible = computed(() => {
+  return !loaded.value || !started.value;
+});
 </script>
 
 <style>