mikuru 1.0.35 → 1.0.37

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.37 - 2026-05-17
+
+- Fixed `MikuruVideoPlayer` speed and skip settings so option records avoid `.value` template access, preventing crashes in consuming apps when selecting playback rate or keyboard skip seconds.
+
+## 1.0.36 - 2026-05-17
+
+- Stabilized `MikuruVideoPlayer` settings interactions so playback speed and keyboard skip selections defer UI updates out of the click stack, matching the other media controls and avoiding recursive update freezes.
+
 ## 1.0.35 - 2026-05-17
 
 - Added package-exported tabs, accordion, form controls, select, combobox, header, footer, and side menu components with typed exports and dogfood coverage.

package/components/MikuruVideoPlayer.mikuru

@@ -108,11 +108,11 @@
                   <span class="settings-label">Speed</span>
                   <button
                     m-for="rate in rateOptions"
-                    :key="rate.value"
+                    :key="rate.rate"
                     type="button"
                     class="settings-option"
-                    :class="{ active: rate.value === playbackRateValue }"
-                    @click="setPlaybackRate(rate.value)"
+                    :class="{ active: rate.rate === playbackRateValue }"
+                    @click="setPlaybackRate(rate.rate)"
                   >
                     {{ rate.label }}
                   </button>
@@ -122,11 +122,11 @@
                   <span class="settings-label">Skip</span>
                   <button
                     m-for="option in skipOptions"
-                    :key="option.value"
+                    :key="option.seconds"
                     type="button"
                     class="settings-option"
-                    :class="{ active: option.value === skipSeconds }"
-                    @click="setSkipSeconds(option.value)"
+                    :class="{ active: option.seconds === skipSeconds }"
+                    @click="setSkipSeconds(option.seconds)"
                   >
                     {{ option.label }}
                   </button>
@@ -268,17 +268,17 @@ 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 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" }
+  { rate: 0.75, label: "0.75x" },
+  { rate: 1, label: "1x" },
+  { rate: 1.25, label: "1.25x" },
+  { rate: 1.5, label: "1.5x" },
+  { rate: 2, label: "2x" }
 ];
 const skipOptions = [
-  { value: 5, label: "5s" },
-  { value: 10, label: "10s" },
-  { value: 15, label: "15s" },
-  { value: 30, label: "30s" }
+  { seconds: 5, label: "5s" },
+  { seconds: 10, label: "10s" },
+  { seconds: 15, label: "15s" },
+  { seconds: 30, label: "30s" }
 ];
 const showPlayControl = computed(() => hasControl("play"));
 const showSeekControl = computed(() => hasControl("seek"));
@@ -619,20 +619,24 @@ function selectQuality(id) {
 
 function setPlaybackRate(nextRate) {
   if (isDisposed) return;
-  playbackRateValue.value = nextRate;
-  settingsOpen.value = false;
   window.setTimeout(() => {
     if (isDisposed) return;
+    playbackRateValue.value = nextRate;
+    settingsOpen.value = false;
     const media = getMedia();
     if (!media) return;
+    ignoreMediaEventsFor(80);
     media.playbackRate = nextRate;
   }, 0);
 }
 
 function setSkipSeconds(nextSeconds) {
   if (isDisposed) return;
-  skipSeconds.value = nextSeconds;
-  settingsOpen.value = false;
+  window.setTimeout(() => {
+    if (isDisposed) return;
+    skipSeconds.value = nextSeconds;
+    settingsOpen.value = false;
+  }, 0);
 }
 
 function handleDocumentPointerDown(event) {

package/package.json

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