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

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

@@ -2,7 +2,14 @@
 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 { useTemplateRef, watch, onMounted, inject, onBeforeUnmount } from "vue";
+import {
+  toRefs,
+  useTemplateRef,
+  watch,
+  onMounted,
+  inject,
+  onBeforeUnmount
+} from "vue";
 import {
   useElementVisibility,
   useEventListener,
@@ -11,13 +18,14 @@ import {
 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";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerVideo",
   setup(__props) {
-    const injectedId = inject(MagicPlayerInstanceId, void 0);
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
     const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
-    if (!injectedId) {
+    if (!injectedInstanceId) {
       throw new Error("MagicPlayerVideo must be used within a MagicPlayerProvider");
     }
     if (!injectedOptions) {
@@ -26,17 +34,20 @@ export default /* @__PURE__ */ _defineComponent({
     const elRef = useTemplateRef("el");
     const isVisible = useElementVisibility(elRef);
     const { initialize, destroy } = usePlayerRuntime({
-      id: injectedId,
+      id: injectedInstanceId,
       mediaRef: elRef,
       src: injectedOptions.src,
       srcType: injectedOptions.srcType
     });
-    const { muted, playing } = usePlayerMediaApi({
-      id: injectedId,
+    const { initializeState } = usePlayerState(injectedInstanceId);
+    const state = initializeState();
+    const { muted, playing } = toRefs(state);
+    usePlayerMediaApi({
+      id: injectedInstanceId,
       mediaRef: elRef
     });
     const { play, pause } = usePlayerVideoApi({
-      id: injectedId,
+      id: injectedInstanceId,
       videoRef: elRef
     });
     function onWindowFocus() {

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

@@ -15,18 +15,31 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = { class: "magic-player-video-controls__item -shrink-0" };
 const _hoisted_8 = { class: "magic-player-video-controls__item -shrink-0" };
-import { computed, inject, provide, useTemplateRef } from "vue";
-import { useIdle } from "@vueuse/core";
+import {
+  toRefs,
+  computed,
+  inject,
+  provide,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
+import { useElementVisibility, useIdle } from "@vueuse/core";
 import IconPlay from "./icons/Play.vue";
 import IconPause from "./icons/Pause.vue";
 import IconVolumeOn from "./icons/VolumeOn.vue";
 import IconVolumeOff from "./icons/VolumeOff.vue";
 import IconFullscreenEnter from "./icons/FullscreenEnter.vue";
 import IconFullscreenExit from "./icons/FullscreenExit.vue";
-import { usePlayerMediaApi } from "../composables/private/usePlayerMediaApi";
+import { usePlayerState } from "../composables/private/usePlayerState";
 import { usePlayerVideoApi } from "../composables/private/usePlayerVideoApi";
 import { usePlayerControlsApi } from "../composables/private/usePlayerControlsApi";
-import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
+import {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerTrackRef,
+  MagicPlayerPopoverRef,
+  MagicPlayerBarRef
+} from "../symbols";
 import "@maas/vue-equipment/utils/css/animations/fade-up-in.css";
 import "@maas/vue-equipment/utils/css/animations/fade-up-out.css";
 export default /* @__PURE__ */ _defineComponent({
@@ -37,9 +50,9 @@ export default /* @__PURE__ */ _defineComponent({
     transition: { type: String, required: false }
   },
   setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedInstanceId = computed(() => __props.id ?? injectedInstanceId);
+    if (!mappedInstanceId.value) {
       throw new Error(
         "MagicPlayerVideoControls must be nested inside MagicPlayerProvider or be passed an id as a prop."
       );
@@ -51,26 +64,28 @@ export default /* @__PURE__ */ _defineComponent({
     const barRef = useTemplateRef("bar");
     const trackRef = useTemplateRef("track");
     const popoverRef = useTemplateRef("popover");
-    const { playing, waiting, muted } = usePlayerMediaApi({
-      id: mappedId.value
-    });
+    const { initializeState } = usePlayerState(mappedInstanceId.value);
+    const state = initializeState();
     const {
+      playing,
+      waiting,
+      muted,
       touched,
       mouseEntered,
+      controlsMouseEntered,
       isFullscreen,
-      play,
-      pause,
-      mute,
-      unmute,
-      enterFullscreen,
-      exitFullscreen
-    } = usePlayerVideoApi({ id: mappedId.value });
-    const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
-      id: mappedId.value,
+      popoverOffsetX,
+      seekedTime
+    } = toRefs(state);
+    const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
+    const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
+      id: mappedInstanceId.value,
       barRef,
       trackRef,
       popoverRef
     });
+    const elRef = useTemplateRef("el");
+    const isVisible = useElementVisibility(elRef);
     const { idle } = useIdle(3e3);
     const hidden = computed(() => {
       switch (true) {
@@ -78,7 +93,9 @@ export default /* @__PURE__ */ _defineComponent({
           return false;
         case (playing.value && idle.value):
           return true;
-        case (playing.value && !mouseEntered.value):
+        case (playing.value && !controlsMouseEntered.value && !mouseEntered.value):
+          return true;
+        case !isVisible.value:
           return true;
         case !touched.value:
           return true;
@@ -86,10 +103,18 @@ export default /* @__PURE__ */ _defineComponent({
           return false;
       }
     });
-    provide(MagicPlayerInstanceId, mappedId.value);
+    initialize();
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    provide(MagicPlayerInstanceId, mappedInstanceId.value);
+    provide(MagicPlayerTrackRef, trackRef);
+    provide(MagicPlayerPopoverRef, popoverRef);
+    provide(MagicPlayerBarRef, barRef);
     return (_ctx, _cache) => {
       const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");
       return _openBlock(), _createElementBlock("div", {
+        ref: "el",
         class: "magic-player-video-controls",
         "data-fullscreen": _unref(isFullscreen),
         "data-touched": _unref(touched),
@@ -98,8 +123,12 @@ export default /* @__PURE__ */ _defineComponent({
         "data-waiting": _unref(waiting),
         "data-muted": _unref(muted),
         "data-idle": _unref(idle),
-        "data-hover": _unref(mouseEntered),
-        "data-standalone": _ctx.standalone
+        "data-hover": _unref(controlsMouseEntered),
+        "data-standalone": _ctx.standalone,
+        onMouseenter: _cache[6] || (_cache[6] = //@ts-ignore
+        (...args) => _unref(onMouseenter) && _unref(onMouseenter)(...args)),
+        onMouseleave: _cache[7] || (_cache[7] = //@ts-ignore
+        (...args) => _unref(onMouseleave) && _unref(onMouseleave)(...args))
       }, [
         _createVNode(_Transition, {
           name: mappedTransition.value,
@@ -214,7 +243,7 @@ export default /* @__PURE__ */ _defineComponent({
           _: 3
           /* FORWARDED */
         }, 8, ["name"])
-      ], 8, _hoisted_1);
+      ], 40, _hoisted_1);
     };
   }
 });

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

@@ -12,9 +12,9 @@ interface MagicPlayerControlsProps {
     transition?: string;
 }
 declare const mappedTransition: import("vue").ComputedRef<string | undefined>;
-declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>, muted: import("vue").ShallowRef<boolean, boolean>;
-declare const touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, play: () => void, pause: () => void, mute: () => void, unmute: () => void, enterFullscreen: () => void, exitFullscreen: () => void;
-declare const popoverOffsetX: import("vue").ShallowRef<number, number>, seekedTime: import("vue").ShallowRef<number, number>;
+declare const playing: import("vue").Ref<boolean, boolean>, waiting: import("vue").Ref<boolean, boolean>, muted: import("vue").Ref<boolean, boolean>, touched: import("vue").Ref<boolean, boolean>, controlsMouseEntered: import("vue").Ref<boolean, boolean>, isFullscreen: import("vue").Ref<boolean, boolean>, popoverOffsetX: import("vue").Ref<number, number>, seekedTime: import("vue").Ref<number, number>;
+declare const play: () => void, pause: () => void, mute: () => void, unmute: () => void, enterFullscreen: () => void, exitFullscreen: () => void;
+declare const onMouseenter: () => void, onMouseleave: () => void;
 declare const idle: import("vue").Ref<boolean, boolean>;
 declare const hidden: import("vue").ComputedRef<boolean>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
@@ -50,16 +50,18 @@ declare const __VLS_self: import("vue").DefineComponent<MagicPlayerControlsProps
     waiting: typeof waiting;
     muted: typeof muted;
     touched: typeof touched;
-    mouseEntered: typeof mouseEntered;
+    controlsMouseEntered: typeof controlsMouseEntered;
     isFullscreen: typeof isFullscreen;
+    popoverOffsetX: typeof popoverOffsetX;
+    seekedTime: typeof seekedTime;
     play: typeof play;
     pause: typeof pause;
     mute: typeof mute;
     unmute: typeof unmute;
     enterFullscreen: typeof enterFullscreen;
     exitFullscreen: typeof exitFullscreen;
-    popoverOffsetX: typeof popoverOffsetX;
-    seekedTime: typeof seekedTime;
+    onMouseenter: typeof onMouseenter;
+    onMouseleave: typeof onMouseleave;
     idle: typeof idle;
     hidden: typeof hidden;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPlayerControlsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerAudioApi.d.ts

@@ -3,15 +3,11 @@ export type UsePlayerAudioApiArgs = {
     id: MaybeRef<string>;
 };
 export declare function usePlayerAudioApi(args: UsePlayerAudioApiArgs): {
-    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-    touched: import("vue").ShallowRef<boolean, boolean>;
     play: () => void;
     pause: () => void;
     togglePlay: () => void;
     seek: (time: number) => void;
     mute: () => void;
     unmute: () => void;
-    onMouseenter: () => void;
-    onMouseleave: () => void;
 };
 export type UsePlayerAudioApiReturn = ReturnType<typeof usePlayerAudioApi>;

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerAudioApi.mjs

@@ -1,11 +1,10 @@
-import { shallowRef, watch, toValue } from "vue";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { toRefs, watch, toValue } from "vue";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerAudioApi(args) {
   const { id } = args;
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = shallowRef(false);
-  const mouseEntered = shallowRef(false);
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { touched, currentTime, playing, muted } = toRefs(state);
   function play() {
     playing.value = true;
   }
@@ -24,57 +23,17 @@ export function usePlayerAudioApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
-  }
   watch(playing, (value) => {
     if (!touched.value && value) {
       touched.value = true;
     }
   });
-  const emitter = usePlayerStateEmitter();
-  emitter.on("update", (payload) => {
-    if (payload.id !== toValue(id)) return;
-    if (payload.api === "player") {
-      switch (payload.key) {
-        case "mouseEntered":
-          mouseEntered.value = payload.value;
-          break;
-        case "touched":
-          touched.value = payload.value;
-          break;
-      }
-    }
-  });
-  watch(mouseEntered, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "mouseEntered",
-      value
-    });
-  });
-  watch(touched, (value) => {
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "touched",
-      value
-    });
-  });
   return {
-    mouseEntered,
-    touched,
     play,
     pause,
     togglePlay,
     seek,
     mute,
-    unmute,
-    onMouseenter,
-    onMouseleave
+    unmute
   };
 }

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerControlsApi.d.ts

@@ -6,39 +6,12 @@ export type UsePlayerControlsApiArgs = {
     popoverRef?: Ref<HTMLDivElement | null>;
 };
 export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
-    mouseEntered: import("vue").ShallowRef<boolean, boolean>;
-    dragging: import("vue").ShallowRef<boolean, boolean>;
-    seekedTime: import("vue").ShallowRef<number, number>;
-    seekedPercentage: import("vue").ShallowRef<number, number>;
-    scrubbedPercentage: import("vue").ShallowRef<number, number>;
+    initialize: () => void;
+    destroy: () => void;
     bufferedPercentage: import("vue").ComputedRef<number>;
-    thumbPercentage: import("vue").ShallowRef<number, number>;
-    popoverOffsetX: import("vue").ShallowRef<number, number>;
     onMouseenter: () => void;
     onMouseleave: () => void;
-    onPointerdown: (e: MouseEvent | TouchEvent) => void;
-    onPointerup: () => void;
-    onPointermove: (e: MouseEvent | TouchEvent) => void;
-    trackRect: Ref<{
-        height: number;
-        width: number;
-        x: number;
-        y: number;
-        readonly bottom: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        toJSON: () => any;
-    } | undefined, DOMRect | {
-        height: number;
-        width: number;
-        x: number;
-        y: number;
-        readonly bottom: number;
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        toJSON: () => any;
-    } | undefined>;
+    onPointerdown: (e: PointerEvent) => void;
+    onPointermove: (e: PointerEvent) => void;
 };
 export type UsePlayerControlsApiReturn = ReturnType<typeof usePlayerControlsApi>;