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

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

@@ -1,84 +1,56 @@
-<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-paused="!playing"
+    :data-waiting="waiting"
+    :data-idle="idle"
+    :data-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>
+import { 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);
-    };
-  }
+const instanceId = inject(MagicPlayerInstanceId, void 0);
+if (!instanceId) {
+  throw new Error(
+    "MagicPlayerOverlay must be nested inside MagicPlayerProvider."
+  );
+}
+const { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const { mouseEntered, playing, waiting } = toRefs(state);
+const { togglePlay } = usePlayerVideoApi({
+  id: instanceId
 });
+const { idle } = useIdle(3e3);
 </script>
 
 <style>

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

@@ -1,8 +1,8 @@
 import IconPlay from './icons/Play.vue.js';
 import IconPause from './icons/Pause.vue.js';
 import IconWaiting from './icons/Waiting.vue.js';
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
-declare const mouseEntered: import("vue").ShallowRef<boolean, boolean>, togglePlay: () => void;
+declare const mouseEntered: import("vue").Ref<boolean, boolean>, playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>;
+declare const togglePlay: () => void;
 declare const idle: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_8: {}, __VLS_13: {};
@@ -19,9 +19,9 @@ declare const __VLS_self: import("vue").DefineComponent<{}, {
     IconPlay: typeof IconPlay;
     IconPause: typeof IconPause;
     IconWaiting: typeof IconWaiting;
+    mouseEntered: typeof mouseEntered;
     playing: typeof playing;
     waiting: typeof waiting;
-    mouseEntered: typeof mouseEntered;
     togglePlay: typeof togglePlay;
     idle: typeof idle;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,41 +1,22 @@
-<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="!loaded || !touched" class="magic-player-poster">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { inject, toRefs } 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, touched } = toRefs(state);
 </script>
 
 <style>

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

@@ -1,5 +1,4 @@
-declare const loaded: import("vue").ShallowRef<boolean, boolean>;
-declare const touched: import("vue").ShallowRef<boolean, boolean>;
+declare const loaded: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {

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

@@ -1,61 +1,54 @@
-<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 { useTemplateRef, provide } from "vue";
+<template>
+  <div
+    ref="player"
+    class="magic-player-provider"
+    :data-id="id"
+    :data-mode="mappedOptions.mode"
+    :data-fullscreen="isFullscreen"
+    :data-touched="touched"
+    :data-playing="playing"
+    :data-paused="!playing"
+    :data-waiting="waiting"
+    :data-loaded="loaded"
+    :data-muted="muted"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { toRefs, provide, onUnmounted } 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 { usePlayerState } from "../composables/private/usePlayerState";
 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 }
+const { id, options } = defineProps({
+  id: {
+    type: null,
+    required: true
   },
-  setup(__props) {
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const playerRef = useTemplateRef("player");
-    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: "player",
-        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);
-    };
+  options: {
+    type: Object,
+    required: false
   }
 });
+const mappedOptions = defu(options, defaultOptions);
+const { initializeState, deleteState } = usePlayerState(id);
+const state = initializeState();
+const { playing, waiting, muted, loaded, isFullscreen, touched, mouseEntered } = toRefs(state);
+function onMouseenter() {
+  mouseEntered.value = true;
+}
+function onMouseleave() {
+  mouseEntered.value = false;
+}
+onUnmounted(() => {
+  deleteState();
+});
+provide(MagicPlayerInstanceId, id);
+provide(MagicPlayerOptionsKey, mappedOptions);
 </script>
 
 <style>

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

@@ -5,9 +5,9 @@ interface MagicPlayerProps {
     options?: MagicPlayerOptions;
 }
 declare const mappedOptions: MagicPlayerOptions;
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>, muted: import("vue").ShallowRef<boolean, boolean>;
-declare const loaded: import("vue").ShallowRef<boolean, boolean>;
-declare const onMouseenter: () => void, onMouseleave: () => void, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").ShallowRef<boolean, boolean>;
+declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, muted: import("vue").Ref<boolean, boolean>, loaded: import("vue").Ref<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>;
+declare function onMouseenter(): void;
+declare function onMouseleave(): void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
@@ -19,10 +19,10 @@ declare const __VLS_self: import("vue").DefineComponent<MagicPlayerProps, {
     waiting: typeof waiting;
     muted: typeof muted;
     loaded: typeof loaded;
-    onMouseenter: typeof onMouseenter;
-    onMouseleave: typeof onMouseleave;
     isFullscreen: typeof isFullscreen;
     touched: typeof touched;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<MagicPlayerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -1,112 +1,63 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, vShow as _vShow, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { class: "magic-player-timeline" };
-const _hoisted_2 = { class: "magic-player-timeline__track" };
-const _hoisted_3 = { class: "magic-player-timeline__inner-track" };
-import { inject } from "vue";
+<template>
+  <div ref="track" class="magic-player-timeline">
+    <div
+      class="magic-player-timeline__target"
+      @pointerdown="onPointerdown"
+      @pointermove="onPointermove"
+    >
+      <div class="magic-player-timeline__track">
+        <div
+          class="magic-player-timeline__thumb"
+          :style="{ left: `${scrubbedPercentage}%` }"
+        >
+          <div class="magic-player-timeline__thumb-handle" />
+        </div>
+        <div class="magic-player-timeline__inner-track">
+          <div
+            class="magic-player-timeline__buffered"
+            :style="{ left: `${bufferedPercentage}%` }"
+          />
+          <div
+            v-show="controlsMouseEntered"
+            class="magic-player-timeline__seeked"
+            :style="{ left: `${seekedPercentage}%` }"
+          />
+          <div
+            class="magic-player-timeline__scrubbed"
+            :style="{ left: `${scrubbedPercentage}%` }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { inject, toRefs } from "vue";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
-import { MagicPlayerInstanceId } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerTimeline",
-  setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    if (!instanceId) {
-      throw new Error(
-        "MagicPlayerPoster must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
-      );
-    }
-    const {
-      mouseEntered,
-      seekedPercentage,
-      scrubbedPercentage,
-      bufferedPercentage,
-      onMouseenter,
-      onMouseleave,
-      onPointerdown,
-      onPointerup,
-      onPointermove
-    } = usePlayerControlsApi({
-      id: instanceId
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", _hoisted_1, [
-        _createElementVNode(
-          "div",
-          {
-            class: "magic-player-timeline__target",
-            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)),
-            onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-            (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
-            onPointerup: _cache[3] || (_cache[3] = //@ts-ignore
-            (...args) => _unref(onPointerup) && _unref(onPointerup)(...args)),
-            onPointermove: _cache[4] || (_cache[4] = //@ts-ignore
-            (...args) => _unref(onPointermove) && _unref(onPointermove)(...args))
-          },
-          [
-            _createElementVNode("div", _hoisted_2, [
-              _createElementVNode(
-                "div",
-                {
-                  class: "magic-player-timeline__thumb",
-                  style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
-                },
-                _cache[5] || (_cache[5] = [
-                  _createElementVNode(
-                    "div",
-                    { class: "magic-player-timeline__thumb-handle" },
-                    null,
-                    -1
-                    /* HOISTED */
-                  )
-                ]),
-                4
-                /* STYLE */
-              ),
-              _createElementVNode("div", _hoisted_3, [
-                _createElementVNode(
-                  "div",
-                  {
-                    class: "magic-player-timeline__buffered",
-                    style: _normalizeStyle({ left: `${_unref(bufferedPercentage)}%` })
-                  },
-                  null,
-                  4
-                  /* STYLE */
-                ),
-                _withDirectives(_createElementVNode(
-                  "div",
-                  {
-                    class: "magic-player-timeline__seeked",
-                    style: _normalizeStyle({ left: `${_unref(seekedPercentage)}%` })
-                  },
-                  null,
-                  4
-                  /* STYLE */
-                ), [
-                  [_vShow, _unref(mouseEntered)]
-                ]),
-                _createElementVNode(
-                  "div",
-                  {
-                    class: "magic-player-timeline__scrubbed",
-                    style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
-                  },
-                  null,
-                  4
-                  /* STYLE */
-                )
-              ])
-            ])
-          ],
-          32
-          /* NEED_HYDRATION */
-        )
-      ]);
-    };
-  }
+import { usePlayerState } from "../composables/private/usePlayerState";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerTrackRef,
+  MagicPlayerPopoverRef,
+  MagicPlayerBarRef
+} from "../symbols";
+const instanceId = inject(MagicPlayerInstanceId, void 0);
+if (!instanceId) {
+  throw new Error(
+    "MagicPlayerPoster must be nested inside MagicPlayerVideoControls or MagicPlayerAudioControls."
+  );
+}
+const { initializeState } = usePlayerState(instanceId);
+const state = initializeState();
+const { controlsMouseEntered, seekedPercentage, scrubbedPercentage } = toRefs(state);
+const barRef = inject(MagicPlayerBarRef);
+const trackRef = inject(MagicPlayerTrackRef);
+const popoverRef = inject(MagicPlayerPopoverRef);
+const { bufferedPercentage, onPointerdown, onPointermove } = usePlayerControlsApi({
+  id: instanceId,
+  barRef,
+  trackRef,
+  popoverRef
 });
 </script>