@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,64 +1,117 @@
-<template>
-  <div
-    class="magic-player-overlay"
-    :class="{
-      '-playing': playing,
-      '-paused': !playing,
-      '-idle': idle,
-      '-not-idle': !idle,
-      '-hover': mouseEntered,
-      '-not-hover': !mouseEntered,
-    }"
-    @click.stop="togglePlay"
-  >
-    <slot>
-      <template v-if="waiting">
-        <button 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">
-          <slot name="playIcon">
-            <icon-play />
-          </slot>
-        </button>
-        <button v-else class="magic-player-overlay__button">
-          <slot name="pauseIcon">
-            <icon-pause />
-          </slot>
-        </button>
-      </template>
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useIdle } from '@vueuse/core'
-import IconPlay from './icons/Play.vue'
-import IconPause from './icons/Pause.vue'
-import IconWaiting from './icons/Waiting.vue'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, withModifiers as _withModifiers } from "vue";
+const _hoisted_1 = ["data-playing", "data-paused", "data-waiting", "data-idle", "data-hover"];
+const _hoisted_2 = {
+  key: 0,
+  class: "magic-player-overlay__button"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "magic-player-overlay__button"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "magic-player-overlay__button"
+};
+import { inject } from "vue";
+import { useIdle } from "@vueuse/core";
+import IconPlay from "./icons/Play.vue";
+import IconPause from "./icons/Pause.vue";
+import IconWaiting from "./icons/Waiting.vue";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerOverlay",
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
+      );
+    }
+    const { playing, waiting } = usePlayerMediaApi({
+      id: instanceId
+    });
+    const { mouseEntered, togglePlay } = usePlayerVideoApi({
+      id: instanceId
+    });
+    const { idle } = useIdle(3e3);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-player-overlay",
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-idle": _unref(idle),
+        "data-hover": _unref(mouseEntered),
+        onClick: _cache[0] || (_cache[0] = _withModifiers(
+          //@ts-ignore
+          (...args) => _unref(togglePlay) && _unref(togglePlay)(...args),
+          ["stop"]
+        ))
+      }, [
+        _renderSlot(_ctx.$slots, "default", {}, () => [
+          _unref(waiting) ? (_openBlock(), _createElementBlock("button", _hoisted_2, [
+            _renderSlot(_ctx.$slots, "waitingIcon", {}, () => [
+              _createVNode(IconWaiting)
+            ])
+          ])) : (_openBlock(), _createElementBlock(
+            _Fragment,
+            { key: 1 },
+            [
+              !_unref(playing) ? (_openBlock(), _createElementBlock("button", _hoisted_3, [
+                _renderSlot(_ctx.$slots, "playIcon", {}, () => [
+                  _createVNode(IconPlay)
+                ])
+              ])) : (_openBlock(), _createElementBlock("button", _hoisted_4, [
+                _renderSlot(_ctx.$slots, "pauseIcon", {}, () => [
+                  _createVNode(IconPause)
+                ])
+              ]))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicPlayerOverlayProps {
-  id: string
+<style>
+.magic-player-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--magic-player-overlay-background, rgba(0, 0, 0, 0.3));
+  color: var(--magic-player-overlay-color, rgba(255, 255, 255, 1));
+  transition: var(--magic-player-overlay-transition, opacity 300ms ease);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
-const props = defineProps<MagicPlayerOverlayProps>()
-
-const { playing, waiting } = usePlayerMediaApi({
-  id: props.id,
-})
-const { mouseEntered, togglePlay } = usePlayerVideoApi({
-  id: props.id,
-})
+.magic-player-overlay__button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  width: var(--magic-player-overlay-button-size, 2.5rem);
+  height: var(--magic-player-overlay-button-size, 2.5rem);
+}
 
-const { idle } = useIdle(3000)
-</script>
+.magic-player-overlay[data-playing='true'][data-idle='true'] {
+  opacity: 0;
+}
 
-<style>
-.magic-player-overlay{align-items:center;background-color:var(--magic-player-overlay-background,rgba(0,0,0,.3));color:var(--magic-player-overlay-color,#fff);cursor:pointer;display:flex;inset:0;justify-content:center;position:absolute;transition:var(--magic-player-overlay-transition,opacity .3s ease)}.magic-player-overlay__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;height:var(--magic-player-overlay-button-size,2.5rem);outline:none;padding:0;width:var(--magic-player-overlay-button-size,2.5rem)}.magic-player-overlay.-playing.-idle,.magic-player-overlay.-playing.-not-hover{opacity:0}
+.magic-player-overlay[data-playing='true'][data-hover='false'] {
+  opacity: 0;
+}
 </style>

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

@@ -1,22 +1,34 @@
-interface MagicPlayerOverlayProps {
-    id: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        waitingIcon?(_: {}): any;
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,27 +1,46 @@
-<template>
-  <div v-show="!loaded || !touched" class="magic-player-poster">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
-
-export type MagicPlayerPosterProps = {
-  id: string
-}
-const props = defineProps<MagicPlayerPosterProps>()
-
-const { loaded } = usePlayerRuntime({
-  id: props.id,
-})
-
-const { touched } = usePlayerVideoApi({
-  id: props.id,
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-player-poster" };
+import { inject } from "vue";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerPoster",
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerPoster must be nested inside MagicPlayerProvider."
+      );
+    }
+    const { loaded } = usePlayerRuntime({
+      id: instanceId
+    });
+    const { touched } = usePlayerVideoApi({
+      id: instanceId
+    });
+    return (_ctx, _cache) => {
+      return _withDirectives((_openBlock(), _createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      )), [
+        [_vShow, !_unref(loaded) || !_unref(touched)]
+      ]);
+    };
+  }
+});
 </script>
 
 <style>
-.magic-player-poster{inset:0;position:absolute}
+.magic-player-poster {
+  position: absolute;
+  inset: 0;
+}
 </style>

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

@@ -1,19 +1,18 @@
-export type MagicPlayerPosterProps = {
-    id: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerPosterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerPosterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    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, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -0,0 +1,82 @@
+<script>
+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 { useTemplateRef, provide } from "vue";
+import defu from "defu";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import { defaultOptions } from "../utils/defaultOptions";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerProvider",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false }
+  },
+  setup(__props) {
+    const mappedOptions = defu(__props.options, defaultOptions);
+    const playerRef = useTemplateRef("player");
+    const { playing, waiting, muted } = usePlayerMediaApi({
+      id: __props.id
+    });
+    const { loaded } = usePlayerRuntime({
+      id: __props.id,
+      src: mappedOptions.src,
+      srcType: mappedOptions.srcType
+    });
+    const { onMouseenter, onMouseleave, isFullscreen, touched } = usePlayerVideoApi(
+      {
+        id: __props.id,
+        playerRef
+      }
+    );
+    provide(MagicPlayerInstanceId, __props.id);
+    provide(MagicPlayerOptionsKey, mappedOptions);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        ref: "player",
+        class: "magic-player-provider",
+        "data-mode": _unref(mappedOptions).mode,
+        "data-fullscreen": _unref(isFullscreen),
+        "data-touched": _unref(touched),
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-loaded": _unref(loaded),
+        "data-muted": _unref(muted),
+        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))
+      }, [
+        _renderSlot(_ctx.$slots, "default")
+      ], 40, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-player-provider {
+  position: relative;
+  width: 100%;
+}
+
+.magic-player-provider[data-mode='video'] {
+  overflow: hidden;
+  height: var(--magic-player-provider-height, auto);
+  aspect-ratio: var(--magic-player-provider-aspect-ratio, 16 / 9);
+  background: var(--magic-player-provider-background, #000);
+}
+
+.magic-player-provider[data-loaded='true'][data-mode='video'] {
+  --magic-player-provider-background: transparent;
+}
+
+.magic-player-provider[data-mode='audio'] {
+  position: relative;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,34 @@
+import { type MaybeRef } from 'vue';
+import type { MagicPlayerOptions } from '../types/index.js';
+interface MagicPlayerProps {
+    id: MaybeRef<string>;
+    options?: MagicPlayerOptions;
+}
+declare const mappedOptions: MagicPlayerOptions;
+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_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
+    mappedOptions: typeof mappedOptions;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    muted: typeof muted;
+    loaded: typeof loaded;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
+    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, {}, 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/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;