mikuru 1.0.31 → 1.0.33

package/CHANGELOG.md

@@ -1,7 +1,16 @@
 # Changelog
 
-## 1.0.31 - 2026-05-16
+## 1.0.33 - 2026-05-16
 
+- Added `MikuruVideoPlayer` sizing props for width, height, and aspect ratio.
+- Added a `MikuruVideoPlayer` settings menu for quality selection, playback speed, and keyboard skip seconds.
+
+## 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.
 

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 sizing, configurable control visibility, live mode, settings menu, 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,5 +1,5 @@
 <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"
@@ -22,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>
@@ -56,12 +61,16 @@ 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([
@@ -82,10 +91,37 @@ 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";
@@ -114,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();
@@ -122,6 +163,14 @@ 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;
@@ -166,6 +215,7 @@ function handleSeeked(event) {
 
 function handleVolumeChange(event) {
   syncMedia();
+  syncVolumeState();
   emitMediaPayload(event, (payload) => emit("volumechange", payload));
 }
 
@@ -235,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);
 }
 
@@ -318,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;
@@ -325,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;
 }
@@ -342,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;
 }
@@ -367,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

@@ -2,6 +2,7 @@
   <section
     class="mikuru-video"
     :class="{ 'is-playing': isPlaying, 'controls-visible': controlsVisible }"
+    :style="playerStyle"
     :aria-label="title"
     @mouseenter="showControls"
     @mouseleave="hideControls"
@@ -9,12 +10,12 @@
     @pointerleave="hideControls"
     @focusin="showControls"
   >
-    <div class="screen" ref="screenEl">
+    <div class="screen" ref="screenEl" :style="screenStyle">
       <video
         ref="mediaEl"
         class="media"
-        :src="src"
-        :poster="poster"
+        :src="selectedVideoSrc"
+        :poster="selectedPoster"
         :preload="preload"
         playsinline
         @loadedmetadata="handleLoadedMetadata"
@@ -31,15 +32,16 @@
 
       <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"
@@ -62,25 +64,76 @@
 
         <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">
+            <div m-if="showSettingsControl" class="settings" ref="settingsEl" @click="stopEvent">
+              <button
+                class="icon-button settings-button"
+                type="button"
+                @click="toggleSettings"
+                aria-label="Video settings"
+                :aria-expanded="settingsOpen"
+              >
+                <span class="fa-icon icon-settings" aria-hidden="true"></span>
+              </button>
+
+              <div m-if="settingsOpen" class="settings-menu" role="menu" aria-label="Video settings">
+                <div class="settings-group">
+                  <span class="settings-label">Quality</span>
+                  <button
+                    m-for="quality in normalizedQualityOptions"
+                    :key="quality.id"
+                    type="button"
+                    class="settings-option"
+                    :class="{ active: quality.id === activeQualityId }"
+                    @click="selectQuality(quality.id)"
+                  >
+                    {{ quality.label }}
+                  </button>
+                </div>
+
+                <div class="settings-group">
+                  <span class="settings-label">Speed</span>
+                  <button
+                    m-for="rate in rateOptions"
+                    :key="rate.value"
+                    type="button"
+                    class="settings-option"
+                    :class="{ active: rate.value === playbackRateValue }"
+                    @click="setPlaybackRate(rate.value)"
+                  >
+                    {{ rate.label }}
+                  </button>
+                </div>
+
+                <div class="settings-group">
+                  <span class="settings-label">Skip</span>
+                  <button
+                    m-for="option in skipOptions"
+                    :key="option.value"
+                    type="button"
+                    class="settings-option"
+                    :class="{ active: option.value === skipSeconds }"
+                    @click="setSkipSeconds(option.value)"
+                  >
+                    {{ option.label }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <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>
@@ -98,13 +151,25 @@ const {
   poster = "",
   title = "Mikuru Video",
   subtitle = "Original player component",
-  preload = "metadata"
+  preload = "metadata",
+  width,
+  height,
+  aspectRatio,
+  qualityOptions = [],
+  controls,
+  live = false
 } = defineProps({
   src: String,
   poster: String,
   title: String,
   subtitle: String,
-  preload: String
+  preload: String,
+  width: String,
+  height: String,
+  aspectRatio: String,
+  qualityOptions: Array,
+  controls: Array,
+  live: Boolean
 });
 
 const emit = defineEmits([
@@ -128,8 +193,47 @@ const muted = ref(false);
 const isPlaying = ref(false);
 const isFullscreen = ref(false);
 const isSeeking = ref(false);
+const settingsOpen = ref(false);
+const selectedQualityId = ref("auto");
+const playbackRateValue = ref(1);
+const skipSeconds = ref(5);
 const pointerInside = ref(false);
 const controlsVisible = ref(true);
+const settingsEl = ref(null);
+const allControls = ["play", "seek", "time", "mute", "volume", "settings", "fullscreen"];
+const liveHiddenControls = ["seek", "time"];
+const activeControls = computed(() => {
+  const configuredControls = Array.isArray(controls.value) ? controls.value : allControls;
+  return new Set(configuredControls);
+});
+const normalizedQualityOptions = computed(() => {
+  const source = Array.isArray(qualityOptions.value) ? qualityOptions.value : [];
+  const options = source
+    .map((option, index) => normalizeQualityOption(option, index))
+    .filter(Boolean);
+  return options.length > 0
+    ? options
+    : [{ id: "auto", label: "Auto", src: src.value, poster: poster.value }];
+});
+const selectedQuality = computed(() =>
+  normalizedQualityOptions.value.find((option) => option.id === selectedQualityId.value) ?? normalizedQualityOptions.value[0]
+);
+const activeQualityId = computed(() => selectedQuality.value?.id);
+const selectedVideoSrc = computed(() => selectedQuality.value?.src || src.value);
+const selectedPoster = computed(() => selectedQuality.value?.poster ?? poster.value);
+const playerStyle = computed(() => {
+  const normalizedWidth = normalizeCssSize(width.value);
+  return normalizedWidth ? { width: normalizedWidth } : null;
+});
+const screenStyle = computed(() => {
+  const normalizedHeight = normalizeCssSize(height.value);
+  const normalizedAspectRatio = normalizeAspectRatio(aspectRatio.value);
+  return {
+    height: normalizedHeight || null,
+    aspectRatio: normalizedAspectRatio || null
+  };
+});
+const isLive = computed(() => live.value === true);
 const safeDuration = computed(() => duration.value > 0 ? duration.value : 0);
 const seekProgress = computed(() => {
   if (safeDuration.value <= 0) return 0;
@@ -141,15 +245,44 @@ 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;
+const statusText = computed(() => isLive.value ? "LIVE" : subtitle.value);
+const rateOptions = [
+  { value: 0.75, label: "0.75x" },
+  { value: 1, label: "1x" },
+  { value: 1.25, label: "1.25x" },
+  { value: 1.5, label: "1.5x" },
+  { value: 2, label: "2x" }
+];
+const skipOptions = [
+  { value: 5, label: "5s" },
+  { value: 10, label: "10s" },
+  { value: 15, label: "15s" },
+  { value: 30, label: "30s" }
+];
+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 showSettingsControl = computed(() => hasControl("settings") || hasControl("rate"));
+const showFullscreenControl = computed(() => hasControl("fullscreen"));
+const showControlShelf = computed(() => (
+  showPlayControl.value ||
+  showSeekControl.value ||
+  showTimeControl.value ||
+  showMuteControl.value ||
+  showVolumeControl.value ||
+  showSettingsControl.value ||
+  showFullscreenControl.value ||
+  isLive.value
+));
 let isDisposed = false;
 let ignoreMediaEventsUntil = 0;
 
 onMounted(() => {
   applyAudioSettings();
   document.addEventListener("fullscreenchange", updateFullscreen);
+  document.addEventListener("pointerdown", handleDocumentPointerDown);
 });
 
 onBeforeUnmount(() => {
@@ -160,6 +293,7 @@ onBeforeUnmount(() => {
 
 onUnmounted(() => {
   document.removeEventListener("fullscreenchange", updateFullscreen);
+  document.removeEventListener("pointerdown", handleDocumentPointerDown);
 });
 
 function getMedia() {
@@ -175,6 +309,46 @@ function shouldIgnoreMediaEvent() {
   return performance.now() < ignoreMediaEventsUntil;
 }
 
+function normalizeQualityOption(option, index) {
+  if (typeof option === "string") {
+    return { id: option || `quality-${index}`, label: option || `Quality ${index + 1}`, src: src.value, poster: poster.value };
+  }
+  if (!option || typeof option !== "object") {
+    return null;
+  }
+  const optionSrc = typeof option.src === "string" && option.src ? option.src : src.value;
+  const label = typeof option.label === "string" && option.label ? option.label : `Quality ${index + 1}`;
+  return {
+    id: typeof option.id === "string" || typeof option.id === "number" ? String(option.id) : `${label}-${index}`,
+    label,
+    src: optionSrc,
+    poster: typeof option.poster === "string" ? option.poster : poster.value
+  };
+}
+
+function normalizeCssSize(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value >= 0 ? value + "px" : "";
+  }
+  if (typeof value !== "string") return "";
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  return /^\d+(\.\d+)?$/.test(trimmed) ? trimmed + "px" : trimmed;
+}
+
+function normalizeAspectRatio(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value > 0 ? String(value) : "";
+  }
+  if (typeof value !== "string") return "";
+  return value.trim();
+}
+
+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();
@@ -241,7 +415,7 @@ function applyAudioSettings() {
   if (!media) return;
   media.volume = volume.value;
   media.muted = muted.value;
-  media.playbackRate = playbackRate;
+  media.playbackRate = playbackRateValue.value;
 }
 
 function markPlaying(event) {
@@ -357,23 +531,11 @@ function seekWithKeyboard(event) {
     return;
   }
 
-  const offset = event.key === "ArrowRight" ? 5 : -5;
+  const offset = event.key === "ArrowRight" ? skipSeconds.value : -skipSeconds.value;
   const nextTime = Math.min(Math.max(currentTime.value + offset, 0), safeDuration.value);
   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);
@@ -401,21 +563,68 @@ function toggleMute(event) {
   }, 0);
 }
 
-function cycleRate(event) {
+function toggleSettings() {
   if (isDisposed) return;
-  const button = event.currentTarget;
+  settingsOpen.value = !settingsOpen.value;
+  controlsVisible.value = true;
+}
+
+function selectQuality(id) {
+  if (isDisposed) return;
+  const media = getMedia();
+  const wasPlaying = media ? !media.paused : false;
+  const previousTime = media?.currentTime || 0;
+  selectedQualityId.value = id;
+  settingsOpen.value = false;
+  if (!media) return;
   window.setTimeout(() => {
     if (isDisposed) return;
-    rateIndex = (rateIndex + 1) % rates.length;
-    playbackRate = rates[rateIndex];
-    const media = getMedia();
-    if (media) {
-      media.playbackRate = playbackRate;
+    const nextMedia = getMedia();
+    if (!nextMedia) return;
+    if (Number.isFinite(previousTime) && previousTime > 0 && safeDuration.value > 0) {
+      nextMedia.currentTime = Math.min(previousTime, safeDuration.value);
+      currentTime.value = nextMedia.currentTime;
+    }
+    nextMedia.playbackRate = playbackRateValue.value;
+    if (wasPlaying) {
+      nextMedia.play().catch((error) => {
+        if (error?.name !== "AbortError") {
+          throw error;
+        }
+      });
     }
-    button.textContent = playbackRate + "x";
   }, 0);
 }
 
+function setPlaybackRate(nextRate) {
+  if (isDisposed) return;
+  playbackRateValue.value = nextRate;
+  settingsOpen.value = false;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    const media = getMedia();
+    if (!media) return;
+    media.playbackRate = nextRate;
+  }, 0);
+}
+
+function setSkipSeconds(nextSeconds) {
+  if (isDisposed) return;
+  skipSeconds.value = nextSeconds;
+  settingsOpen.value = false;
+}
+
+function handleDocumentPointerDown(event) {
+  if (isDisposed || !settingsOpen.value) return;
+  const menu = settingsEl.value;
+  if (menu?.contains?.(event.target)) return;
+  settingsOpen.value = false;
+}
+
+function stopEvent(event) {
+  event.stopPropagation();
+}
+
 function toggleFullscreen() {
   if (isDisposed) return;
   if (document.fullscreenElement) {
@@ -513,6 +722,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%;
@@ -662,6 +885,53 @@ function formatTime(seconds) {
   font-size: 0.84rem;
 }
 
+.settings {
+  position: relative;
+}
+
+.settings-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 10px);
+  z-index: 4;
+  display: grid;
+  gap: 12px;
+  width: min(240px, calc(100vw - 32px));
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 8px;
+  color: #ffffff;
+  background: rgba(3, 7, 18, 0.94);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
+}
+
+.settings-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.settings-label {
+  grid-column: 1 / -1;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.settings-option {
+  min-height: 30px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  white-space: nowrap;
+}
+
+.settings-option.active {
+  border-color: #ef4444;
+  color: #ffffff;
+  background: #ef4444;
+}
+
 button {
   min-height: 36px;
   padding: 0 12px;
@@ -707,8 +977,7 @@ button:hover {
   transform: translateX(3px);
 }
 
-.center-toggle .icon-pause,
-.center-toggle .icon-stop {
+.center-toggle .icon-pause {
   transform: translateX(0);
 }
 
@@ -720,10 +989,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>');
 }
@@ -740,6 +1005,10 @@ button:hover {
   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>');
 }
 
+.icon-settings {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M259.1 73.5C262.1 59 274.9 48 290 48L350 48C365.1 48 377.9 59 380.9 73.5L389.8 116.8C404.9 122.5 419.2 130 432.5 139.1L474.3 125.1C488.6 120.3 504.4 126.1 512 139.1L542 190.9C549.6 203.9 546.8 220.5 535.5 230.5L502.7 259.8C504 267.7 504.7 275.8 504.7 284C504.7 292.2 504 300.3 502.7 308.2L535.5 337.5C546.8 347.5 549.6 364.1 542 377.1L512 428.9C504.4 441.9 488.6 447.7 474.3 442.9L432.5 428.9C419.2 438 404.9 445.5 389.8 451.2L380.9 494.5C377.9 509 365.1 520 350 520L290 520C274.9 520 262.1 509 259.1 494.5L250.2 451.2C235.1 445.5 220.8 438 207.5 428.9L165.7 442.9C151.4 447.7 135.6 441.9 128 428.9L98 377.1C90.4 364.1 93.2 347.5 104.5 337.5L137.3 308.2C136 300.3 135.3 292.2 135.3 284C135.3 275.8 136 267.7 137.3 259.8L104.5 230.5C93.2 220.5 90.4 203.9 98 190.9L128 139.1C135.6 126.1 151.4 120.3 165.7 125.1L207.5 139.1C220.8 130 235.1 122.5 250.2 116.8L259.1 73.5zM320 356C359.8 356 392 323.8 392 284C392 244.2 359.8 212 320 212C280.2 212 248 244.2 248 284C248 323.8 280.2 356 320 356z"/></svg>');
+}
+
 @media (max-width: 620px) {
   .top-bar {
     align-items: flex-start;

package/package.json

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

@@ -23,11 +23,21 @@ export type MikuruAudioPlayerEvents = {
   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>;

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

@@ -23,12 +23,35 @@ export type MikuruVideoPlayerEvents = {
   onRatechange?: (payload: MikuruVideoPlayerEventPayload) => void;
 };
 
+export type MikuruVideoPlayerControl =
+  | "play"
+  | "seek"
+  | "time"
+  | "mute"
+  | "volume"
+  | "rate"
+  | "settings"
+  | "fullscreen";
+
+export type MikuruVideoPlayerQualityOption = {
+  id?: string | number;
+  label: string;
+  src: string;
+  poster?: string;
+};
+
 export type MikuruVideoPlayerProps = {
   src: string;
   poster?: string;
   title?: string;
   subtitle?: string;
   preload?: string;
+  width?: string | number;
+  height?: string | number;
+  aspectRatio?: string | number;
+  qualityOptions?: MikuruVideoPlayerQualityOption[];
+  controls?: MikuruVideoPlayerControl[];
+  live?: boolean;
 } & MikuruVideoPlayerEvents;
 
 declare const component: MikuruComponent<MikuruVideoPlayerProps>;