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

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

@@ -1,23 +1,24 @@
-import { ref, watch, toValue } from "vue";
+import { toRefs, watch, toValue } from "vue";
 import { useFullscreen } from "@vueuse/core";
 import { isIOS } from "@maas/vue-equipment/utils";
-import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
-import { usePlayerMediaApi } from "./usePlayerMediaApi.mjs";
+import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerVideoApi(args) {
   const { id, playerRef, videoRef } = args;
-  const fullscreenTarget = ref(void 0);
-  const { playing, currentTime, muted } = usePlayerMediaApi({ id });
-  const touched = ref(false);
-  const mouseEntered = ref(false);
-  const { isFullscreen, enter, exit } = useFullscreen(fullscreenTarget);
+  const { initializeState } = usePlayerState(toValue(id));
+  const state = initializeState();
+  const { currentTime, playing, paused, muted, fullscreenTarget, fullscreen } = toRefs(state);
+  const { enter, exit, isFullscreen } = useFullscreen(fullscreenTarget);
   function play() {
     playing.value = true;
+    paused.value = false;
   }
   function pause() {
     playing.value = false;
+    paused.value = true;
   }
   function togglePlay() {
     playing.value = !playing.value;
+    paused.value = !playing.value;
   }
   function seek(time) {
     currentTime.value = time;
@@ -28,11 +29,38 @@ export function usePlayerVideoApi(args) {
   function unmute() {
     muted.value = false;
   }
-  function onMouseenter() {
-    mouseEntered.value = true;
-  }
-  function onMouseleave() {
-    mouseEntered.value = false;
+  function initializeFullscreen() {
+    if (!playerRef || !videoRef) {
+      return;
+    }
+    watch(
+      [playerRef, videoRef],
+      ([player, video]) => {
+        switch (true) {
+          case (!!video && !!player):
+            fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
+            break;
+          case !!player:
+            fullscreenTarget.value = toValue(player);
+            break;
+          case !!video:
+            fullscreenTarget.value = toValue(video);
+            break;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      isFullscreen,
+      (newFullscreen) => {
+        fullscreen.value = newFullscreen;
+      },
+      {
+        immediate: true
+      }
+    );
   }
   function enterFullscreen() {
     if (!fullscreenTarget.value) {
@@ -48,91 +76,15 @@ export function usePlayerVideoApi(args) {
     }
     exit();
   }
-  watch(playing, (value) => {
-    if (!touched.value && value) {
-      touched.value = true;
-    }
-  });
-  if (playerRef && !videoRef) {
-    watch(playerRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && !playerRef) {
-    watch(videoRef, (value) => {
-      if (value) {
-        fullscreenTarget.value = toValue(value);
-      }
-    });
-  }
-  if (videoRef && playerRef) {
-    watch([playerRef, videoRef], ([player, video]) => {
-      if (player && video) {
-        fullscreenTarget.value = isIOS() ? toValue(video) : toValue(player);
-      } else if (player) {
-        fullscreenTarget.value = toValue(player);
-      } else if (video) {
-        fullscreenTarget.value = toValue(video);
-      }
-    });
-  }
-  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 "fullscreenTarget":
-          fullscreenTarget.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
-    });
-  });
-  watch(fullscreenTarget, (value) => {
-    if (!value) return;
-    emitter.emit("update", {
-      id: toValue(id),
-      api: "player",
-      key: "fullscreenTarget",
-      value
-    });
-  });
   return {
-    mouseEntered,
-    isFullscreen,
-    touched,
     play,
     pause,
     togglePlay,
     seek,
     mute,
     unmute,
+    initializeFullscreen,
     enterFullscreen,
-    exitFullscreen,
-    onMouseenter,
-    onMouseleave
+    exitFullscreen
   };
 }

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -1,73 +1,58 @@
-import type { MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 export declare function useMagicPlayer(id: MaybeRef<string>): {
-    mediaApi: {
-        currentTime: import("vue").Ref<number, number>;
-        remainingTime: import("vue").ComputedRef<number>;
-        duration: import("vue").Ref<number, number>;
-        seeking: import("vue").Ref<boolean, boolean>;
-        volume: import("vue").Ref<number, number>;
-        rate: import("vue").Ref<number, number>;
-        waiting: import("vue").Ref<boolean, boolean>;
-        ended: import("vue").Ref<boolean, boolean>;
-        playing: import("vue").Ref<boolean, boolean>;
-        stalled: import("vue").Ref<boolean, boolean>;
-        buffered: import("vue").Ref<[number, number][], import("../types").Buffered | [number, number][]>;
-        muted: import("vue").Ref<boolean, boolean>;
+    duration: import("vue").Ref<number, number>;
+    seeking: import("vue").Ref<boolean, boolean>;
+    volume: import("vue").Ref<number, number>;
+    rate: import("vue").Ref<number, number>;
+    loaded: import("vue").Ref<boolean, boolean>;
+    waiting: import("vue").Ref<boolean, boolean>;
+    ended: import("vue").Ref<boolean, boolean>;
+    playing: import("vue").Ref<boolean, boolean>;
+    started: import("vue").Ref<boolean, boolean>;
+    paused: import("vue").Ref<boolean, boolean>;
+    stalled: import("vue").Ref<boolean, boolean>;
+    buffered: import("vue").Ref<import("../types/index.js").Buffered, import("../types/index.js").Buffered>;
+    muted: import("vue").Ref<boolean, boolean>;
+    touched: import("vue").Ref<boolean, boolean>;
+    dragging: import("vue").Ref<boolean, boolean>;
+    fullscreen: import("vue").Ref<boolean, boolean>;
+    currentTime: import("vue").Ref<number, number>;
+    seekedTime: import("vue").Ref<number | null, number | null>;
+    seekedPercentage: import("vue").Ref<number, number>;
+    scrubbedPercentage: import("vue").Ref<number, number>;
+    thumbPercentage: import("vue").Ref<number, number>;
+    popoverOffsetX: import("vue").Ref<number | null, number | null>;
+    audioApi: {
+        play: () => void;
+        pause: () => void;
+        togglePlay: () => void;
+        seek: (time: number) => void;
+        mute: () => void;
+        unmute: () => void;
     };
     videoApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        isFullscreen: import("vue").Ref<boolean, boolean>;
-        touched: import("vue").Ref<boolean, boolean>;
         play: () => void;
         pause: () => void;
         togglePlay: () => void;
         seek: (time: number) => void;
         mute: () => void;
         unmute: () => void;
+        initializeFullscreen: () => void;
         enterFullscreen: () => void;
         exitFullscreen: () => void;
-        onMouseenter: () => void;
-        onMouseleave: () => void;
     };
     controlsApi: {
-        mouseEntered: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<boolean, boolean>;
-        seekedTime: import("vue").Ref<number, number>;
-        seekedPercentage: import("vue").Ref<number, number>;
-        scrubbedPercentage: import("vue").Ref<number, number>;
+        initialize: () => void;
+        destroy: () => void;
         bufferedPercentage: import("vue").ComputedRef<number>;
-        thumbPercentage: import("vue").Ref<number, number>;
-        popoverOffsetX: import("vue").Ref<number, number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
-        onPointerdown: (e: MouseEvent | TouchEvent) => void;
-        onPointerup: () => void;
-        onPointermove: (e: MouseEvent | TouchEvent) => void;
-        trackRect: import("vue").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>;
+        onMouseleaveTimeline: () => void;
+        onPointerdown: (e: PointerEvent) => void;
+        onPointermove: (e: PointerEvent) => void;
     };
     playerRuntime: {
-        loaded: import("vue").Ref<boolean, boolean>;
-        initialize: () => void;
+        initialize: (autoplay?: boolean) => void;
         destroy: () => void;
     };
 };

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.mjs

@@ -1,14 +1,64 @@
-import { usePlayerMediaApi } from "./private/usePlayerMediaApi.mjs";
+import { toRefs } from "vue";
 import { usePlayerVideoApi } from "./private/usePlayerVideoApi.mjs";
+import { usePlayerAudioApi } from "./private/usePlayerAudioApi.mjs";
 import { usePlayerRuntime } from "./private/usePlayerRuntime.mjs";
 import { usePlayerControlsApi } from "./private/usePlayerControlsApi.mjs";
+import { usePlayerState } from "./private/usePlayerState.mjs";
 export function useMagicPlayer(id) {
-  const mediaApi = usePlayerMediaApi({ id });
+  const audioApi = usePlayerAudioApi({ id });
   const videoApi = usePlayerVideoApi({ id });
   const controlsApi = usePlayerControlsApi({ id });
   const playerRuntime = usePlayerRuntime({ id });
+  const { initializeState } = usePlayerState(id);
+  const state = initializeState();
+  const {
+    currentTime,
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    started,
+    paused,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    fullscreen,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX
+  } = toRefs(state);
   return {
-    mediaApi,
+    duration,
+    seeking,
+    volume,
+    rate,
+    loaded,
+    waiting,
+    ended,
+    playing,
+    started,
+    paused,
+    stalled,
+    buffered,
+    muted,
+    touched,
+    dragging,
+    fullscreen,
+    currentTime,
+    seekedTime,
+    seekedPercentage,
+    scrubbedPercentage,
+    thumbPercentage,
+    popoverOffsetX,
+    audioApi,
     videoApi,
     controlsApi,
     playerRuntime

package/dist/plugins/MagicPlayer/src/css/magic-player-audio-controls.css

@@ -1,7 +1,6 @@
 @import './magic-player-timeline.css';
 @import './magic-player-display-time.css';
 
-/* We keep this variable since it's used in multiple places */
 :root {
   --magic-player-audio-controls-height: 3rem;
 }

package/dist/plugins/MagicPlayer/src/css/magic-player-timeline.css

@@ -8,6 +8,7 @@
   height: var(--magic-player-timeline-track-height);
   display: flex;
   align-items: center;
+  touch-action: none;
 }
 
 .magic-player-timeline__target {
@@ -19,6 +20,10 @@
   cursor: pointer;
 }
 
+[data-dragging='true'] .magic-player-timeline__target {
+  cursor: grabbing;
+}
+
 .magic-player-timeline__track {
   position: relative;
   width: 100%;

package/dist/plugins/MagicPlayer/src/symbols/index.d.ts

@@ -1,5 +1,9 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 import type { MagicPlayerOptions } from '../types/index.js';
 declare const MagicPlayerInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicPlayerOptionsKey: InjectionKey<MagicPlayerOptions>;
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+declare const MagicPlayerRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerTrackRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerBarRef: InjectionKey<Ref<HTMLDivElement | null>>;
+declare const MagicPlayerPopoverRef: InjectionKey<Ref<HTMLDivElement | null>>;
+export { MagicPlayerInstanceId, MagicPlayerOptionsKey, MagicPlayerRef, MagicPlayerTrackRef, MagicPlayerBarRef, MagicPlayerPopoverRef, };

package/dist/plugins/MagicPlayer/src/symbols/index.mjs

@@ -1,3 +1,14 @@
 const MagicPlayerInstanceId = Symbol();
 const MagicPlayerOptionsKey = Symbol();
-export { MagicPlayerInstanceId, MagicPlayerOptionsKey };
+const MagicPlayerRef = Symbol();
+const MagicPlayerTrackRef = Symbol();
+const MagicPlayerBarRef = Symbol();
+const MagicPlayerPopoverRef = Symbol();
+export {
+  MagicPlayerInstanceId,
+  MagicPlayerOptionsKey,
+  MagicPlayerRef,
+  MagicPlayerTrackRef,
+  MagicPlayerBarRef,
+  MagicPlayerPopoverRef
+};

package/dist/plugins/MagicPlayer/src/types/index.d.ts

@@ -1,22 +1,87 @@
+type PlayerMode = 'audio' | 'video';
 export interface MagicPlayerOptions {
     src: string;
-    mode?: 'audio' | 'video';
+    mode?: PlayerMode;
     srcType?: 'native' | 'hls';
     preload?: 'auto' | 'metadata' | 'none';
     autoplay?: boolean;
+    playback?: ('viewport' | 'window')[] | false;
     loop?: boolean;
     transition?: {
+        videoControls?: string;
+        overlay?: string;
+        icons?: string;
+    };
+    threshold?: {
+        idle?: number;
+    };
+}
+export interface RequiredMagicPlayerOptions {
+    src: string;
+    mode: 'audio' | 'video';
+    srcType: 'native' | 'hls';
+    preload: 'auto' | 'metadata' | 'none';
+    autoplay: boolean;
+    loop: boolean;
+    transition: {
         videoControls: string;
+        overlay: string;
+        icons: string;
+    };
+    threshold: {
+        idle: number;
     };
 }
-type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
 export type Buffered = [number, number][];
-export type PlayerPrivateEvents = {
-    update: {
-        id: string;
-        api: API;
-        key: string;
-        value: string | number | boolean | Buffered | DOMRect | HTMLElement;
-    };
-};
+export interface PlayerState {
+    id: string;
+    buffered: Buffered;
+    currentTime: number;
+    dragging: boolean;
+    duration: number;
+    ended: boolean;
+    loaded: boolean;
+    muted: boolean;
+    paused: boolean;
+    playing: boolean;
+    rate: number;
+    seeking: boolean;
+    stalled: boolean;
+    started: boolean;
+    touched: boolean;
+    volume: number;
+    waiting: boolean;
+    fullscreen: boolean;
+    fullscreenTarget: HTMLElement | null;
+    mouseEntered: boolean;
+    controlsMouseEntered: boolean;
+    seekedTime: number | null;
+    seekedPercentage: number;
+    scrubbedPercentage: number;
+    thumbPercentage: number;
+    popoverOffsetX: number | null;
+    hasOverlay: boolean;
+    hasControls: boolean;
+    controlsBarRect: DOMRect | undefined;
+    controlsTrackRect: DOMRect | undefined;
+    controlsPopoverRect: DOMRect | undefined;
+}
+export interface PlayerEvents {
+    onDragStart: string;
+    onDragEnd: string;
+    onEnd: string;
+    onFullscreenEnter: string;
+    onFullscreenLeave: string;
+    onLoad: string;
+    onMute: string;
+    onUnmute: string;
+    onPause: string;
+    onPlay: string;
+    onRateChange: string;
+    onStall: string;
+    onStart: string;
+    onTouch: string;
+    onVolumeChange: string;
+    onWait: string;
+}
 export {};

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.d.ts

@@ -1,3 +1,3 @@
-import type { MagicPlayerOptions } from '../types/index.js';
-declare const defaultOptions: MagicPlayerOptions;
+import type { RequiredMagicPlayerOptions } from '../types/index.js';
+declare const defaultOptions: RequiredMagicPlayerOptions;
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/utils/defaultOptions.mjs

@@ -6,7 +6,12 @@ const defaultOptions = {
   autoplay: false,
   loop: false,
   transition: {
-    videoControls: "magic-player-video-controls"
+    videoControls: "magic-player-video-controls",
+    overlay: "magic-player-overlay",
+    icons: "magic-player-icons"
+  },
+  threshold: {
+    idle: 3e3
   }
 };
 export { defaultOptions };

package/dist/plugins/MagicPlayer/src/utils/playbackDefaults.d.ts

@@ -0,0 +1,3 @@
+import type { MagicPlayerOptions } from '../types/index.js';
+export declare const audioModePlaybackDefaults: MagicPlayerOptions['playback'];
+export declare const videoModePlaybackDefaults: MagicPlayerOptions['playback'];

package/dist/plugins/MagicPlayer/src/utils/playbackDefaults.mjs

@@ -0,0 +1,7 @@
+export const audioModePlaybackDefaults = [
+  "viewport"
+];
+export const videoModePlaybackDefaults = [
+  "viewport",
+  "window"
+];

package/dist/plugins/MagicScroll/nuxt.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
 export default _default;

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -1,68 +1,61 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-import { ref, inject, computed, toValue, watch, useId, onMounted } from "vue";
+<template>
+  <div ref="el" class="magic-scroll-collision">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import {
+  shallowRef,
+  inject,
+  computed,
+  toValue,
+  watch,
+  useId,
+  onMounted,
+  useTemplateRef
+} from "vue";
 import { useCollisionDetection } from "../composables/private/useCollisionDetection";
 import { MagicScrollReturn, MagicScrollTarget } from "../symbols";
 import { useIntersectionObserver } from "@vueuse/core";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicScrollCollision",
-  props: {
-    id: { type: String, required: false },
-    offset: { type: Object, required: false }
-  },
-  setup(__props) {
-    const scrollReturn = inject(MagicScrollReturn, void 0);
-    const scrollTarget = inject(MagicScrollTarget);
-    if (!scrollTarget) {
-      console.error(
-        "MagicScrollCollision must be used within a MagicScrollProvider"
-      );
-    }
-    const intersecting = ref(false);
-    const elRef = ref(void 0);
-    const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
-    const mappedId = computed(() => __props.id ?? `magic-scroll-collision-${useId()}`);
-    const { observe } = useCollisionDetection({
-      id: mappedId.value,
-      child: elRef,
-      parent: scrollTarget,
-      scrollY,
-      offset: __props.offset
-    });
-    watch(
-      () => scrollY.value,
-      () => {
-        if (intersecting.value) {
-          observe();
-        }
-      }
-    );
-    useIntersectionObserver(
-      elRef,
-      ([{ isIntersecting }]) => {
-        intersecting.value = isIntersecting;
-      },
-      { rootMargin: "150% 0px 150% 0px", immediate: true }
-    );
-    onMounted(() => {
+const { id, offset } = defineProps({
+  id: { type: String, required: false },
+  offset: { type: Object, required: false }
+});
+const scrollReturn = inject(MagicScrollReturn, void 0);
+const scrollTarget = inject(MagicScrollTarget);
+if (!scrollTarget) {
+  console.error(
+    "MagicScrollCollision must be used within a MagicScrollProvider"
+  );
+}
+const intersecting = shallowRef(false);
+const elRef = useTemplateRef("el");
+const scrollY = computed(() => toValue(scrollReturn?.y) || 0);
+const mappedId = computed(() => id ?? `magic-scroll-collision-${useId()}`);
+const { observe } = useCollisionDetection({
+  id: mappedId.value,
+  child: elRef,
+  parent: scrollTarget,
+  scrollY,
+  offset
+});
+watch(
+  () => scrollY.value,
+  () => {
+    if (intersecting.value) {
       observe();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          ref_key: "elRef",
-          ref: elRef,
-          class: "magic-scroll-collision"
-        },
-        [
-          _renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+    }
   }
+);
+useIntersectionObserver(
+  elRef,
+  ([{ isIntersecting }]) => {
+    intersecting.value = isIntersecting;
+  },
+  { rootMargin: "150% 0px 150% 0px", immediate: true }
+);
+onMounted(() => {
+  observe();
 });
 </script>