@maas/vue-equipment 1.0.0-beta.12 → 1.0.0-beta.14

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

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

@@ -3,8 +3,9 @@ import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
     instanceId?: string;
 }
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
-declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;
+declare const 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").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_6: {};
@@ -16,12 +17,14 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 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;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
+    playing: typeof playing;
+    waiting: typeof waiting;
     touched: typeof touched;
-    mouseEntered: typeof mouseEntered;
+    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>;

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

@@ -1,47 +1,40 @@
-<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/MagicPlayerMuxPopover.vue

@@ -1,8 +1,22 @@
-<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"];
+<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,
@@ -11,113 +25,92 @@ import {
   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 = useTemplateRef("canvas");
-    const storyboard = shallowRef();
-    let context = void 0;
-    let image = void 0;
-    const thumbWidth = computed(() => {
-      if (!storyboard.value) return 0;
-      return storyboard.value.tile_width / pixelRatio.value;
-    });
-    const thumbHeight = computed(() => {
-      if (!storyboard.value) return 0;
-      return storyboard.value.tile_height / pixelRatio.value;
-    });
-    function getMuxId(url) {
-      const match = url?.match(/mux\.com\/([^\/]+)/);
-      return match?.[1]?.replace(/\.(m3u8|mp4)$/, "");
-    }
-    async function init() {
-      const parsedPlaybackId = getMuxId(injectedOptions?.src);
-      const mappedPlaybackId = __props.playbackId ?? parsedPlaybackId;
-      if (!mappedPlaybackId) {
-        console.error(
-          "MagicPlayerMuxPopover must be nested inside MagicPlayerProvider or a playbackId must be provided"
-        );
-        return;
-      }
-      try {
-        storyboard.value = await fetch(
-          `https://image.mux.com/${mappedPlaybackId}/storyboard.json`
-        ).then((res) => res.json());
-        if (!storyboard.value) throw new Error();
-        image = new Image();
-        image.src = storyboard.value.url;
-        await image.decode();
-        context = canvasRef.value?.getContext("2d");
-        context?.drawImage(image, 0, 0);
-      } catch (e) {
-        console.error("Can not initialize timeine preview.", e);
-      }
-    }
-    function drawFrame(time) {
-      if (!storyboard.value || !context || !image) return;
-      const { tile_height, tile_width, tiles } = storyboard.value;
-      let closestIndex = -1;
-      let minDifference = Infinity;
-      for (let i = 0; i < tiles.length; i++) {
-        const { start } = tiles[i];
-        const difference = Math.abs(start - time);
-        if (difference < minDifference) {
-          minDifference = difference;
-          closestIndex = i;
-        }
-      }
-      const tile = tiles[closestIndex];
-      context.drawImage(
-        image,
-        tile.x,
-        tile.y,
-        tile_width,
-        tile_height,
-        0,
-        0,
-        tile_width,
-        tile_height
-      );
-    }
-    onMounted(init);
-    watch(() => seekedTime?.value, drawFrame);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          style: _normalizeStyle({
-            width: `${thumbWidth.value}px`,
-            height: `${thumbHeight.value}px`
-          }),
-          class: "magic-player-mux-popover"
-        },
-        [
-          _createElementVNode("canvas", {
-            ref: "canvas",
-            width: storyboard.value?.tile_width,
-            height: storyboard.value?.tile_height
-          }, null, 8, _hoisted_1)
-        ],
-        4
-        /* STYLE */
-      );
-    };
+const { 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;
+    }
+  }
+  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>