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

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

@@ -1,73 +1,101 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, onMounted, onBeforeUnmount } from "vue";
-import { useIntersectionObserver } from "@vueuse/core";
+<template>
+  <audio ref="el" class="magic-player-audio" />
+</template>
+
+<script setup>
+import {
+  toRefs,
+  useTemplateRef,
+  inject,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  shallowRef,
+  computed
+} from "vue";
+import {
+  useElementVisibility,
+  useEventListener,
+  defaultWindow
+} from "@vueuse/core";
 import { usePlayerAudioApi } from "../composables/private/usePlayerAudioApi";
 import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
 import { usePlayerRuntime } from "../composables/private/usePlayerRuntime";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicPlayerAudio",
-  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 { audioModePlaybackDefaults } 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
+});
+usePlayerMediaApi({
+  id: injectedInstanceId,
+  mediaRef: elRef
+});
+const { play, pause } = usePlayerAudioApi({
+  id: injectedInstanceId
+});
+const { initializeState } = usePlayerState(injectedInstanceId);
+const state = initializeState();
+const { playing, started } = toRefs(state);
+const wasPlaying = shallowRef(false);
+const isVisible = useElementVisibility(injectedPlayerRef);
+const manageWindow = computed(() => {
+  const playbackOptions = injectedOptions.playback || audioModePlaybackDefaults;
+  return playbackOptions !== false && playbackOptions?.includes("window");
+});
+const manageViewport = computed(() => {
+  const playbackOptions = injectedOptions.playback || audioModePlaybackDefaults;
+  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 pausedByIntersection = ref(false);
-    const { initialize, destroy } = usePlayerRuntime({
-      id: injectedId,
-      mediaRef: elRef,
-      src: injectedOptions.src,
-      srcType: injectedOptions.srcType
-    });
-    const { playing } = usePlayerMediaApi({
-      id: injectedId,
-      mediaRef: elRef
-    });
-    const { play, pause } = usePlayerAudioApi({
-      id: injectedId
-    });
-    useIntersectionObserver(
-      elRef,
-      ([{ isIntersecting }]) => {
-        if (!isIntersecting && playing.value) {
-          pause();
-          pausedByIntersection.value = true;
-        } else if (isIntersecting && !playing.value && pausedByIntersection.value) {
-          pausedByIntersection.value = false;
-          play();
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-    onMounted(() => {
-      initialize();
-    });
-    onBeforeUnmount(() => {
-      destroy();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "audio",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-player-audio"
-        },
-        null,
-        512
-        /* NEED_PATCH */
-      );
-    };
-  }
+    if (value && injectedOptions.autoplay && !started.value) {
+      play();
+    }
+  });
+}
+onMounted(() => {
+  initialize();
+});
+onBeforeUnmount(() => {
+  destroy();
 });
 </script>
 

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

@@ -1,134 +1,130 @@
-<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 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "play-toggle"
-};
-const _hoisted_4 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "display-time-current"
-};
-const _hoisted_5 = {
-  class: "magic-player-audio-controls__item -grow",
-  "data-slot": "timeline"
-};
-const _hoisted_6 = {
-  class: "magic-player-audio-controls__item -shrink-0",
-  "data-slot": "display-time-duration"
-};
-import { computed, ref, inject, provide } from "vue";
+<template>
+  <div
+    class="magic-player-audio-controls"
+    :data-touched="touched"
+    :data-dragging="dragging"
+    :data-started="started"
+    :data-playing="playing"
+    :data-paused="paused"
+    :data-waiting="waiting"
+    :data-muted="muted"
+    :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"
+            @mouseleave="onMouseleaveTimeline"
+          >
+            <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: {
-    id: { type: String, required: false }
-  },
-  setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
-      throw new Error(
-        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
-      );
-    }
-    const barRef = ref(void 0);
-    const trackRef = ref(void 0);
-    const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
-    });
-    const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
-    });
-    usePlayerControlsApi({
-      id: mappedId.value,
-      barRef,
-      trackRef
-    });
-    const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.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",
-            {
-              ref_key: "barRef",
-              ref: barRef,
-              class: "magic-player-audio-controls__bar--inner"
-            },
-            [
-              _createElementVNode("div", _hoisted_3, [
-                !_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_4, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "current"
-                }, null, 8, ["id"])
-              ]),
-              _createElementVNode("div", _hoisted_5, [
-                _createElementVNode(
-                  "div",
-                  {
-                    ref_key: "trackRef",
-                    ref: trackRef,
-                    class: "magic-player-audio-controls__timeline"
-                  },
-                  [
-                    _createVNode(_component_magic_player_timeline, { id: _ctx.id }, null, 8, ["id"])
-                  ],
-                  512
-                  /* NEED_PATCH */
-                )
-              ]),
-              _createElementVNode("div", _hoisted_6, [
-                _createVNode(_component_magic_player_display_time, {
-                  id: _ctx.id,
-                  type: "duration"
-                }, null, 8, ["id"])
-              ])
-            ],
-            512
-            /* NEED_PATCH */
-          )
-        ])
-      ], 8, _hoisted_1);
-    };
-  }
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef
+} from "../symbols";
+const { instanceId } = defineProps({
+  instanceId: { type: String, required: false }
 });
+const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+const injectedOptions = inject(MagicPlayerOptionsKey, 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,
+  onMouseleaveTimeline
+} = usePlayerControlsApi({
+  id: mappedInstanceId.value,
+  barRef,
+  trackRef
+});
+const { initializeState } = usePlayerState(mappedInstanceId.value);
+const state = initializeState();
+const {
+  playing,
+  paused,
+  started,
+  muted,
+  waiting,
+  touched,
+  dragging,
+  controlsMouseEntered
+} = toRefs(state);
+const { idle } = useIdle(injectedOptions?.threshold?.idle);
+initialize();
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicPlayerInstanceId, mappedInstanceId.value);
+provide(MagicPlayerTrackRef, trackRef);
+provide(MagicPlayerBarRef, barRef);
 </script>

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

@@ -1,32 +1,16 @@
 interface MagicAudioPlayerControlsProps {
-    id?: string;
+    instanceId?: string;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        playIcon?(_: {}): any;
-        pauseIcon?(_: {}): any;
-    };
-    refs: {
-        barRef: any;
-        trackRef: any;
-    };
-    rootEl: any;
+declare var __VLS_1: {}, __VLS_6: {};
+type __VLS_Slots = {} & {
+    playIcon?: (props: typeof __VLS_1) => any;
+} & {
+    pauseIcon?: (props: typeof __VLS_6) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicAudioPlayerControlsProps>>> & 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<MagicAudioPlayerControlsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAudioPlayerControlsProps> & 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/MagicPlayerDisplayTime.vue

@@ -1,47 +1,37 @@
-<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/MagicPlayerDisplayTime.vue.d.ts

@@ -1,14 +1,5 @@
 interface MagicPlayerDisplayTimeProps {
     type?: 'current' | 'remaining' | 'duration';
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<MagicPlayerDisplayTimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerDisplayTimeProps> & 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;
-    };
-};