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

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

@@ -1,72 +1,129 @@
-<template>
-  <div class="magic-noise" :class="{ '-loading': !isReady }">
-    <div :class="{ '-loading': !isReady }" class="magic-noise__inner">
-      <canvas ref="canvasRef" class="magic-noise__canvas" />
-      <canvas ref="offCanvasRef" class="magic-noise__off-canvas" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
-import { useResizeObserver, useDebounceFn } from '@vueuse/core'
-import { useNoiseApi } from '../composables/private/useNoiseApi'
-import type { MagicNoiseOptions } from '../types'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-loading"];
+const _hoisted_2 = { class: "magic-noise__inner" };
+import { onMounted, onUnmounted, watch, shallowRef } from "vue";
+import { useResizeObserver, useDebounceFn } from "@vueuse/core";
+import { useNoiseApi } from "../composables/private/useNoiseApi";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicNoise",
+  props: {
+    options: { type: Object, required: false },
+    pause: { type: Boolean, required: false, default: false }
+  },
+  setup(__props) {
+    const canvasRef = shallowRef(void 0);
+    const offCanvasRef = shallowRef(void 0);
+    const noiseApi = useNoiseApi({
+      canvasRef,
+      offCanvasRef,
+      options: __props.options
+    });
+    const {
+      initialize,
+      drawControls,
+      transferControls,
+      throttledDraw,
+      throttledRotateAndTransfer,
+      isReady
+    } = noiseApi;
+    useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
+    watch(
+      () => __props.pause,
+      (pause) => {
+        if (pause) {
+          drawControls.value?.pause();
+          transferControls.value?.pause();
+        } else {
+          drawControls.value?.resume();
+          transferControls.value?.resume();
+        }
+      }
+    );
+    onMounted(() => {
+      throttledDraw();
+      throttledRotateAndTransfer();
+    });
+    onUnmounted(() => {
+      isReady.value = false;
+      transferControls.value?.pause();
+      drawControls.value?.pause();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-noise",
+        "data-loading": !_unref(isReady)
+      }, [
+        _createElementVNode("div", _hoisted_2, [
+          _createElementVNode(
+            "canvas",
+            {
+              ref_key: "canvasRef",
+              ref: canvasRef,
+              class: "magic-noise__canvas"
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ),
+          _createElementVNode(
+            "canvas",
+            {
+              ref_key: "offCanvasRef",
+              ref: offCanvasRef,
+              class: "magic-noise__off-canvas"
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          )
+        ])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicNoiseProps {
-  options?: MagicNoiseOptions
-  pause?: boolean
+<style>
+:root {
+  --magic-noise-loading-transition: color 300ms ease, opacity 300ms ease;
 }
 
-const props = withDefaults(defineProps<MagicNoiseProps>(), {
-  pause: false,
-})
-
-const canvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
-const offCanvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
-
-const noiseApi = useNoiseApi({
-  canvasRef,
-  offCanvasRef,
-  options: props.options,
-})
-
-const {
-  initialize,
-  drawControls,
-  transferControls,
-  throttledDraw,
-  throttledRotateAndTransfer,
-  isReady,
-} = noiseApi
-
-useResizeObserver(canvasRef, useDebounceFn(initialize, 100))
-
-watch(
-  () => props.pause,
-  (pause) => {
-    if (pause) {
-      drawControls.value?.pause()
-      transferControls.value?.pause()
-    } else {
-      drawControls.value?.resume()
-      transferControls.value?.resume()
+.magic-noise {
+  position: relative;
+  user-select: none;
+  transition: var(--magic-noise-loading-transition);
+  background: var(--magic-noise-background, transparent);
+  &[data-loading='true'] {
+    background: var(--magic-noise-loading-background, #000);
+    & > .magic-noise__inner {
+      opacity: 0;
     }
   }
-)
+}
 
-onMounted(() => {
-  throttledDraw()
-  throttledRotateAndTransfer()
-})
+.magic-noise__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: var(--magic-noise-loading-transition);
+}
 
-onUnmounted(() => {
-  isReady.value = false
-  transferControls.value?.pause()
-  drawControls.value?.pause()
-})
-</script>
+.magic-noise__canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
 
-<style>
-:root{--magic-noise-loading-transition:color 300ms ease,opacity 300ms ease}.magic-noise{background:var(--magic-noise-background,transparent);position:relative;transition:var(--magic-noise-loading-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-noise.-loading{background:var(--magic-noise-loading-background,#000)}.magic-noise__inner{height:100%;position:relative;transition:var(--magic-noise-loading-transition);width:100%}.magic-noise__inner.-loading{opacity:0}.magic-noise__canvas{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-noise__off-canvas{left:0;pointer-events:none;position:absolute;top:0;visibility:hidden}
+.magic-noise__off-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
 </style>

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

@@ -1,9 +1,16 @@
-import type { MagicNoiseOptions } from '../types';
+import type { MagicNoiseOptions } from '../types/index.js';
 interface MagicNoiseProps {
     options?: MagicNoiseOptions;
     pause?: boolean;
 }
-declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {
-    pause: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicNoiseProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicNoiseProps>>> & 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/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -15,8 +15,8 @@ export function useNoiseApi({
   const tiles = shallowRef([]);
   const pixels = shallowRef([]);
   const isReady = ref(false);
-  let context = shallowRef(null);
-  let offContext = shallowRef(null);
+  const context = shallowRef(null);
+  const offContext = shallowRef(null);
   const { width, height } = useElementSize(canvasRef);
   const { pixelRatio } = useDevicePixelRatio();
   const drawControls = shallowRef(void 0);

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

@@ -1,11 +1,6 @@
-import type { Plugin } from 'vue';
-import MagicPlayer from './src/components/MagicPlayer.vue.js';
-import MagicPlayerControls from './src/components/MagicPlayerControls.vue.js';
-import MagicPlayerDisplayTime from './src/components/MagicPlayerDisplayTime.vue.js';
-import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
-import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
-import MagicPlayerPoster from './src/components/MagicPlayerPoster.vue.js';
-import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
 import { useMagicPlayer } from './src/composables/useMagicPlayer.js';
+import type { Plugin } from 'vue';
+import type { MagicPlayerOptions } from './src/types/index.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, useMagicPlayer, };
+export { MagicPlayerPlugin, useMagicPlayer };
+export type { MagicPlayerOptions };

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,78 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { ref, 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 = ref(void 0);
+    const pausedByIntersection = ref(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",
+        {
+          ref_key: "elRef",
+          ref: elRef,
+          class: "magic-player-audio"
+        },
+        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,134 @@
+<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";
+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: {
+    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);
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,33 @@
+interface MagicAudioPlayerControlsProps {
+    id?: 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"]>;
+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;
+    };
+};

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,14 @@
 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<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>;
 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;
+    };
+};