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

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { computed, toRefs, onBeforeUnmount } from "vue";
+import { computed, toRefs } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -30,7 +30,7 @@ const magicError = useMagicError({
   prefix: "MagicPie",
   source: "MagicPie"
 });
-const { initializeState, deleteState } = usePieState(id);
+const { initializeState } = usePieState(id);
 const state = initializeState();
 const { percentage } = toRefs(state);
 function generatePath(points) {
@@ -40,9 +40,18 @@ function generatePath(points) {
       errorCode: "missing_points"
     });
   }
+  if (!points[0]) {
+    magicError.throwError({
+      message: "Points contain invalid coordinates",
+      errorCode: "invalid_points"
+    });
+  }
   let path2 = `M ${points[0][0]} ${points[0][1]}`;
   for (let i = 1; i < points.length; i++) {
-    path2 += ` L ${points[i][0]} ${points[i][1]}`;
+    if (!points[i]) {
+      continue;
+    }
+    path2 += ` L ${points[i]?.[0]} ${points[i]?.[1]}`;
   }
   return path2;
 }
@@ -154,9 +163,6 @@ function generatePie(percentage2, flip) {
 const path = computed(() => {
   return generatePie(percentage.value, options?.flip);
 });
-onBeforeUnmount(() => {
-  deleteState();
-});
 </script>
 
 <style>

package/dist/plugins/MagicPie/src/composables/private/usePieState.d.ts

@@ -2,5 +2,5 @@ import { type MaybeRef } from 'vue';
 import type { PieState } from '../../types/index.js';
 export declare function usePieState(id: MaybeRef<string>): {
     initializeState: () => PieState;
-    deleteState: () => void;
+    pieStateStore: import("vue").Ref<PieState[], PieState[]>;
 };

package/dist/plugins/MagicPie/src/composables/private/usePieState.mjs

@@ -1,9 +1,13 @@
-import { ref, reactive, toValue } from "vue";
-const pieStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getPieStateStore = createStateStore("MagicPie", () => []);
 export function usePieState(id) {
+  const pieStateStore = getPieStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       percentage: 0,
       interpolationId: void 0
     };
@@ -14,22 +18,39 @@ export function usePieState(id) {
     pieStateStore.value = [...pieStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(id);
+    pieStateStore.value = pieStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState() {
-    let state = pieStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
+    const currentId = toValue(id);
+    let state = pieStateStore.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() {
-    pieStateStore.value = pieStateStore.value.filter(
-      (x) => x.id !== id
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = pieStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState
+    pieStateStore
   };
 }

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

@@ -3,6 +3,7 @@ export interface MagicPieOptions {
 }
 export interface PieState {
     id: string;
+    refCount: number;
     percentage: number;
     interpolationId: number | undefined;
 }

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

@@ -9,9 +9,9 @@ import {
   inject,
   watch,
   onMounted,
-  onBeforeUnmount,
   shallowRef,
-  computed
+  computed,
+  onBeforeUnmount
 } from "vue";
 import {
   useElementVisibility,
@@ -38,6 +38,8 @@ const magicError = useMagicError({
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const injectedPlayerRef = inject(MagicPlayerRef, void 0);
+let cancelFocus = void 0;
+let cancelBlur = void 0;
 magicError.assert(injectedInstanceId, {
   message: "MagicPlayerAudio must be used within a MagicPlayerProvider",
   errorCode: "missing_instance_id"
@@ -47,7 +49,7 @@ magicError.assert(injectedOptions, {
   errorCode: "missing_options"
 });
 const elRef = useTemplateRef("el");
-const { initialize, destroy } = usePlayerRuntime({
+const { initialize } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
   src: injectedOptions.src,
@@ -84,8 +86,8 @@ function onWindowBlur() {
   pause();
 }
 if (manageWindow.value) {
-  useEventListener(defaultWindow, "focus", onWindowFocus);
-  useEventListener(defaultWindow, "blur", onWindowBlur);
+  cancelFocus = useEventListener(defaultWindow, "focus", onWindowFocus);
+  cancelBlur = useEventListener(defaultWindow, "blur", onWindowBlur);
 }
 if (manageViewport.value) {
   watch(isVisible, (value) => {
@@ -105,7 +107,8 @@ onMounted(() => {
   initialize();
 });
 onBeforeUnmount(() => {
-  destroy();
+  cancelFocus?.();
+  cancelBlur?.();
 });
 </script>
 

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

@@ -102,13 +102,7 @@ const trackRef = useTemplateRef("track");
 const { play, pause } = usePlayerAudioApi({
   id: mappedInstanceId.value
 });
-const {
-  initialize,
-  destroy,
-  onMouseenter,
-  onMouseleave,
-  onMouseleaveTimeline
-} = usePlayerControlsApi({
+const { initialize, onMouseenter, onMouseleave, onMouseleaveTimeline } = usePlayerControlsApi({
   id: mappedInstanceId.value,
   barRef,
   trackRef
@@ -128,7 +122,9 @@ const {
 const { idle } = useIdle(injectedOptions?.threshold?.idle);
 initialize();
 onBeforeUnmount(() => {
-  destroy();
+  state.controlsBarRect = void 0;
+  state.controlsTrackRect = void 0;
+  state.controlsPopoverRect = void 0;
 });
 provide(MagicPlayerInstanceId, mappedInstanceId.value);
 provide(MagicPlayerTrackRef, trackRef);

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

@@ -79,7 +79,11 @@ function drawFrame(time) {
   let closestIndex = -1;
   let minDifference = Infinity;
   for (let i = 0; i < tiles.length; i++) {
-    const { start } = tiles[i];
+    const tile2 = tiles[i];
+    if (!tile2) {
+      continue;
+    }
+    const { start } = tile2;
     const difference = Math.abs(start - time);
     if (difference < minDifference) {
       minDifference = difference;
@@ -87,6 +91,9 @@ function drawFrame(time) {
     }
   }
   const tile = tiles[closestIndex];
+  if (!tile) {
+    return;
+  }
   context.drawImage(
     image,
     tile.x,

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

@@ -21,13 +21,7 @@
 </template>
 
 <script setup>
-import {
-  toRefs,
-  provide,
-  onMounted,
-  onUnmounted,
-  useTemplateRef
-} from "vue";
+import { toRefs, provide, onMounted, useTemplateRef } from "vue";
 import defu from "defu";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import {
@@ -43,7 +37,7 @@ const { id, options } = defineProps({
   options: { type: Object, required: false }
 });
 const mappedOptions = defu(options, defaultOptions);
-const { initializeState, deleteState } = usePlayerState(id);
+const { initializeState } = usePlayerState(id);
 const state = initializeState();
 const {
   playing,
@@ -61,9 +55,6 @@ const { initializeEmitter } = usePlayerEmitter({ id });
 onMounted(() => {
   initializeEmitter();
 });
-onUnmounted(() => {
-  deleteState();
-});
 provide(MagicPlayerInstanceId, id);
 provide(MagicPlayerOptionsKey, mappedOptions);
 provide(MagicPlayerRef, playerRef);

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

@@ -17,9 +17,9 @@ import {
   watch,
   onMounted,
   inject,
-  onBeforeUnmount,
   shallowRef,
-  computed
+  computed,
+  onBeforeUnmount
 } from "vue";
 import {
   useElementVisibility,
@@ -46,6 +46,8 @@ const magicError = useMagicError({
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);
 const injectedPlayerRef = inject(MagicPlayerRef, void 0);
+let cancelFocus = void 0;
+let cancelBlur = void 0;
 magicError.assert(injectedInstanceId, {
   message: "MagicPlayerVideo must be used within a MagicPlayerProvider",
   errorCode: "missing_instance_id"
@@ -55,7 +57,7 @@ magicError.assert(injectedOptions, {
   errorCode: "missing_options"
 });
 const elRef = useTemplateRef("el");
-const { initialize, destroy } = usePlayerRuntime({
+const { initialize } = usePlayerRuntime({
   id: injectedInstanceId,
   mediaRef: elRef,
   src: injectedOptions.src,
@@ -94,8 +96,8 @@ function onWindowBlur() {
   pause();
 }
 if (manageWindow.value) {
-  useEventListener(defaultWindow, "focus", onWindowFocus);
-  useEventListener(defaultWindow, "blur", onWindowBlur);
+  cancelFocus = useEventListener(defaultWindow, "focus", onWindowFocus);
+  cancelBlur = useEventListener(defaultWindow, "blur", onWindowBlur);
 }
 if (manageViewport.value) {
   watch(isVisible, (value) => {
@@ -139,7 +141,9 @@ onMounted(async () => {
   }
 });
 onBeforeUnmount(() => {
-  destroy();
+  state.fullscreenTarget = null;
+  cancelFocus?.();
+  cancelBlur?.();
 });
 </script>
 

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

@@ -158,13 +158,7 @@ const {
   dragging
 } = toRefs(state);
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
-const {
-  initialize,
-  destroy,
-  onMouseenter,
-  onMouseleave,
-  onMouseleaveTimeline
-} = usePlayerControlsApi({
+const { initialize, onMouseenter, onMouseleave, onMouseleaveTimeline } = usePlayerControlsApi({
   id: mappedInstanceId.value,
   barRef,
   trackRef,
@@ -188,7 +182,9 @@ const visible = computed(() => {
 });
 initialize();
 onBeforeUnmount(() => {
-  destroy();
+  state.controlsBarRect = void 0;
+  state.controlsTrackRect = void 0;
+  state.controlsPopoverRect = void 0;
 });
 provide(MagicPlayerInstanceId, mappedInstanceId.value);
 provide(MagicPlayerTrackRef, trackRef);

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

@@ -7,7 +7,6 @@ export type UsePlayerControlsApiArgs = {
 };
 export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
     initialize: () => void;
-    destroy: () => void;
     bufferedPercentage: import("vue").ComputedRef<number>;
     onMouseenter: () => void;
     onMouseleave: () => void;

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

@@ -3,7 +3,9 @@ import {
   shallowRef,
   computed,
   watch,
-  toValue
+  toValue,
+  onScopeDispose,
+  markRaw
 } from "vue";
 import {
   useResizeObserver,
@@ -49,7 +51,7 @@ export function usePlayerControlsApi(args) {
     if (!buffered.value) {
       return 0;
     }
-    const endBuffer = buffered.value?.length > 0 ? buffered.value[0][1] : 0;
+    const endBuffer = buffered.value?.length > 0 && buffered.value[0] ? buffered.value[0][1] : 0;
     const percentage = endBuffer / duration.value * 100;
     return clampValue(percentage, 0, thumbPercentage.value);
   });
@@ -69,15 +71,19 @@ export function usePlayerControlsApi(args) {
     if (!toValue(trackRef)) {
       return;
     }
-    controlsTrackRect.value = toValue(trackRef).getBoundingClientRect();
+    controlsTrackRect.value = markRaw(
+      toValue(trackRef).getBoundingClientRect()
+    );
     thumbPercentage.value = 100 - controlsTrackRect.value.height / controlsTrackRect.value.width * 100;
   }
   function getPopoverSizes() {
     if (!toValue(barRef) || !toValue(popoverRef)) {
       return;
     }
-    controlsBarRect.value = toValue(barRef).getBoundingClientRect();
-    controlsPopoverRect.value = toValue(popoverRef).getBoundingClientRect();
+    controlsBarRect.value = markRaw(toValue(barRef).getBoundingClientRect());
+    controlsPopoverRect.value = markRaw(
+      toValue(popoverRef).getBoundingClientRect()
+    );
   }
   function getSizes() {
     getTimelineTrackSize();
@@ -174,9 +180,9 @@ export function usePlayerControlsApi(args) {
   let windowResizeCleanup = null;
   function initialize() {
     hasControls.value = true;
-    watchTrack = watch(() => trackRef, getTimelineTrackSize);
-    watchPopover = watch(() => popoverRef, getPopoverSizes);
-    watchBar = watch(() => barRef, getPopoverSizes);
+    watchTrack = watch(() => trackRef?.value, getTimelineTrackSize);
+    watchPopover = watch(() => popoverRef?.value, getPopoverSizes);
+    watchBar = watch(() => barRef?.value, getPopoverSizes);
     watchCurrentTime = watch(currentTime, (value) => {
       const percentage = value / duration?.value * 100;
       scrubbedPercentage.value = mapValue(
@@ -210,10 +216,15 @@ export function usePlayerControlsApi(args) {
     resizeObserverPopover?.stop();
     resizeObserverBar?.stop();
     windowResizeCleanup?.();
+    cancelPointermove?.();
+    cancelPointerup?.();
+    cancelTouchend?.();
   }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
     initialize,
-    destroy,
     bufferedPercentage,
     onMouseenter,
     onMouseleave,

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

@@ -1,8 +1,14 @@
-import { toRefs, watch, toValue } from "vue";
+import {
+  toRefs,
+  watch,
+  toValue,
+  onScopeDispose
+} from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { usePlayerState } from "./usePlayerState.mjs";
 export function usePlayerEmitter(args) {
   const { id } = args;
+  let scopeInitialized = false;
   const { initializeState } = usePlayerState(toValue(id));
   const state = initializeState();
   const {
@@ -20,83 +26,126 @@ export function usePlayerEmitter(args) {
     volume,
     waiting
   } = toRefs(state);
+  let stops = [];
   const emitter = useMagicEmitter();
+  function destroyEmitter() {
+    for (const stop of stops) {
+      try {
+        stop();
+      } catch {
+      }
+    }
+    stops = [];
+  }
   function initializeEmitter() {
-    watch(dragging, (newDragging) => {
-      if (newDragging) {
-        emitter.emit("onDragStart", toValue(id));
-      }
-      if (!newDragging) {
-        emitter.emit("onDragEnd", toValue(id));
-      }
-    });
-    watch(ended, (newEnded) => {
-      if (newEnded) {
-        emitter.emit("onEnd", toValue(id));
-      }
-    });
-    watch(fullscreen, (newFullscreen) => {
-      if (newFullscreen) {
-        emitter.emit("onFullscreenEnter", toValue(id));
-      }
-      if (!newFullscreen) {
-        emitter.emit("onFullscreenLeave", toValue(id));
-      }
-    });
-    watch(loaded, (newLoaded) => {
-      if (newLoaded) {
-        emitter.emit("onLoad", toValue(id));
-      }
-    });
-    watch(muted, (newMuted) => {
-      if (newMuted) {
-        emitter.emit("onMute", toValue(id));
-      }
-      if (!newMuted) {
-        emitter.emit("onUnmute", toValue(id));
-      }
-    });
-    watch(paused, (newPaused) => {
-      if (newPaused) {
-        emitter.emit("onPause", toValue(id));
-      }
-    });
-    watch(playing, (newPlaying) => {
-      if (newPlaying) {
-        emitter.emit("onPlay", toValue(id));
-      }
-    });
-    watch(rate, (newRate) => {
-      if (newRate) {
-        emitter.emit("onRateChange", toValue(id));
-      }
-    });
-    watch(started, (newStarted) => {
-      if (newStarted) {
-        emitter.emit("onStart", toValue(id));
-      }
-    });
-    watch(stalled, (newStalled) => {
-      if (newStalled) {
-        emitter.emit("onStall", toValue(id));
-      }
-    });
-    watch(touched, (newTouched) => {
-      if (newTouched) {
-        emitter.emit("onTouch", toValue(id));
-      }
-    });
-    watch(volume, (newVolume) => {
-      if (newVolume) {
-        emitter.emit("onVolumeChange", toValue(id));
-      }
-    });
-    watch(waiting, (newWaiting) => {
-      if (newWaiting) {
-        emitter.emit("onWait", toValue(id));
-      }
-    });
+    if (scopeInitialized) {
+      return;
+    }
+    scopeInitialized = true;
+    stops.push(
+      watch(dragging, (newDragging) => {
+        if (newDragging) {
+          emitter.emit("onDragStart", toValue(id));
+        }
+        if (!newDragging) {
+          emitter.emit("onDragEnd", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(ended, (newEnded) => {
+        if (newEnded) {
+          emitter.emit("onEnd", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(fullscreen, (newFullscreen) => {
+        if (newFullscreen) {
+          emitter.emit("onFullscreenEnter", toValue(id));
+        }
+        if (!newFullscreen) {
+          emitter.emit("onFullscreenLeave", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(loaded, (newLoaded) => {
+        if (newLoaded) {
+          emitter.emit("onLoad", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(muted, (newMuted) => {
+        if (newMuted) {
+          emitter.emit("onMute", toValue(id));
+        }
+        if (!newMuted) {
+          emitter.emit("onUnmute", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(paused, (newPaused) => {
+        if (newPaused) {
+          emitter.emit("onPause", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(playing, (newPlaying) => {
+        if (newPlaying) {
+          emitter.emit("onPlay", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(rate, (newRate) => {
+        if (newRate) {
+          emitter.emit("onRateChange", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(started, (newStarted) => {
+        if (newStarted) {
+          emitter.emit("onStart", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(stalled, (newStalled) => {
+        if (newStalled) {
+          emitter.emit("onStall", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(touched, (newTouched) => {
+        if (newTouched) {
+          emitter.emit("onTouch", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(volume, (newVolume) => {
+        if (newVolume) {
+          emitter.emit("onVolumeChange", toValue(id));
+        }
+      })
+    );
+    stops.push(
+      watch(waiting, (newWaiting) => {
+        if (newWaiting) {
+          emitter.emit("onWait", toValue(id));
+        }
+      })
+    );
   }
+  onScopeDispose(() => {
+    destroyEmitter();
+  });
   return {
     initializeEmitter
   };