mikuru 1.0.30 → 1.0.31

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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.

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">
@@ -61,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);
@@ -107,6 +122,58 @@ function syncMedia() {
   duration.value = Number.isFinite(media.duration) ? media.duration : 0;
 }
 
+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() {
   if (isDisposed) return;
   const media = getMedia();
@@ -115,14 +182,22 @@ function applyAudioSettings() {
   media.muted = muted.value;
 }
 
-function markPlaying() {
+function markPlaying(event) {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
+  emitMediaPayload(event, (payload) => emit("play", payload));
+}
+
+function markPaused(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
+  isPlaying.value = false;
+  emitMediaPayload(event, (payload) => emit("pause", payload));
 }
 
-function markPaused() {
+function markEnded(event) {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
+  emitMediaPayload(event, (payload) => emit("ended", payload));
 }
 
 async function togglePlayback() {

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>
 
@@ -104,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);
@@ -168,6 +183,58 @@ function syncMedia() {
   duration.value = Number.isFinite(media.duration) ? media.duration : 0;
 }
 
+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() {
   if (isDisposed) return;
   const media = getMedia();
@@ -177,16 +244,25 @@ function applyAudioSettings() {
   media.playbackRate = playbackRate;
 }
 
-function markPlaying() {
+function markPlaying(event) {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = true;
   controlsVisible.value = pointerInside.value;
+  emitMediaPayload(event, (payload) => emit("play", payload));
+}
+
+function markPaused(event) {
+  if (isDisposed || shouldIgnoreMediaEvent()) return;
+  isPlaying.value = false;
+  controlsVisible.value = true;
+  emitMediaPayload(event, (payload) => emit("pause", payload));
 }
 
-function markPaused() {
+function markEnded(event) {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   isPlaying.value = false;
   controlsVisible.value = true;
+  emitMediaPayload(event, (payload) => emit("ended", payload));
 }
 
 function updateFullscreen() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikuru",
-  "version": "1.0.30",
+  "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;