@maas/vue-equipment 1.0.0-beta.13 → 1.0.0-beta.15

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

@@ -1,37 +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" };
+<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 { initializeState } = usePlayerState(instanceId);
-    const state = initializeState();
-    const { loaded, touched } = toRefs(state);
-    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/MagicPlayerProvider.vue

@@ -1,55 +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-id", "data-mode", "data-fullscreen", "data-touched", "data-playing", "data-paused", "data-waiting", "data-loaded", "data-muted"];
+<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 { 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 { initializeState, deleteState } = usePlayerState(__props.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, __props.id);
-    provide(MagicPlayerOptionsKey, mappedOptions);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        ref: "player",
-        class: "magic-player-provider",
-        "data-id": _ctx.id,
-        "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,
-        onMouseleave
-      }, [
-        _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/MagicPlayerTimeline.vue

@@ -1,12 +1,38 @@
-<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 = {
-  ref: "track",
-  class: "magic-player-timeline"
-};
-const _hoisted_2 = { class: "magic-player-timeline__track" };
-const _hoisted_3 = { class: "magic-player-timeline__inner-track" };
+<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 { usePlayerState } from "../composables/private/usePlayerState";
@@ -16,105 +42,22 @@ import {
   MagicPlayerPopoverRef,
   MagicPlayerBarRef
 } 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 { 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
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          _createElementVNode(
-            "div",
-            {
-              class: "magic-player-timeline__target",
-              onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-              (...args) => _unref(onPointerdown) && _unref(onPointerdown)(...args)),
-              onPointermove: _cache[1] || (_cache[1] = //@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[2] || (_cache[2] = [
-                    _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(controlsMouseEntered)]
-                  ]),
-                  _createElementVNode(
-                    "div",
-                    {
-                      class: "magic-player-timeline__scrubbed",
-                      style: _normalizeStyle({ left: `${_unref(scrubbedPercentage)}%` })
-                    },
-                    null,
-                    4
-                    /* STYLE */
-                  )
-                ])
-              ])
-            ],
-            32
-            /* NEED_HYDRATION */
-          )
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
-  }
+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>

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

@@ -1,7 +1,16 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["preload", "loop", "muted"];
+<template>
+  <video
+    ref="el"
+    class="magic-player-video"
+    playsinline
+    disablePictureInPicture
+    :preload="injectedOptions.preload"
+    :loop="injectedOptions.loop"
+    :muted="muted"
+  />
+</template>
+
+<script setup>
 import {
   toRefs,
   useTemplateRef,
@@ -20,77 +29,61 @@ import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerVideo",
-  setup(__props) {
-    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
-    const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-    if (!injectedInstanceId) {
-      throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-    }
-    if (!injectedOptions) {
-      throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
-    }
-    const elRef = useTemplateRef("el");
-    const isVisible = useElementVisibility(elRef);
-    const { initialize, destroy } = usePlayerRuntime({
-      id: injectedInstanceId,
-      mediaRef: elRef,
-      src: injectedOptions.src,
-      srcType: injectedOptions.srcType
-    });
-    const { initializeState } = usePlayerState(injectedInstanceId);
-    const state = initializeState();
-    const { muted, playing } = toRefs(state);
-    usePlayerMediaApi({
-      id: injectedInstanceId,
-      mediaRef: elRef
-    });
-    const { play, pause } = usePlayerVideoApi({
-      id: injectedInstanceId,
-      videoRef: elRef
-    });
-    function onWindowFocus() {
-      if (isVisible.value && !playing.value && injectedOptions?.autoplay) {
-        play();
-      }
+const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+if (!injectedInstanceId) {
+  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
+}
+if (!injectedOptions) {
+  throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
+}
+const elRef = useTemplateRef("el");
+const isVisible = useElementVisibility(elRef);
+const { initialize, destroy } = usePlayerRuntime({
+  id: injectedInstanceId,
+  mediaRef: elRef,
+  src: injectedOptions.src,
+  srcType: injectedOptions.srcType
+});
+const { initializeState } = usePlayerState(injectedInstanceId);
+const state = initializeState();
+const { muted, playing } = toRefs(state);
+usePlayerMediaApi({
+  id: injectedInstanceId,
+  mediaRef: elRef
+});
+const { play, pause } = usePlayerVideoApi({
+  id: injectedInstanceId,
+  videoRef: elRef
+});
+function onWindowFocus() {
+  if (isVisible.value && !playing.value && injectedOptions?.autoplay) {
+    play();
+  }
+}
+useEventListener(defaultWindow, "focus", onWindowFocus);
+watch(
+  isVisible,
+  (value) => {
+    if (value && !playing.value && injectedOptions.autoplay) {
+      play();
+    } else if (!value && playing.value) {
+      pause();
     }
-    useEventListener(defaultWindow, "focus", onWindowFocus);
-    watch(
-      isVisible,
-      (value) => {
-        if (value && !playing.value && injectedOptions.autoplay) {
-          play();
-        } else if (!value && playing.value) {
-          pause();
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    onMounted(() => {
-      initialize();
-      if (injectedOptions.autoplay) {
-        muted.value = true;
-      }
-    });
-    onBeforeUnmount(() => {
-      destroy();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("video", {
-        ref: "el",
-        class: "magic-player-video",
-        playsinline: "",
-        disablePictureInPicture: "",
-        preload: _unref(injectedOptions).preload,
-        loop: _unref(injectedOptions).loop,
-        muted: _unref(muted)
-      }, null, 8, _hoisted_1);
-    };
+  },
+  {
+    immediate: true
+  }
+);
+onMounted(() => {
+  initialize();
+  if (injectedOptions.autoplay) {
+    muted.value = true;
   }
 });
+onBeforeUnmount(() => {
+  destroy();
+});
 </script>
 
 <style>