mikuru 1.0.30 → 1.0.32

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.32 - 2026-05-16
+
+- Added `controls` and `live` props to `MikuruVideoPlayer` and `MikuruAudioPlayer` so callers can choose visible controls and render live-stream UI without seek controls.
+- Removed the `MikuruVideoPlayer` stop control so video playback uses the same play/pause-only primary transport as the center control.
+- Updated `MikuruAudioPlayer` controls to use icon buttons for play, skip, mute, and volume-facing actions, matching the video player control style.
+- Added timed auto-dismiss to `MikuruToast` with stack-level and per-toast `duration` controls.
+- 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/README.md

@@ -270,12 +270,12 @@ npm run dev:mikuru-vue-like
 
 The package also includes original Mikuru components:
 
-- `MikuruVideoPlayer.mikuru`: overlay video controls, div-based seeking, volume/mute, playback rate, stop, and fullscreen controls.
-- `MikuruAudioPlayer.mikuru`: audio playback with seeking, skip controls, volume, and mute.
+- `MikuruVideoPlayer.mikuru`: overlay video controls, configurable control visibility, live mode, div-based seeking, volume/mute, playback rate, and fullscreen controls.
+- `MikuruAudioPlayer.mikuru`: audio playback with configurable control visibility, live mode, seeking, skip controls, volume, and mute.
 - `MikuruImageViewer.mikuru`: image zoom, pan, rotate, reset, and fullscreen controls.
 - `MikuruModal.mikuru`: accessible modal shell with backdrop, Escape close, slots, and close events.
 - `MikuruCarousel.mikuru`: image carousel with arrows, dots, keyboard navigation, and optional autoplay.
-- `MikuruToast.mikuru`: fixed notification stack with dismiss events and tone variants.
+- `MikuruToast.mikuru`: fixed notification stack with timed auto-dismiss, dismiss events, and tone variants.
 - `MikuruDropdown.mikuru`: menu button with outside-click close, Escape handling, and select events.
 - `MikuruToolTip.mikuru`: hover/focus tooltip with configurable placement.
 - `MikuruProgress.mikuru`: determinate and indeterminate progress indicator.

package/components/MikuruAudioPlayer.mikuru

@@ -1,15 +1,18 @@
 <template>
-  <section class="mikuru-audio" :class="{ 'is-playing': isPlaying }" :aria-label="title">
+  <section class="mikuru-audio" :class="{ 'is-playing': isPlaying, 'is-live': isLive }" :aria-label="title">
     <audio
       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">
@@ -19,28 +22,33 @@
     <div class="body">
       <div class="identity">
         <strong>{{ title }}</strong>
-        <span>{{ artist }}</span>
+        <span :class="{ 'live-badge': isLive }">{{ statusText }}</span>
       </div>
 
-      <div class="timeline">
-        <span>{{ formatTime(currentTime) }}</span>
-        <input type="range" min="0" :max="safeDuration" step="0.1" :value="currentTime" @input="seek" />
-        <span>{{ formatTime(duration) }}</span>
+      <div m-if="showTimeline" class="timeline" :class="timelineClass">
+        <span m-if="showTimeControl">{{ formatTime(currentTime) }}</span>
+        <input m-if="showSeekControl" type="range" min="0" :max="safeDuration" step="0.1" :value="currentTime" @input="seek" />
+        <span m-if="showTimeControl">{{ formatTime(duration) }}</span>
       </div>
 
-      <div class="controls">
-        <button type="button" @click="skipBackward">-10</button>
-        <button class="primary" type="button" @click="togglePlayback" :aria-label="playLabel">
-          <span>{{ playText }}</span>
+      <div m-if="showControls" class="controls">
+        <button m-if="showSkipControl" class="icon-button" type="button" @click="skipBackward" aria-label="Back 10 seconds">
+          <span class="fa-icon icon-backward" aria-hidden="true"></span>
         </button>
-        <button type="button" @click="skipForward">+10</button>
-        <button type="button" @click="toggleMute" :aria-label="muteLabel">
-          <span>Sound</span>
+        <button m-if="showPlayControl" class="icon-button primary" type="button" @click="togglePlayback" :aria-label="playLabel">
+          <span class="fa-icon" :class="playIconClass" aria-hidden="true"></span>
         </button>
-        <label class="volume">
+        <button m-if="showSkipControl" class="icon-button" type="button" @click="skipForward" aria-label="Forward 10 seconds">
+          <span class="fa-icon icon-forward" aria-hidden="true"></span>
+        </button>
+        <button m-if="showMuteControl" class="icon-button" type="button" @click="toggleMute" :aria-label="muteLabel">
+          <span class="fa-icon" :class="muteIconClass" aria-hidden="true"></span>
+        </button>
+        <label m-if="showVolumeControl" class="volume">
           <span>Volume</span>
           <input type="range" min="0" max="1" step="0.01" :value="volume" @input="setVolume" />
         </label>
+        <span m-if="isLive" class="live-clock">LIVE</span>
       </div>
     </div>
   </section>
@@ -53,24 +61,67 @@ const {
   src,
   title = "Mikuru Audio",
   artist = "Original player component",
-  preload = "metadata"
+  preload = "metadata",
+  controls,
+  live = false
 } = defineProps({
   src: String,
   title: String,
   artist: String,
-  preload: String
+  preload: String,
+  controls: Array,
+  live: Boolean
 });
 
+const emit = defineEmits([
+  "loadedmetadata",
+  "timeupdate",
+  "durationchange",
+  "play",
+  "pause",
+  "ended",
+  "seeked",
+  "volumechange",
+  "ratechange"
+]);
+
 const mediaEl = ref(null);
 const currentTime = ref(0);
 const duration = ref(0);
 const volume = ref(0.75);
 const muted = ref(false);
 const isPlaying = ref(false);
+const allControls = ["play", "seek", "time", "skip", "mute", "volume"];
+const liveHiddenControls = ["seek", "time", "skip"];
+const activeControls = computed(() => {
+  const configuredControls = Array.isArray(controls.value) ? controls.value : allControls;
+  return new Set(configuredControls);
+});
+const isLive = computed(() => live.value === true);
 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 playIconClass = computed(() => isPlaying.value ? "icon-pause" : "icon-play");
+const muteIconClass = computed(() => muted.value ? "icon-mute" : "icon-volume");
+const statusText = computed(() => isLive.value ? "LIVE" : artist.value);
+const showPlayControl = computed(() => hasControl("play"));
+const showSeekControl = computed(() => hasControl("seek"));
+const showTimeControl = computed(() => hasControl("time"));
+const showSkipControl = computed(() => hasControl("skip"));
+const showMuteControl = computed(() => hasControl("mute"));
+const showVolumeControl = computed(() => hasControl("volume"));
+const showTimeline = computed(() => showSeekControl.value || showTimeControl.value);
+const timelineClass = computed(() => ({
+  "timeline-seek-only": showSeekControl.value && !showTimeControl.value,
+  "timeline-time-only": showTimeControl.value && !showSeekControl.value
+}));
+const showControls = computed(() => (
+  showPlayControl.value ||
+  showSkipControl.value ||
+  showMuteControl.value ||
+  showVolumeControl.value ||
+  isLive.value
+));
 const initials = computed(() => {
   const words = title.value.split(" ").filter(Boolean);
   return words.slice(0, 2).map((word) => word[0]).join("").toUpperCase() || "M";
@@ -99,6 +150,11 @@ function shouldIgnoreMediaEvent() {
   return performance.now() < ignoreMediaEventsUntil;
 }
 
+function hasControl(name) {
+  if (isLive.value && liveHiddenControls.includes(name)) return false;
+  return activeControls.value.has(name);
+}
+
 function syncMedia() {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   const media = getMedia();
@@ -107,6 +163,67 @@ function syncMedia() {
   duration.value = Number.isFinite(media.duration) ? media.duration : 0;
 }
 
+function syncVolumeState() {
+  if (isDisposed) return;
+  const media = getMedia();
+  if (!media) return;
+  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();
+  syncVolumeState();
+  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 +232,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() {
@@ -160,19 +285,19 @@ function setVolume(event) {
     if (!media) return;
     media.volume = nextVolume;
     media.muted = nextVolume === 0;
+    volume.value = nextVolume;
+    muted.value = media.muted;
   }, 0);
 }
 
-function toggleMute(event) {
+function toggleMute() {
   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");
+    muted.value = media.muted;
   }, 0);
 }
 
@@ -243,6 +368,32 @@ function formatTime(seconds) {
   font-size: 0.9rem;
 }
 
+.live-badge,
+.live-clock {
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.live-badge {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #dc2626;
+}
+
+.live-clock {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #dc2626;
+}
+
 .timeline {
   display: grid;
   grid-template-columns: 42px minmax(0, 1fr) 42px;
@@ -250,6 +401,15 @@ function formatTime(seconds) {
   align-items: center;
 }
 
+.timeline-seek-only {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.timeline-time-only {
+  grid-template-columns: repeat(2, 42px);
+  justify-content: space-between;
+}
+
 .timeline span:last-child {
   text-align: right;
 }
@@ -267,6 +427,14 @@ function formatTime(seconds) {
   gap: 8px;
 }
 
+.volume span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
 input[type="range"] {
   accent-color: #0f766e;
 }
@@ -292,6 +460,49 @@ button:hover {
   background: #0f766e;
 }
 
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  padding: 0;
+}
+
+.fa-icon {
+  display: block;
+  width: 18px;
+  height: 18px;
+  background: currentColor;
+  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28));
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.icon-play {
+  transform: translateX(1px);
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"/></svg>');
+}
+
+.icon-pause {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"/></svg>');
+}
+
+.icon-backward {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M288 128L96 320L288 512L288 128zM544 128L352 320L544 512L544 128z"/></svg>');
+}
+
+.icon-forward {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 128L288 320L96 512L96 128zM352 128L544 320L352 512L352 128z"/></svg>');
+}
+
+.icon-volume {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M112 416L160 416L294.1 535.2C300.5 540.9 308.7 544 317.2 544C336.4 544 352 528.4 352 509.2L352 130.8C352 111.6 336.4 96 317.2 96C308.7 96 300.5 99.1 294.1 104.8L160 224L112 224C85.5 224 64 245.5 64 272L64 368C64 394.5 85.5 416 112 416zM505.1 171C494.8 162.6 479.7 164.2 471.3 174.5C462.9 184.8 464.5 199.9 474.8 208.3C507.3 234.7 528 274.9 528 320C528 365.1 507.3 405.3 474.8 431.8C464.5 440.2 463 455.3 471.3 465.6C479.6 475.9 494.8 477.4 505.1 469.1C548.3 433.9 576 380.2 576 320.1C576 260 548.3 206.3 505.1 171.1zM444.6 245.5C434.3 237.1 419.2 238.7 410.8 249C402.4 259.3 404 274.4 414.3 282.8C425.1 291.6 432 305 432 320C432 335 425.1 348.4 414.3 357.3C404 365.7 402.5 380.8 410.8 391.1C419.1 401.4 434.3 402.9 444.6 394.6C466.1 376.9 480 350.1 480 320C480 289.9 466.1 263.1 444.5 245.5z"/></svg>');
+}
+
+.icon-mute {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M80 416L128 416L262.1 535.2C268.5 540.9 276.7 544 285.2 544C304.4 544 320 528.4 320 509.2L320 130.8C320 111.6 304.4 96 285.2 96C276.7 96 268.5 99.1 262.1 104.8L128 224L80 224C53.5 224 32 245.5 32 272L32 368C32 394.5 53.5 416 80 416zM399 239C389.6 248.4 389.6 263.6 399 272.9L446 319.9L399 366.9C389.6 376.3 389.6 391.5 399 400.8C408.4 410.1 423.6 410.2 432.9 400.8L479.9 353.8L526.9 400.8C536.3 410.2 551.5 410.2 560.8 400.8C570.1 391.4 570.2 376.2 560.8 366.9L513.8 319.9L560.8 272.9C570.2 263.5 570.2 248.3 560.8 239C551.4 229.7 536.2 229.6 526.9 239L479.9 286L432.9 239C423.5 229.6 408.3 229.6 399 239z"/></svg>');
+}
+
 @media (max-width: 620px) {
   .mikuru-audio {
     grid-template-columns: 1fr;

package/components/MikuruToast.mikuru

@@ -17,36 +17,84 @@
 </template>
 
 <script>
-import { computed } from "mikuru";
+import { computed, onMounted, onUnmounted, watch } from "mikuru";
 
 const {
   toasts = [],
-  position = "bottom-right"
+  position = "bottom-right",
+  duration = 5000
 } = defineProps({
   toasts: Array,
-  position: String
+  position: String,
+  duration: Number
 });
 
 const emit = defineEmits(["dismiss"]);
+const timers = new Map();
 const positionClass = computed(() => `position-${position.value}`);
 const normalizedToasts = computed(() => {
   const source = Array.isArray(toasts.value) ? toasts.value : [];
   return source.map((toast, index) => {
     const id = toast.id ?? index;
     const tone = toast.tone || "info";
+    const toastDuration = typeof toast.duration === "number" ? toast.duration : duration.value;
     return {
       id,
       title: toast.title || "Notification",
       message: toast.message || "",
       toneClass: `tone-${tone}`,
-      dismissLabel: `Dismiss ${toast.title || "notification"}`
+      dismissLabel: `Dismiss ${toast.title || "notification"}`,
+      duration: toastDuration
     };
   });
 });
 
+onMounted(() => {
+  syncToastTimers();
+});
+
+onUnmounted(() => {
+  clearToastTimers();
+});
+
+watch(toasts, () => {
+  syncToastTimers();
+});
+
 function dismissToast(id) {
+  clearToastTimer(id);
   emit("dismiss", id);
 }
+
+function syncToastTimers() {
+  const visibleIds = new Set(normalizedToasts.value.map((toast) => toast.id));
+  Array.from(timers.keys()).forEach((id) => {
+    if (!visibleIds.has(id)) {
+      clearToastTimer(id);
+    }
+  });
+
+  normalizedToasts.value.forEach((toast) => {
+    if (timers.has(toast.id)) return;
+    if (!Number.isFinite(toast.duration) || toast.duration <= 0) return;
+    const timer = window.setTimeout(() => {
+      timers.delete(toast.id);
+      emit("dismiss", toast.id);
+    }, toast.duration);
+    timers.set(toast.id, timer);
+  });
+}
+
+function clearToastTimer(id) {
+  const timer = timers.get(id);
+  if (!timer) return;
+  window.clearTimeout(timer);
+  timers.delete(id);
+}
+
+function clearToastTimers() {
+  Array.from(timers.keys()).forEach((id) => clearToastTimer(id));
+}
 </script>
 
 <style scoped>

package/components/MikuruVideoPlayer.mikuru

@@ -17,26 +17,30 @@
         :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>
 
       <div class="top-bar">
         <strong>{{ title }}</strong>
-        <span>{{ subtitle }}</span>
+        <span :class="{ 'live-badge': isLive }">{{ statusText }}</span>
       </div>
 
-      <button class="center-toggle" type="button" @click="togglePlayback" :aria-label="playLabel">
+      <button m-if="showPlayControl" class="center-toggle" type="button" @click="togglePlayback" :aria-label="playLabel">
         <span class="fa-icon large" :class="playIconClass" aria-hidden="true"></span>
       </button>
 
-      <div class="control-shelf">
+      <div m-if="showControlShelf" class="control-shelf">
         <div
+          m-if="showSeekControl"
           class="seek"
           role="slider"
           tabindex="0"
@@ -59,25 +63,22 @@
 
         <div class="control-row">
           <div class="left-controls">
-            <button class="icon-button" type="button" @click="togglePlayback" :aria-label="playLabel">
+            <button m-if="showPlayControl" class="icon-button" type="button" @click="togglePlayback" :aria-label="playLabel">
               <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">
+            <button m-if="showMuteControl" class="icon-button" type="button" @click="toggleMute" :aria-label="muteLabel">
               <span class="fa-icon icon-volume" aria-hidden="true"></span>
             </button>
-            <label class="volume">
+            <label m-if="showVolumeControl" class="volume">
               <span>Volume</span>
               <input type="range" min="0" max="1" step="0.01" :value="volume" @input="setVolume" />
             </label>
-            <span class="clock">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
+            <span m-if="showTimeControl" class="clock">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
           </div>
 
           <div class="right-controls">
-            <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">
+            <button m-if="showRateControl" class="pill-button" type="button" @click="cycleRate" aria-label="Change playback speed">1x</button>
+            <button m-if="showFullscreenControl" class="icon-button fullscreen-button" type="button" @click="toggleFullscreen" aria-label="Fullscreen">
               <span class="fa-icon" :class="fullscreenIconClass" aria-hidden="true"></span>
             </button>
           </div>
@@ -95,15 +96,31 @@ const {
   poster = "",
   title = "Mikuru Video",
   subtitle = "Original player component",
-  preload = "metadata"
+  preload = "metadata",
+  controls,
+  live = false
 } = defineProps({
   src: String,
   poster: String,
   title: String,
   subtitle: String,
-  preload: String
+  preload: String,
+  controls: Array,
+  live: Boolean
 });
 
+const emit = defineEmits([
+  "loadedmetadata",
+  "timeupdate",
+  "durationchange",
+  "play",
+  "pause",
+  "ended",
+  "seeked",
+  "volumechange",
+  "ratechange"
+]);
+
 const mediaEl = ref(null);
 const screenEl = ref(null);
 const currentTime = ref(0);
@@ -115,6 +132,13 @@ const isFullscreen = ref(false);
 const isSeeking = ref(false);
 const pointerInside = ref(false);
 const controlsVisible = ref(true);
+const allControls = ["play", "seek", "time", "mute", "volume", "rate", "fullscreen"];
+const liveHiddenControls = ["seek", "time", "rate"];
+const activeControls = computed(() => {
+  const configuredControls = Array.isArray(controls.value) ? controls.value : allControls;
+  return new Set(configuredControls);
+});
+const isLive = computed(() => live.value === true);
 const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);
 const seekProgress = computed(() => {
   if (safeDuration.value <= 0) return 0;
@@ -126,6 +150,24 @@ 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 statusText = computed(() => isLive.value ? "LIVE" : subtitle.value);
+const showPlayControl = computed(() => hasControl("play"));
+const showSeekControl = computed(() => hasControl("seek"));
+const showTimeControl = computed(() => hasControl("time"));
+const showMuteControl = computed(() => hasControl("mute"));
+const showVolumeControl = computed(() => hasControl("volume"));
+const showRateControl = computed(() => hasControl("rate"));
+const showFullscreenControl = computed(() => hasControl("fullscreen"));
+const showControlShelf = computed(() => (
+  showPlayControl.value ||
+  showSeekControl.value ||
+  showTimeControl.value ||
+  showMuteControl.value ||
+  showVolumeControl.value ||
+  showRateControl.value ||
+  showFullscreenControl.value ||
+  isLive.value
+));
 const rates = [1, 1.25, 1.5, 2, 0.75];
 let playbackRate = 1;
 let rateIndex = 0;
@@ -160,6 +202,11 @@ function shouldIgnoreMediaEvent() {
   return performance.now() < ignoreMediaEventsUntil;
 }
 
+function hasControl(name) {
+  if (isLive.value && liveHiddenControls.includes(name)) return false;
+  return activeControls.value.has(name);
+}
+
 function syncMedia() {
   if (isDisposed || shouldIgnoreMediaEvent()) return;
   const media = getMedia();
@@ -168,6 +215,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 +276,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() {
+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() {
@@ -286,18 +394,6 @@ function seekWithKeyboard(event) {
   seekTo(nextTime);
 }
 
-function stopPlayback() {
-  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);
@@ -437,6 +533,20 @@ function formatTime(seconds) {
   font-size: 0.88rem;
 }
 
+.live-badge {
+  color: #ffffff;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.live-badge {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #dc2626;
+}
+
 .center-toggle {
   position: absolute;
   top: 50%;
@@ -631,8 +741,7 @@ button:hover {
   transform: translateX(3px);
 }
 
-.center-toggle .icon-pause,
-.center-toggle .icon-stop {
+.center-toggle .icon-pause {
   transform: translateX(0);
 }
 
@@ -644,10 +753,6 @@ button:hover {
   mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"/></svg>');
 }
 
-.icon-stop {
-  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>');
-}
-
 .icon-maximize {
   mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M264 96L120 96C106.7 96 96 106.7 96 120L96 264C96 273.7 101.8 282.5 110.8 286.2C119.8 289.9 130.1 287.8 137 281L177 241L256 320L177 399L137 359C130.1 352.1 119.8 350.1 110.8 353.8C101.8 357.5 96 366.3 96 376L96 520C96 533.3 106.7 544 120 544L264 544C273.7 544 282.5 538.2 286.2 529.2C289.9 520.2 287.9 509.9 281 503L241 463L320 384L399 463L359 503C352.1 509.9 350.1 520.2 353.8 529.2C357.5 538.2 366.3 544 376 544L520 544C533.3 544 544 533.3 544 520L544 376C544 366.3 538.2 357.5 529.2 353.8C520.2 350.1 509.9 352.1 503 359L463 399L384 320L463 241L503 281C509.9 287.9 520.2 289.9 529.2 286.2C538.2 282.5 544 273.7 544 264L544 120C544 106.7 533.3 96 520 96L376 96C366.3 96 357.5 101.8 353.8 110.8C350.1 119.8 352.2 130.1 359 137L399 177L320 256L241 177L281 137C287.9 130.1 289.9 119.8 286.2 110.8C282.5 101.8 273.7 96 264 96z"/></svg>');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikuru",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "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,44 @@
 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 MikuruAudioPlayerControl =
+  | "play"
+  | "seek"
+  | "time"
+  | "skip"
+  | "mute"
+  | "volume";
+
 export type MikuruAudioPlayerProps = {
   src: string;
   title?: string;
   artist?: string;
   preload?: string;
-};
+  controls?: MikuruAudioPlayerControl[];
+  live?: boolean;
+} & MikuruAudioPlayerEvents;
 
 declare const component: MikuruComponent<MikuruAudioPlayerProps>;
 export default component;

package/types/components/MikuruToast.d.ts

@@ -5,11 +5,13 @@ export type MikuruToastItem = {
   title?: string;
   message?: string;
   tone?: "info" | "success" | "warning" | "danger" | string;
+  duration?: number;
 };
 
 export type MikuruToastProps = {
   toasts?: MikuruToastItem[];
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | string;
+  duration?: number;
 };
 
 declare const component: MikuruComponent<MikuruToastProps>;

package/types/components/MikuruVideoPlayer.d.ts

@@ -1,12 +1,46 @@
 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 MikuruVideoPlayerControl =
+  | "play"
+  | "seek"
+  | "time"
+  | "mute"
+  | "volume"
+  | "rate"
+  | "fullscreen";
+
 export type MikuruVideoPlayerProps = {
   src: string;
   poster?: string;
   title?: string;
   subtitle?: string;
   preload?: string;
-};
+  controls?: MikuruVideoPlayerControl[];
+  live?: boolean;
+} & MikuruVideoPlayerEvents;
 
 declare const component: MikuruComponent<MikuruVideoPlayerProps>;
 export default component;