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

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
   };

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>;