@maas/vue-equipment 0.11.6 → 0.12.0

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.11.5"
+  "version": "0.11.6"
 }

package/dist/nuxt/module.mjs

@@ -46,7 +46,7 @@ const functions = [
 	{
 		name: "MagicPlayer",
 		"package": "plugins",
-		lastUpdated: 1697181673000,
+		lastUpdated: 1699017517000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicPlayer/",
 		description: "player"
 	},

package/dist/plugins/MagicModal/src/composables/private/useModalStore.d.ts

@@ -1,5 +1,5 @@
 export declare function useModalStore(): {
     modalStore: import("vue").Ref<string[]>;
-    addIdToStore: (id: string) => void;
-    removeIdFromStore: (id: string) => void;
+    addInstance: (id: string) => void;
+    removeInstance: (id: string) => void;
 };

package/dist/plugins/MagicModal/src/composables/private/useModalStore.mjs

@@ -1,15 +1,15 @@
 import { ref } from "vue";
 let modalStore = ref([]);
 export function useModalStore() {
-  function addIdToStore(id) {
+  function addInstance(id) {
     modalStore.value.push(id);
   }
-  function removeIdFromStore(id) {
+  function removeInstance(id) {
     modalStore.value = modalStore.value.filter((x) => x !== id);
   }
   return {
     modalStore,
-    addIdToStore,
-    removeIdFromStore
+    addInstance,
+    removeInstance
   };
 }

package/dist/plugins/MagicModal/src/composables/useModalApi.mjs

@@ -14,13 +14,13 @@ export function useModalApi(id, options) {
   const mappedOptions = defu(options, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
   const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
-  const { modalStore, addIdToStore, removeIdFromStore } = useModalStore();
+  const { modalStore, addInstance, removeInstance } = useModalStore();
   const isActive = computed(() => modalStore.value.includes(mappedId.value));
   function open() {
-    addIdToStore(mappedId.value);
+    addInstance(mappedId.value);
   }
   function close() {
-    removeIdFromStore(mappedId.value);
+    removeInstance(mappedId.value);
   }
   function trapFocus() {
     if (focusTrap) {

package/dist/plugins/MagicPlayer/index.d.ts

@@ -1,15 +1,10 @@
 import type { Plugin } from 'vue';
 import MagicPlayer from './src/components/MagicPlayer.vue.js';
 import MagicPlayerControls from './src/components/MagicPlayerControls.vue.js';
+import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
 import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
 import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
-import { useMediaApi } from './src/composables/useMediaApi.js';
 import { usePlayerApi } from './src/composables/usePlayerApi.js';
-import { useProvidePlayer, useInjectPlayer } from './src/composables/usePlayer.js';
-import { useProvideControls, useInjectControls } from './src/composables/useControls.js';
-import { useRuntimeSourceProvider } from './src/composables/useRuntimeSourceProvider.js';
-import { MediaApiInjectionKey, PlayerApiInjectionKey, RuntimeSourceProviderInjectionKey, ControlsApiInjectionKey } from './src/symbols.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerTimeline, MagicPlayerMuxPopover, useMediaApi, usePlayerApi, useRuntimeSourceProvider, useProvidePlayer, useInjectPlayer, useProvideControls, useInjectControls, MediaApiInjectionKey, PlayerApiInjectionKey, RuntimeSourceProviderInjectionKey, ControlsApiInjectionKey, };
-export * from './src/symbols.js';
+export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerOverlay, MagicPlayerTimeline, MagicPlayerMuxPopover, usePlayerApi, };
 export type * from './src/types';

package/dist/plugins/MagicPlayer/index.mjs

@@ -1,25 +1,14 @@
 import MagicPlayer from "./src/components/MagicPlayer.vue";
 import MagicPlayerControls from "./src/components/MagicPlayerControls.vue";
+import MagicPlayerOverlay from "./src/components/MagicPlayerOverlay.vue";
 import MagicPlayerTimeline from "./src/components/MagicPlayerTimeline.vue";
 import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
-import { useMediaApi } from "./src/composables/useMediaApi.mjs";
 import { usePlayerApi } from "./src/composables/usePlayerApi.mjs";
-import { useProvidePlayer, useInjectPlayer } from "./src/composables/usePlayer.mjs";
-import {
-  useProvideControls,
-  useInjectControls
-} from "./src/composables/useControls.mjs";
-import { useRuntimeSourceProvider } from "./src/composables/useRuntimeSourceProvider.mjs";
-import {
-  MediaApiInjectionKey,
-  PlayerApiInjectionKey,
-  RuntimeSourceProviderInjectionKey,
-  ControlsApiInjectionKey
-} from "./src/symbols/index.mjs";
 const MagicPlayerPlugin = {
   install: (app) => {
     app.component("MagicPlayer", MagicPlayer);
     app.component("MagicPlayerControls", MagicPlayerControls);
+    app.component("MagicPlayerOverlay", MagicPlayerOverlay);
     app.component("MagicPlayerTimeline", MagicPlayerTimeline);
     app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopover);
   }
@@ -28,18 +17,8 @@ export {
   MagicPlayerPlugin,
   MagicPlayer,
   MagicPlayerControls,
+  MagicPlayerOverlay,
   MagicPlayerTimeline,
   MagicPlayerMuxPopover,
-  useMediaApi,
-  usePlayerApi,
-  useRuntimeSourceProvider,
-  useProvidePlayer,
-  useInjectPlayer,
-  useProvideControls,
-  useInjectControls,
-  MediaApiInjectionKey,
-  PlayerApiInjectionKey,
-  RuntimeSourceProviderInjectionKey,
-  ControlsApiInjectionKey
+  usePlayerApi
 };
-export * from "./src/symbols/index.mjs";

package/dist/plugins/MagicPlayer/nuxt.mjs

@@ -18,19 +18,7 @@ export default defineNuxtModule({
     });
     addImports({
       from: "@maas/vue-equipment/plugins/MagicPlayer",
-      name: "useProvidePlayer"
-    });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicPlayer",
-      name: "useInjectPlayer"
-    });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicPlayer",
-      name: "useProvideControls"
-    });
-    addImports({
-      from: "@maas/vue-equipment/plugins/MagicPlayer",
-      name: "useInjectControls"
+      name: "usePlayerApi"
     });
   }
 });

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

@@ -1,5 +1,11 @@
 <template>
-  <div ref="playerRef" class="magic-player" :style="computedStyle">
+  <div
+    ref="playerRef"
+    class="magic-player"
+    :style="computedStyle"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
     <video
       ref="videoRef"
       class="magic-player-video"
@@ -14,13 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, toRefs } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
-import { useProvidePlayer } from '../composables/usePlayer'
+import { usePlayerApi } from '../composables/usePlayerApi'
 
 import type { SourceType } from './../types'
 
 export type MagicPlayerProps = {
+  id: string
   srcType?: SourceType
   src: string
   ratio?: string
@@ -37,19 +44,23 @@ const props = withDefaults(defineProps<MagicPlayerProps>(), {
 const playerRef = ref<HTMLDivElement | undefined>(undefined)
 const videoRef = ref<HTMLVideoElement | undefined>(undefined)
 
-const { mediaApi, playerApi, runtimeProvider } = useProvidePlayer({
-  playerRef: playerRef,
+// Initialize instance
+const { instance } = usePlayerApi({
+  id: props.id,
   videoRef: videoRef,
-  src: props.src,
+  playerRef: playerRef,
   srcType: props.srcType,
+  src: props.src,
 })
-const { playing } = mediaApi
-const { touched, pause } = playerApi
-const { loaded } = runtimeProvider
+
+const { playing } = toRefs(instance.value?.mediaApi)
+const { touched } = toRefs(instance.value?.playerApi)
+const { onMouseenter, onMouseleave } = instance.value?.playerApi
+const { loaded } = toRefs(instance.value?.runtimeProvider)
 
 useIntersectionObserver(playerRef, ([{ isIntersecting }]) => {
   if (!isIntersecting && playing.value) {
-    pause()
+    instance.value.playerApi.pause()
   }
 })
 
@@ -70,12 +81,6 @@ const computedStyle = computed(() => {
         : undefined,
   }
 })
-
-defineExpose({
-  playerApi,
-  mediaApi,
-  runtimeProvider,
-})
 </script>
 
 <style lang="css">

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

@@ -1,5 +1,6 @@
 import type { SourceType } from './../types';
 export type MagicPlayerProps = {
+    id: string;
     srcType?: SourceType;
     src: string;
     ratio?: string;
@@ -10,6 +11,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
     srcType: {
         type: import("vue").PropType<SourceType>;
         default: string;
@@ -23,39 +28,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-}, {
-    playerApi: {
-        isFullscreen: import("vue").Ref<boolean>;
-        touched: import("vue").Ref<boolean>;
-        play: () => void;
-        pause: () => void;
-        togglePlay: () => void;
-        seek: (time: number) => void;
-        mute: () => void;
-        unmute: () => void;
-        enterFullscreen: () => Promise<void>;
-        exitFullscreen: () => Promise<void>;
-        toggleFullscreen: () => Promise<void>;
-    };
-    mediaApi: {
-        currentTime: import("vue").Ref<number>;
-        duration: import("vue").Ref<number>;
-        waiting: import("vue").Ref<boolean>;
-        seeking: import("vue").Ref<boolean>;
-        ended: import("vue").Ref<boolean>;
-        stalled: import("vue").Ref<boolean>;
-        buffered: import("vue").Ref<[number, number][]>;
-        playing: import("vue").Ref<boolean>;
-        rate: import("vue").Ref<number>;
-        volume: import("vue").Ref<number>;
-        muted: import("vue").Ref<boolean>;
-    };
-    runtimeProvider: import("../composables/useRuntimeSourceProvider").UseRuntimeSourceProviderReturn;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, 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;

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

@@ -10,27 +10,10 @@
       '-waiting': waiting,
       '-idle': idle,
       '-not-idle': !idle,
-      '-hover': isMouseEnter,
-      '-not-hover': !isMouseEnter,
+      '-hover': mouseEntered,
+      '-not-hover': !mouseEntered,
     }"
-    @mouseenter="isMouseEnter = true"
-    @mouseleave="isMouseEnter = false"
   >
-    <div class="magic-player-controls__overlay" @click.stop="togglePlay">
-      <template v-if="waiting">
-        <button>
-          <icon-waiting />
-        </button>
-      </template>
-      <template v-else>
-        <button v-if="!playing">
-          <icon-play />
-        </button>
-        <button v-else>
-          <icon-pause />
-        </button>
-      </template>
-    </div>
     <div class="magic-player-controls__bar">
       <div
         v-if="$slots.seekPopover"
@@ -44,31 +27,43 @@
       <div class="magic-player-controls__bar--inner" ref="barRef">
         <div class="magic-player-controls__item -shrink-0">
           <button v-if="!playing" @click="play">
-            <icon-play />
+            <slot name="playIcon">
+              <icon-play />
+            </slot>
           </button>
           <button v-else @click="pause">
-            <icon-pause />
+            <slot name="pauseIcon">
+              <icon-pause />
+            </slot>
           </button>
         </div>
         <div class="magic-player-controls__item -grow">
           <div class="magic-player-controls__timeline" ref="trackRef">
-            <magic-player-timeline />
+            <magic-player-timeline :id="id" />
           </div>
         </div>
         <div class="magic-player-controls__item -shrink-0">
           <button v-if="muted" @click="unmute">
-            <icon-volume-off />
+            <slot name="volumeOffIcon">
+              <icon-volume-off />
+            </slot>
           </button>
           <button v-else @click="mute">
-            <icon-volume-on />
+            <slot name="volumeOnIcon">
+              <icon-volume-on />
+            </slot>
           </button>
         </div>
         <div class="magic-player-controls__item -shrink-0">
           <button v-if="isFullscreen" @click="exitFullscreen">
-            <icon-fullscreen-exit />
+            <slot name="fullscreenExitIcon">
+              <icon-fullscreen-exit />
+            </slot>
           </button>
           <button v-else @click="enterFullscreen">
-            <icon-fullscreen-enter />
+            <slot name="fullscreenEnterIcon">
+              <icon-fullscreen-enter />
+            </slot>
           </button>
         </div>
       </div>
@@ -77,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -85,59 +80,54 @@ 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 IconWaiting from './icons/Waiting.vue'
-import { useInjectPlayer } from '../composables/usePlayer'
-import { useProvideControls } from '../composables/useControls'
+import { usePlayerApi } from '../composables/usePlayerApi'
+
+interface Props {
+  id: string
+}
+
+const props = defineProps<Props>()
 
 const barRef = ref<HTMLDivElement | undefined>(undefined)
 const trackRef = ref<HTMLDivElement | undefined>(undefined)
 const popoverRef = ref<HTMLDivElement | undefined>(undefined)
 
-const { mediaApi, playerApi } = useInjectPlayer()
-const { controlsApi } = useProvideControls({
+const { instance } = usePlayerApi({
+  id: props.id,
   barRef: barRef,
   trackRef: trackRef,
   popoverRef: popoverRef,
 })
 
-const { playing, muted, waiting } = mediaApi
-const {
-  touched,
-  isFullscreen,
-  play,
-  pause,
-  togglePlay,
-  mute,
-  unmute,
-  enterFullscreen,
-  exitFullscreen,
-} = playerApi
+const { playing, waiting, muted } = toRefs(instance.value?.mediaApi)
+const { touched, mouseEntered, isFullscreen } = toRefs(
+  instance.value?.playerApi,
+)
+const { popoverOffsetX, seekedTime } = toRefs(instance.value?.controlsApi)
 
-const { popoverOffsetX, seekedTime } = controlsApi
+const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } =
+  instance.value.playerApi
 
 const { idle } = useIdle(3000)
-const isMouseEnter = ref(false)
-
-defineExpose({
-  controlsApi,
-})
 </script>
 
 <style lang="css">
 :root {
   --magic-player-controls-height: 3rem;
-  --magic-player-controls-bottom: 1.5rem;
   --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-overlay-background-color: rgba(0, 0, 0, 0.3);
-  --magic-player-controls-overlay-color: rgba(255, 255, 255, 1);
   --magic-player-controls-transition-duration: 300ms;
-  --magic-player-controls-transition-timing-function: ease: ;
+  --magic-player-controls-transition-timing-function: ease;
 }
 
 @media (max-width: 640px) {
@@ -151,41 +141,15 @@ defineExpose({
 .magic-player-controls {
   position: absolute;
   inset: 0;
-}
-
-.magic-player-controls__overlay {
-  position: absolute;
-  inset: 0;
-  background-color: var(--magic-player-controls-overlay-background-color);
-  color: var(--magic-player-controls-overlay-color);
-  transition-duration: 300ms;
-  transition-property: opacity;
-  transition-timing-function: ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.magic-player-controls__overlay button {
-  background-color: transparent;
-  color: inherit;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  outline: none;
-  appearance: none;
-  cursor: pointer;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 100%;
+  pointer-events: none;
 }
 
 .magic-player-controls__bar {
   position: absolute;
-  width: calc(100% - (var(--magic-player-controls-bottom) * 2));
+  width: var(--magic-player-controls-width);
   bottom: var(--magic-player-controls-bottom);
-  left: 50%;
-  transform: translateX(-50%);
+  left: var(--magic-player-controls-left);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -196,6 +160,7 @@ defineExpose({
     --magic-player-controls-transition-timing-function
   );
   transition-property: opacity, transform;
+  pointer-events: auto;
 }
 
 .magic-player-controls__bar--inner {
@@ -251,15 +216,32 @@ defineExpose({
   width: 100%;
 }
 
-.magic-player-controls.-playing.-idle .magic-player-controls__bar,
-.magic-player-controls.-playing.-not-hover .magic-player-controls__bar,
-.magic-player-controls.-untouched .magic-player-controls__bar {
+.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: translate(-50%, 25%);
+  transform: translateY(25%);
 }
 
-.magic-player-controls.-playing.-idle .magic-player-controls__overlay,
-.magic-player-controls.-playing.-not-hover .magic-player-controls__overlay {
-  opacity: 0;
+.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;
 }
 </style>

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

@@ -1,21 +1,21 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
-    controlsApi: {
-        entered: import("vue").Ref<boolean>;
-        dragging: import("vue").Ref<boolean>;
-        seekedTime: import("vue").Ref<number>;
-        seekedPercentage: import("vue").Ref<number>;
-        scrubbedPercentage: import("vue").Ref<number>;
-        bufferedPercentage: import("vue").ComputedRef<any>;
-        thumbPercentage: import("vue").Ref<number>;
-        popoverOffsetX: import("vue").Ref<number>;
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-        onPointerDown: (e: MouseEvent | TouchEvent) => void;
-        onPointerUp: () => void;
-        onPointerMove: (e: MouseEvent | TouchEvent) => void;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<string>;
+        required: true;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+}, {}, 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;
+    };
+}>>, {}, {}>, {
     seekPopover?(_: {}): any;
+    playIcon?(_: {}): any;
+    pauseIcon?(_: {}): any;
+    volumeOffIcon?(_: {}): any;
+    volumeOnIcon?(_: {}): any;
+    fullscreenExitIcon?(_: {}): any;
+    fullscreenEnterIcon?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -14,16 +14,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { shallowRef, onMounted, watch, computed } from 'vue'
+import { shallowRef, onMounted, watch, computed, toRefs, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
-import { useInjectControls } from '../composables/useControls'
-
-const { controlsApi } = useInjectControls()
-const { seekedTime } = controlsApi
-
-import type { Ref } from 'vue'
+import { usePlayerApi } from '../composables/usePlayerApi'
 
 type Props = {
+  id: string
   playbackId: string
 }
 
@@ -40,13 +36,17 @@ type MuxStoryboard = {
 }
 
 const props = defineProps<Props>()
+
+const { instance } = usePlayerApi(props.id)
+
+const { seekedTime } = toRefs(instance.value.controlsApi)
+const { pixelRatio } = useDevicePixelRatio()
+
 const canvas = shallowRef() as Ref<HTMLCanvasElement>
-let context: CanvasRenderingContext2D | undefined = undefined
 const storyboard = shallowRef<MuxStoryboard | undefined>()
+let context: CanvasRenderingContext2D | undefined = undefined
 let image: HTMLImageElement | undefined = undefined
 
-const { pixelRatio } = useDevicePixelRatio()
-
 const thumbWidth = computed(() => {
   if (!storyboard.value) return 0
   return storyboard.value.tile_width / pixelRatio.value
@@ -112,7 +112,7 @@ function drawFrame(time: number) {
 }
 
 onMounted(init)
-watch(() => seekedTime.value, drawFrame)
+watch(() => seekedTime?.value, drawFrame)
 </script>
 
 <style lang="css">

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

@@ -1,9 +1,17 @@
 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>;
         required: true;