mikuru 1.0.36 → 1.0.38

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.0.38 - 2026-05-17
+
+- Fixed `MikuruVideoPlayer` speed and skip settings so option active states follow the selected value without reactive menu churn, preventing settings menu crashes in consuming apps while keeping speed highlights and skip actions in sync.
+
+## 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.

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: isPlaybackRateActive(rate.rate) }"
+                    @click="setPlaybackRate($event, 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: isSkipSecondsActive(option.seconds) }"
+                    @click="setSkipSeconds($event, option.seconds)"
                   >
                     {{ option.label }}
                   </button>
@@ -195,8 +195,6 @@ 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);
@@ -206,6 +204,8 @@ const activeControls = ref(new Set(allControls));
 const normalizedQualityOptions = ref([]);
 let controlsSignature = "";
 let qualityOptionsSignature = "";
+let playbackRateValue = 1;
+let skipSeconds = 5;
 
 watch(controls, syncControls, { immediate: true });
 watch([qualityOptions, src, poster], syncQualityOptions, { immediate: true });
@@ -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"));
@@ -436,7 +436,7 @@ function applyAudioSettings() {
   if (!media) return;
   media.volume = volume.value;
   media.muted = muted.value;
-  media.playbackRate = playbackRateValue.value;
+  media.playbackRate = playbackRateValue;
 }
 
 function markPlaying(event) {
@@ -497,6 +497,17 @@ function seekTo(nextTime) {
   }
 }
 
+function skipBy(seconds) {
+  if (isDisposed) return;
+  const media = getMedia();
+  const baseTime = media?.currentTime ?? currentTime.value;
+  const maxTime = Number.isFinite(media?.duration) && media.duration > 0 ? media.duration : safeDuration.value;
+  const nextTime = maxTime > 0
+    ? Math.min(Math.max(baseTime + seconds, 0), maxTime)
+    : Math.max(baseTime + seconds, 0);
+  seekTo(nextTime);
+}
+
 function seekFromPointer(event) {
   seekTo(getPointerTime(event));
 }
@@ -552,7 +563,7 @@ function seekWithKeyboard(event) {
     return;
   }
 
-  const offset = event.key === "ArrowRight" ? skipSeconds.value : -skipSeconds.value;
+  const offset = event.key === "ArrowRight" ? skipSeconds : -skipSeconds;
   const nextTime = Math.min(Math.max(currentTime.value + offset, 0), safeDuration.value);
   seekTo(nextTime);
 }
@@ -606,7 +617,7 @@ function selectQuality(id) {
       nextMedia.currentTime = Math.min(previousTime, safeDuration.value);
       currentTime.value = nextMedia.currentTime;
     }
-    nextMedia.playbackRate = playbackRateValue.value;
+    nextMedia.playbackRate = playbackRateValue;
     if (wasPlaying) {
       nextMedia.play().catch((error) => {
         if (error?.name !== "AbortError") {
@@ -617,11 +628,13 @@ function selectQuality(id) {
   }, 0);
 }
 
-function setPlaybackRate(nextRate) {
+function setPlaybackRate(event, nextRate) {
   if (isDisposed) return;
+  playbackRateValue = nextRate;
+  const button = event.currentTarget;
+  markSettingsOptionActive(button);
   window.setTimeout(() => {
     if (isDisposed) return;
-    playbackRateValue.value = nextRate;
     settingsOpen.value = false;
     const media = getMedia();
     if (!media) return;
@@ -630,15 +643,33 @@ function setPlaybackRate(nextRate) {
   }, 0);
 }
 
-function setSkipSeconds(nextSeconds) {
+function setSkipSeconds(event, nextSeconds) {
   if (isDisposed) return;
+  skipSeconds = nextSeconds;
+  const button = event.currentTarget;
+  markSettingsOptionActive(button);
   window.setTimeout(() => {
     if (isDisposed) return;
-    skipSeconds.value = nextSeconds;
+    skipBy(nextSeconds);
     settingsOpen.value = false;
   }, 0);
 }
 
+function isPlaybackRateActive(rate) {
+  return rate === playbackRateValue;
+}
+
+function isSkipSecondsActive(seconds) {
+  return seconds === skipSeconds;
+}
+
+function markSettingsOptionActive(button) {
+  const group = button?.closest?.(".settings-group");
+  group?.querySelectorAll?.(".settings-option").forEach((optionButton) => {
+    optionButton.classList.toggle("active", optionButton === button);
+  });
+}
+
 function handleDocumentPointerDown(event) {
   if (isDisposed || !settingsOpen.value) return;
   const menu = settingsEl.value;

package/package.json

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