mikuru 1.0.29 → 1.0.31

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.0.31 - 2026-05-16
+
+- Exported `MikuruVideoPlayer` media events so parent components can listen for playback, timing, seeking, volume, and playback-rate changes with typed media state payloads.
+- Exported matching `MikuruAudioPlayer` media events and documented the shared media player event payload.
+
+## 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.

package/components/MikuruAudioPlayer.mikuru

@@ -4,12 +4,15 @@
       ref="mediaEl"
       :src="src"
       :preload="preload"
-      @loadedmetadata="syncMedia"
-      @timeupdate="syncMedia"
-      @durationchange="syncMedia"
+      @loadedmetadata="handleLoadedMetadata"
+      @timeupdate="handleTimeUpdate"
+      @durationchange="handleDurationChange"
       @play="markPlaying"
       @pause="markPaused"
-      @ended="markPaused"
+      @ended="markEnded"
+      @seeked="handleSeeked"
+      @volumechange="handleVolumeChange"
+      @ratechange="handleRateChange"
     ></audio>
 
     <div class="art">
@@ -31,13 +34,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>
@@ -63,6 +64,18 @@ const {
   preload: String
 });
 
+const emit = defineEmits([
+  "loadedmetadata",
+  "timeupdate",
+  "durationchange",
+  "play",
+  "pause",
+  "ended",
+  "seeked",
+  "volumechange",
+  "ratechange"
+]);
+
 const mediaEl = ref(null);
 const currentTime = ref(0);
 const duration = ref(0);
@@ -72,11 +85,13 @@ 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();
@@ -91,14 +106,72 @@ function getMedia() {
   return mediaEl.value;
 }
 
+function ignoreMediaEventsFor(ms) {
+  ignoreMediaEventsUntil = performance.now() + ms;
+}
+
+function shouldIgnoreMediaEvent() {
+  return performance.now() < ignoreMediaEventsUntil;
+}
+
 function syncMedia() {
-  if (isDisposed) return;
+  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 createMediaPayload(event) {
+  const media = getMedia();
+  if (!media) return null;
+  return {
+    currentTime: media.currentTime || 0,
+    duration: Number.isFinite(media.duration) ? media.duration : 0,
+    paused: media.paused,
+    ended: media.ended,
+    muted: media.muted,
+    volume: media.volume,
+    playbackRate: media.playbackRate,
+    nativeEvent: event
+  };
+}
+
+function emitMediaPayload(event, dispatch) {
+  const payload = createMediaPayload(event);
+  if (payload) {
+    dispatch(payload);
+  }
+}
+
+function handleLoadedMetadata(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("loadedmetadata", payload));
+}
+
+function handleTimeUpdate(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("timeupdate", payload));
+}
+
+function handleDurationChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("durationchange", payload));
+}
+
+function handleSeeked(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("seeked", payload));
+}
+
+function handleVolumeChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("volumechange", payload));
+}
+
+function handleRateChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("ratechange", payload));
 }
 
 function applyAudioSettings() {
@@ -109,14 +182,22 @@ function applyAudioSettings() {
   media.muted = muted.value;
 }
 
-function markPlaying() {
-  if (isDisposed) return;
+function markPlaying(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
+  emitMediaPayload(event, (payload) => emit("play", payload));
 }
 
-function markPaused() {
-  if (isDisposed) return;
+function markPaused(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
+  isPlaying.value = false;
+  emitMediaPayload(event, (payload) => emit("pause", payload));
+}
+
+function markEnded(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
+  emitMediaPayload(event, (payload) => emit("ended", payload));
 }
 
 async function togglePlayback() {
@@ -126,7 +207,7 @@ async function togglePlayback() {
     try {
       await media.play();
     } catch (error) {
-      if (!isDisposed && error?.name !== "AbortError") {
+      if (error?.name !== "AbortError") {
         throw error;
       }
     }
@@ -148,15 +229,26 @@ 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() {
+function toggleMute(event) {
   if (isDisposed) return;
-  muted.value = !muted.value;
-  applyAudioSettings();
+  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() {
@@ -172,8 +264,12 @@ function skipBy(offset) {
   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

@@ -17,12 +17,15 @@
         :poster="poster"
         :preload="preload"
         playsinline
-        @loadedmetadata="syncMedia"
-        @timeupdate="syncMedia"
-        @durationchange="syncMedia"
+        @loadedmetadata="handleLoadedMetadata"
+        @timeupdate="handleTimeUpdate"
+        @durationchange="handleDurationChange"
         @play="markPlaying"
         @pause="markPaused"
-        @ended="markPaused"
+        @ended="markEnded"
+        @seeked="handleSeeked"
+        @volumechange="handleVolumeChange"
+        @ratechange="handleRateChange"
         @click="togglePlayback"
       ></video>
 
@@ -32,8 +35,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 +63,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 +79,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>
@@ -108,6 +107,18 @@ const {
   preload: String
 });
 
+const emit = defineEmits([
+  "loadedmetadata",
+  "timeupdate",
+  "durationchange",
+  "play",
+  "pause",
+  "ended",
+  "seeked",
+  "volumechange",
+  "ratechange"
+]);
+
 const mediaEl = ref(null);
 const screenEl = ref(null);
 const currentTime = ref(0);
@@ -119,7 +130,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,8 +139,13 @@ 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();
@@ -152,15 +167,72 @@ function getMedia() {
   return mediaEl.value;
 }
 
+function ignoreMediaEventsFor(ms) {
+  ignoreMediaEventsUntil = performance.now() + ms;
+}
+
+function shouldIgnoreMediaEvent() {
+  return performance.now() < ignoreMediaEventsUntil;
+}
+
 function syncMedia() {
-  if (isDisposed) return;
+  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 createMediaPayload(event) {
+  const media = getMedia();
+  if (!media) return null;
+  return {
+    currentTime: media.currentTime || 0,
+    duration: Number.isFinite(media.duration) ? media.duration : 0,
+    paused: media.paused,
+    ended: media.ended,
+    muted: media.muted,
+    volume: media.volume,
+    playbackRate: media.playbackRate,
+    nativeEvent: event
+  };
+}
+
+function emitMediaPayload(event, dispatch) {
+  const payload = createMediaPayload(event);
+  if (payload) {
+    dispatch(payload);
+  }
+}
+
+function handleLoadedMetadata(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("loadedmetadata", payload));
+}
+
+function handleTimeUpdate(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("timeupdate", payload));
+}
+
+function handleDurationChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("durationchange", payload));
+}
+
+function handleSeeked(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("seeked", payload));
+}
+
+function handleVolumeChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("volumechange", payload));
+}
+
+function handleRateChange(event) {
+  syncMedia();
+  emitMediaPayload(event, (payload) => emit("ratechange", payload));
 }
 
 function applyAudioSettings() {
@@ -169,19 +241,28 @@ function applyAudioSettings() {
   if (!media) return;
   media.volume = volume.value;
   media.muted = muted.value;
-  media.playbackRate = playbackRate.value;
+  media.playbackRate = playbackRate;
 }
 
-function markPlaying() {
-  if (isDisposed) return;
+function markPlaying(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
   controlsVisible.value = pointerInside.value;
+  emitMediaPayload(event, (payload) => emit("play", payload));
 }
 
-function markPaused() {
-  if (isDisposed) return;
+function markPaused(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
   controlsVisible.value = true;
+  emitMediaPayload(event, (payload) => emit("pause", payload));
+}
+
+function markEnded(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
+  isPlaying.value = false;
+  controlsVisible.value = true;
+  emitMediaPayload(event, (payload) => emit("ended", payload));
 }
 
 function updateFullscreen() {
@@ -196,7 +277,7 @@ async function togglePlayback() {
     try {
       await media.play();
     } catch (error) {
-      if (!isDisposed && error?.name !== "AbortError") {
+      if (error?.name !== "AbortError") {
         throw error;
       }
     }
@@ -283,33 +364,56 @@ function seekWithKeyboard(event) {
 
 function stopPlayback() {
   if (isDisposed) return;
-  const media = getMedia();
-  if (!media) return;
-  media.pause();
-  media.currentTime = 0;
-  currentTime.value = 0;
-  isPlaying.value = false;
+  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();
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.volume = nextVolume;
+    media.muted = nextVolume === 0;
+  }, 0);
 }
 
-function toggleMute() {
+function toggleMute(event) {
   if (isDisposed) return;
-  muted.value = !muted.value;
-  applyAudioSettings();
-}
-
-function cycleRate() {
+  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 currentIndex = rates.indexOf(playbackRate.value);
-  playbackRate.value = rates[(currentIndex + 1) % rates.length];
-  applyAudioSettings();
+  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() {

package/package.json

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

package/types/components/MikuruAudioPlayer.d.ts

@@ -1,11 +1,34 @@
 import type { MikuruComponent } from "../env";
 
+export type MikuruAudioPlayerEventPayload = {
+  currentTime: number;
+  duration: number;
+  paused: boolean;
+  ended: boolean;
+  muted: boolean;
+  volume: number;
+  playbackRate: number;
+  nativeEvent?: Event;
+};
+
+export type MikuruAudioPlayerEvents = {
+  onLoadedmetadata?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onTimeupdate?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onDurationchange?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onPlay?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onPause?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onEnded?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onSeeked?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onVolumechange?: (payload: MikuruAudioPlayerEventPayload) => void;
+  onRatechange?: (payload: MikuruAudioPlayerEventPayload) => void;
+};
+
 export type MikuruAudioPlayerProps = {
   src: string;
   title?: string;
   artist?: string;
   preload?: string;
-};
+} & MikuruAudioPlayerEvents;
 
 declare const component: MikuruComponent<MikuruAudioPlayerProps>;
 export default component;

package/types/components/MikuruVideoPlayer.d.ts

@@ -1,12 +1,35 @@
 import type { MikuruComponent } from "../env";
 
+export type MikuruVideoPlayerEventPayload = {
+  currentTime: number;
+  duration: number;
+  paused: boolean;
+  ended: boolean;
+  muted: boolean;
+  volume: number;
+  playbackRate: number;
+  nativeEvent?: Event;
+};
+
+export type MikuruVideoPlayerEvents = {
+  onLoadedmetadata?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onTimeupdate?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onDurationchange?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onPlay?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onPause?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onEnded?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onSeeked?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onVolumechange?: (payload: MikuruVideoPlayerEventPayload) => void;
+  onRatechange?: (payload: MikuruVideoPlayerEventPayload) => void;
+};
+
 export type MikuruVideoPlayerProps = {
   src: string;
   poster?: string;
   title?: string;
   subtitle?: string;
   preload?: string;
-};
+} & MikuruVideoPlayerEvents;
 
 declare const component: MikuruComponent<MikuruVideoPlayerProps>;
 export default component;