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

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

@@ -1,120 +1,122 @@
-<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 } 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 = 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
+      );
+    }
+    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>
-.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,14 @@
-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<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>;
 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/MagicPlayerOverlay.vue

@@ -1,64 +1,117 @@
-<template>
-  <div
-    class="magic-player-overlay"
-    :class="{
-      '-playing': playing,
-      '-paused': !playing,
-      '-idle': idle,
-      '-not-idle': !idle,
-      '-hover': mouseEntered,
-      '-not-hover': !mouseEntered,
-    }"
-    @click.stop="togglePlay"
-  >
-    <slot>
-      <template v-if="waiting">
-        <button class="magic-player-overlay__button">
-          <slot name="waitingIcon">
-            <icon-waiting />
-          </slot>
-        </button>
-      </template>
-      <template v-else>
-        <button v-if="!playing" class="magic-player-overlay__button">
-          <slot name="playIcon">
-            <icon-play />
-          </slot>
-        </button>
-        <button v-else class="magic-player-overlay__button">
-          <slot name="pauseIcon">
-            <icon-pause />
-          </slot>
-        </button>
-      </template>
-    </slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useIdle } from '@vueuse/core'
-import IconPlay from './icons/Play.vue'
-import IconPause from './icons/Pause.vue'
-import IconWaiting from './icons/Waiting.vue'
-import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, Fragment as _Fragment, withModifiers as _withModifiers } from "vue";
+const _hoisted_1 = ["data-playing", "data-paused", "data-waiting", "data-idle", "data-hover"];
+const _hoisted_2 = {
+  key: 0,
+  class: "magic-player-overlay__button"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "magic-player-overlay__button"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "magic-player-overlay__button"
+};
+import { inject } from "vue";
+import { useIdle } from "@vueuse/core";
+import IconPlay from "./icons/Play.vue";
+import IconPause from "./icons/Pause.vue";
+import IconWaiting from "./icons/Waiting.vue";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerOverlay",
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
+      );
+    }
+    const { playing, waiting } = usePlayerMediaApi({
+      id: instanceId
+    });
+    const { mouseEntered, togglePlay } = usePlayerVideoApi({
+      id: instanceId
+    });
+    const { idle } = useIdle(3e3);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-player-overlay",
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-idle": _unref(idle),
+        "data-hover": _unref(mouseEntered),
+        onClick: _cache[0] || (_cache[0] = _withModifiers(
+          //@ts-ignore
+          (...args) => _unref(togglePlay) && _unref(togglePlay)(...args),
+          ["stop"]
+        ))
+      }, [
+        _renderSlot(_ctx.$slots, "default", {}, () => [
+          _unref(waiting) ? (_openBlock(), _createElementBlock("button", _hoisted_2, [
+            _renderSlot(_ctx.$slots, "waitingIcon", {}, () => [
+              _createVNode(IconWaiting)
+            ])
+          ])) : (_openBlock(), _createElementBlock(
+            _Fragment,
+            { key: 1 },
+            [
+              !_unref(playing) ? (_openBlock(), _createElementBlock("button", _hoisted_3, [
+                _renderSlot(_ctx.$slots, "playIcon", {}, () => [
+                  _createVNode(IconPlay)
+                ])
+              ])) : (_openBlock(), _createElementBlock("button", _hoisted_4, [
+                _renderSlot(_ctx.$slots, "pauseIcon", {}, () => [
+                  _createVNode(IconPause)
+                ])
+              ]))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicPlayerOverlayProps {
-  id: string
+<style>
+.magic-player-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: var(--magic-player-overlay-background, rgba(0, 0, 0, 0.3));
+  color: var(--magic-player-overlay-color, rgba(255, 255, 255, 1));
+  transition: var(--magic-player-overlay-transition, opacity 300ms ease);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
-const props = defineProps<MagicPlayerOverlayProps>()
-
-const { playing, waiting } = usePlayerMediaApi({
-  id: props.id,
-})
-const { mouseEntered, togglePlay } = usePlayerVideoApi({
-  id: props.id,
-})
+.magic-player-overlay__button {
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  width: var(--magic-player-overlay-button-size, 2.5rem);
+  height: var(--magic-player-overlay-button-size, 2.5rem);
+}
 
-const { idle } = useIdle(3000)
-</script>
+.magic-player-overlay.-playing[data-idle='true'] {
+  opacity: 0;
+}
 
-<style>
-.magic-player-overlay{align-items:center;background-color:var(--magic-player-overlay-background,rgba(0,0,0,.3));color:var(--magic-player-overlay-color,#fff);cursor:pointer;display:flex;inset:0;justify-content:center;position:absolute;transition:var(--magic-player-overlay-transition,opacity .3s ease)}.magic-player-overlay__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;height:var(--magic-player-overlay-button-size,2.5rem);outline:none;padding:0;width:var(--magic-player-overlay-button-size,2.5rem)}.magic-player-overlay.-playing.-idle,.magic-player-overlay.-playing.-not-hover{opacity:0}
+.magic-player-overlay.-playing[data-hover='false'] {
+  opacity: 0;
+}
 </style>

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

@@ -1,6 +1,3 @@
-interface MagicPlayerOverlayProps {
-    id: string;
-}
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -13,7 +10,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1,27 +1,46 @@
-<template>
-  <div v-show="!loaded || !touched" class="magic-player-poster">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
-import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
-
-export type MagicPlayerPosterProps = {
-  id: string
-}
-const props = defineProps<MagicPlayerPosterProps>()
-
-const { loaded } = usePlayerRuntime({
-  id: props.id,
-})
-
-const { touched } = usePlayerVideoApi({
-  id: props.id,
-})
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "magic-player-poster" };
+import { inject } from "vue";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { MagicPlayerInstanceId } from "../symbols";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerPoster",
+  setup(__props) {
+    const instanceId = inject(MagicPlayerInstanceId, void 0);
+    if (!instanceId) {
+      throw new Error(
+        "MagicPlayerPoster must be nested inside MagicPlayerProvider."
+      );
+    }
+    const { loaded } = usePlayerRuntime({
+      id: instanceId
+    });
+    const { touched } = usePlayerVideoApi({
+      id: instanceId
+    });
+    return (_ctx, _cache) => {
+      return _withDirectives((_openBlock(), _createElementBlock(
+        "div",
+        _hoisted_1,
+        [
+          _renderSlot(_ctx.$slots, "default")
+        ],
+        512
+        /* NEED_PATCH */
+      )), [
+        [_vShow, !_unref(loaded) || !_unref(touched)]
+      ]);
+    };
+  }
+});
 </script>
 
 <style>
-.magic-player-poster{inset:0;position:absolute}
+.magic-player-poster {
+  position: absolute;
+  inset: 0;
+}
 </style>

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

@@ -1,6 +1,3 @@
-export type MagicPlayerPosterProps = {
-    id: string;
-};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -10,7 +7,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicPlayerPosterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerPosterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -0,0 +1,83 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
+import { ref, provide } from "vue";
+import defu from "defu";
+import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
+import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import { defaultOptions } from "../utils/defaultOptions";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPlayerProvider",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false }
+  },
+  setup(__props) {
+    const mappedOptions = defu(__props.options, defaultOptions);
+    const playerRef = ref(void 0);
+    const { playing, waiting, muted } = usePlayerMediaApi({
+      id: __props.id
+    });
+    const { loaded } = usePlayerRuntime({
+      id: __props.id,
+      src: mappedOptions.src,
+      srcType: mappedOptions.srcType
+    });
+    const { onMouseenter, onMouseleave, isFullscreen, touched } = usePlayerVideoApi(
+      {
+        id: __props.id,
+        playerRef
+      }
+    );
+    provide(MagicPlayerInstanceId, __props.id);
+    provide(MagicPlayerOptionsKey, mappedOptions);
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        ref_key: "playerRef",
+        ref: playerRef,
+        class: "magic-player-provider",
+        "data-mode": _unref(mappedOptions).mode,
+        "data-fullscreen": _unref(isFullscreen),
+        "data-touched": _unref(touched),
+        "data-playing": _unref(playing),
+        "data-paused": !_unref(playing),
+        "data-waiting": _unref(waiting),
+        "data-loaded": _unref(loaded),
+        "data-muted": _unref(muted),
+        onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args))
+      }, [
+        _renderSlot(_ctx.$slots, "default")
+      ], 40, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-player-provider {
+  position: relative;
+  width: 100%;
+}
+
+.magic-player-provider[data-mode='video'] {
+  overflow: hidden;
+  height: var(--magic-player-provider-height, auto);
+  aspect-ratio: var(--magic-player-provider-aspect-ratio, 16 / 9);
+  background: var(--magic-player-provider-background, #000);
+}
+
+.magic-player-provider[data-loaded='true'][data-mode='video'] {
+  --magic-player-provider-background: transparent;
+}
+
+.magic-player-provider[data-mode='audio'] {
+  position: relative;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,34 @@
+import { type MaybeRef } from 'vue';
+import type { MagicPlayerOptions } from '../types/index.js';
+interface MagicPlayerProps {
+    id: MaybeRef<string>;
+    options?: MagicPlayerOptions;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        playerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["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 & {
+    new (): {
+        $slots: S;
+    };
+};