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

package/dist/plugins/MagicPlayer/index.mjs

@@ -1,32 +1,26 @@
-import MagicAudioPlayer from "./src/components/MagicAudioPlayer.vue";
-import MagicPlayer from "./src/components/MagicPlayer.vue";
-import MagicPlayerControls from "./src/components/MagicPlayerControls.vue";
+import MagicPlayerAudio from "./src/components/MagicPlayerAudio.vue";
+import MagicPlayerAudioControls from "./src/components/MagicPlayerAudioControls.vue";
 import MagicPlayerDisplayTime from "./src/components/MagicPlayerDisplayTime.vue";
 import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
 import MagicPlayerOverlay from "./src/components/MagicPlayerOverlay.vue";
 import MagicPlayerPoster from "./src/components/MagicPlayerPoster.vue";
+import MagicPlayerProvider from "./src/components/MagicPlayerProvider.vue";
 import MagicPlayerTimeline from "./src/components/MagicPlayerTimeline.vue";
+import MagicPlayerVideo from "./src/components/MagicPlayerVideo.vue";
+import MagicPlayerVideoControls from "./src/components/MagicPlayerVideoControls.vue";
 import { useMagicPlayer } from "./src/composables/useMagicPlayer.mjs";
 const MagicPlayerPlugin = {
   install: (app) => {
-    app.component("MagicAudioPlayer", MagicAudioPlayer);
-    app.component("MagicPlayer", MagicPlayer);
-    app.component("MagicPlayerControls", MagicPlayerControls);
+    app.component("MagicPlayerAudio", MagicPlayerAudio);
+    app.component("MagicPlayerAudioControls", MagicPlayerAudioControls);
     app.component("MagicPlayerDisplayTime", MagicPlayerDisplayTime);
     app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopover);
     app.component("MagicPlayerOverlay", MagicPlayerOverlay);
     app.component("MagicPlayerPoster", MagicPlayerPoster);
+    app.component("MagicPlayerProvider", MagicPlayerProvider);
     app.component("MagicPlayerTimeline", MagicPlayerTimeline);
+    app.component("MagicPlayerVideo", MagicPlayerVideo);
+    app.component("MagicPlayerVideoControls", MagicPlayerVideoControls);
   }
 };
-export {
-  MagicPlayerPlugin,
-  MagicPlayer,
-  MagicPlayerControls,
-  MagicPlayerDisplayTime,
-  MagicPlayerMuxPopover,
-  MagicPlayerPoster,
-  MagicPlayerOverlay,
-  MagicPlayerTimeline,
-  useMagicPlayer
-};
+export { MagicPlayerPlugin, useMagicPlayer };

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

@@ -0,0 +1,84 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  ref: "el",
+  class: "magic-player-audio"
+};
+import {
+  useTemplateRef,
+  shallowRef,
+  inject,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerAudio",
+  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 = useTemplateRef("el");
+    const pausedByIntersection = shallowRef(false);
+    const { initialize, destroy } = usePlayerRuntime({
+      id: injectedId,
+      mediaRef: elRef,
+      src: injectedOptions.src,
+      srcType: injectedOptions.srcType
+    });
+    const { playing } = usePlayerMediaApi({
+      id: injectedId,
+      mediaRef: elRef
+    });
+    const { play, pause } = usePlayerAudioApi({
+      id: injectedId
+    });
+    useIntersectionObserver(
+      elRef,
+      ([{ isIntersecting }]) => {
+        if (!isIntersecting && playing.value) {
+          pause();
+          pausedByIntersection.value = true;
+        } else if (isIntersecting && !playing.value && pausedByIntersection.value) {
+          pausedByIntersection.value = false;
+          play();
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    onMounted(() => {
+      initialize();
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "audio",
+        _hoisted_1,
+        null,
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+</script>
+
+<style>
+.magic-player-audio {
+  width: 100%;
+}
+</style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudio.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/MagicPlayerAudioControls.vue

@@ -0,0 +1,128 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent } from "vue";
+const _hoisted_1 = ["data-touched", "data-playing", "data-paused", "data-waiting", "data-idle", "data-hover"];
+const _hoisted_2 = { class: "magic-player-audio-controls__bar" };
+const _hoisted_3 = {
+  ref: "bar",
+  class: "magic-player-audio-controls__bar--inner"
+};
+const _hoisted_4 = {
+  class: "magic-player-audio-controls__item -shrink-0",
+  "data-slot": "play-toggle"
+};
+const _hoisted_5 = {
+  class: "magic-player-audio-controls__item -shrink-0",
+  "data-slot": "display-time-current"
+};
+const _hoisted_6 = {
+  class: "magic-player-audio-controls__item -grow",
+  "data-slot": "timeline"
+};
+const _hoisted_7 = {
+  ref: "track",
+  class: "magic-player-audio-controls__timeline"
+};
+const _hoisted_8 = {
+  class: "magic-player-audio-controls__item -shrink-0",
+  "data-slot": "display-time-duration"
+};
+import { computed, inject, provide, useTemplateRef } from "vue";
+import { useIdle } from "@vueuse/core";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
+import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import IconPlay from "./icons/Play.vue";
+import IconPause from "./icons/Pause.vue";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerAudioControls",
+  props: {
+    instanceId: { type: String, required: false }
+  },
+  setup(__props) {
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    if (!mappedInstanceId.value) {
+      throw new Error(
+        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
+      );
+    }
+    const barRef = useTemplateRef("bar");
+    const trackRef = useTemplateRef("track");
+    const { playing, waiting } = usePlayerMediaApi({
+      id: mappedInstanceId.value
+    });
+    const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
+      id: mappedInstanceId.value
+    });
+    usePlayerControlsApi({
+      id: mappedInstanceId.value,
+      barRef,
+      trackRef
+    });
+    const { idle } = useIdle(3e3);
+    provide(MagicPlayerInstanceId, mappedInstanceId.value);
+    return (_ctx, _cache) => {
+      const _component_magic_player_display_time = _resolveComponent("magic-player-display-time");
+      const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-player-audio-controls",
+        "data-touched": _unref(touched),
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-idle": _unref(idle),
+        "data-hover": _unref(mouseEntered)
+      }, [
+        _createElementVNode("div", _hoisted_2, [
+          _createElementVNode(
+            "div",
+            _hoisted_3,
+            [
+              _createElementVNode("div", _hoisted_4, [
+                !_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_5, [
+                _createVNode(_component_magic_player_display_time, { type: "current" })
+              ]),
+              _createElementVNode("div", _hoisted_6, [
+                _createElementVNode(
+                  "div",
+                  _hoisted_7,
+                  [
+                    _createVNode(_component_magic_player_timeline)
+                  ],
+                  512
+                  /* NEED_PATCH */
+                )
+              ]),
+              _createElementVNode("div", _hoisted_8, [
+                _createVNode(_component_magic_player_display_time, { type: "duration" })
+              ])
+            ],
+            512
+            /* NEED_PATCH */
+          )
+        ])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,34 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
+interface MagicAudioPlayerControlsProps {
+    instanceId?: string;
+}
+declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
+declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+declare const idle: import("vue").Ref<boolean, boolean>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    playIcon?: (props: typeof __VLS_1) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {
+    IconPlay: typeof IconPlay;
+    IconPause: typeof IconPause;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    play: typeof play;
+    pause: typeof pause;
+    touched: typeof touched;
+    mouseEntered: typeof mouseEntered;
+    idle: typeof idle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,43 +1,47 @@
-<template>
-  <div class="magic-player-time-display">
-    {{ stringifiedTime }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { formatTime } from '@maas/vue-equipment/utils'
-
-interface MagicPlayerDisplayTimeProps {
-  id: string
-  type: 'current' | 'remaining' | 'duration'
-}
-
-const props = withDefaults(defineProps<MagicPlayerDisplayTimeProps>(), {
-  type: 'current',
-})
-
-const { currentTime, remainingTime, duration } = usePlayerMediaApi({
-  id: props.id,
-})
-
-const stringifiedTime = computed(() => {
-  switch (props.type) {
-    case 'current':
-      return formatTime(currentTime.value, currentTime.value)
-    case 'remaining':
-      return `-${formatTime(remainingTime.value, remainingTime.value)}`
-    case 'duration':
-      return formatTime(duration.value, duration.value)
-    default:
-      return ''
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-player-display-time" };
+import { computed, inject } from "vue";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { formatTime } from "@maas/vue-equipment/utils";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerDisplayTime",
+  props: {
+    type: { type: String, required: false, default: "current" }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerDisplayTime must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
+      );
+    }
+    const { currentTime, remainingTime, duration } = usePlayerMediaApi({
+      id: instanceId
+    });
+    const stringifiedTime = computed(() => {
+      switch (__props.type) {
+        case "current":
+          return formatTime(currentTime.value, currentTime.value);
+        case "remaining":
+          return `-${formatTime(remainingTime.value, remainingTime.value)}`;
+        case "duration":
+          return formatTime(duration.value, duration.value);
+        default:
+          return "";
+      }
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        _hoisted_1,
+        _toDisplayString(stringifiedTime.value),
+        1
+        /* TEXT */
+      );
+    };
   }
-})
+});
 </script>
-
-<style>
-.magic-player-time-display{align-items:center;color:var(--magic-player-time-display-color,inherit);display:flex;font-size:var(--magic-player-time-display-font-size,.875rem);font-variant-numeric:var(
-    --magic-player-time-display-font-variant-numeric,tabular-nums
-  );height:100%;justify-content:var(--magic-player-time-display-justify-content,center);width:var(--magic-player-time-display-width,4rem)}
-</style>

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

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

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

@@ -1,120 +1,133 @@
-<template>
-  <div
-    :style="{
-      width: `${thumbWidth}px`,
-      height: `${thumbHeight}px`,
-    }"
-    class="magic-player-mux-popover"
-  >
-    <canvas
-      ref="canvasRef"
-      :width="storyboard?.tile_width"
-      :height="storyboard?.tile_height"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
-import { useDevicePixelRatio } from '@vueuse/core'
-import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
-
-type MagicPlayerMuxPopoverProps = {
-  id: string
-  playbackId: string
-}
-
-type Tile = {
-  start: number
-  x: number
-  y: number
-}
-
-type MuxStoryboard = {
-  url: string
-  tile_width: number
-  tile_height: number
-  duration: number
-  tiles: Tile[]
-}
-
-const props = defineProps<MagicPlayerMuxPopoverProps>()
-
-const { seekedTime } = usePlayerControlsApi({ id: props.id })
-const { pixelRatio } = useDevicePixelRatio()
-
-const canvasRef = shallowRef() as Ref<HTMLCanvasElement>
-const storyboard = shallowRef<MuxStoryboard | undefined>()
-let context: CanvasRenderingContext2D | undefined = undefined
-let image: HTMLImageElement | undefined = undefined
-
-const thumbWidth = computed(() => {
-  if (!storyboard.value) return 0
-  return storyboard.value.tile_width / pixelRatio.value
-})
-
-const thumbHeight = computed(() => {
-  if (!storyboard.value) return 0
-  return storyboard.value.tile_height / pixelRatio.value
-})
-
-async function init() {
-  if (!props.playbackId) return
-
-  try {
-    storyboard.value = await fetch(
-      `https://image.mux.com/${props.playbackId}/storyboard.json`
-    ).then((res) => res.json())
-
-    if (!storyboard.value) throw new Error()
-
-    image = new Image()
-    image.src = storyboard.value.url
-    await image.decode()
-
-    context = canvasRef.value.getContext('2d')!
-    context.drawImage(image, 0, 0)
-  } catch (e: any) {
-    console.error('Can not initialize timeine preview.', e)
-  }
-}
-
-function drawFrame(time: number) {
-  if (!storyboard.value || !context || !image) return
-
-  const { tile_height, tile_width, tiles } = storyboard.value
-
-  let closestIndex = -1
-  let minDifference = Infinity
-
-  for (let i = 0; i < tiles.length; i++) {
-    const { start } = tiles[i]
-    const difference = Math.abs(start - time)
-
-    if (difference < minDifference) {
-      minDifference = difference
-      closestIndex = i
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["width", "height"];
+import {
+  shallowRef,
+  onMounted,
+  watch,
+  computed,
+  inject,
+  useTemplateRef
+} from "vue";
+import { useDevicePixelRatio } from "@vueuse/core";
+import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerMuxPopover",
+  props: {
+    playbackId: { type: String, required: false }
+  },
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+    if (!instanceId || !injectedOptions) {
+      throw new Error(
+        "MagicPlayerMuxPopover must be nested inside MagicPlayerVideoControls."
+      );
+    }
+    const { seekedTime } = usePlayerControlsApi({ id: instanceId });
+    const { pixelRatio } = useDevicePixelRatio();
+    const canvasRef = useTemplateRef("canvas");
+    const storyboard = shallowRef();
+    let context = void 0;
+    let image = void 0;
+    const thumbWidth = computed(() => {
+      if (!storyboard.value) return 0;
+      return storyboard.value.tile_width / pixelRatio.value;
+    });
+    const thumbHeight = computed(() => {
+      if (!storyboard.value) return 0;
+      return storyboard.value.tile_height / pixelRatio.value;
+    });
+    function getMuxId(url) {
+      const match = url?.match(/mux\.com\/([^\/]+)/);
+      return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
+    }
+    async function init() {
+      const parsedPlaybackId = getMuxId(injectedOptions?.src);
+      const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
+      if (!mappedPlaybackId) {
+        console.error(
+          "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
+        );
+        return;
+      }
+      try {
+        storyboard.value = await fetch(
+          `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
+        ).then((res) => res.json());
+        if (!storyboard.value) throw new Error();
+        image = new Image();
+        image.src = storyboard.value.url;
+        await image.decode();
+        context = canvasRef.value?.getContext("2d");
+        context?.drawImage(image, 0, 0);
+      } catch (e) {
+        console.error("Can not initialize timeine preview.", e);
+      }
     }
+    function drawFrame(time) {
+      if (!storyboard.value || !context || !image) return;
+      const { tile_height, tile_width, tiles } = storyboard.value;
+      let closestIndex = -1;
+      let minDifference = Infinity;
+      for (let i = 0; i < tiles.length; i++) {
+        const { start } = tiles[i];
+        const difference = Math.abs(start - time);
+        if (difference < minDifference) {
+          minDifference = difference;
+          closestIndex = i;
+        }
+      }
+      const tile = tiles[closestIndex];
+      context.drawImage(
+        image,
+        tile.x,
+        tile.y,
+        tile_width,
+        tile_height,
+        0,
+        0,
+        tile_width,
+        tile_height
+      );
+    }
+    onMounted(init);
+    watch(() => seekedTime?.value, drawFrame);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock(
+        "div",
+        {
+          style: _normalizeStyle({
+            width: `${thumbWidth.value}px`,
+            height: `${thumbHeight.value}px`
+          }),
+          class: "magic-player-mux-popover"
+        },
+        [
+          _createElementVNode("canvas", {
+            ref: "canvas",
+            width: storyboard.value?.tile_width,
+            height: storyboard.value?.tile_height
+          }, null, 8, _hoisted_1)
+        ],
+        4
+        /* STYLE */
+      );
+    };
   }
-
-  const tile = tiles[closestIndex]
-
-  context.drawImage(
-    image,
-    tile.x,
-    tile.y,
-    tile_width,
-    tile_height,
-    0,
-    0,
-    tile_width,
-    tile_height
-  )
-}
-
-onMounted(init)
-watch(() => seekedTime?.value, drawFrame)
+});
 </script>
 
 <style>
-.magic-player-mux-popover{border-radius:var(--magic-player-popover-border-radius,.25rem);overflow:hidden}.magic-player-mux-popover canvas{height:auto;width:100%}
+.magic-player-mux-popover {
+  border-radius: var(--magic-player-popover-border-radius, 0.25rem);
+  overflow: hidden;
+}
+
+.magic-player-mux-popover canvas {
+  width: 100%;
+  height: auto;
+}
 </style>

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

@@ -1,6 +1,5 @@
-type MagicPlayerMuxPopoverProps = {
-    id: string;
-    playbackId: string;
-};
-declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+interface MagicPlayerMuxPopoverProps {
+    playbackId?: string;
+}
+declare const _default: import("vue").DefineComponent<MagicPlayerMuxPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerMuxPopoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;