@maas/vue-equipment 0.20.1 → 0.21.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.20.0"
+  "version": "0.21.0"
 }

package/dist/nuxt/module.mjs

@@ -39,7 +39,7 @@ const functions$1 = [
 	{
 		name: "MagicPlayer",
 		"package": "plugins",
-		lastUpdated: 1707310473000,
+		lastUpdated: 1707404937000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicPlayer/",
 		description: "player"
 	},

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs

@@ -55,7 +55,17 @@ export function useDrawerDrag(args) {
   const draggedX = ref(0);
   const draggedY = ref(0);
   const hasDragged = computed(() => {
-    return lastDraggedX.value !== draggedX.value || lastDraggedY.value !== draggedY.value;
+    const hasDraggedX = !isWithinRange({
+      input: draggedX.value,
+      base: lastDraggedY.value,
+      threshold: toValue(threshold).lock
+    });
+    const hasDraggedY = !isWithinRange({
+      input: draggedY.value,
+      base: lastDraggedY.value,
+      threshold: toValue(threshold).lock
+    });
+    return hasDraggedX || hasDraggedY;
   });
   const style = computed(
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
@@ -87,6 +97,10 @@ export function useDrawerDrag(args) {
     position,
     activeSnapPoint
   });
+  function isWithinRange(args2) {
+    const { input, base, threshold: threshold2 } = args2;
+    return input >= base - threshold2 && input <= base + threshold2;
+  }
   async function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts

@@ -1,10 +1,10 @@
 import { type MaybeRef } from 'vue';
 import { type MaybeElementRef } from '@vueuse/core';
 import type { DrawerOptions, SnapPoint } from '../types/index.js';
-export type useDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
+export type UseDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
     focusTarget: MaybeElementRef;
 };
-export declare function useDrawerApi(id?: MaybeRef<string>, options?: useDrawerApiOptions): {
+export declare function useDrawerApi(id?: MaybeRef<string>, options?: UseDrawerApiOptions): {
     id: import("vue").ComputedRef<string>;
     isActive: import("vue").ComputedRef<boolean>;
     open: () => void;

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

@@ -15,6 +15,7 @@ export type DrawerOptions = {
         backdrop?: string;
     };
     threshold?: {
+        lock?: number;
         distance?: number;
         momentum?: number;
     };

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

@@ -14,6 +14,7 @@ const defaultOptions = {
     backdrop: "magic-drawer--backdrop"
   },
   threshold: {
+    lock: 0,
     distance: 150,
     momentum: 1
   },

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

@@ -1,10 +1,10 @@
 import type { Plugin } from 'vue';
 import MagicPlayer from './src/components/MagicPlayer.vue.js';
 import MagicPlayerControls from './src/components/MagicPlayerControls.vue.js';
+import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
 import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
+import MagicPlayerPoster from './src/components/MagicPlayerPoster.vue.js';
 import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
-import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
 import { usePlayerApi } from './src/composables/usePlayerApi.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerOverlay, MagicPlayerTimeline, MagicPlayerMuxPopover, usePlayerApi, };
-export type * from './src/types/index';
+export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, usePlayerApi, };

package/dist/plugins/MagicPlayer/index.mjs

@@ -1,24 +1,27 @@
 import MagicPlayer from "./src/components/MagicPlayer.vue";
 import MagicPlayerControls from "./src/components/MagicPlayerControls.vue";
+import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
 import MagicPlayerOverlay from "./src/components/MagicPlayerOverlay.vue";
+import MagicPlayerPoster from "./src/components/MagicPlayerPoster.vue";
 import MagicPlayerTimeline from "./src/components/MagicPlayerTimeline.vue";
-import MagicPlayerMuxPopover from "./src/components/MagicPlayerMuxPopover.vue";
 import { usePlayerApi } from "./src/composables/usePlayerApi.mjs";
 const MagicPlayerPlugin = {
   install: (app) => {
     app.component("MagicPlayer", MagicPlayer);
     app.component("MagicPlayerControls", MagicPlayerControls);
+    app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopover);
     app.component("MagicPlayerOverlay", MagicPlayerOverlay);
+    app.component("MagicPlayerPoster", MagicPlayerPoster);
     app.component("MagicPlayerTimeline", MagicPlayerTimeline);
-    app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopover);
   }
 };
 export {
   MagicPlayerPlugin,
   MagicPlayer,
   MagicPlayerControls,
+  MagicPlayerMuxPopover,
+  MagicPlayerPoster,
   MagicPlayerOverlay,
   MagicPlayerTimeline,
-  MagicPlayerMuxPopover,
   usePlayerApi
 };

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

@@ -12,10 +12,8 @@
       preload="auto"
       playsinline
       disablePictureInPicture
+      :loop="props.loop"
     />
-    <div v-show="!loaded || !touched" class="magic-player-poster">
-      <slot name="poster" />
-    </div>
     <slot />
   </div>
 </template>
@@ -23,51 +21,59 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
-import { usePlayerApi } from '../composables/usePlayerApi'
+import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
+import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
+import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
 
 import type { SourceType } from './../types'
 
-export type MagicPlayerProps = {
+interface Props {
   id: string
   srcType?: SourceType
   src: string
   ratio?: string
   fill?: boolean
   autoplay?: boolean
+  loop?: boolean
 }
 
-const props = withDefaults(defineProps<MagicPlayerProps>(), {
+const props = withDefaults(defineProps<Props>(), {
   srcType: 'native',
   src: '',
   ratio: '16:9',
   fill: false,
   autoplay: false,
+  loop: false,
 })
 
 const playerRef = ref<HTMLDivElement | undefined>(undefined)
 const videoRef = ref<HTMLVideoElement | undefined>(undefined)
 
-// Initialize instance
-const { instance } = usePlayerApi({
+const { playing, muted } = usePlayerMediaApi({
   id: props.id,
-  videoRef: videoRef,
-  playerRef: playerRef,
-  srcType: props.srcType,
+  mediaRef: videoRef,
+})
+
+usePlayerRuntime({
+  id: props.id,
+  mediaRef: videoRef,
   src: props.src,
+  srcType: props.srcType,
 })
 
-const { playing, muted } = instance.value?.mediaApi
-const { touched } = instance.value?.playerApi
-const { onMouseenter, onMouseleave } = instance.value?.playerApi
-const { loaded } = instance.value?.runtimeProvider
+const { onMouseenter, onMouseleave, play, pause } = usePlayerVideoApi({
+  id: props.id,
+  videoRef: videoRef,
+  playerRef: playerRef,
+})
 
 useIntersectionObserver(
   playerRef,
   ([{ isIntersecting }]) => {
     if (!isIntersecting && playing.value) {
-      instance.value.playerApi.pause()
+      pause()
     } else if (isIntersecting && !playing.value && props.autoplay) {
-      instance.value.playerApi.play()
+      play()
     }
   },
   {
@@ -101,5 +107,5 @@ onMounted(() => {
 </script>
 
 <style>
-:root{--magic-player-aspect-ratio:16/9}.magic-player{aspect-ratio:var(--magic-player-aspect-ratio);overflow:hidden;position:relative;width:100%}.magic-player-video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-player-poster{inset:0;position:absolute}
+:root{--magic-player-aspect-ratio:16/9}.magic-player{aspect-ratio:var(--magic-player-aspect-ratio);overflow:hidden;position:relative;width:100%}.magic-player-video{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}
 </style>

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

@@ -1,32 +1,35 @@
 import type { SourceType } from './../types';
-export type MagicPlayerProps = {
+interface Props {
     id: string;
     srcType?: SourceType;
     src: string;
     ratio?: string;
     fill?: boolean;
     autoplay?: boolean;
-};
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicPlayerProps>, {
+    loop?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     srcType: string;
     src: string;
     ratio: string;
     fill: boolean;
     autoplay: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicPlayerProps>, {
+    loop: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     srcType: string;
     src: string;
     ratio: string;
     fill: boolean;
     autoplay: boolean;
+    loop: boolean;
 }>>>, {
     fill: boolean;
     srcType: SourceType;
     src: string;
     ratio: string;
     autoplay: boolean;
+    loop: boolean;
 }, {}>, {
-    poster?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -80,7 +80,9 @@ 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 { usePlayerApi } from '../composables/usePlayerApi'
+import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
+import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
+import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
 interface Props {
   id: string
@@ -92,20 +94,29 @@ const barRef = ref<HTMLDivElement | undefined>(undefined)
 const trackRef = ref<HTMLDivElement | undefined>(undefined)
 const popoverRef = ref<HTMLDivElement | undefined>(undefined)
 
-const { instance } = usePlayerApi({
+const { playing, waiting, muted } = usePlayerMediaApi({
+  id: props.id,
+})
+
+const {
+  touched,
+  mouseEntered,
+  isFullscreen,
+  play,
+  pause,
+  mute,
+  unmute,
+  enterFullscreen,
+  exitFullscreen,
+} = usePlayerVideoApi({ id: props.id })
+
+const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
   id: props.id,
   barRef: barRef,
   trackRef: trackRef,
   popoverRef: popoverRef,
 })
 
-const { playing, waiting, muted } = instance.value.mediaApi
-const { touched, mouseEntered, isFullscreen } = instance.value.playerApi
-const { popoverOffsetX, seekedTime } = instance.value.controlsApi
-
-const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } =
-  instance.value.playerApi
-
 const { idle } = useIdle(3000)
 </script>
 

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

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
-import { usePlayerApi } from '../composables/usePlayerApi'
+import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
 type Props = {
   id: string
@@ -37,9 +37,7 @@ type MuxStoryboard = {
 
 const props = defineProps<Props>()
 
-const { instance } = usePlayerApi(props.id)
-
-const { seekedTime } = instance.value.controlsApi
+const { seekedTime } = usePlayerControlsApi({ id: props.id })
 const { pixelRatio } = useDevicePixelRatio()
 
 const canvasRef = shallowRef() as Ref<HTMLCanvasElement>

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

@@ -11,35 +11,37 @@
     }"
     @click.stop="togglePlay"
   >
-    <template v-if="waiting">
-      <button class="magic-player-overlay__button">
-        <slot name="waitingIcon">
-          <icon-waiting />
-        </slot>
-      </button>
-    </template>
-    <template v-else>
-      <button v-if="!playing" class="magic-player-overlay__button">
-        <slot name="playIcon">
-          <icon-play />
-        </slot>
-      </button>
-      <button v-else class="magic-player-overlay__button">
-        <slot name="pauseIcon">
-          <icon-pause />
-        </slot>
-      </button>
-    </template>
+    <slot>
+      <template v-if="waiting">
+        <button class="magic-player-overlay__button">
+          <slot name="waitingIcon">
+            <icon-waiting />
+          </slot>
+        </button>
+      </template>
+      <template v-else>
+        <button v-if="!playing" class="magic-player-overlay__button">
+          <slot name="playIcon">
+            <icon-play />
+          </slot>
+        </button>
+        <button v-else class="magic-player-overlay__button">
+          <slot name="pauseIcon">
+            <icon-pause />
+          </slot>
+        </button>
+      </template>
+    </slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import {} from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
 import IconWaiting from './icons/Waiting.vue'
-import { usePlayerApi } from '../composables/usePlayerApi'
+import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
+import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 
 interface Props {
   id: string
@@ -47,10 +49,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { instance } = usePlayerApi(props.id)
-
-const { playing, waiting } = instance.value.mediaApi
-const { mouseEntered, togglePlay } = instance.value.playerApi
+const { playing, waiting } = usePlayerMediaApi({
+  id: props.id,
+})
+const { mouseEntered, togglePlay } = usePlayerVideoApi({
+  id: props.id,
+})
 
 const { idle } = useIdle(3000)
 </script>

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

@@ -2,6 +2,7 @@ interface Props {
     id: string;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+    default?(_: {}): any;
     waitingIcon?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;

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

@@ -0,0 +1,27 @@
+<template>
+  <div v-show="!loaded || !touched" class="magic-player-poster">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
+import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
+
+export type MagicPlayerPosterProps = {
+  id: string
+}
+const props = defineProps<MagicPlayerPosterProps>()
+
+const { loaded } = usePlayerRuntime({
+  id: props.id,
+})
+
+const { touched } = usePlayerVideoApi({
+  id: props.id,
+})
+</script>
+
+<style>
+.magic-player-poster{inset:0;position:absolute}
+</style>

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

@@ -0,0 +1,21 @@
+export type MagicPlayerPosterProps = {
+    id: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<MagicPlayerPosterProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<MagicPlayerPosterProps>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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 & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -36,30 +36,33 @@
 </template>
 
 <script setup lang="ts">
-import {} from 'vue'
-import { usePlayerApi } from '../composables/usePlayerApi'
+import { computed } from 'vue'
+import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
 interface Props {
   id: string
 }
 
 const props = defineProps<Props>()
-const { instance } = usePlayerApi(props.id)
 
 const {
   mouseEntered,
   seekedPercentage,
   scrubbedPercentage,
   bufferedPercentage,
-} = instance.value.controlsApi
-
-const {
   onMouseenter,
   onMouseleave,
   onPointerdown,
   onPointerup,
   onPointermove,
-} = instance.value.controlsApi
+  trackRect,
+} = usePlayerControlsApi({
+  id: props.id,
+})
+
+const height = computed(() => {
+  return trackRect.value?.height
+})
 </script>
 
 <style>

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

@@ -0,0 +1,34 @@
+import { type MaybeRef, type Ref } from 'vue';
+export type UsePlayerControlsApiArgs = {
+    id: MaybeRef<string>;
+    barRef?: Ref<HTMLDivElement | undefined>;
+    trackRef?: Ref<HTMLDivElement | undefined>;
+    popoverRef?: Ref<HTMLDivElement | undefined>;
+};
+export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
+    mouseEntered: Ref<boolean>;
+    dragging: Ref<boolean>;
+    seekedTime: Ref<number>;
+    seekedPercentage: Ref<number>;
+    scrubbedPercentage: Ref<number>;
+    bufferedPercentage: import("vue").ComputedRef<number>;
+    thumbPercentage: Ref<number>;
+    popoverOffsetX: Ref<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>;
+};
+export type UsePlayerControlsApiReturn = ReturnType<typeof usePlayerControlsApi>;