@maas/vue-equipment 0.39.2 → 1.0.0-beta.1

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

@@ -1,66 +1,112 @@
-<template>
-  <div class="magic-player-timeline">
-    <div
-      class="magic-player-timeline__target"
-      @mouseenter="onMouseenter"
-      @mouseleave="onMouseleave"
-      @pointerdown="onPointerdown"
-      @pointerup="onPointerup"
-      @pointermove="onPointermove"
-    >
-      <div class="magic-player-timeline__slider-track">
-        <div
-          class="magic-player-timeline__slider-thumb"
-          :style="{ left: `${scrubbedPercentage}%` }"
-        >
-          <div class="magic-player-timeline__slider-thumb-handle" />
-        </div>
-        <div class="magic-player-timeline__slider-inner-track">
-          <div
-            class="magic-player-timeline__slider-buffered"
-            :style="{ left: `${bufferedPercentage}%` }"
-          />
-          <div
-            v-show="mouseEntered"
-            class="magic-player-timeline__slider-seeked"
-            :style="{ left: `${seekedPercentage}%` }"
-          />
-          <div
-            class="magic-player-timeline__slider-scrubbed"
-            :style="{ left: `${scrubbedPercentage}%` }"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
-
-interface MagicPlayerTimelineProps {
-  id: string
-}
-
-const props = defineProps<MagicPlayerTimelineProps>()
-
-const {
-  mouseEntered,
-  seekedPercentage,
-  scrubbedPercentage,
-  bufferedPercentage,
-  onMouseenter,
-  onMouseleave,
-  onPointerdown,
-  onPointerup,
-  onPointermove,
-} = usePlayerControlsApi({
-  id: props.id,
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-player-timeline" };
+const _hoisted_2 = { class: "magic-player-timeline__track" };
+const _hoisted_3 = { class: "magic-player-timeline__inner-track" };
+import { inject } from "vue";
+import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerTimeline",
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerPoster must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
+      );
+    }
+    const {
+      mouseEntered,
+      seekedPercentage,
+      scrubbedPercentage,
+      bufferedPercentage,
+      onMouseenter,
+      onMouseleave,
+      onPointerdown,
+      onPointerup,
+      onPointermove
+    } = usePlayerControlsApi({
+      id: instanceId
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", _hoisted_1, [
+        _createElementVNode(
+          "div",
+          {
+            class: "magic-player-timeline__target",
+            onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
+            onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args)),
+            onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
+            (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
+            onPointerup: _cache[3] || (_cache[3] = //@ts-ignore
+            (...args) => _unref(onPointerup) && _unref(onPointerup)(...args)),
+            onPointermove: _cache[4] || (_cache[4] = //@ts-ignore
+            (...args) => _unref(onPointermove) && _unref(onPointermove)(...args))
+          },
+          [
+            _createElementVNode("div", _hoisted_2, [
+              _createElementVNode(
+                "div",
+                {
+                  class: "magic-player-timeline__thumb",
+                  style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
+                },
+                _cache[5] || (_cache[5] = [
+                  _createElementVNode(
+                    "div",
+                    { class: "magic-player-timeline__thumb-handle" },
+                    null,
+                    -1
+                    /* HOISTED */
+                  )
+                ]),
+                4
+                /* STYLE */
+              ),
+              _createElementVNode("div", _hoisted_3, [
+                _createElementVNode(
+                  "div",
+                  {
+                    class: "magic-player-timeline__buffered",
+                    style: _normalizeStyle({ left: `${_unref(bufferedPercentage)}%` })
+                  },
+                  null,
+                  4
+                  /* STYLE */
+                ),
+                _withDirectives(_createElementVNode(
+                  "div",
+                  {
+                    class: "magic-player-timeline__seeked",
+                    style: _normalizeStyle({ left: `${_unref(seekedPercentage)}%` })
+                  },
+                  null,
+                  4
+                  /* STYLE */
+                ), [
+                  [_vShow, _unref(mouseEntered)]
+                ]),
+                _createElementVNode(
+                  "div",
+                  {
+                    class: "magic-player-timeline__scrubbed",
+                    style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
+                  },
+                  null,
+                  4
+                  /* STYLE */
+                )
+              ])
+            ])
+          ],
+          32
+          /* NEED_HYDRATION */
+        )
+      ]);
+    };
+  }
+});
 </script>
-
-<style>
-:root{--magic-player-track-height:0.25rem}.magic-player-timeline{height:var(--magic-player-track-height)}.magic-player-timeline,.magic-player-timeline__target{align-items:center;display:flex;position:relative;width:100%}.magic-player-timeline__target{cursor:pointer;height:var(--magic-player-target-height,3.5rem)}.magic-player-timeline__slider-track{background:var(--magic-player-track-background,hsla(0,0%,98%,.15));border-radius:50rem;height:var(--magic-player-track-height);position:relative;width:100%}.magic-player-timeline__slider-inner-track{border-radius:50rem;height:100%;left:0;overflow:hidden;position:relative;top:0;width:100%;z-index:1}.magic-player-timeline__slider-thumb{height:var(--magic-player-track-height);position:absolute;width:var(--magic-player-track-height);z-index:10}.magic-player-timeline__slider-thumb-handle{background-color:var(
-    --magic-player-thumb-background,#fafafa
-  );border-radius:50rem;height:var(--magic-player-thumb-size,1rem);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:var(--magic-player-thumb-size,1rem);z-index:10}.magic-player-timeline__slider-buffered,.magic-player-timeline__slider-scrubbed,.magic-player-timeline__slider-seeked{background:currentColor;border-radius:50rem;height:100%;left:0;margin-left:calc(-100% + var(--magic-player-track-height));position:absolute;width:100%}.magic-player-timeline__slider-scrubbed{display:flex;min-width:var(--magic-player-track-height);z-index:1}.magic-player-timeline__slider-seeked{opacity:.25}.magic-player-timeline__slider-buffered{opacity:.15}.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle{transform:translate3d(-50%,-50%,0) scale(1)}.magic-player-timeline__seek-popover{bottom:100%;left:0;position:absolute;transform:translateX(-50%)}
-</style>

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

@@ -1,5 +1,2 @@
-interface MagicPlayerTimelineProps {
-    id: string;
-}
-declare const _default: import("vue").DefineComponent<MagicPlayerTimelineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerTimelineProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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

@@ -0,0 +1,94 @@
+<script>
+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 {
+  useElementVisibility,
+  useEventListener,
+  defaultWindow
+} from "@vueuse/core";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerVideo",
+  setup(__props) {
+    const injectedId = inject(MagicPlayerInstanceId, void 0);
+    const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+    if (!injectedId) {
+      throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
+    }
+    if (!injectedOptions) {
+      throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
+    }
+    const elRef = ref(void 0);
+    const isVisible = useElementVisibility(elRef);
+    const { initialize, destroy } = usePlayerRuntime({
+      id: injectedId,
+      mediaRef: elRef,
+      src: injectedOptions.src,
+      srcType: injectedOptions.srcType
+    });
+    const { muted, playing } = usePlayerMediaApi({
+      id: injectedId,
+      mediaRef: elRef
+    });
+    const { play, pause } = usePlayerVideoApi({
+      id: injectedId,
+      videoRef: elRef
+    });
+    function onWindowFocus() {
+      if (isVisible.value && !playing.value && injectedOptions?.autoplay) {
+        play();
+      }
+    }
+    useEventListener(defaultWindow, "focus", onWindowFocus);
+    watch(
+      isVisible,
+      (value) => {
+        if (value && !playing.value && injectedOptions.autoplay) {
+          play();
+        } else if (!value && playing.value) {
+          pause();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onMounted(() => {
+      initialize();
+      if (injectedOptions.autoplay) {
+        muted.value = true;
+      }
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("video", {
+        ref_key: "elRef",
+        ref: elRef,
+        class: "magic-player-video",
+        playsinline: "",
+        disablePictureInPicture: "",
+        preload: _unref(injectedOptions).preload,
+        loop: _unref(injectedOptions).loop,
+        muted: _unref(muted)
+      }, null, 8, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-player-video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+}
+</style>

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

@@ -0,0 +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, {}, any>;
+export default _default;

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

@@ -0,0 +1,222 @@
+<script>
+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";
+import { useIdle } from "@vueuse/core";
+import IconPlay from "./icons/Play.vue";
+import IconPause from "./icons/Pause.vue";
+import IconVolumeOn from "./icons/VolumeOn.vue";
+import IconVolumeOff from "./icons/VolumeOff.vue";
+import IconFullscreenEnter from "./icons/FullscreenEnter.vue";
+import IconFullscreenExit from "./icons/FullscreenExit.vue";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import "@maas/vue-equipment/utils/css/animations/fade-up-in.css";
+import "@maas/vue-equipment/utils/css/animations/fade-up-out.css";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerVideoControls",
+  props: {
+    id: { type: String, required: false },
+    standalone: { type: Boolean, required: false, default: false },
+    transition: { type: String, required: false }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedId = computed(() => __props.id ?? instanceId);
+    if (!mappedId.value) {
+      throw new Error(
+        "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
+      );
+    }
+    const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+    const mappedTransition = computed(
+      () => __props.transition ?? injectedOptions?.transition?.videoControls
+    );
+    const barRef = ref(void 0);
+    const trackRef = ref(void 0);
+    const popoverRef = ref(void 0);
+    const { playing, waiting, muted } = usePlayerMediaApi({
+      id: mappedId.value
+    });
+    const {
+      touched,
+      mouseEntered,
+      isFullscreen,
+      play,
+      pause,
+      mute,
+      unmute,
+      enterFullscreen,
+      exitFullscreen
+    } = usePlayerVideoApi({ id: mappedId.value });
+    const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
+      id: mappedId.value,
+      barRef,
+      trackRef,
+      popoverRef
+    });
+    const { idle } = useIdle(3e3);
+    const hidden = computed(() => {
+      switch (true) {
+        case __props.standalone:
+          return false;
+        case (playing.value && idle.value):
+          return true;
+        case (playing.value && !mouseEntered.value):
+          return true;
+        case !touched.value:
+          return true;
+        default:
+          return false;
+      }
+    });
+    provide(MagicPlayerInstanceId, mappedId.value);
+    return (_ctx, _cache) => {
+      const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-player-video-controls",
+        "data-fullscreen": _unref(isFullscreen),
+        "data-touched": _unref(touched),
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-muted": _unref(muted),
+        "data-idle": _unref(idle),
+        "data-hover": _unref(mouseEntered),
+        "data-standalone": _ctx.standalone
+      }, [
+        _createVNode(_Transition, {
+          name: mappedTransition.value,
+          persisted: ""
+        }, {
+          default: _withCtx(() => [
+            _withDirectives(_createElementVNode(
+              "div",
+              _hoisted_2,
+              [
+                _ctx.$slots.popover ? _withDirectives((_openBlock(), _createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    ref_key: "popoverRef",
+                    ref: popoverRef,
+                    class: "magic-player-video-controls__popover",
+                    style: _normalizeStyle({ marginLeft: `${_unref(popoverOffsetX)}%` })
+                  },
+                  [
+                    _renderSlot(_ctx.$slots, "popover")
+                  ],
+                  4
+                  /* STYLE */
+                )), [
+                  [_vShow, !!_unref(seekedTime) && _unref(touched)]
+                ]) : _createCommentVNode("v-if", true),
+                _createElementVNode(
+                  "div",
+                  {
+                    ref_key: "barRef",
+                    ref: barRef,
+                    class: "magic-player-video-controls__bar--inner"
+                  },
+                  [
+                    _createElementVNode("div", _hoisted_3, [
+                      !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
+                        key: 0,
+                        onClick: _cache[0] || (_cache[0] = //@ts-ignore
+                        (...args) => _unref(play) && _unref(play)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "playIcon", {}, () => [
+                          _createVNode(IconPlay)
+                        ])
+                      ])) : (_openBlock(), _createElementBlock("button", {
+                        key: 1,
+                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                        (...args) => _unref(pause) && _unref(pause)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "pauseIcon", {}, () => [
+                          _createVNode(IconPause)
+                        ])
+                      ]))
+                    ]),
+                    _createElementVNode("div", _hoisted_4, [
+                      _renderSlot(_ctx.$slots, "timelineBefore"),
+                      _createElementVNode(
+                        "div",
+                        {
+                          ref_key: "trackRef",
+                          ref: trackRef,
+                          class: "magic-player-video-controls__timeline"
+                        },
+                        [
+                          _createVNode(_component_magic_player_timeline, { id: _ctx.id }, null, 8, ["id"])
+                        ],
+                        512
+                        /* NEED_PATCH */
+                      ),
+                      _renderSlot(_ctx.$slots, "timelineAfter")
+                    ]),
+                    _createElementVNode("div", _hoisted_5, [
+                      _unref(muted) ? (_openBlock(), _createElementBlock("button", {
+                        key: 0,
+                        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                        (...args) => _unref(unmute) && _unref(unmute)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "volumeOffIcon", {}, () => [
+                          _createVNode(IconVolumeOff)
+                        ])
+                      ])) : (_openBlock(), _createElementBlock("button", {
+                        key: 1,
+                        onClick: _cache[3] || (_cache[3] = //@ts-ignore
+                        (...args) => _unref(mute) && _unref(mute)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "volumeOnIcon", {}, () => [
+                          _createVNode(IconVolumeOn)
+                        ])
+                      ]))
+                    ]),
+                    _createElementVNode("div", _hoisted_6, [
+                      _unref(isFullscreen) ? (_openBlock(), _createElementBlock("button", {
+                        key: 0,
+                        onClick: _cache[4] || (_cache[4] = //@ts-ignore
+                        (...args) => _unref(exitFullscreen) && _unref(exitFullscreen)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "fullscreenExitIcon", {}, () => [
+                          _createVNode(IconFullscreenExit)
+                        ])
+                      ])) : (_openBlock(), _createElementBlock("button", {
+                        key: 1,
+                        onClick: _cache[5] || (_cache[5] = //@ts-ignore
+                        (...args) => _unref(enterFullscreen) && _unref(enterFullscreen)(...args))
+                      }, [
+                        _renderSlot(_ctx.$slots, "fullscreenEnterIcon", {}, () => [
+                          _createVNode(IconFullscreenEnter)
+                        ])
+                      ]))
+                    ])
+                  ],
+                  512
+                  /* NEED_PATCH */
+                )
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [_vShow, !hidden.value]
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>

package/dist/plugins/MagicPlayer/src/components/{MagicPlayerControls.vue.d.ts → MagicPlayerVideoControls.vue.d.ts}

@@ -1,14 +1,14 @@
 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;
+    id?: string;
     standalone?: boolean;
     transition?: string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        seekPopover?(_: {}): any;
+        popover?(_: {}): any;
         playIcon?(_: {}): any;
         pauseIcon?(_: {}): any;
         timelineBefore?(_: {}): any;
@@ -26,11 +26,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {
-    transition: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerControlsProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerControlsProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
 type __VLS_WithTemplateSlots<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

@@ -12,5 +12,27 @@
 </template>
 
 <style scoped>
-svg>circle{fill:none;transform-origin:center;stroke-dasharray:1,200;stroke-dashoffset:0;animation:spinner 2.5s ease-in-out infinite;stroke:currentColor}@keyframes spinner{0%{stroke-dasharray:1,200;transform:rotate(0deg)}50%{stroke-dasharray:100,200;transform:rotate(1turn)}to{stroke-dasharray:1,200;transform:rotate(2turn)}}
+svg > circle {
+  fill: none;
+  transform-origin: center;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: spinner 2.5s ease-in-out infinite;
+  stroke: currentColor;
+}
+
+@keyframes spinner {
+  0% {
+    stroke-dasharray: 1, 200;
+    transform: rotate(0deg);
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    transform: rotate(360deg);
+  }
+  100% {
+    stroke-dasharray: 1, 200;
+    transform: rotate(720deg);
+  }
+}
 </style>

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.mjs

@@ -2,9 +2,8 @@ import { ref, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
 import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
 export function usePlayerAudioApi(args) {
-  const { playing, currentTime, muted } = usePlayerMediaApi({
-    id: args.id
-  });
+  const { id } = args;
+  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
   const touched = ref(false);
   const mouseEntered = ref(false);
   function play() {
@@ -38,7 +37,7 @@ export function usePlayerAudioApi(args) {
   });
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {
-    if (payload.id !== toValue(args.id)) return;
+    if (payload.id !== toValue(id)) return;
     if (payload.api === "player") {
       switch (payload.key) {
         case "mouseEntered":
@@ -52,7 +51,7 @@ export function usePlayerAudioApi(args) {
   });
   watch(mouseEntered, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "mouseEntered",
       value
@@ -60,7 +59,7 @@ export function usePlayerAudioApi(args) {
   });
   watch(touched, (value) => {
     emitter.emit("update", {
-      id: toValue(args.id),
+      id: toValue(id),
       api: "player",
       key: "touched",
       value