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

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

@@ -0,0 +1,202 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-flip", "data-id"];
+const _hoisted_2 = {
+  id: "magic-pie__svg",
+  viewBox: "0 0 100 100",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_3 = { mask: "url(#magic-pie__mask)" };
+const _hoisted_4 = ["d"];
+import { computed, toRefs, onBeforeUnmount } from "vue";
+import { usePieState } from "../composables/private/usePieState";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPie",
+  props: {
+    id: { type: String, required: true },
+    options: { type: Object, required: false }
+  },
+  setup(__props) {
+    const { initializeState, deleteState } = usePieState(__props.id);
+    const state = initializeState();
+    const { percentage } = toRefs(state);
+    function generatePath(points) {
+      if (points.length < 2) {
+        throw new Error("At least two points are required to generate a path.");
+      }
+      let path2 = `M ${points[0][0]} ${points[0][1]}`;
+      for (let i = 1; i < points.length; i++) {
+        path2 += ` L ${points[i][0]} ${points[i][1]}`;
+      }
+      return path2;
+    }
+    function generatePie(percentage2, flip) {
+      if (percentage2 < 0 || percentage2 > 100) {
+        throw new Error("percentage needs to be between 0 and 100");
+      }
+      const size = 100;
+      const points = [
+        [size / 2, size / 2],
+        [size / 2, 0]
+      ];
+      function getEndpoint(percentage3, size2) {
+        const circumference = size2 * 4;
+        const distance = percentage3 / 100 * circumference;
+        if (distance === 0) {
+          return [size2 / 2, 0];
+        }
+        const position = Math.floor(distance / (size2 / 2)) % 8;
+        const remainingDistance = distance % (size2 / 2);
+        let x = 0;
+        let y = 0;
+        switch (position) {
+          case 0:
+            x = size2 / 2 + remainingDistance;
+            y = 0;
+            break;
+          case 1:
+            x = size2;
+            y = remainingDistance;
+            break;
+          case 2:
+            x = size2;
+            y = size2 / 2 + remainingDistance;
+            break;
+          case 3:
+            x = size2 - remainingDistance;
+            y = size2;
+            break;
+          case 4:
+            x = size2 / 2 - remainingDistance;
+            y = size2;
+            break;
+          case 5:
+            x = 0;
+            y = size2 - remainingDistance;
+            break;
+          case 6:
+            x = 0;
+            y = size2 / 2 - remainingDistance;
+            break;
+          case 7:
+            x = remainingDistance;
+            y = 0;
+        }
+        return [x, y];
+      }
+      if (flip) {
+        if (100 - percentage2 >= 12.5) {
+          points.push([0, 0]);
+        }
+        if (100 - percentage2 >= 25) {
+          points.push([0, size / 2]);
+        }
+        if (100 - percentage2 >= 37.5) {
+          points.push([0, size]);
+        }
+        if (100 - percentage2 >= 50) {
+          points.push([size / 2, size]);
+        }
+        if (100 - percentage2 >= 62.5) {
+          points.push([size, size]);
+        }
+        if (100 - percentage2 >= 75) {
+          points.push([size, size / 2]);
+        }
+        if (100 - percentage2 >= 87.5) {
+          points.push([size, 0]);
+        }
+      } else {
+        if (percentage2 >= 12.5) {
+          points.push([size, 0]);
+        }
+        if (percentage2 >= 25) {
+          points.push([size, size / 2]);
+        }
+        if (percentage2 >= 37.5) {
+          points.push([size, size]);
+        }
+        if (percentage2 >= 50) {
+          points.push([size / 2, size]);
+        }
+        if (percentage2 >= 62.5) {
+          points.push([0, size]);
+        }
+        if (percentage2 >= 75) {
+          points.push([0, size / 2]);
+        }
+        if (percentage2 >= 87.5) {
+          points.push([0, 0]);
+        }
+      }
+      points.push(getEndpoint(percentage2, size));
+      return generatePath(points);
+    }
+    const path = computed(() => {
+      return generatePie(percentage.value, __props.options?.flip);
+    });
+    onBeforeUnmount(() => {
+      deleteState();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-pie",
+        "data-flip": _ctx.options?.flip,
+        "data-id": _ctx.id
+      }, [
+        (_openBlock(), _createElementBlock("svg", _hoisted_2, [
+          _cache[1] || (_cache[1] = _createElementVNode(
+            "mask",
+            { id: "magic-pie__mask" },
+            [
+              _createElementVNode("circle", {
+                cx: "50",
+                cy: "50",
+                r: "50",
+                fill: "white"
+              })
+            ],
+            -1
+            /* HOISTED */
+          )),
+          _createElementVNode("g", _hoisted_3, [
+            _cache[0] || (_cache[0] = _createElementVNode(
+              "rect",
+              {
+                width: "100",
+                height: "100"
+              },
+              null,
+              -1
+              /* HOISTED */
+            )),
+            _createElementVNode("path", { d: path.value }, null, 8, _hoisted_4)
+          ])
+        ]))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-pie {
+  position: relative;
+
+  & path {
+    fill: var(--magic-pie-foreground, currentColor);
+  }
+
+  & rect {
+    fill: var(--magic-pie-background, transparent);
+  }
+}
+
+#magic-pie__svg {
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

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

@@ -0,0 +1,7 @@
+import type { MagicPieOptions } from '../types/index.js';
+interface MagicPieProps {
+    id: string;
+    options?: MagicPieOptions;
+}
+declare const _default: import("vue").DefineComponent<MagicPieProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPieProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/plugins/MagicPie/src/composables/private/usePieState.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+import type { PieState } from '../../types/index.js';
+export declare function usePieState(id: MaybeRef<string>): {
+    initializeState: () => PieState;
+    deleteState: () => void;
+};

package/dist/plugins/MagicPie/src/composables/private/usePieState.mjs

@@ -0,0 +1,33 @@
+import { ref, reactive, toValue } from "vue";
+const pieStateStore = ref([]);
+export function usePieState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      percentage: 0,
+      interpolationId: void 0
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    pieStateStore.value = [...pieStateStore.value, state];
+    return state;
+  }
+  function initializeState() {
+    let state = pieStateStore.value.find((entry) => {
+      return entry.id === id;
+    });
+    if (!state) state = addState(toValue(id));
+    return state;
+  }
+  function deleteState() {
+    pieStateStore.value = pieStateStore.value.filter(
+      (x) => x.id !== id
+    );
+  }
+  return {
+    initializeState,
+    deleteState
+  };
+}

package/dist/plugins/MagicPie/src/composables/useMagicPie.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeRef } from 'vue';
+interface InterpolatePercentageArgs {
+    value: number;
+    duration: number;
+    easing?: (t: number) => number;
+}
+export declare function useMagicPie(id: MaybeRef<string>): {
+    percentage: import("vue").Ref<number, number>;
+    setPercentage: (value: number) => void;
+    interpolatePercentage: (args: InterpolatePercentageArgs) => void;
+    cancelInterpolatePercentage: () => void;
+};
+export {};

package/dist/plugins/MagicPie/src/composables/useMagicPie.mjs

@@ -0,0 +1,43 @@
+import { toValue, toRefs } from "vue";
+import { interpolate, linear } from "@maas/vue-equipment/utils";
+import { usePieState } from "./private/usePieState.mjs";
+export function useMagicPie(id) {
+  const { initializeState } = usePieState(toValue(id));
+  const state = initializeState();
+  const { percentage, interpolationId } = toRefs(state);
+  function setPercentage(value) {
+    percentage.value = Math.min(Math.max(0, value), 100);
+  }
+  function interpolatePercentage(args) {
+    const { value, duration = 1e3, easing = linear } = args;
+    const mappedValue = Math.min(Math.max(0, value), 100);
+    if (interpolationId.value) {
+      cancelAnimationFrame(interpolationId.value);
+    }
+    const mappedDuration = duration - duration * percentage.value / 100;
+    interpolationId.value = interpolate({
+      from: percentage.value,
+      to: mappedValue,
+      duration: mappedDuration,
+      easing,
+      callback: (value2) => {
+        percentage.value = value2;
+      },
+      interpolationIdCallback: (id2) => {
+        interpolationId.value = id2;
+      }
+    });
+  }
+  function cancelInterpolatePercentage() {
+    if (interpolationId.value) {
+      cancelAnimationFrame(interpolationId.value);
+      interpolationId.value = void 0;
+    }
+  }
+  return {
+    percentage,
+    setPercentage,
+    interpolatePercentage,
+    cancelInterpolatePercentage
+  };
+}

package/dist/plugins/MagicPie/src/types/index.d.ts

@@ -0,0 +1,9 @@
+export interface MagicPieOptions {
+    flip?: boolean;
+}
+export interface PieState {
+    id: string;
+    percentage: number;
+    interpolationId: number | undefined;
+}
+export type PiePoint = [number, number];

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

@@ -1,7 +1,17 @@
 <script>
 import { defineComponent as _defineComponent } from "vue";
 import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, onMounted, onBeforeUnmount } 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";
@@ -18,8 +28,8 @@ export default /* @__PURE__ */ _defineComponent({
     if (!injectedOptions) {
       throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
     }
-    const elRef = ref(void 0);
-    const pausedByIntersection = ref(false);
+    const elRef = useTemplateRef("el");
+    const pausedByIntersection = shallowRef(false);
     const { initialize, destroy } = usePlayerRuntime({
       id: injectedId,
       mediaRef: elRef,
@@ -57,11 +67,7 @@ export default /* @__PURE__ */ _defineComponent({
     return (_ctx, _cache) => {
       return _openBlock(), _createElementBlock(
         "audio",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-player-audio"
-        },
+        _hoisted_1,
         null,
         512
         /* NEED_PATCH */

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

@@ -4,22 +4,30 @@ import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode
 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_4 = {
+const _hoisted_5 = {
   class: "magic-player-audio-controls__item -shrink-0",
   "data-slot": "display-time-current"
 };
-const _hoisted_5 = {
+const _hoisted_6 = {
   class: "magic-player-audio-controls__item -grow",
   "data-slot": "timeline"
 };
-const _hoisted_6 = {
+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, ref, inject, provide } from "vue";
+import { computed, inject, provide, useTemplateRef } from "vue";
 import { useIdle } from "@vueuse/core";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
@@ -30,31 +38,31 @@ import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudioControls",
   props: {
-    id: { type: String, required: false }
+    instanceId: { type: String, required: false }
   },
   setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
+    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 be passed an id as a prop."
+        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
       );
     }
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
+    const barRef = useTemplateRef("bar");
+    const trackRef = useTemplateRef("track");
     const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     usePlayerControlsApi({
-      id: mappedId.value,
+      id: mappedInstanceId.value,
       barRef,
       trackRef
     });
     const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.value);
+    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");
@@ -70,13 +78,9 @@ export default /* @__PURE__ */ _defineComponent({
         _createElementVNode("div", _hoisted_2, [
           _createElementVNode(
             "div",
-            {
-              ref_key: "barRef",
-              ref: barRef,
-              class: "magic-player-audio-controls__bar--inner"
-            },
+            _hoisted_3,
             [
-              _createElementVNode("div", _hoisted_3, [
+              _createElementVNode("div", _hoisted_4, [
                 !_unref(playing) ? (_openBlock(), _createElementBlock("button", {
                   key: 0,
                   onClick: _cache[0] || (_cache[0] = //@ts-ignore
@@ -95,32 +99,22 @@ export default /* @__PURE__ */ _defineComponent({
                   ])
                 ]))
               ]),
-              _createElementVNode("div", _hoisted_4, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "current"
-                }, null, 8, ["id"])
-              ]),
               _createElementVNode("div", _hoisted_5, [
+                _createVNode(_component_magic_player_display_time, { type: "current" })
+              ]),
+              _createElementVNode("div", _hoisted_6, [
                 _createElementVNode(
                   "div",
-                  {
-                    ref_key: "trackRef",
-                    ref: trackRef,
-                    class: "magic-player-audio-controls__timeline"
-                  },
+                  _hoisted_7,
                   [
-                    _createVNode(_component_magic_player_timeline, { id: _ctx.id }, null, 8, ["id"])
+                    _createVNode(_component_magic_player_timeline)
                   ],
                   512
                   /* NEED_PATCH */
                 )
               ]),
-              _createElementVNode("div", _hoisted_6, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "duration"
-                }, null, 8, ["id"])
+              _createElementVNode("div", _hoisted_8, [
+                _createVNode(_component_magic_player_display_time, { type: "duration" })
               ])
             ],
             512

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

@@ -1,32 +1,33 @@
+import IconPlay from './icons/Play.vue.js';
+import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
-    id?: string;
+    instanceId?: string;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-    };
-    refs: {
-        barRef: HTMLDivElement;
-        trackRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,14 +1,5 @@
 interface MagicPlayerDisplayTimeProps {
     type?: 'current' | 'remaining' | 'duration';
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -2,7 +2,14 @@
 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 } from "vue";
+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";
@@ -21,7 +28,7 @@ export default /* @__PURE__ */ _defineComponent({
     }
     const { seekedTime } = usePlayerControlsApi({ id: instanceId });
     const { pixelRatio } = useDevicePixelRatio();
-    const canvasRef = shallowRef();
+    const canvasRef = useTemplateRef("canvas");
     const storyboard = shallowRef();
     let context = void 0;
     let image = void 0;
@@ -35,12 +42,17 @@ export default /* @__PURE__ */ _defineComponent({
     });
     function getMuxId(url) {
       const match = url?.match(/mux\.com\/([^\/]+)/);
-      return match?.[1];
+      return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
     }
     async function init() {
       const parsedPlaybackId = getMuxId(injectedOptions?.src);
       const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
-      if (!mappedPlaybackId) return;
+      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`
@@ -49,8 +61,8 @@ export default /* @__PURE__ */ _defineComponent({
         image = new Image();
         image.src = storyboard.value.url;
         await image.decode();
-        context = canvasRef.value.getContext("2d");
-        context.drawImage(image, 0, 0);
+        context = canvasRef.value?.getContext("2d");
+        context?.drawImage(image, 0, 0);
       } catch (e) {
         console.error("Can not initialize timeine preview.", e);
       }
@@ -95,8 +107,7 @@ export default /* @__PURE__ */ _defineComponent({
         },
         [
           _createElementVNode("canvas", {
-            ref_key: "canvasRef",
-            ref: canvasRef,
+            ref: "canvas",
             width: storyboard.value?.tile_width,
             height: storyboard.value?.tile_height
           }, null, 8, _hoisted_1)

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

@@ -1,14 +1,5 @@
 interface MagicPlayerMuxPopoverProps {
     playbackId?: string;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerMuxPopoverProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerMuxPopoverProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+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;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};