@maas/vue-equipment 0.29.2 → 0.29.4

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

@@ -12,67 +12,70 @@
       '-not-idle': !idle,
       '-hover': mouseEntered,
       '-not-hover': !mouseEntered,
+      '-standalone': standalone,
     }"
   >
-    <div class="magic-player-controls__bar">
-      <div
-        v-if="$slots.seekPopover"
-        v-show="!!seekedTime && touched"
-        ref="popoverRef"
-        class="magic-player-controls__popover"
-        :style="{ marginLeft: `${popoverOffsetX}%` }"
-      >
-        <slot name="seekPopover" />
-      </div>
-      <div class="magic-player-controls__bar--inner" ref="barRef">
-        <div class="magic-player-controls__item -shrink-0">
-          <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>
+    <transition :name="transition">
+      <div class="magic-player-controls__bar" v-show="!hidden">
+        <div
+          v-if="$slots.seekPopover"
+          v-show="!!seekedTime && touched"
+          ref="popoverRef"
+          class="magic-player-controls__popover"
+          :style="{ marginLeft: `${popoverOffsetX}%` }"
+        >
+          <slot name="seekPopover" />
         </div>
-        <div class="magic-player-controls__item -grow">
-          <div class="magic-player-controls__timeline" ref="trackRef">
-            <magic-player-timeline :id="id" />
+        <div class="magic-player-controls__bar--inner" ref="barRef">
+          <div class="magic-player-controls__item -shrink-0">
+            <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-controls__item -grow">
+            <div class="magic-player-controls__timeline" ref="trackRef">
+              <magic-player-timeline :id="id" />
+            </div>
+          </div>
+          <div class="magic-player-controls__item -shrink-0">
+            <button v-if="muted" @click="unmute">
+              <slot name="volumeOffIcon">
+                <icon-volume-off />
+              </slot>
+            </button>
+            <button v-else @click="mute">
+              <slot name="volumeOnIcon">
+                <icon-volume-on />
+              </slot>
+            </button>
+          </div>
+          <div class="magic-player-controls__item -shrink-0">
+            <button v-if="isFullscreen" @click="exitFullscreen">
+              <slot name="fullscreenExitIcon">
+                <icon-fullscreen-exit />
+              </slot>
+            </button>
+            <button v-else @click="enterFullscreen">
+              <slot name="fullscreenEnterIcon">
+                <icon-fullscreen-enter />
+              </slot>
+            </button>
           </div>
-        </div>
-        <div class="magic-player-controls__item -shrink-0">
-          <button v-if="muted" @click="unmute">
-            <slot name="volumeOffIcon">
-              <icon-volume-off />
-            </slot>
-          </button>
-          <button v-else @click="mute">
-            <slot name="volumeOnIcon">
-              <icon-volume-on />
-            </slot>
-          </button>
-        </div>
-        <div class="magic-player-controls__item -shrink-0">
-          <button v-if="isFullscreen" @click="exitFullscreen">
-            <slot name="fullscreenExitIcon">
-              <icon-fullscreen-exit />
-            </slot>
-          </button>
-          <button v-else @click="enterFullscreen">
-            <slot name="fullscreenEnterIcon">
-              <icon-fullscreen-enter />
-            </slot>
-          </button>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useIdle } from '@vueuse/core'
 import IconPlay from './icons/Play.vue'
 import IconPause from './icons/Pause.vue'
@@ -84,11 +87,18 @@ import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
-interface Props {
+import '@maas/vue-equipment/utils/css/animations/fade-up-in.css'
+import '@maas/vue-equipment/utils/css/animations/fade-up-out.css'
+
+interface MagicPlayerControlsProps {
   id: string
+  standalone?: boolean
+  transition?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<MagicPlayerControlsProps>(), {
+  transition: 'magic-player-controls',
+})
 
 const barRef = ref<HTMLDivElement | undefined>(undefined)
 const trackRef = ref<HTMLDivElement | undefined>(undefined)
@@ -118,10 +128,23 @@ const { popoverOffsetX, seekedTime } = usePlayerControlsApi({
 })
 
 const { idle } = useIdle(3000)
+
+const hidden = computed(() => {
+  switch (true) {
+    case props.standalone:
+      return false
+    case playing.value && idle.value:
+      return true
+    case playing.value && !mouseEntered.value:
+      return true
+    case !touched.value:
+      return true
+    default:
+      return false
+  }
+})
 </script>
 
 <style>
-:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem;--magic-player-controls-transition-duration:300ms;--magic-player-controls-transition-timing-function:ease}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;transition-duration:var(--magic-player-controls-transition-duration);transition-property:opacity,transform;transition-timing-function:var(
-    --magic-player-controls-transition-timing-function
-  );width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls:not(.-standalone).-playing.-idle .magic-player-controls__bar,.magic-player-controls:not(.-standalone).-playing.-not-hover .magic-player-controls__bar,.magic-player-controls:not(.-standalone).-untouched .magic-player-controls__bar{opacity:0;transform:translateY(25%)}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none;--magic-player-controls-transition-duration:unset;--magic-player-controls-transition-timing-function:unset}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
+:root{--magic-player-controls-height:3rem;--magic-player-controls-padding:0.75rem;--magic-player-controls-bottom:1.5rem;--magic-player-controls-left:1.5rem;--magic-player-controls-width:calc(100% - var(--magic-player-controls-left)*2);--magic-player-controls-gap:1rem;--magic-player-controls-border-radius:50rem;--magic-player-controls-background:rgba(32,32,32,.8);--magic-player-controls-backdrop-filter:blur(80px);--magic-player-controls-color:#fff;--magic-player-controls-button-width:3rem;--magic-player-controls-icon-width:1.25rem}@media (max-width:640px){:root{--magic-player-controls-height:2.5rem;--magic-player-controls-bottom:0.75rem;--magic-player-controls-padding:0.5rem}}.magic-player-controls{inset:0;pointer-events:none;position:absolute;width:100%}.magic-player-controls-enter-active{animation:fade-up-in .15s ease}.magic-player-controls-leave-active{animation:fade-up-out .15s ease}.magic-player-controls__bar{align-items:flex-start;bottom:var(--magic-player-controls-bottom);display:flex;flex-direction:column;gap:var(--magic-player-controls-gap);left:var(--magic-player-controls-left);margin:0 auto;pointer-events:auto;position:absolute;width:var(--magic-player-controls-width)}.magic-player-controls__bar--inner{align-items:center;-webkit-backdrop-filter:var(--magic-player-controls-backdrop-filter);backdrop-filter:var(--magic-player-controls-backdrop-filter);background-color:var(--magic-player-controls-background);border-radius:var(--magic-player-controls-border-radius);box-sizing:border-box;color:var(--magic-player-controls-color);display:flex;height:var(--magic-player-controls-height);padding:0 var(--magic-player-controls-padding);width:100%}.magic-player-controls__item{align-items:center;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-player-controls__item.-shrink-0{flex-shrink:0}.magic-player-controls__item.-grow{flex-grow:1}.magic-player-controls__item button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:0;color:inherit;cursor:pointer;display:flex;height:var(--magic-player-controls-height);justify-content:center;outline:none;padding:0;width:var(--magic-player-controls-button-width)}.magic-player-controls__item button svg{display:block;height:auto;width:var(--magic-player-controls-icon-width)}.magic-player-controls__timeline{width:100%}.magic-player-controls.-standalone{inset:unset;position:relative;--magic-player-controls-width:100%;--magic-player-controls-bottom:0;--magic-player-controls-left:0;--magic-player-controls-padding:0;--magic-player-controls-background:unset;--magic-player-controls-border-radius:unset;--magic-player-controls-background:transparent;--magic-player-controls-backdrop-filter:none;--magic-player-controls-transition-duration:unset;--magic-player-controls-transition-timing-function:unset}.magic-player-controls.-standalone .magic-player-controls__bar{position:relative}
 </style>

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

@@ -1,7 +1,17 @@
-interface Props {
+import '@maas/vue-equipment/utils/css/animations/fade-up-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-up-out.css';
+interface MagicPlayerControlsProps {
     id: string;
+    standalone?: boolean;
+    transition?: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
+    transition: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerControlsProps>, {
+    transition: string;
+}>>>, {
+    transition: string;
+}, {}>, {
     seekPopover?(_: {}): any;
     playIcon?(_: {}): any;
     pauseIcon?(_: {}): any;
@@ -11,6 +21,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullscreenEnterIcon?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -9,12 +9,12 @@ import { computed } from 'vue'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { formatTime } from '@maas/vue-equipment/utils'
 
-interface Props {
+interface MagicPlayerDisplayTimeProps {
   id: string
   type: 'current' | 'remaining' | 'duration'
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicPlayerDisplayTimeProps>(), {
   type: 'current',
 })
 

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

@@ -1,10 +1,10 @@
-interface Props {
+interface MagicPlayerDisplayTimeProps {
     id: string;
     type: 'current' | 'remaining' | 'duration';
 }
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>, {
     type: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicPlayerDisplayTimeProps>, {
     type: string;
 }>>>, {
     type: "current" | "duration" | "remaining";

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

@@ -18,24 +18,26 @@ import { shallowRef, onMounted, watch, computed, type Ref } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
-type Props = {
+type MagicPlayerMuxPopoverProps = {
   id: string
   playbackId: string
 }
 
+type Tile = {
+  start: number
+  x: number
+  y: number
+}
+
 type MuxStoryboard = {
   url: string
   tile_width: number
   tile_height: number
   duration: number
-  tiles: Array<{
-    start: number
-    x: number
-    y: number
-  }>
+  tiles: Tile[]
 }
 
-const props = defineProps<Props>()
+const props = defineProps<MagicPlayerMuxPopoverProps>()
 
 const { seekedTime } = usePlayerControlsApi({ id: props.id })
 const { pixelRatio } = useDevicePixelRatio()

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

@@ -1,8 +1,8 @@
-type Props = {
+type MagicPlayerMuxPopoverProps = {
     id: string;
     playbackId: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerMuxPopoverProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerMuxPopoverProps>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {

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

@@ -43,11 +43,11 @@ import IconWaiting from './icons/Waiting.vue'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 
-interface Props {
+interface MagicPlayerOverlayProps {
   id: string
 }
 
-const props = defineProps<Props>()
+const props = defineProps<MagicPlayerOverlayProps>()
 
 const { playing, waiting } = usePlayerMediaApi({
   id: props.id,

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

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

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

@@ -38,11 +38,11 @@
 <script setup lang="ts">
 import { usePlayerControlsApi } from '../composables/private/usePlayerControlsApi'
 
-interface Props {
+interface MagicPlayerTimelineProps {
   id: string
 }
 
-const props = defineProps<Props>()
+const props = defineProps<MagicPlayerTimelineProps>()
 
 const {
   mouseEntered,
@@ -54,7 +54,6 @@ const {
   onPointerdown,
   onPointerup,
   onPointermove,
-  trackRect,
 } = usePlayerControlsApi({
   id: props.id,
 })

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

@@ -1,7 +1,7 @@
-interface Props {
+interface MagicPlayerTimelineProps {
     id: string;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<MagicPlayerTimelineProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicPlayerTimelineProps>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {

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

@@ -110,6 +110,9 @@ export function usePlayerMediaApi(args) {
   useEventListener(mediaRef, "stalled", () => {
     stalled.value = true;
   });
+  useEventListener(mediaRef, "suspend", () => {
+    waiting.value = false;
+  });
   useEventListener(mediaRef, "ended", () => {
     ended.value = true;
   });

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

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
-import type { SourceType } from '../../types.js';
+import type { MagicPlayerSourceType } from '../../types.js';
 export type UsePlayerRuntimeArgs = {
     id: MaybeRef<string>;
     mediaRef?: MaybeRef<HTMLVideoElement | undefined>;
-    srcType?: SourceType;
+    srcType?: MagicPlayerSourceType;
     src?: string;
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {

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

@@ -1,8 +1,10 @@
 import { ref, watch, toValue } from "vue";
 import { usePlayerStateEmitter } from "./usePlayerStateEmitter.mjs";
+import { useEventListener } from "@vueuse/core";
 export function usePlayerRuntime(args) {
   let hls;
   const loaded = ref(false);
+  const defferedLoading = ref(false);
   const { mediaRef, srcType, src } = args;
   const useNative = () => {
     const el = toValue(mediaRef);
@@ -16,22 +18,38 @@ export function usePlayerRuntime(args) {
       },
       { once: true }
     );
-    el.load();
   };
   const useHlsJS = async () => {
     const el = toValue(mediaRef);
     if (!el)
       return;
+    useEventListener(mediaRef, "play", () => {
+      defferedLoading.value = true;
+    });
     const { default: Hls } = await import("hls.js");
-    hls = new Hls();
+    hls = new Hls({ autoStartLoad: false });
     if (!Hls.isSupported()) {
       useNative();
     } else if (src) {
-      hls.loadSource(src);
-      hls.attachMedia(el);
       hls.on(Hls.Events.FRAG_LOADED, () => {
         loaded.value = true;
       });
+      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+        toValue(mediaRef)?.dispatchEvent(new Event("suspend"));
+      });
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        if (defferedLoading.value) {
+          hls?.startLoad();
+        }
+      });
+      useEventListener(mediaRef, "pause", () => {
+        hls?.stopLoad();
+      });
+      useEventListener(mediaRef, "play", () => {
+        hls?.startLoad();
+      });
+      hls.loadSource(src);
+      hls.attachMedia(el);
     }
   };
   function initialize() {
@@ -43,6 +61,7 @@ export function usePlayerRuntime(args) {
   }
   function destroy() {
     hls?.destroy();
+    defferedLoading.value = false;
   }
   const emitter = usePlayerStateEmitter();
   emitter.on("update", (payload) => {

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

@@ -1,4 +1,4 @@
-export type SourceType = 'native' | 'hls';
+export type MagicPlayerSourceType = 'native' | 'hls';
 type API = 'media' | 'player' | 'controls' | 'runtime' | 'player';
 export type Buffered = [number, number][];
 export type PlayerPrivateEvents = {

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

@@ -3,10 +3,10 @@ import MagicScrollScene from './src/components/MagicScrollScene.vue.js';
 import MagicScrollTransform from './src/components/MagicScrollTransform.vue.js';
 import MagicScrollMotion from './src/components/MagicScrollMotion.vue.js';
 import MagicScrollCollision from './src/components/MagicScrollCollision.vue.js';
-import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
+import { useCollisionDetect } from './src/composables/private/useCollisionDetect.js';
 import { MagicScrollParent, MagicScrollProgress, MagicScrollReturn } from './src/symbols/index.js';
+import type { MagicScrollCollisionEntry } from './src/types/index.js';
 import type { Plugin } from 'vue';
 declare const MagicScrollPlugin: Plugin;
 export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionDetect, MagicScrollParent, MagicScrollProgress, MagicScrollReturn, };
-export * from './src/symbols/index.js';
-export type * from './src/types/index';
+export type { MagicScrollCollisionEntry };

package/dist/plugins/MagicScroll/index.mjs

@@ -3,7 +3,7 @@ import MagicScrollScene from "./src/components/MagicScrollScene.vue";
 import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
 import MagicScrollMotion from "./src/components/MagicScrollMotion.vue";
 import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
-import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
+import { useCollisionDetect } from "./src/composables/private/useCollisionDetect.mjs";
 import {
   MagicScrollParent,
   MagicScrollProgress,
@@ -30,4 +30,3 @@ export {
   MagicScrollProgress,
   MagicScrollReturn
 };
-export * from "./src/symbols/index.mjs";

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="targetRef" :style="{ display: 'contents' }">
+  <div ref="elRef" :style="{ display: 'contents' }">
     <slot />
   </div>
 </template>
@@ -7,22 +7,26 @@
 <script setup lang="ts">
 import { ref, inject, computed, onMounted } from 'vue'
 import { toValue } from '@vueuse/core'
-import { useCollisionDetect } from '../composables/useCollisionDetect'
+import { useCollisionDetect } from '../composables/private/useCollisionDetect'
 import { MagicScrollReturn } from '../symbols'
 
-import type { CollisionEntry } from '../types'
+import type { MagicScrollCollisionEntry } from '../types'
 
 interface Props {
-  collisionEntries: CollisionEntry[]
+  entries: MagicScrollCollisionEntry[]
 }
 
 const props = defineProps<Props>()
-const targetRef = ref<HTMLElement | undefined>(undefined)
+const elRef = ref<HTMLElement | undefined>(undefined)
 
 const scrollReturn = inject(MagicScrollReturn, undefined)
-const pageYOffset = computed(() => toValue(scrollReturn?.y) || 0)
+const scrollY = computed(() => toValue(scrollReturn?.y) || 0)
 
 onMounted(() => {
-  useCollisionDetect(pageYOffset, props.collisionEntries, toValue(targetRef))
+  useCollisionDetect({
+    scrollY,
+    entries: props.entries,
+    parent: toValue(elRef),
+  })
 })
 </script>

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

@@ -1,6 +1,6 @@
-import type { CollisionEntry } from '../types';
+import type { MagicScrollCollisionEntry } from '../types';
 interface Props {
-    collisionEntries: CollisionEntry[];
+    entries: MagicScrollCollisionEntry[];
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>, {
     default?(_: {}): any;

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

@@ -15,14 +15,14 @@ import {
 } from 'motion'
 import { MagicScrollProgress } from '../symbols'
 
-interface Props {
+interface MagicScrollMotionProps {
   keyframes?: MotionKeyframesDefinition
   offset?: number[]
   easing?: Easing
   progress?: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicScrollMotionProps>(), {
   easing: 'linear',
 })
 

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue.d.ts

@@ -1,13 +1,13 @@
 import { type MotionKeyframesDefinition, type Easing } from 'motion';
-interface Props {
+interface MagicScrollMotionProps {
     keyframes?: MotionKeyframesDefinition;
     offset?: number[];
     easing?: Easing;
     progress?: number;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollMotionProps>, {
     easing: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollMotionProps>, {
     easing: string;
 }>>>, {
     easing: Easing;

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

@@ -13,11 +13,11 @@ import {
 } from '@vueuse/core'
 import { MagicScrollReturn, MagicScrollParent } from '../symbols'
 
-interface Props {
+interface MagicScrollProviderProps {
   active?: Boolean
   el?: MaybeComputedElementRef<HTMLElement>
 }
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicScrollProviderProps>(), {
   active: () => true,
 })
 

package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue.d.ts

@@ -1,11 +1,11 @@
 import { type MaybeComputedElementRef } from '@vueuse/core';
-interface Props {
+interface MagicScrollProviderProps {
     active?: Boolean;
     el?: MaybeComputedElementRef<HTMLElement>;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollProviderProps>, {
     active: () => true;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollProviderProps>, {
     active: () => true;
 }>>>, {
     active: Boolean;

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

@@ -16,13 +16,13 @@ import {
 
 import type { FromTo } from '../types'
 
-interface Props {
+interface MagicScrollSceneProps {
   from?: FromTo
   to?: FromTo
   debug?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<MagicScrollSceneProps>(), {
   from: 'top-bottom',
   to: 'bottom-top',
 })

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -1,13 +1,13 @@
 import type { FromTo } from '../types';
-interface Props {
+interface MagicScrollSceneProps {
     from?: FromTo;
     to?: FromTo;
     debug?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollSceneProps>, {
     from: string;
     to: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MagicScrollSceneProps>, {
     from: string;
     to: string;
 }>>>, {