@maas/vue-equipment 0.12.0 → 0.13.0

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

@@ -5,61 +5,48 @@ export type MagicPlayerProps = {
     src: string;
     ratio?: string;
     fill?: boolean;
+    autoplay?: boolean;
 };
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    fill: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    srcType: {
-        type: import("vue").PropType<SourceType>;
-        default: string;
-    };
-    src: {
-        type: import("vue").PropType<string>;
-        required: true;
-        default: string;
-    };
-    ratio: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    fill: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    srcType: {
-        type: import("vue").PropType<SourceType>;
-        default: string;
-    };
-    src: {
-        type: import("vue").PropType<string>;
-        required: true;
-        default: string;
-    };
-    ratio: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicPlayerProps>, {
+    srcType: string;
+    src: string;
+    ratio: string;
+    fill: boolean;
+    autoplay: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicPlayerProps>, {
+    srcType: string;
+    src: string;
+    ratio: string;
+    fill: boolean;
+    autoplay: boolean;
+}>>>, {
     fill: boolean;
     srcType: SourceType;
     src: string;
     ratio: string;
+    autoplay: boolean;
 }, {}>, {
     poster?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -72,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref } from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -99,11 +99,9 @@ const { instance } = usePlayerApi({
   popoverRef: popoverRef,
 })
 
-const { playing, waiting, muted } = toRefs(instance.value?.mediaApi)
-const { touched, mouseEntered, isFullscreen } = toRefs(
-  instance.value?.playerApi,
-)
-const { popoverOffsetX, seekedTime } = toRefs(instance.value?.controlsApi)
+const { playing, waiting, muted } = instance.value.mediaApi
+const { touched, mouseEntered, isFullscreen } = instance.value.playerApi
+const { popoverOffsetX, seekedTime } = instance.value.controlsApi
 
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } =
   instance.value.playerApi
@@ -111,137 +109,8 @@ const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } =
 const { idle } = useIdle(3000)
 </script>
 
-<style lang="css">
-:root {
-  --magic-player-controls-height: 3rem;
-  --magic-player-controls-padding: 0.75rem;
-  --magic-player-controls-bottom: 1.5rem;
-  --magic-player-controls-left: 1.5rem;
-  --magic-player-controls-width: calc(
-    100% - (var(--magic-player-controls-left) * 2)
-  );
-  --magic-player-controls-gap: 1rem;
-  --magic-player-controls-border-radius: 50rem;
-  --magic-player-controls-background-color: rgba(32, 32, 32, 0.8);
-  --magic-player-controls-backdrop-filter: blur(80px);
-  --magic-player-controls-color: rgba(255, 255, 255, 1);
-  --magic-player-controls-icon-width: 1.25rem;
-  --magic-player-controls-transition-duration: 300ms;
-  --magic-player-controls-transition-timing-function: ease;
-}
-
-@media (max-width: 640px) {
-  :root {
-    --magic-player-controls-height: 2.5rem;
-    --magic-player-controls-bottom: 0.75rem;
-    --magic-player-controls-padding: 0.5rem;
-  }
-}
-
-.magic-player-controls {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  pointer-events: none;
-}
-
-.magic-player-controls__bar {
-  position: absolute;
-  width: var(--magic-player-controls-width);
-  bottom: var(--magic-player-controls-bottom);
-  left: var(--magic-player-controls-left);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--magic-player-controls-gap);
-  transition-duration: var(--magic-player-controls-transition-duration);
-  transition-timing-function: var(
+<style>
+:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background-color:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-icon-width:1.25rem;--magic-player-controls-transition-duration:300ms;--magic-player-controls-transition-timing-function:ease}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;transition-duration:var(--magic-player-controls-transition-duration);transition-property:opacity,transform;transition-timing-function:var(
     --magic-player-controls-transition-timing-function
-  );
-  transition-property: opacity, transform;
-  pointer-events: auto;
-}
-
-.magic-player-controls__bar--inner {
-  width: 100%;
-  box-sizing: border-box;
-  height: var(--magic-player-controls-height);
-  padding: 0 var(--magic-player-controls-padding);
-  background-color: var(--magic-player-controls-background-color);
-  backdrop-filter: var(--magic-player-controls-backdrop-filter);
-  color: var(--magic-player-controls-color);
-  border-radius: var(--magic-player-controls-border-radius);
-  display: flex;
-  align-items: center;
-}
-
-.magic-player-controls__item {
-  display: inline-flex;
-  align-items: center;
-  user-select: none;
-}
-
-.magic-player-controls__item.-shrink-0 {
-  flex-shrink: 0;
-}
-
-.magic-player-controls__item.-grow {
-  flex-grow: 1;
-}
-
-.magic-player-controls__item button {
-  background-color: transparent;
-  color: inherit;
-  border: 0;
-  outline: none;
-  appearance: none;
-  padding: 0;
-  border-radius: 0;
-  cursor: pointer;
-  width: var(--magic-player-controls-height);
-  height: var(--magic-player-controls-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.magic-player-controls__item button svg {
-  display: block;
-  width: var(--magic-player-controls-icon-width);
-  height: auto;
-}
-
-.magic-player-controls__timeline {
-  width: 100%;
-}
-
-.magic-player-controls:not(.-standalone).-playing.-idle
-  .magic-player-controls__bar,
-.magic-player-controls:not(.-standalone).-playing.-not-hover
-  .magic-player-controls__bar,
-.magic-player-controls:not(.-standalone).-untouched
-  .magic-player-controls__bar {
-  opacity: 0;
-  transform: translateY(25%);
-}
-
-.magic-player-controls.-standalone {
-  position: relative;
-  inset: unset;
-  --magic-player-controls-width: 100%;
-  --magic-player-controls-bottom: 0;
-  --magic-player-controls-left: 0;
-  --magic-player-controls-padding: 0;
-  --magic-player-controls-background-color: unset;
-  --magic-player-controls-border-radius: unset;
-  --magic-player-controls-background-color: transparent;
-  --magic-player-controls-backdrop-filter: none;
-  --magic-player-controls-transition-duration: unset;
-  --magic-player-controls-transition-timing-function: unset;
-}
-
-.magic-player-controls.-standalone .magic-player-controls__bar {
-  position: relative;
-}
+  );width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background-color);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-height)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls:not(.-standalone).-playing.-idle .magic-player-controls__bar,.magic-player-controls:not(.-standalone).-playing.-not-hover .magic-player-controls__bar,.magic-player-controls:not(.-standalone).-untouched .magic-player-controls__bar{opacity:0;transform:translateY(25%)}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background-color:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background-color:transparent;--magic-player-controls-backdrop-filter:none;--magic-player-controls-transition-duration:unset;--magic-player-controls-transition-timing-function:unset}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
 </style>

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

@@ -1,14 +1,7 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}>>, {}, {}>, {
+interface Props {
+    id: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     seekPopover?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
@@ -18,6 +11,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     fullscreenEnterIcon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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/MagicPlayerMuxPopover.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { shallowRef, onMounted, watch, computed, toRefs, type Ref } from 'vue'
+import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
@@ -39,7 +39,7 @@ const props = defineProps<Props>()
 
 const { instance } = usePlayerApi(props.id)
 
-const { seekedTime } = toRefs(instance.value.controlsApi)
+const { seekedTime } = instance.value.controlsApi
 const { pixelRatio } = useDevicePixelRatio()
 
 const canvas = shallowRef() as Ref<HTMLCanvasElement>
@@ -115,18 +115,6 @@ onMounted(init)
 watch(() => seekedTime?.value, drawFrame)
 </script>
 
-<style lang="css">
-:root {
-  --magic-player-popover-border-radius: 0.25rem;
-}
-
-.magic-player-mux-popover {
-  border-radius: var(--magic-player-popover-border-radius);
-  overflow: hidden;
-}
-
-.magic-player-mux-popover canvas {
-  width: 100%;
-  height: auto;
-}
+<style>
+:root{--magic-player-popover-border-radius:0.25rem}.magic-player-mux-popover{border-radius:var(--magic-player-popover-border-radius);overflow:hidden}.magic-player-mux-popover canvas{height:auto;width:100%}
 </style>

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

@@ -1,20 +1,15 @@
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    playbackId: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-    playbackId: {
-        type: import("vue").PropType<string>;
+type Props = {
+    id: string;
+    playbackId: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
     };
-}>>, {}, {}>;
-export default _default;
+};

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

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import {} from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -49,49 +49,12 @@ const props = defineProps<Props>()
 
 const { instance } = usePlayerApi(props.id)
 
-const { playing, waiting } = toRefs(instance.value.mediaApi)
-const { mouseEntered } = toRefs(instance.value.playerApi)
-const { togglePlay } = instance.value.playerApi
+const { playing, waiting } = instance.value.mediaApi
+const { mouseEntered, togglePlay } = instance.value.playerApi
 
 const { idle } = useIdle(3000)
 </script>
 
-<style lang="css">
-:root {
-  --magic-player-overlay-background-color: rgba(0, 0, 0, 0.3);
-  --magic-player-overlay-color: rgba(255, 255, 255, 1);
-  --magic-player-overlay-button-size: 2.5rem;
-}
-
-.magic-player-overlay {
-  position: absolute;
-  inset: 0;
-  background-color: var(--magic-player-overlay-background-color);
-  color: var(--magic-player-overlay-color);
-  transition-duration: 300ms;
-  transition-property: opacity;
-  transition-timing-function: ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.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);
-  height: var(--magic-player-overlay-button-size);
-}
-
-.magic-player-overlay.-playing.-idle,
-.magic-player-overlay.-playing.-not-hover {
-  opacity: 0;
-}
+<style>
+:root{--magic-player-overlay-background-color:rgba(0,0,0,.3);--magic-player-overlay-color:#fff;--magic-player-overlay-button-size:2.5rem}.magic-player-overlay{align-items:center;background-color:var(--magic-player-overlay-background-color);color:var(--magic-player-overlay-color);cursor:pointer;display:flex;inset:0;justify-content:center;position:absolute;transition-duration:.3s;transition-property:opacity;transition-timing-function: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);outline:none;padding:0;width:var(--magic-player-overlay-button-size)}.magic-player-overlay.-playing.-idle,.magic-player-overlay.-playing.-not-hover{opacity:0}
 </style>

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

@@ -1,19 +1,21 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}>>, {}, {}>, {
+interface Props {
+    id: string;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
     waitingIcon?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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/MagicPlayerTimeline.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import {} from 'vue'
 import { usePlayerApi } from '../composables/usePlayerApi'
 
 interface Props {
@@ -51,7 +51,7 @@ const {
   seekedPercentage,
   scrubbedPercentage,
   bufferedPercentage,
-} = toRefs(instance.value.controlsApi)
+} = instance.value.controlsApi
 
 const {
   onMouseenter,
@@ -62,105 +62,6 @@ const {
 } = instance.value.controlsApi
 </script>
 
-<style lang="css">
-:root {
-  --magic-player-target-height: 56px;
-  --magic-player-track-height: 4px;
-  --magic-player-track-bg-color: rgba(250, 250, 250, 0.15);
-  --magic-player-thumb-size: 1rem;
-  --magic-player-thumb-bg-color: rgba(250, 250, 250, 1);
-}
-
-.magic-player-timeline {
-  position: relative;
-  width: 100%;
-  height: var(--magic-player-track-height);
-  display: flex;
-  align-items: center;
-}
-
-.magic-player-timeline__target {
-  position: relative;
-  width: 100%;
-  height: var(--magic-player-target-height);
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.magic-player-timeline__slider-track {
-  position: relative;
-  width: 100%;
-  height: var(--magic-player-track-height);
-  background: var(--magic-player-track-bg-color);
-  border-radius: 50rem;
-}
-
-.magic-player-timeline__slider-inner-track {
-  position: relative;
-  border-radius: 50rem;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
-.magic-player-timeline__slider-thumb {
-  position: absolute;
-  width: var(--magic-player-track-height);
-  height: var(--magic-player-track-height);
-  z-index: 10;
-}
-
-.magic-player-timeline__slider-thumb-handle {
-  position: absolute;
-  width: var(--magic-player-thumb-size);
-  height: var(--magic-player-thumb-size);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0);
-  transition: transform 300ms ease;
-  z-index: 10;
-  background-color: var(--magic-player-thumb-bg-color);
-  border-radius: 50rem;
-}
-
-.magic-player-timeline__slider-scrubbed,
-.magic-player-timeline__slider-seeked,
-.magic-player-timeline__slider-buffered {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin-left: calc(-100% + var(--magic-player-track-height));
-  background: currentColor;
-  border-radius: 50rem;
-}
-
-.magic-player-timeline__slider-scrubbed {
-  z-index: 1;
-  min-width: var(--magic-player-track-height);
-  display: flex;
-}
-
-.magic-player-timeline__slider-seeked {
-  opacity: 0.25;
-}
-
-.magic-player-timeline__slider-buffered {
-  opacity: 0.15;
-}
-
-.magic-player-timeline:hover .magic-player-timeline__slider-thumb-handle {
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.magic-player-timeline__seek-popover {
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-  transform: translateX(-50%);
-}
+<style>
+:root{--magic-player-target-height:56px;--magic-player-track-height:4px;--magic-player-track-bg-color:hsla(0,0%,98%,.15);--magic-player-thumb-size:1rem;--magic-player-thumb-bg-color:#fafafa}.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)}.magic-player-timeline__slider-track{background:var(--magic-player-track-bg-color);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-bg-color);border-radius:50rem;height:var(--magic-player-thumb-size);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .3s ease;width:var(--magic-player-thumb-size);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:translate(-50%,-50%) 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,12 +1,14 @@
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: import("vue").PropType<string>;
-        required: true;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: import("vue").PropType<string>;
+interface Props {
+    id: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
     };
-}>>, {}, {}>;
-export default _default;
+};

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

@@ -12,27 +12,5 @@
 </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(360deg);
-  }
-  100% {
-    stroke-dasharray: 1, 200;
-    transform: rotate(720deg);
-  }
-}
+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)}}
 </style>

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

@@ -5,7 +5,7 @@ export declare function useControlsApi(args: UseControlsApiArgs): {
     seekedTime: import("vue").Ref<number>;
     seekedPercentage: import("vue").Ref<number>;
     scrubbedPercentage: import("vue").Ref<number>;
-    bufferedPercentage: import("vue").ComputedRef<any>;
+    bufferedPercentage: import("vue").ComputedRef<number>;
     thumbPercentage: import("vue").Ref<number>;
     popoverOffsetX: import("vue").Ref<number>;
     onMouseenter: () => void;