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

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

@@ -1,62 +1,72 @@
-<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 { ref, provide } from "vue";
+<template>
+  <div
+    ref="player"
+    class="magic-player-provider"
+    :data-id="id"
+    :data-mode="mappedOptions.mode"
+    :data-fullscreen="fullscreen"
+    :data-touched="touched"
+    :data-playing="playing"
+    :data-paused="paused"
+    :data-started="started"
+    :data-waiting="waiting"
+    :data-loaded="loaded"
+    :data-muted="muted"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+    @pointerdown="onPointerdown"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  toRefs,
+  provide,
+  onMounted,
+  onUnmounted,
+  useTemplateRef
+} 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 { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import { usePlayerState } from "../composables/private/usePlayerState";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef
+} from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerProvider",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false }
-  },
-  setup(__props) {
-    const mappedOptions = defu(__props.options, defaultOptions);
-    const playerRef = ref(void 0);
-    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_key: "playerRef",
-        ref: playerRef,
-        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);
-    };
-  }
+import { usePlayerEmitter } from "../composables/private/usePlayerEmitter";
+import { usePlayerProvider } from "../composables/private/usePlayerProvider";
+const { id, options } = defineProps({
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
+});
+const mappedOptions = defu(options, defaultOptions);
+const { initializeState, deleteState } = usePlayerState(id);
+const state = initializeState();
+const {
+  playing,
+  paused,
+  started,
+  waiting,
+  muted,
+  loaded,
+  fullscreen,
+  touched
+} = toRefs(state);
+const { onMouseenter, onMouseleave, onPointerdown } = usePlayerProvider(id);
+const playerRef = useTemplateRef("player");
+const { initializeEmitter } = usePlayerEmitter({ id });
+onMounted(() => {
+  initializeEmitter();
+});
+onUnmounted(() => {
+  deleteState();
 });
+provide(MagicPlayerInstanceId, id);
+provide(MagicPlayerOptionsKey, mappedOptions);
+provide(MagicPlayerRef, playerRef);
 </script>
 
 <style>

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

@@ -4,30 +4,14 @@ interface MagicPlayerProps {
     id: MaybeRef<string>;
     options?: MagicPlayerOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {
-        playerRef: any;
-    };
-    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").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerProps>>> & 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<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>;
 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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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(
+    "MagicPlayerTimeline 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, void 0);
+const { bufferedPercentage, onPointerdown, onPointermove } = usePlayerControlsApi({
+  id: instanceId,
+  barRef,
+  trackRef,
+  popoverRef
 });
 </script>

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

@@ -1,8 +1,26 @@
-<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"];
-import { ref, watch, onMounted, inject, onBeforeUnmount } from "vue";
+<template>
+  <video
+    ref="el"
+    class="magic-player-video"
+    playsinline
+    disablePictureInPicture
+    :preload="injectedOptions.preload"
+    :loop="injectedOptions.loop"
+    :muted="muted"
+  />
+</template>
+
+<script setup>
+import {
+  toRefs,
+  useTemplateRef,
+  watch,
+  onMounted,
+  inject,
+  onBeforeUnmount,
+  shallowRef,
+  computed
+} from "vue";
 import {
   useElementVisibility,
   useEventListener,
@@ -11,76 +29,108 @@ import {
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerVideo",
-  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");
+import { usePlayerState } from "../composables/private/usePlayerState";
+import { videoModePlaybackDefaults } from "../utils/playbackDefaults";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef
+} from "../symbols";
+const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
+const injectedPlayerRef = inject(MagicPlayerRef, 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 { initialize, destroy } = usePlayerRuntime({
+  id: injectedInstanceId,
+  mediaRef: elRef,
+  src: injectedOptions.src,
+  srcType: injectedOptions.srcType
+});
+const { initializeState } = usePlayerState(injectedInstanceId);
+const state = initializeState();
+const { muted, playing, started, loaded } = toRefs(state);
+usePlayerMediaApi({
+  id: injectedInstanceId,
+  mediaRef: elRef
+});
+const { play, pause, mute, initializeFullscreen } = usePlayerVideoApi({
+  id: injectedInstanceId,
+  videoRef: elRef,
+  playerRef: injectedPlayerRef
+});
+const wasPlaying = shallowRef(false);
+const isVisible = useElementVisibility(elRef);
+const manageWindow = computed(() => {
+  const playbackOptions = injectedOptions.playback || videoModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("window");
+});
+const manageViewport = computed(() => {
+  const playbackOptions = injectedOptions.playback || videoModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("viewport");
+});
+function onWindowFocus() {
+  if (isVisible.value && wasPlaying.value) {
+    play();
+  }
+}
+function onWindowBlur() {
+  wasPlaying.value = playing.value;
+  pause();
+}
+if (manageWindow.value) {
+  useEventListener(defaultWindow, "focus", onWindowFocus);
+  useEventListener(defaultWindow, "blur", onWindowBlur);
+}
+if (manageViewport.value) {
+  watch(isVisible, (value) => {
+    if (!value) {
+      wasPlaying.value = playing.value;
+      pause();
     }
-    if (!injectedOptions) {
-      throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
+    if (value && wasPlaying.value) {
+      play();
     }
-    const elRef = ref(void 0);
-    const isVisible = useElementVisibility(elRef);
-    const { initialize, destroy } = usePlayerRuntime({
-      id: injectedId,
-      mediaRef: elRef,
-      src: injectedOptions.src,
-      srcType: injectedOptions.srcType
-    });
-    const { muted, playing } = usePlayerMediaApi({
-      id: injectedId,
-      mediaRef: elRef
-    });
-    const { play, pause } = usePlayerVideoApi({
-      id: injectedId,
-      videoRef: elRef
-    });
-    function onWindowFocus() {
-      if (isVisible.value && !playing.value && injectedOptions?.autoplay) {
-        play();
-      }
+    if (value && injectedOptions.autoplay && !started.value) {
+      play();
     }
-    useEventListener(defaultWindow, "focus", onWindowFocus);
-    watch(
-      isVisible,
-      (value) => {
-        if (value && !playing.value && injectedOptions.autoplay) {
-          play();
-        } else if (!value && playing.value) {
-          pause();
-        }
-      },
-      {
-        immediate: true
+  });
+  watch(
+    loaded,
+    (value) => {
+      if (value && !started.value && isVisible.value && injectedOptions.autoplay) {
+        play();
       }
-    );
-    onMounted(() => {
-      initialize();
-      if (injectedOptions.autoplay) {
-        muted.value = true;
+    },
+    { once: true }
+  );
+}
+if (!manageViewport.value) {
+  watch(
+    loaded,
+    (value) => {
+      if (value && !started.value && injectedOptions.autoplay) {
+        play();
       }
-    });
-    onBeforeUnmount(() => {
-      destroy();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("video", {
-        ref_key: "elRef",
-        ref: elRef,
-        class: "magic-player-video",
-        playsinline: "",
-        disablePictureInPicture: "",
-        preload: _unref(injectedOptions).preload,
-        loop: _unref(injectedOptions).loop,
-        muted: _unref(muted)
-      }, null, 8, _hoisted_1);
-    };
+    },
+    { once: true }
+  );
+}
+onMounted(async () => {
+  initialize(injectedOptions.autoplay);
+  initializeFullscreen();
+  if (injectedOptions.autoplay) {
+    mute();
   }
 });
+onBeforeUnmount(() => {
+  destroy();
+});
 </script>
 
 <style>