@maas/vue-equipment 1.0.0-beta.5 → 1.0.0-beta.7

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

@@ -0,0 +1,34 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+interface MagicAudioPlayerControlsProps {
+    id?: string;
+}
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
+declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+declare const idle: import("vue").Ref<boolean, 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> & {
+    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;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    play: typeof play;
+    pause: typeof pause;
+    touched: typeof touched;
+    mouseEntered: typeof mouseEntered;
+    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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,5 +1,5 @@
 interface MagicPlayerDisplayTimeProps {
     type?: 'current' | 'remaining' | 'duration';
 }
-declare const _default: import("vue").DefineComponent<MagicPlayerDisplayTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerDisplayTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicPlayerDisplayTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerDisplayTimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -2,7 +2,14 @@
 import { defineComponent as _defineComponent } from "vue";
 import { createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["width", "height"];
-import { shallowRef, onMounted, watch, computed, inject } from "vue";
+import {
+  shallowRef,
+  onMounted,
+  watch,
+  computed,
+  inject,
+  useTemplateRef
+} from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
@@ -21,7 +28,7 @@ export default /* @__PURE__ */ _defineComponent({
     }
     const { seekedTime } = usePlayerControlsApi({ id: instanceId });
     const { pixelRatio } = useDevicePixelRatio();
-    const canvasRef = shallowRef();
+    const canvasRef = useTemplateRef("canvas");
     const storyboard = shallowRef();
     let context = void 0;
     let image = void 0;
@@ -35,12 +42,17 @@ export default /* @__PURE__ */ _defineComponent({
     });
     function getMuxId(url) {
       const match = url?.match(/mux\.com\/([^\/]+)/);
-      return match?.[1];
+      return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
     }
     async function init() {
       const parsedPlaybackId = getMuxId(injectedOptions?.src);
       const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
-      if (!mappedPlaybackId) return;
+      if (!mappedPlaybackId) {
+        console.error(
+          "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
+        );
+        return;
+      }
       try {
         storyboard.value = await fetch(
           `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
@@ -49,8 +61,8 @@ export default /* @__PURE__ */ _defineComponent({
         image = new Image();
         image.src = storyboard.value.url;
         await image.decode();
-        context = canvasRef.value.getContext("2d");
-        context.drawImage(image, 0, 0);
+        context = canvasRef.value?.getContext("2d");
+        context?.drawImage(image, 0, 0);
       } catch (e) {
         console.error("Can not initialize timeine preview.", e);
       }
@@ -95,8 +107,7 @@ export default /* @__PURE__ */ _defineComponent({
         },
         [
           _createElementVNode("canvas", {
-            ref_key: "canvasRef",
-            ref: canvasRef,
+            ref: "canvas",
             width: storyboard.value?.tile_width,
             height: storyboard.value?.tile_height
           }, null, 8, _hoisted_1)

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

@@ -1,8 +1,5 @@
 interface MagicPlayerMuxPopoverProps {
     playbackId?: string;
 }
-type __VLS_TemplateRefs = {
-    canvasRef: typeof __VLS_nativeElements['canvas'];
-};
-declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,35 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+import IconWaiting from './icons/Waiting.vue.js';
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
+declare const mouseEntered: import("vue").ShallowRef<boolean, boolean>, togglePlay: () => void;
+declare const idle: import("vue").Ref<boolean, 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> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    waitingIcon?: (props: typeof __VLS_3) => any;
+} & {
+    playIcon?: (props: typeof __VLS_8) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_13) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {
+    IconPlay: typeof IconPlay;
+    IconPause: typeof IconPause;
+    IconWaiting: typeof IconWaiting;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    mouseEntered: typeof mouseEntered;
+    togglePlay: typeof togglePlay;
+    idle: typeof idle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,15 +1,15 @@
-declare const loaded: import("vue").Ref<boolean, boolean>;
-declare const touched: import("vue").Ref<boolean, boolean>;
+declare const loaded: import("vue").ShallowRef<boolean, boolean>;
+declare const touched: import("vue").ShallowRef<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<{}, {
     loaded: typeof loaded;
     touched: typeof touched;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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, {}, HTMLDivElement>;
+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;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,7 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
-import { ref, provide } from "vue";
+import { useTemplateRef, provide } from "vue";
 import defu from "defu";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
@@ -17,7 +17,7 @@ export default /* @__PURE__ */ _defineComponent({
   },
   setup(__props) {
     const mappedOptions = defu(__props.options, defaultOptions);
-    const playerRef = ref(void 0);
+    const playerRef = useTemplateRef("player");
     const { playing, waiting, muted } = usePlayerMediaApi({
       id: __props.id
     });
@@ -36,8 +36,7 @@ export default /* @__PURE__ */ _defineComponent({
     provide(MagicPlayerOptionsKey, mappedOptions);
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("div", {
-        ref_key: "playerRef",
-        ref: playerRef,
+        ref: "player",
         class: "magic-player-provider",
         "data-mode": _unref(mappedOptions).mode,
         "data-fullscreen": _unref(isFullscreen),

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

@@ -5,21 +5,16 @@ interface MagicPlayerProps {
     options?: MagicPlayerOptions;
 }
 declare const mappedOptions: MagicPlayerOptions;
-declare const playerRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
-declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, muted: import("vue").Ref<boolean, boolean>;
-declare const loaded: import("vue").Ref<boolean, boolean>;
-declare const onMouseenter: () => void, onMouseleave: () => void, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>;
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>, muted: import("vue").ShallowRef<boolean, boolean>;
+declare const loaded: import("vue").ShallowRef<boolean, boolean>;
+declare const onMouseenter: () => void, onMouseleave: () => void, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").ShallowRef<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_0: {};
+declare var __VLS_1: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_0) => any;
+    default?: (props: typeof __VLS_1) => any;
 }>;
-type __VLS_TemplateRefs = {
-    playerRef: typeof __VLS_nativeElements['div'];
-};
 declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
     mappedOptions: typeof mappedOptions;
-    playerRef: typeof playerRef;
     playing: typeof playing;
     waiting: typeof waiting;
     muted: typeof muted;
@@ -29,7 +24,7 @@ declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
     isFullscreen: typeof isFullscreen;
     touched: typeof touched;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, __VLS_TemplateRefs, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<MagicPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -2,7 +2,7 @@
 import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["preload", "loop", "muted"];
-import { ref, watch, onMounted, inject, onBeforeUnmount } from "vue";
+import { useTemplateRef, watch, onMounted, inject, onBeforeUnmount } from "vue";
 import {
   useElementVisibility,
   useEventListener,
@@ -23,7 +23,7 @@ export default /* @__PURE__ */ _defineComponent({
     if (!injectedOptions) {
       throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
     }
-    const elRef = ref(void 0);
+    const elRef = useTemplateRef("el");
     const isVisible = useElementVisibility(elRef);
     const { initialize, destroy } = usePlayerRuntime({
       id: injectedId,
@@ -69,8 +69,7 @@ export default /* @__PURE__ */ _defineComponent({
     });
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock("video", {
-        ref_key: "elRef",
-        ref: elRef,
+        ref: "el",
         class: "magic-player-video",
         playsinline: "",
         disablePictureInPicture: "",

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

@@ -1,5 +1,2 @@
-type __VLS_TemplateRefs = {
-    elRef: typeof __VLS_nativeElements['video'];
-};
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, __VLS_TemplateRefs, HTMLVideoElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -3,11 +3,19 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, normalizeStyle as _normalizeStyle, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, Transition as _Transition, withCtx as _withCtx } from "vue";
 const _hoisted_1 = ["data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-muted", "data-idle", "data-hover", "data-standalone"];
 const _hoisted_2 = { class: "magic-player-video-controls__bar" };
-const _hoisted_3 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_4 = { class: "magic-player-video-controls__item -grow" };
-const _hoisted_5 = { class: "magic-player-video-controls__item -shrink-0" };
-const _hoisted_6 = { class: "magic-player-video-controls__item -shrink-0" };
-import { ref, computed, inject, provide } from "vue";
+const _hoisted_3 = {
+  ref: "bar",
+  class: "magic-player-video-controls__bar--inner"
+};
+const _hoisted_4 = { class: "magic-player-video-controls__item -shrink-0" };
+const _hoisted_5 = { class: "magic-player-video-controls__item -grow" };
+const _hoisted_6 = {
+  ref: "track",
+  class: "magic-player-video-controls__timeline"
+};
+const _hoisted_7 = { class: "magic-player-video-controls__item -shrink-0" };
+const _hoisted_8 = { class: "magic-player-video-controls__item -shrink-0" };
+import { computed, inject, provide, useTemplateRef } from "vue";
 import { useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
@@ -40,9 +48,9 @@ export default /* @__PURE__ */ _defineComponent({
     const mappedTransition = computed(
       () => __props.transition ?? injectedOptions?.transition?.videoControls
     );
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
-    const popoverRef = ref(void 0);
+    const barRef = useTemplateRef("bar");
+    const trackRef = useTemplateRef("track");
+    const popoverRef = useTemplateRef("popover");
     const { playing, waiting, muted } = usePlayerMediaApi({
       id: mappedId.value
     });
@@ -106,8 +114,7 @@ export default /* @__PURE__ */ _defineComponent({
                   "div",
                   {
                     key: 0,
-                    ref_key: "popoverRef",
-                    ref: popoverRef,
+                    ref: "popover",
                     class: "magic-player-video-controls__popover",
                     style: _normalizeStyle({ marginLeft: `${_unref(popoverOffsetX)}%` })
                   },
@@ -121,13 +128,9 @@ export default /* @__PURE__ */ _defineComponent({
                 ]) : _createCommentVNode("v-if", true),
                 _createElementVNode(
                   "div",
-                  {
-                    ref_key: "barRef",
-                    ref: barRef,
-                    class: "magic-player-video-controls__bar--inner"
-                  },
+                  _hoisted_3,
                   [
-                    _createElementVNode("div", _hoisted_3, [
+                    _createElementVNode("div", _hoisted_4, [
                       !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
                         key: 0,
                         onClick: _cache[0] || (_cache[0] = //@ts-ignore
@@ -146,15 +149,11 @@ export default /* @__PURE__ */ _defineComponent({
                         ])
                       ]))
                     ]),
-                    _createElementVNode("div", _hoisted_4, [
+                    _createElementVNode("div", _hoisted_5, [
                       _renderSlot(_ctx.$slots, "timelineBefore"),
                       _createElementVNode(
                         "div",
-                        {
-                          ref_key: "trackRef",
-                          ref: trackRef,
-                          class: "magic-player-video-controls__timeline"
-                        },
+                        _hoisted_6,
                         [
                           _createVNode(_component_magic_player_timeline)
                         ],
@@ -163,7 +162,7 @@ export default /* @__PURE__ */ _defineComponent({
                       ),
                       _renderSlot(_ctx.$slots, "timelineAfter")
                     ]),
-                    _createElementVNode("div", _hoisted_5, [
+                    _createElementVNode("div", _hoisted_7, [
                       _unref(muted) ? (_openBlock(), _createElementBlock("button", {
                         key: 0,
                         onClick: _cache[2] || (_cache[2] = //@ts-ignore
@@ -182,7 +181,7 @@ export default /* @__PURE__ */ _defineComponent({
                         ])
                       ]))
                     ]),
-                    _createElementVNode("div", _hoisted_6, [
+                    _createElementVNode("div", _hoisted_8, [
                       _unref(isFullscreen) ? (_openBlock(), _createElementBlock("button", {
                         key: 0,
                         onClick: _cache[4] || (_cache[4] = //@ts-ignore

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

@@ -0,0 +1,73 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+import IconVolumeOn from './icons/VolumeOn.vue.js';
+import IconVolumeOff from './icons/VolumeOff.vue.js';
+import IconFullscreenEnter from './icons/FullscreenEnter.vue.js';
+import IconFullscreenExit from './icons/FullscreenExit.vue.js';
+import '@maas/vue-equipment/utils/css/animations/fade-up-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-up-out.css';
+interface MagicPlayerControlsProps {
+    id?: string;
+    standalone?: boolean;
+    transition?: string;
+}
+declare const mappedTransition: import("vue").ComputedRef<string | undefined>;
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>, muted: import("vue").ShallowRef<boolean, boolean>;
+declare const touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, play: () => void, pause: () => void, mute: () => void, unmute: () => void, enterFullscreen: () => void, exitFullscreen: () => void;
+declare const popoverOffsetX: import("vue").ShallowRef<number, number>, seekedTime: import("vue").ShallowRef<number, number>;
+declare const idle: import("vue").Ref<boolean, boolean>;
+declare const hidden: import("vue").ComputedRef<boolean>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_12: {}, __VLS_17: {}, __VLS_23: {}, __VLS_25: {}, __VLS_30: {}, __VLS_35: {}, __VLS_40: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    popover?: (props: typeof __VLS_5) => any;
+} & {
+    playIcon?: (props: typeof __VLS_7) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_12) => any;
+} & {
+    timelineBefore?: (props: typeof __VLS_17) => any;
+} & {
+    timelineAfter?: (props: typeof __VLS_23) => any;
+} & {
+    volumeOffIcon?: (props: typeof __VLS_25) => any;
+} & {
+    volumeOnIcon?: (props: typeof __VLS_30) => any;
+} & {
+    fullscreenExitIcon?: (props: typeof __VLS_35) => any;
+} & {
+    fullscreenEnterIcon?: (props: typeof __VLS_40) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicPlayerControlsProps, {
+    IconPlay: typeof IconPlay;
+    IconPause: typeof IconPause;
+    IconVolumeOn: typeof IconVolumeOn;
+    IconVolumeOff: typeof IconVolumeOff;
+    IconFullscreenEnter: typeof IconFullscreenEnter;
+    IconFullscreenExit: typeof IconFullscreenExit;
+    mappedTransition: typeof mappedTransition;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    muted: typeof muted;
+    touched: typeof touched;
+    mouseEntered: typeof mouseEntered;
+    isFullscreen: typeof isFullscreen;
+    play: typeof play;
+    pause: typeof pause;
+    mute: typeof mute;
+    unmute: typeof unmute;
+    enterFullscreen: typeof enterFullscreen;
+    exitFullscreen: typeof exitFullscreen;
+    popoverOffsetX: typeof popoverOffsetX;
+    seekedTime: typeof seekedTime;
+    idle: typeof idle;
+    hidden: typeof hidden;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicPlayer/src/components/icons/FullscreenEnter.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/FullscreenExit.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/Pause.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/Play.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/VolumeOff.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/VolumeOn.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/plugins/MagicPlayer/src/components/icons/Waiting.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -3,8 +3,8 @@ export type UsePlayerAudioApiArgs = {
     id: MaybeRef<string>;
 };
 export declare function usePlayerAudioApi(args: UsePlayerAudioApiArgs): {
-    mouseEntered: import("vue").Ref<boolean, boolean>;
-    touched: import("vue").Ref<boolean, boolean>;
+    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;

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

@@ -1,11 +1,11 @@
-import { ref, watch, toValue } from "vue";
+import { shallowRef, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerAudioApi(args) {
   const { id } = args;
   const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(false);
+  const touched = shallowRef(false);
+  const mouseEntered = shallowRef(false);
   function play() {
     playing.value = true;
   }

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

@@ -1,19 +1,19 @@
 import { type MaybeRef, type Ref } from 'vue';
 export type UsePlayerControlsApiArgs = {
     id: MaybeRef<string>;
-    barRef?: Ref<HTMLDivElement | undefined>;
-    trackRef?: Ref<HTMLDivElement | undefined>;
-    popoverRef?: Ref<HTMLDivElement | undefined>;
+    barRef?: Ref<HTMLDivElement | null>;
+    trackRef?: Ref<HTMLDivElement | null>;
+    popoverRef?: Ref<HTMLDivElement | null>;
 };
 export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
-    mouseEntered: Ref<boolean, boolean>;
-    dragging: Ref<boolean, boolean>;
-    seekedTime: Ref<number, number>;
-    seekedPercentage: Ref<number, number>;
-    scrubbedPercentage: Ref<number, number>;
+    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+    dragging: import("vue").ShallowRef<boolean, boolean>;
+    seekedTime: import("vue").ShallowRef<number, number>;
+    seekedPercentage: import("vue").ShallowRef<number, number>;
+    scrubbedPercentage: import("vue").ShallowRef<number, number>;
     bufferedPercentage: import("vue").ComputedRef<number>;
-    thumbPercentage: Ref<number, number>;
-    popoverOffsetX: Ref<number, number>;
+    thumbPercentage: import("vue").ShallowRef<number, number>;
+    popoverOffsetX: import("vue").ShallowRef<number, number>;
     onMouseenter: () => void;
     onMouseleave: () => void;
     onPointerdown: (e: MouseEvent | TouchEvent) => void;

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

@@ -1,4 +1,10 @@
-import { ref, computed, watch, toValue } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  watch,
+  toValue
+} from "vue";
 import {
   useResizeObserver,
   useEventListener,
@@ -9,20 +15,20 @@ import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 import { usePlayerVideoApi } from "./usePlayerVideoApi.mjs";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 export function usePlayerControlsApi(args) {
-  const resumePlay = ref(false);
+  const resumePlay = shallowRef(false);
   const barRect = ref(void 0);
   const trackRect = ref(void 0);
   const popoverRect = ref(void 0);
   const { id, trackRef, barRef, popoverRef } = args;
   const { buffered, duration, playing, currentTime } = usePlayerMediaApi({ id });
   const { play, pause, seek } = usePlayerVideoApi({ 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 dragging = shallowRef(false);
+  const mouseEntered = shallowRef(false);
+  const seekedTime = shallowRef(0);
+  const seekedPercentage = shallowRef(0);
+  const scrubbedPercentage = shallowRef(0);
+  const thumbPercentage = shallowRef(0);
+  const popoverOffsetX = shallowRef(0);
   const bufferedPercentage = computed(() => {
     if (!buffered) return 0;
     const endBuffer = buffered.value?.length > 0 ? buffered.value[0][1] : 0;