@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,112 +1,126 @@
-<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);
-      }
+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)$/, "");
+}
+function drawFrame(time) {
+  if (!storyboard.value || !context || !image || !time) {
+    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;
     }
-    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 tile = tiles[closestIndex];
+  context.drawImage(
+    image,
+    tile.x,
+    tile.y,
+    tile_width,
+    tile_height,
+    0,
+    0,
+    tile_width,
+    tile_height
+  );
+}
+async function initialize() {
+  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();
     }
-    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 */
-      );
-    };
+    image = new Image();
+    image.src = storyboard.value.url;
+    await image.decode();
+    context = canvasRef.value?.getContext("2d");
+    drawFrame(seekedTime.value);
+  } catch (e) {
+    console.error("Can not initialize timeline preview", e);
   }
+}
+onMounted(() => {
+  initialize();
 });
+watch(
+  () => seekedTime?.value,
+  (value) => drawFrame(value)
+);
 </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;
-    };
-};

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

@@ -1,84 +1,121 @@
-<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";
+<template>
+  <div
+    class="magic-player-overlay"
+    :data-playing="playing"
+    :data-touched="touched"
+    :data-paused="paused"
+    :data-started="started"
+    :data-waiting="waiting"
+    :data-loaded="loaded"
+    :data-muted="muted"
+    :data-idle="idle"
+    :data-hover="mouseEntered"
+    @click.stop="togglePlay"
+  >
+    <transition :name="mappedOverlayTransition">
+      <div v-if="isVisible">
+        <slot>
+          <transition :name="mappedIconsTransition">
+            <button
+              v-if="defferedWaiting && started"
+              class="magic-player-overlay__button"
+            >
+              <slot name="waitingIcon">
+                <icon-waiting />
+              </slot>
+            </button>
+            <button
+              v-else-if="paused || !started"
+              class="magic-player-overlay__button"
+            >
+              <slot name="playIcon">
+                <icon-play />
+              </slot>
+            </button>
+            <button
+              v-else-if="started && !paused"
+              class="magic-player-overlay__button"
+            >
+              <slot name="pauseIcon">
+                <icon-pause />
+              </slot>
+            </button>
+          </transition>
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { watch, ref, computed, inject, toRefs } 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 { usePlayerState } from "../composables/private/usePlayerState";
 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);
-    };
+import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+const { transition } = defineProps({
+  transition: { type: Object, required: false }
+});
+const instanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+if (!instanceId) {
+  throw new Error(
+    "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
+  );
+}
+const { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const {
+  mouseEntered,
+  playing,
+  paused,
+  started,
+  touched,
+  muted,
+  loaded,
+  waiting,
+  hasOverlay
+} = toRefs(state);
+hasOverlay.value = true;
+const mappedOverlayTransition = computed(
+  () => transition?.overlay ?? injectedOptions?.transition?.overlay
+);
+const mappedIconsTransition = computed(
+  () => transition?.icons ?? injectedOptions?.transition?.icons
+);
+const { togglePlay } = usePlayerVideoApi({
+  id: instanceId
+});
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
+const isVisible = computed(() => {
+  switch (true) {
+    case (playing.value && idle.value):
+    case (playing.value && !mouseEntered.value):
+    case (injectedOptions?.autoplay && (!started.value || !mouseEntered.value)):
+      return false;
+    default:
+      return true;
   }
 });
+const defferedWaiting = ref(false);
+watch(
+  () => waiting.value,
+  (value) => {
+    switch (value) {
+      case true:
+        defferedWaiting.value = true;
+        break;
+      case false:
+        setTimeout(() => {
+          defferedWaiting.value = false;
+        }, 500);
+        break;
+    }
+  }
+);
 </script>
 
 <style>
@@ -87,11 +124,16 @@ export default /* @__PURE__ */ _defineComponent({
   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);
+  cursor: pointer;
+}
+
+.magic-player-overlay div {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
 }
 
 .magic-player-overlay__button {
@@ -103,15 +145,25 @@ export default /* @__PURE__ */ _defineComponent({
   outline: none;
   appearance: none;
   cursor: pointer;
-  width: var(--magic-player-overlay-button-size, 2.5rem);
-  height: var(--magic-player-overlay-button-size, 2.5rem);
+  width: var(--magic-player-overlay-button-size, 2rem);
+  height: var(--magic-player-overlay-button-size, 2rem);
+}
+
+.magic-player-overlay-enter-active {
+  animation: fade-in 150ms ease;
 }
 
-.magic-player-overlay.-playing[data-idle='true'] {
-  opacity: 0;
+.magic-player-overlay-leave-active {
+  animation: fade-out 150ms ease;
 }
 
-.magic-player-overlay.-playing[data-hover='false'] {
-  opacity: 0;
+.magic-player-icons-enter-active {
+  animation: none;
+  position: absolute;
+}
+
+.magic-player-icons-leave-active {
+  animation: none;
+  position: absolute;
 }
 </style>

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

@@ -1,19 +1,23 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        waitingIcon?(_: {}): any;
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
+interface MagicPlayerOverlayProps {
+    transition?: {
+        overlay?: string;
+        icons?: string;
     };
-    refs: {};
-    rootEl: any;
+}
+declare var __VLS_5: {}, __VLS_11: {}, __VLS_16: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+} & {
+    waitingIcon?: (props: typeof __VLS_11) => any;
+} & {
+    playIcon?: (props: typeof __VLS_16) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_21) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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"]>;
+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, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,40 +1,24 @@
-<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";
+<template>
+  <div v-show="isVisible" class="magic-player-poster">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { inject, toRefs, computed } from "vue";
+import { usePlayerState } from "../composables/private/usePlayerState";
 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)]
-      ]);
-    };
-  }
+const instanceId = inject(MagicPlayerInstanceId, void 0);
+if (!instanceId) {
+  throw new Error(
+    "MagicPlayerPoster must be nested inside MagicPlayerProvider."
+  );
+}
+const { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const { loaded, started } = toRefs(state);
+const isVisible = computed(() => {
+  return !loaded.value || !started.value;
 });
 </script>
 

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

@@ -1,16 +1,11 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 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"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };