mikuru 1.0.28 → 1.0.29

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.29 - 2026-05-15
+
+- Fixed `MikuruVideoPlayer` and `MikuruAudioPlayer` unmount handling so media events fired while a modal or conditional branch is being removed no longer update component refs recursively.
+- Handled aborted `play()` promises during media player teardown to avoid uncaught browser `AbortError` / `DOMException` noise when closing a sample video quickly.
+
 ## 1.0.28 - 2026-05-15
 
 - Added package-exported Mikuru video player, audio player, image viewer, modal, carousel, toast, dropdown, tooltip, progress, and code block components with custom controls, template refs, lifecycle cleanup, keyboard-accessible seeking/navigation, volume, mute, playback rate, stop, fullscreen, close/select/dismiss events, progress states, and copy actions.

package/components/MikuruAudioPlayer.mikuru

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from "mikuru";
+import { computed, onBeforeUnmount, onMounted, ref } from "mikuru";
 
 const {
   src,
@@ -76,16 +76,23 @@ const initials = computed(() => {
   const words = title.value.split(" ").filter(Boolean);
   return words.slice(0, 2).map((word) => word[0]).join("").toUpperCase() || "M";
 });
+let isDisposed = false;
 
 onMounted(() => {
   applyAudioSettings();
 });
 
+onBeforeUnmount(() => {
+  isDisposed = true;
+});
+
 function getMedia() {
+  if (isDisposed) return null;
   return mediaEl.value;
 }
 
 function syncMedia() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   currentTime.value = media.currentTime || 0;
@@ -95,6 +102,7 @@ function syncMedia() {
 }
 
 function applyAudioSettings() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   media.volume = volume.value;
@@ -102,10 +110,12 @@ function applyAudioSettings() {
 }
 
 function markPlaying() {
+  if (isDisposed) return;
   isPlaying.value = true;
 }
 
 function markPaused() {
+  if (isDisposed) return;
   isPlaying.value = false;
 }
 
@@ -113,13 +123,20 @@ async function togglePlayback() {
   const media = getMedia();
   if (!media) return;
   if (media.paused) {
-    await media.play();
+    try {
+      await media.play();
+    } catch (error) {
+      if (!isDisposed && error?.name !== "AbortError") {
+        throw error;
+      }
+    }
     return;
   }
   media.pause();
 }
 
 function seek(event) {
+  if (isDisposed) return;
   const media = getMedia();
   const nextTime = Number(event.target.value);
   currentTime.value = nextTime;
@@ -129,6 +146,7 @@ function seek(event) {
 }
 
 function setVolume(event) {
+  if (isDisposed) return;
   const nextVolume = Number(event.target.value);
   volume.value = nextVolume;
   muted.value = nextVolume === 0;
@@ -136,6 +154,7 @@ function setVolume(event) {
 }
 
 function toggleMute() {
+  if (isDisposed) return;
   muted.value = !muted.value;
   applyAudioSettings();
 }
@@ -149,6 +168,7 @@ function skipForward() {
 }
 
 function skipBy(offset) {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   const nextTime = Math.min(Math.max(media.currentTime + offset, 0), safeDuration.value || media.currentTime + offset);

package/components/MikuruVideoPlayer.mikuru

@@ -92,7 +92,7 @@
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, ref } from "mikuru";
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from "mikuru";
 
 const {
   src,
@@ -130,21 +130,30 @@ const seekStyle = computed(() => "--progress: " + seekProgress.value + "%");
 const playLabel = computed(() => isPlaying.value ? "Pause video" : "Play video");
 const muteLabel = computed(() => muted.value ? "Unmute video" : "Mute video");
 const rates = [1, 1.25, 1.5, 2, 0.75];
+let isDisposed = false;
 
 onMounted(() => {
   applyAudioSettings();
   document.addEventListener("fullscreenchange", updateFullscreen);
 });
 
+onBeforeUnmount(() => {
+  isDisposed = true;
+  isSeeking.value = false;
+  pointerInside.value = false;
+});
+
 onUnmounted(() => {
   document.removeEventListener("fullscreenchange", updateFullscreen);
 });
 
 function getMedia() {
+  if (isDisposed) return null;
   return mediaEl.value;
 }
 
 function syncMedia() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   currentTime.value = media.currentTime || 0;
@@ -155,6 +164,7 @@ function syncMedia() {
 }
 
 function applyAudioSettings() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   media.volume = volume.value;
@@ -163,16 +173,19 @@ function applyAudioSettings() {
 }
 
 function markPlaying() {
+  if (isDisposed) return;
   isPlaying.value = true;
   controlsVisible.value = pointerInside.value;
 }
 
 function markPaused() {
+  if (isDisposed) return;
   isPlaying.value = false;
   controlsVisible.value = true;
 }
 
 function updateFullscreen() {
+  if (isDisposed) return;
   isFullscreen.value = document.fullscreenElement === screenEl.value || document.fullscreenElement === mediaEl.value;
 }
 
@@ -180,7 +193,13 @@ async function togglePlayback() {
   const media = getMedia();
   if (!media) return;
   if (media.paused) {
-    await media.play();
+    try {
+      await media.play();
+    } catch (error) {
+      if (!isDisposed && error?.name !== "AbortError") {
+        throw error;
+      }
+    }
     return;
   }
   media.pause();
@@ -194,6 +213,7 @@ function getPointerTime(event) {
 }
 
 function seekTo(nextTime) {
+  if (isDisposed) return;
   const media = getMedia();
   currentTime.value = nextTime;
   if (media) {
@@ -206,6 +226,7 @@ function seekFromPointer(event) {
 }
 
 function startSeek(event) {
+  if (isDisposed) return;
   isSeeking.value = true;
   controlsVisible.value = true;
   event.currentTarget.setPointerCapture?.(event.pointerId);
@@ -213,11 +234,13 @@ function startSeek(event) {
 }
 
 function dragSeek(event) {
+  if (isDisposed) return;
   if (!isSeeking.value) return;
   seekFromPointer(event);
 }
 
 function endSeek(event) {
+  if (isDisposed) return;
   if (!isSeeking.value) return;
   isSeeking.value = false;
   event.currentTarget.releasePointerCapture?.(event.pointerId);
@@ -225,17 +248,20 @@ function endSeek(event) {
 }
 
 function showControls() {
+  if (isDisposed) return;
   pointerInside.value = true;
   controlsVisible.value = true;
 }
 
 function hideControls() {
+  if (isDisposed) return;
   pointerInside.value = false;
   if (!isPlaying.value || isSeeking.value) return;
   controlsVisible.value = false;
 }
 
 function seekWithKeyboard(event) {
+  if (isDisposed) return;
   if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
     return;
   }
@@ -256,6 +282,7 @@ function seekWithKeyboard(event) {
 }
 
 function stopPlayback() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   media.pause();
@@ -265,6 +292,7 @@ function stopPlayback() {
 }
 
 function setVolume(event) {
+  if (isDisposed) return;
   const nextVolume = Number(event.target.value);
   volume.value = nextVolume;
   muted.value = nextVolume === 0;
@@ -272,17 +300,20 @@ function setVolume(event) {
 }
 
 function toggleMute() {
+  if (isDisposed) return;
   muted.value = !muted.value;
   applyAudioSettings();
 }
 
 function cycleRate() {
+  if (isDisposed) return;
   const currentIndex = rates.indexOf(playbackRate.value);
   playbackRate.value = rates[(currentIndex + 1) % rates.length];
   applyAudioSettings();
 }
 
 function toggleFullscreen() {
+  if (isDisposed) return;
   if (document.fullscreenElement) {
     document.exitFullscreen?.();
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikuru",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "private": false,
   "type": "module",
   "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",