@maas/vue-equipment 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,134 +1,106 @@
-<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 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "play-toggle"
-};
-const _hoisted_4 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "display-time-current"
-};
-const _hoisted_5 = {
-  class: "magic-player-audio-controls__item -grow",
-  "data-slot": "timeline"
-};
-const _hoisted_6 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "display-time-duration"
-};
-import { computed, ref, inject, provide } from "vue";
+<template>
+  <div
+    class="magic-player-audio-controls"
+    :data-touched="touched"
+    :data-playing="playing"
+    :data-paused="!playing"
+    :data-waiting="waiting"
+    :data-idle="idle"
+    :data-hover="controlsMouseEntered"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <div class="magic-player-audio-controls__bar">
+      <div ref="bar" class="magic-player-audio-controls__bar--inner">
+        <div
+          class="magic-player-audio-controls__item -shrink-0"
+          data-slot="play-toggle"
+        >
+          <button v-if="!playing" @click="play">
+            <slot name="playIcon">
+              <icon-play />
+            </slot>
+          </button>
+          <button v-else @click="pause">
+            <slot name="pauseIcon">
+              <icon-pause />
+            </slot>
+          </button>
+        </div>
+        <div
+          class="magic-player-audio-controls__item -shrink-0"
+          data-slot="display-time-current"
+        >
+          <magic-player-display-time type="current" />
+        </div>
+        <div
+          class="magic-player-audio-controls__item -grow"
+          data-slot="timeline"
+        >
+          <div ref="track" class="magic-player-audio-controls__timeline">
+            <magic-player-timeline />
+          </div>
+        </div>
+        <div
+          class="magic-player-audio-controls__item -shrink-0"
+          data-slot="display-time-duration"
+        >
+          <magic-player-display-time type="duration" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  toRefs,
+  computed,
+  inject,
+  provide,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
 import { useIdle } from "@vueuse/core";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 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: {
-    id: { type: String, required: false }
-  },
-  setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
-      throw new Error(
-        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
-      );
-    }
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
-    const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
-    });
-    const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
-    });
-    usePlayerControlsApi({
-      id: mappedId.value,
-      barRef,
-      trackRef
-    });
-    const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.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",
-            {
-              ref_key: "barRef",
-              ref: barRef,
-              class: "magic-player-audio-controls__bar--inner"
-            },
-            [
-              _createElementVNode("div", _hoisted_3, [
-                !_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_4, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "current"
-                }, null, 8, ["id"])
-              ]),
-              _createElementVNode("div", _hoisted_5, [
-                _createElementVNode(
-                  "div",
-                  {
-                    ref_key: "trackRef",
-                    ref: trackRef,
-                    class: "magic-player-audio-controls__timeline"
-                  },
-                  [
-                    _createVNode(_component_magic_player_timeline, { id: _ctx.id }, null, 8, ["id"])
-                  ],
-                  512
-                  /* NEED_PATCH */
-                )
-              ]),
-              _createElementVNode("div", _hoisted_6, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "duration"
-                }, null, 8, ["id"])
-              ])
-            ],
-            512
-            /* NEED_PATCH */
-          )
-        ])
-      ], 8, _hoisted_1);
-    };
-  }
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef
+} from "../symbols";
+const { instanceId } = defineProps({
+  instanceId: { type: String, required: false }
 });
+const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const mappedInstanceId = computed(() => 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 { play, pause } = usePlayerAudioApi({
+  id: mappedInstanceId.value
+});
+const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
+  id: mappedInstanceId.value,
+  barRef,
+  trackRef
+});
+const { initializeState } = usePlayerState(mappedInstanceId.value);
+const state = initializeState();
+const { playing, waiting, touched, controlsMouseEntered } = toRefs(state);
+const { idle } = useIdle(3e3);
+initialize();
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicPlayerInstanceId, mappedInstanceId.value);
+provide(MagicPlayerTrackRef, trackRef);
+provide(MagicPlayerBarRef, barRef);
 </script>

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

@@ -1,32 +1,36 @@
+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 play: () => void, pause: () => void;
+declare const onMouseenter: () => void, onMouseleave: () => void;
+declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>, controlsMouseEntered: import("vue").Ref<boolean, boolean>;
+declare const idle: import("vue").ShallowRef<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;
+    play: typeof play;
+    pause: typeof pause;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
+    playing: typeof playing;
+    waiting: typeof waiting;
+    touched: typeof touched;
+    controlsMouseEntered: typeof controlsMouseEntered;
+    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

@@ -1,47 +1,37 @@
-<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";
+<template>
+  <div class="magic-player-display-time">
+    {{ stringifiedTime }}
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, toRefs } from "vue";
 import { formatTime } from "@maas/vue-equipment/utils";
+import { usePlayerState } from "../composables/private/usePlayerState";
 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 */
-      );
-    };
+const { type = "current" } = defineProps({
+  type: { type: String, required: false }
+});
+const instanceId = inject(MagicPlayerInstanceId);
+if (!instanceId) {
+  throw new Error(
+    "MagicPlayerDisplayTime must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
+  );
+}
+const { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const { currentTime, duration } = toRefs(state);
+const remainingTime = computed(() => duration.value - currentTime.value);
+const stringifiedTime = computed(() => {
+  switch (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>

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

@@ -1,112 +1,113 @@
-<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 } from "vue";
+<template>
+  <div
+    :style="{
+  width: `${thumbWidth}px`,
+  height: `${thumbHeight}px`
+}"
+    class="magic-player-mux-popover"
+  >
+    <canvas
+      ref="canvas"
+      :width="storyboard?.tile_width"
+      :height="storyboard?.tile_height"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  toRefs,
+  shallowRef,
+  onMounted,
+  watch,
+  computed,
+  inject,
+  useTemplateRef
+} from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
-import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 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 = shallowRef();
-    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];
-    }
-    async function init() {
-      const parsedPlaybackId = getMuxId(injectedOptions?.src);
-      const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
-      if (!mappedPlaybackId) 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
-      );
+const { playbackId } = defineProps({
+  playbackId: { type: String, required: false }
+});
+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 { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const { seekedTime } = toRefs(state);
+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 = 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;
     }
-    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_key: "canvasRef",
-            ref: canvasRef,
-            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>

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;
-    };
-};