@maas/vue-equipment 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.29",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

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

@@ -253,12 +253,10 @@ function saveOvershoot() {
   overshoot.value = convertToPixels(overshootVar) || 0;
 }
 if (mappedOptions.keyListener.close) {
-  for (const key of mappedOptions.keyListener.close) {
-    onKeyStroke(key, (e) => {
-      close();
-      e.preventDefault();
-    });
-  }
+  onKeyStroke(mappedOptions.keyListener.close, (e) => {
+    close();
+    e.preventDefault();
+  });
 }
 watch(isActive, async (value) => {
   if (value) {

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

@@ -122,12 +122,10 @@ function onClose() {
   innerActive.value = false;
 }
 if (mappedOptions.keyListener?.close) {
-  for (const key of mappedOptions.keyListener.close) {
-    onKeyStroke(key, (e) => {
-      close();
-      e.preventDefault();
-    });
-  }
+  onKeyStroke(mappedOptions.keyListener.close, (e) => {
+    close();
+    e.preventDefault();
+  });
 }
 watch(isActive, async (value) => {
   if (value) {

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

@@ -40,7 +40,11 @@
           class="magic-player-audio-controls__item -grow"
           data-slot="timeline"
         >
-          <div ref="track" class="magic-player-audio-controls__timeline">
+          <div
+            ref="track"
+            class="magic-player-audio-controls__timeline"
+            @mouseleave="onMouseleaveTimeline"
+          >
             <magic-player-timeline />
           </div>
         </div>
@@ -92,7 +96,13 @@ const trackRef = useTemplateRef("track");
 const { play, pause } = usePlayerAudioApi({
   id: mappedInstanceId.value
 });
-const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
+const {
+  initialize,
+  destroy,
+  onMouseenter,
+  onMouseleave,
+  onMouseleaveTimeline
+} = usePlayerControlsApi({
   id: mappedInstanceId.value,
   barRef,
   trackRef

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

@@ -44,7 +44,11 @@
           </div>
           <div class="magic-player-video-controls__item -grow">
             <slot name="timelineBefore" />
-            <div ref="track" class="magic-player-video-controls__timeline">
+            <div
+              ref="track"
+              class="magic-player-video-controls__timeline"
+              @mouseleave="onMouseleaveTimeline"
+            >
               <magic-player-timeline />
             </div>
             <slot name="timelineAfter" />
@@ -148,7 +152,13 @@ const {
   dragging
 } = toRefs(state);
 const { play, pause, mute, unmute, enterFullscreen, exitFullscreen } = usePlayerVideoApi({ id: mappedInstanceId.value });
-const { initialize, destroy, onMouseenter, onMouseleave } = usePlayerControlsApi({
+const {
+  initialize,
+  destroy,
+  onMouseenter,
+  onMouseleave,
+  onMouseleaveTimeline
+} = usePlayerControlsApi({
   id: mappedInstanceId.value,
   barRef,
   trackRef,

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

@@ -11,6 +11,7 @@ export declare function usePlayerControlsApi(args: UsePlayerControlsApiArgs): {
     bufferedPercentage: import("vue").ComputedRef<number>;
     onMouseenter: () => void;
     onMouseleave: () => void;
+    onMouseleaveTimeline: () => void;
     onPointerdown: (e: PointerEvent) => void;
     onPointermove: (e: PointerEvent) => void;
 };

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

@@ -99,6 +99,11 @@ export function usePlayerControlsApi(args) {
     }
     getPopoverOffsetX();
   }
+  function resetTimelineState() {
+    seekedTime.value = null;
+    seekedPercentage.value = 0;
+    popoverOffsetX.value = null;
+  }
   function resetStateAndListeners() {
     dragging.value = false;
     touched.value = false;
@@ -108,6 +113,7 @@ export function usePlayerControlsApi(args) {
   }
   function onPointerup(e) {
     resetStateAndListeners();
+    resetTimelineState();
     guardedReleasePointerCapture({ event: e, element: barRef?.value });
     if (resumePlay.value) {
       play();
@@ -150,11 +156,12 @@ export function usePlayerControlsApi(args) {
   function onMouseleave() {
     controlsMouseEntered.value = false;
     if (!dragging.value) {
-      seekedTime.value = null;
-      popoverOffsetX.value = null;
-      seekedPercentage.value = 0;
-      scrubbedPercentage.value = 0;
-      thumbPercentage.value = 0;
+      resetTimelineState();
+    }
+  }
+  function onMouseleaveTimeline() {
+    if (!dragging.value) {
+      resetTimelineState();
     }
   }
   let watchTrack = null;
@@ -210,6 +217,7 @@ export function usePlayerControlsApi(args) {
     bufferedPercentage,
     onMouseenter,
     onMouseleave,
+    onMouseleaveTimeline,
     onPointerdown,
     onPointermove
   };

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

@@ -47,6 +47,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
         bufferedPercentage: import("vue").ComputedRef<number>;
         onMouseenter: () => void;
         onMouseleave: () => void;
+        onMouseleaveTimeline: () => void;
         onPointerdown: (e: PointerEvent) => void;
         onPointermove: (e: PointerEvent) => void;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "contributors": [
     {
       "name": "Robin Scholz",