mikuru 1.0.28 → 1.0.30

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.0.30 - 2026-05-15
+
+- Hardened `MikuruVideoPlayer` controls so stop, mute, playback speed, seeking, and modal close operations do not trigger recursive updates while browser media events are firing.
+- Kept media button UI stable by avoiding reactive branch swaps for player control icons and deferring non-play media operations out of the click event stack.
+
+## 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

@@ -31,13 +31,11 @@
       <div class="controls">
         <button type="button" @click="skipBackward">-10</button>
         <button class="primary" type="button" @click="togglePlayback" :aria-label="playLabel">
-          <span m-if="isPlaying">Pause</span>
-          <span m-else>Play</span>
+          <span>{{ playText }}</span>
         </button>
         <button type="button" @click="skipForward">+10</button>
         <button type="button" @click="toggleMute" :aria-label="muteLabel">
-          <span m-if="muted">Muted</span>
-          <span m-else>Sound</span>
+          <span>Sound</span>
         </button>
         <label class="volume">
           <span>Volume</span>
@@ -49,7 +47,7 @@
 </template>
 
 <script>
-import { computed, onMounted, ref } from "mikuru";
+import { computed, onBeforeUnmount, onMounted, ref } from "mikuru";
 
 const {
   src,
@@ -72,29 +70,45 @@ const isPlaying = ref(false);
 const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);
 const playLabel = computed(() => isPlaying.value ? "Pause audio" : "Play audio");
 const muteLabel = computed(() => muted.value ? "Unmute audio" : "Mute audio");
+const playText = computed(() => isPlaying.value ? "Pause" : "Play");
 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;
+let ignoreMediaEventsUntil = 0;
 
 onMounted(() => {
   applyAudioSettings();
 });
 
+onBeforeUnmount(() => {
+  isDisposed = true;
+});
+
 function getMedia() {
+  if (isDisposed) return null;
   return mediaEl.value;
 }
 
+function ignoreMediaEventsFor(ms) {
+  ignoreMediaEventsUntil = performance.now() + ms;
+}
+
+function shouldIgnoreMediaEvent() {
+  return performance.now() < ignoreMediaEventsUntil;
+}
+
 function syncMedia() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   const media = getMedia();
   if (!media) return;
   currentTime.value = media.currentTime || 0;
   duration.value = Number.isFinite(media.duration) ? media.duration : 0;
-  volume.value = media.volume;
-  muted.value = media.muted;
 }
 
 function applyAudioSettings() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   media.volume = volume.value;
@@ -102,10 +116,12 @@ function applyAudioSettings() {
 }
 
 function markPlaying() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
 }
 
 function markPaused() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
 }
 
@@ -113,13 +129,20 @@ async function togglePlayback() {
   const media = getMedia();
   if (!media) return;
   if (media.paused) {
-    await media.play();
+    try {
+      await media.play();
+    } catch (error) {
+      if (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,15 +152,28 @@ function seek(event) {
 }
 
 function setVolume(event) {
+  if (isDisposed) return;
   const nextVolume = Number(event.target.value);
-  volume.value = nextVolume;
-  muted.value = nextVolume === 0;
-  applyAudioSettings();
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.volume = nextVolume;
+    media.muted = nextVolume === 0;
+  }, 0);
 }
 
-function toggleMute() {
-  muted.value = !muted.value;
-  applyAudioSettings();
+function toggleMute(event) {
+  if (isDisposed) return;
+  const button = event.currentTarget;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.muted = !media.muted;
+    button.textContent = media.muted ? "Muted" : "Sound";
+    button.setAttribute("aria-label", media.muted ? "Unmute audio" : "Mute audio");
+  }, 0);
 }
 
 function skipBackward() {
@@ -149,11 +185,16 @@ 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);
-  media.currentTime = nextTime;
-  currentTime.value = nextTime;
+  ignoreMediaEventsFor(100);
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    media.currentTime = nextTime;
+    currentTime.value = nextTime;
+  }, 0);
 }
 
 function formatTime(seconds) {

package/components/MikuruVideoPlayer.mikuru

@@ -32,8 +32,7 @@
       </div>
 
       <button class="center-toggle" type="button" @click="togglePlayback" :aria-label="playLabel">
-        <span m-if="isPlaying" class="fa-icon icon-pause large" aria-hidden="true"></span>
-        <span m-else class="fa-icon icon-play large" aria-hidden="true"></span>
+        <span class="fa-icon large" :class="playIconClass" aria-hidden="true"></span>
       </button>
 
       <div class="control-shelf">
@@ -61,15 +60,13 @@
         <div class="control-row">
           <div class="left-controls">
             <button class="icon-button" type="button" @click="togglePlayback" :aria-label="playLabel">
-              <span m-if="isPlaying" class="fa-icon icon-pause" aria-hidden="true"></span>
-              <span m-else class="fa-icon icon-play" aria-hidden="true"></span>
+              <span class="fa-icon" :class="playIconClass" aria-hidden="true"></span>
             </button>
             <button class="icon-button" type="button" @click="stopPlayback" aria-label="Stop video">
               <span class="fa-icon icon-stop" aria-hidden="true"></span>
             </button>
             <button class="icon-button" type="button" @click="toggleMute" :aria-label="muteLabel">
-              <span m-if="muted" class="fa-icon icon-mute" aria-hidden="true"></span>
-              <span m-else class="fa-icon icon-volume" aria-hidden="true"></span>
+              <span class="fa-icon icon-volume" aria-hidden="true"></span>
             </button>
             <label class="volume">
               <span>Volume</span>
@@ -79,10 +76,9 @@
           </div>
 
           <div class="right-controls">
-            <button class="pill-button" type="button" @click="cycleRate">{{ playbackRate }}x</button>
+            <button class="pill-button" type="button" @click="cycleRate" aria-label="Change playback speed">1x</button>
             <button class="icon-button fullscreen-button" type="button" @click="toggleFullscreen" aria-label="Fullscreen">
-              <span m-if="isFullscreen" class="fa-icon icon-minimize" aria-hidden="true"></span>
-              <span m-else class="fa-icon icon-maximize" aria-hidden="true"></span>
+              <span class="fa-icon" :class="fullscreenIconClass" aria-hidden="true"></span>
             </button>
           </div>
         </div>
@@ -92,7 +88,7 @@
 </template>
 
 <script>
-import { computed, onMounted, onUnmounted, ref } from "mikuru";
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from "mikuru";
 
 const {
   src,
@@ -119,7 +115,6 @@ const isFullscreen = ref(false);
 const isSeeking = ref(false);
 const pointerInside = ref(false);
 const controlsVisible = ref(true);
-const playbackRate = ref(1);
 const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);
 const seekProgress = computed(() => {
   if (safeDuration.value <= 0) return 0;
@@ -129,50 +124,73 @@ const seekProgress = computed(() => {
 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 playIconClass = computed(() => isPlaying.value ? "icon-pause" : "icon-play");
+const fullscreenIconClass = computed(() => isFullscreen.value ? "icon-minimize" : "icon-maximize");
 const rates = [1, 1.25, 1.5, 2, 0.75];
+let playbackRate = 1;
+let rateIndex = 0;
+let isDisposed = false;
+let ignoreMediaEventsUntil = 0;
 
 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 ignoreMediaEventsFor(ms) {
+  ignoreMediaEventsUntil = performance.now() + ms;
+}
+
+function shouldIgnoreMediaEvent() {
+  return performance.now() < ignoreMediaEventsUntil;
+}
+
 function syncMedia() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   const media = getMedia();
   if (!media) return;
   currentTime.value = media.currentTime || 0;
   duration.value = Number.isFinite(media.duration) ? media.duration : 0;
-  volume.value = media.volume;
-  muted.value = media.muted;
-  playbackRate.value = media.playbackRate;
 }
 
 function applyAudioSettings() {
+  if (isDisposed) return;
   const media = getMedia();
   if (!media) return;
   media.volume = volume.value;
   media.muted = muted.value;
-  media.playbackRate = playbackRate.value;
+  media.playbackRate = playbackRate;
 }
 
 function markPlaying() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
   controlsVisible.value = pointerInside.value;
 }
 
 function markPaused() {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
   controlsVisible.value = true;
 }
 
 function updateFullscreen() {
+  if (isDisposed) return;
   isFullscreen.value = document.fullscreenElement === screenEl.value || document.fullscreenElement === mediaEl.value;
 }
 
@@ -180,7 +198,13 @@ async function togglePlayback() {
   const media = getMedia();
   if (!media) return;
   if (media.paused) {
-    await media.play();
+    try {
+      await media.play();
+    } catch (error) {
+      if (error?.name !== "AbortError") {
+        throw error;
+      }
+    }
     return;
   }
   media.pause();
@@ -194,6 +218,7 @@ function getPointerTime(event) {
 }
 
 function seekTo(nextTime) {
+  if (isDisposed) return;
   const media = getMedia();
   currentTime.value = nextTime;
   if (media) {
@@ -206,6 +231,7 @@ function seekFromPointer(event) {
 }
 
 function startSeek(event) {
+  if (isDisposed) return;
   isSeeking.value = true;
   controlsVisible.value = true;
   event.currentTarget.setPointerCapture?.(event.pointerId);
@@ -213,11 +239,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 +253,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,33 +287,61 @@ function seekWithKeyboard(event) {
 }
 
 function stopPlayback() {
-  const media = getMedia();
-  if (!media) return;
-  media.pause();
-  media.currentTime = 0;
-  currentTime.value = 0;
-  isPlaying.value = false;
+  if (isDisposed) return;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    ignoreMediaEventsFor(300);
+    media.pause();
+    media.currentTime = 0;
+  }, 0);
 }
 
 function setVolume(event) {
+  if (isDisposed) return;
   const nextVolume = Number(event.target.value);
-  volume.value = nextVolume;
-  muted.value = nextVolume === 0;
-  applyAudioSettings();
-}
-
-function toggleMute() {
-  muted.value = !muted.value;
-  applyAudioSettings();
-}
-
-function cycleRate() {
-  const currentIndex = rates.indexOf(playbackRate.value);
-  playbackRate.value = rates[(currentIndex + 1) % rates.length];
-  applyAudioSettings();
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.volume = nextVolume;
+    media.muted = nextVolume === 0;
+  }, 0);
+}
+
+function toggleMute(event) {
+  if (isDisposed) return;
+  const button = event.currentTarget;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.muted = !media.muted;
+    const icon = button.querySelector(".fa-icon");
+    icon?.classList.toggle("icon-volume", !media.muted);
+    icon?.classList.toggle("icon-mute", media.muted);
+    button.setAttribute("aria-label", media.muted ? "Unmute video" : "Mute video");
+  }, 0);
+}
+
+function cycleRate(event) {
+  if (isDisposed) return;
+  const button = event.currentTarget;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    rateIndex = (rateIndex + 1) % rates.length;
+    playbackRate = rates[rateIndex];
+    const media = getMedia();
+    if (media) {
+      media.playbackRate = playbackRate;
+    }
+    button.textContent = playbackRate + "x";
+  }, 0);
 }
 
 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.30",
   "private": false,
   "type": "module",
   "description": "A compile-first JavaScript framework with Vue-like authoring and Svelte-like generated DOM updates.",