@maas/vue-equipment 1.0.0-beta.42 → 1.0.0-beta.44

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

@@ -1,4 +1,10 @@
-import { toRefs, watch, unref, toValue } from "vue";
+import {
+  toRefs,
+  watch,
+  unref,
+  toValue,
+  onScopeDispose
+} from "vue";
 import { useEventListener, watchIgnorable } from "@vueuse/core";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "./usePlayerState.mjs";
@@ -137,67 +143,129 @@ export function usePlayerMediaApi(args) {
       }
     }
   );
-  useEventListener(mediaRef, "timeupdate", () => {
+  function timeupdateCallback() {
     ignoreCurrentTimeUpdates(
       () => currentTime.value = toValue(mediaRef).currentTime
     );
-  });
-  useEventListener(mediaRef, "durationchange", () => {
+  }
+  function durationChangeCallback() {
     duration.value = toValue(mediaRef).duration;
-  });
-  useEventListener(mediaRef, "progress", () => {
+  }
+  function progressCallback() {
     buffered.value = timeRangeToArray(toValue(mediaRef).buffered);
-  });
-  useEventListener(mediaRef, "seeking", () => {
+  }
+  function seekingCallback() {
     seeking.value = true;
-  });
-  useEventListener(mediaRef, "seeked", () => {
+  }
+  function seekedCallback() {
     seeking.value = false;
-  });
-  useEventListener(mediaRef, ["waiting", "loadstart"], () => {
+  }
+  function waitingLoadstartCallback() {
     waiting.value = true;
     ignorePlayingUpdates(() => playing.value = false);
-  });
-  useEventListener(mediaRef, "loadeddata", () => {
+  }
+  function loadeddataCallback() {
     waiting.value = false;
-  });
-  useEventListener(mediaRef, "playing", () => {
+  }
+  function playingCallback() {
     started.value = true;
     waiting.value = false;
     ended.value = false;
     ignorePlayingUpdates(() => playing.value = true);
-  });
-  useEventListener(mediaRef, "ratechange", () => {
+  }
+  function ratechangeCallback() {
     rate.value = toValue(mediaRef)?.playbackRate ?? rate.value;
-  });
-  useEventListener(mediaRef, "stalled", () => {
+  }
+  function stalledCallback() {
     stalled.value = true;
-  });
-  useEventListener(mediaRef, "suspend", () => {
+  }
+  function suspendCallback() {
     waiting.value = false;
-  });
-  useEventListener(mediaRef, "ended", () => {
+  }
+  function endedCallback() {
     ended.value = true;
-  });
-  useEventListener(mediaRef, "pause", () => {
+  }
+  function pauseCallback() {
     playing.value = false;
     paused.value = true;
-  });
-  useEventListener(mediaRef, "play", () => {
+  }
+  function playCallback() {
     playing.value = true;
     started.value = true;
-  });
-  useEventListener(mediaRef, "volumechange", () => {
+  }
+  function volumechangeCallback() {
     const el = toValue(mediaRef);
     if (el) {
       volume.value = el.volume;
       muted.value = el.muted;
     }
-  });
-  useEventListener(mediaRef, "error", () => {
+  }
+  function errorCallback() {
     const el = toValue(mediaRef);
     if (el?.error) {
       handleMediaElementError(el.error);
     }
+  }
+  const cancelTimeUpdate = useEventListener(
+    mediaRef,
+    "timeupdate",
+    timeupdateCallback
+  );
+  const cancelDurationChange = useEventListener(
+    mediaRef,
+    "durationchange",
+    durationChangeCallback
+  );
+  const cancelProgress = useEventListener(
+    mediaRef,
+    "progress",
+    progressCallback
+  );
+  const cancelSeeking = useEventListener(mediaRef, "seeking", seekingCallback);
+  const cancelSeeked = useEventListener(mediaRef, "seeked", seekedCallback);
+  const cancelWaitingLoadstart = useEventListener(
+    mediaRef,
+    ["waiting", "loadstart"],
+    waitingLoadstartCallback
+  );
+  const cancelLoadeddata = useEventListener(
+    mediaRef,
+    "loadeddata",
+    loadeddataCallback
+  );
+  const cancelPlaying = useEventListener(mediaRef, "playing", playingCallback);
+  const cancelRatechange = useEventListener(
+    mediaRef,
+    "ratechange",
+    ratechangeCallback
+  );
+  const cancelStalled = useEventListener(mediaRef, "stalled", stalledCallback);
+  const cancelSuspend = useEventListener(mediaRef, "suspend", suspendCallback);
+  const cancelEnded = useEventListener(mediaRef, "ended", endedCallback);
+  const cancelPause = useEventListener(mediaRef, "pause", pauseCallback);
+  const cancelPlay = useEventListener(mediaRef, "play", playCallback);
+  const cancelVolumechange = useEventListener(
+    mediaRef,
+    "volumechange",
+    volumechangeCallback
+  );
+  const cancelError = useEventListener(mediaRef, "error", errorCallback);
+  onScopeDispose(() => {
+    cancelTimeUpdate();
+    cancelDurationChange();
+    cancelProgress();
+    cancelSeeking();
+    cancelSeeked();
+    cancelWaitingLoadstart();
+    cancelLoadeddata();
+    cancelPlaying();
+    cancelRatechange();
+    cancelStalled();
+    cancelSuspend();
+    cancelEnded();
+    cancelPause();
+    cancelPlay();
+    cancelVolumechange();
+    cancelError();
   });
 }

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

@@ -9,6 +9,5 @@ export type UsePlayerRuntimeArgs = {
 };
 export declare function usePlayerRuntime(args: UsePlayerRuntimeArgs): {
     initialize: (autoplay?: boolean) => void;
-    destroy: () => void;
 };
 export type UsePlayerRuntimeReturn = ReturnType<typeof usePlayerRuntime>;

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

@@ -1,4 +1,9 @@
-import { shallowRef, toRefs, toValue } from "vue";
+import {
+  onScopeDispose,
+  shallowRef,
+  toRefs,
+  toValue
+} from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { usePlayerState } from "./usePlayerState.mjs";
@@ -13,6 +18,9 @@ export function usePlayerRuntime(args) {
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
   const { loaded } = toRefs(state);
+  let cancelLoaded = void 0;
+  let cancelPlay = void 0;
+  let cancelPause = void 0;
   function handleHlsRuntimeError(args2) {
     const { data, hls: hls2 } = args2;
     const error = new Error(data.details || "HLS error");
@@ -63,13 +71,18 @@ export function usePlayerRuntime(args) {
     }
   }
   function useNative() {
+    if (!mediaRef) {
+      return;
+    }
     const el = toValue(mediaRef);
     if (!el || !src) {
       return;
     }
     try {
       el.src = src;
-      el.addEventListener(
+      cancelLoaded?.();
+      cancelLoaded = useEventListener(
+        mediaRef,
         "loadeddata",
         () => {
           loaded.value = true;
@@ -114,10 +127,12 @@ export function usePlayerRuntime(args) {
       hls.on(Hls.Events.ERROR, (_event, data) => {
         handleHlsRuntimeError({ data, hls });
       });
-      useEventListener(mediaRef, "pause", () => {
+      cancelPause?.();
+      cancelPause = useEventListener(mediaRef, "pause", () => {
         hls?.stopLoad();
       });
-      useEventListener(mediaRef, "play", () => {
+      cancelPlay?.();
+      cancelPlay = useEventListener(mediaRef, "play", () => {
         hls?.startLoad();
       });
       hls.loadSource(src);
@@ -130,14 +145,10 @@ export function usePlayerRuntime(args) {
       });
     }
   }
-  function initialize(autoplay = false) {
-    if (srcType === "native") {
-      useNative();
-    } else if (srcType === "hls") {
-      useHlsJS(autoplay);
-    }
-  }
   function destroy() {
+    cancelLoaded?.();
+    cancelPlay?.();
+    cancelPause?.();
     try {
       hls?.destroy();
     } finally {
@@ -145,8 +156,17 @@ export function usePlayerRuntime(args) {
       deferredLoading.value = false;
     }
   }
+  function initialize(autoplay = false) {
+    if (srcType === "native") {
+      useNative();
+    } else if (srcType === "hls") {
+      useHlsJS(autoplay);
+    }
+  }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
-    initialize,
-    destroy
+    initialize
   };
 }

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

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { PlayerState } from '../../types/index.js';
 export declare function usePlayerState(id: MaybeRef<string>): {
     initializeState: () => PlayerState;
-    deleteState: () => void;
-    playerStateStore: Ref<PlayerState[], PlayerState[]>;
+    playerStateStore: import("vue").Ref<PlayerState[], PlayerState[]>;
 };

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

@@ -1,9 +1,16 @@
-import { ref, reactive, toValue } from "vue";
-const playerStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getPlayerStateStore = createStateStore(
+  "MagicPlayer",
+  () => []
+);
 export function usePlayerState(id) {
+  const playerStateStore = getPlayerStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       buffered: [],
       currentTime: 0,
       dragging: false,
@@ -42,21 +49,39 @@ export function usePlayerState(id) {
     playerStateStore.value = [...playerStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(id);
+    playerStateStore.value = playerStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState() {
-    let state = playerStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
+    const currentId = toValue(id);
+    let state = playerStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(id));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     return state;
   }
-  function deleteState() {
-    playerStateStore.value = playerStateStore.value.filter((x) => x.id !== id);
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = playerStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     playerStateStore
   };
 }

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

@@ -43,7 +43,6 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     };
     controlsApi: {
         initialize: () => void;
-        destroy: () => void;
         bufferedPercentage: import("vue").ComputedRef<number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
@@ -53,7 +52,6 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     };
     playerRuntime: {
         initialize: (autoplay?: boolean) => void;
-        destroy: () => void;
     };
 };
 export type UseMagicPlayerReturn = ReturnType<typeof useMagicPlayer>;

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

@@ -37,6 +37,7 @@ export interface RequiredMagicPlayerOptions {
 export type Buffered = [number, number][];
 export interface PlayerState {
     id: string;
+    refCount: number;
     buffered: Buffered;
     currentTime: number;
     dragging: boolean;

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

@@ -56,8 +56,8 @@ watch(
 );
 useIntersectionObserver(
   elRef,
-  ([{ isIntersecting }]) => {
-    intersecting.value = isIntersecting;
+  ([entry]) => {
+    intersecting.value = entry?.isIntersecting ?? intersecting.value;
   },
   { rootMargin: "150% 0px 150% 0px", immediate: true }
 );

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

@@ -5,7 +5,15 @@
 </template>
 
 <script setup>
-import { ref, inject, computed, onMounted, watch, useTemplateRef } from "vue";
+import {
+  ref,
+  inject,
+  computed,
+  onMounted,
+  watch,
+  useTemplateRef,
+  onUnmounted
+} from "vue";
 import { unrefElement } from "@vueuse/core";
 import defu from "defu";
 import {
@@ -63,4 +71,8 @@ watch(
 onMounted(() => {
   createAnimation();
 });
+onUnmounted(() => {
+  animation.value?.cancel();
+  animation.value = void 0;
+});
 </script>

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

@@ -12,7 +12,8 @@ import {
   watch,
   nextTick,
   readonly,
-  useTemplateRef
+  useTemplateRef,
+  onBeforeUnmount
 } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 import {
@@ -67,15 +68,18 @@ watch(
   },
   { once: true }
 );
-useIntersectionObserver(
+const intersectionObserver = useIntersectionObserver(
   elRef,
-  ([{ isIntersecting }]) => {
-    intersecting.value = isIntersecting;
-    if (isIntersecting) {
+  ([entry]) => {
+    intersecting.value = entry?.isIntersecting ?? intersecting.value;
+    if (entry?.isIntersecting) {
       calculate();
     }
   },
   { rootMargin: "150% 0px 150% 0px", immediate: true }
 );
+onBeforeUnmount(() => {
+  intersectionObserver.stop();
+});
 provide(MagicScrollProgress, readonly(progress));
 </script>

package/dist/plugins/MagicScroll/src/composables/private/useCollisionDetection.mjs

@@ -3,6 +3,7 @@ import { useElementBounding, useWindowSize } from "@vueuse/core";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useCollisionDetection(args) {
   const { id, scrollY, child, parent, offset } = args;
+  const magicEmitter = useMagicEmitter();
   const alerted = reactive({
     up: {
       top: {
@@ -114,7 +115,7 @@ export function useCollisionDetection(args) {
     const mappedParentEdge = toValue(mappedParentBoundingRect[parentEdge]) + offset2;
     if (direction === "down" && mappedChildEdge <= mappedParentEdge || direction === "up" && mappedChildEdge >= mappedParentEdge) {
       alerted[direction][childEdge][parentEdge] = true;
-      useMagicEmitter().emit("collision", {
+      magicEmitter.emit("collision", {
         id,
         direction,
         parentEdge,

package/dist/plugins/MagicToast/src/components/MagicToastProvider.vue

@@ -42,13 +42,7 @@
 </template>
 
 <script setup>
-import {
-  toValue,
-  useTemplateRef,
-  provide,
-  watch,
-  onBeforeUnmount
-} from "vue";
+import { toValue, useTemplateRef, provide, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { useToastState } from "../composables/private/useToastState";
 import { useToastView } from "../composables/private/useToastView";
@@ -71,7 +65,7 @@ defineOptions({
   inheritAttrs: false
 });
 const { deleteView } = useToastView(id);
-const { deleteState, initializeState } = useToastState(id);
+const { initializeState } = useToastState(id);
 const state = initializeState(options);
 const listRef = useTemplateRef("list");
 const {
@@ -93,9 +87,6 @@ watch(
     deep: true
   }
 );
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicToastInstanceId, id);
 </script>
 

package/dist/plugins/MagicToast/src/components/MagicToastView.vue

@@ -116,6 +116,7 @@ const { style, onPointerdown, onClick } = useToastDrag({
 
 .magic-toast-view__drag {
   display: block;
+  touch-action: none;
 }
 
 .magic-toast-view[data-dragging='true'] {

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -1,4 +1,4 @@
-import { computed, toRefs, toValue } from "vue";
+import { computed, onScopeDispose, toRefs, toValue } from "vue";
 import { useEventListener } from "@vueuse/core";
 import {
   guardedReleasePointerCapture,
@@ -34,6 +34,7 @@ export function useToastDrag(args) {
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelTouchend = void 0;
+  let cancelTouchcancel = void 0;
   const hasDragged = computed(() => {
     const hasDraggedX = !isWithinRange({
       input: draggedX.value,
@@ -51,12 +52,7 @@ export function useToastDrag(args) {
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
   );
   const emitter = useMagicEmitter();
-  const {
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = useToastScrollLock();
+  const { lockScroll, unlockScroll } = useToastScrollLock();
   function interpolateDragged(args2) {
     const {
       to,
@@ -192,6 +188,7 @@ export function useToastDrag(args) {
     cancelTouchend?.();
     cancelPointerup?.();
     cancelPointermove?.();
+    cancelTouchcancel?.();
   }
   function onPointerup(e) {
     if (shouldClose.value) {
@@ -228,10 +225,9 @@ export function useToastDrag(args) {
     resetStateAndListeners();
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      unlockScroll();
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof scrollLockValue === "object" && scrollLockValue.padding
+      );
     }
     if (hasDragged.value) {
       e.preventDefault();
@@ -254,13 +250,16 @@ export function useToastDrag(args) {
       y: draggedY.value
     });
   }
+  function destroy() {
+    cancelPointermove?.();
+    cancelPointerup?.();
+    cancelTouchend?.();
+    cancelTouchcancel?.();
+  }
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(typeof scrollLockValue === "object" && scrollLockValue.padding);
     }
     if (dragging.value) {
       return;
@@ -279,6 +278,7 @@ export function useToastDrag(args) {
       lastDraggedX.value = draggedX.value;
       lastDraggedY.value = draggedY.value;
       cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+      cancelTouchcancel = useEventListener(document, "touchcancel", onPointerup);
       cancelPointermove = useEventListener(
         document,
         "pointermove",
@@ -304,6 +304,9 @@ export function useToastDrag(args) {
       state.expanded = true;
     }
   }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
     onPointerdown,
     onClick,

package/dist/plugins/MagicToast/src/composables/private/useToastScrollLock.d.ts

@@ -1,6 +1,4 @@
 export declare function useToastScrollLock(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicToast/src/composables/private/useToastScrollLock.mjs

@@ -1,61 +1,23 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding();
 export function useToastScrollLock() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px"
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }