fix: NaN valueAsNumber Safari error (#967)

fix #947
muxinc · Sep 17, 2024 · 3906cca · 3906cca
1 parent 3dbd3ff
commit 3906cca
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
@@ -326,7 +326,7 @@ class MediaChromeRange extends globalThis.HTMLElement {
   }
 
   container: HTMLElement;
-  range: any;
+  range: HTMLInputElement;
   appearance: HTMLElement;
 
   constructor() {

diff --git a/src/js/media-time-range.ts b/src/js/media-time-range.ts
@@ -5,6 +5,7 @@ import './media-preview-time-display.js';
 import './media-preview-chapter-display.js';
 import { MediaUIEvents, MediaUIAttributes } from './constants.js';
 import { nouns } from './labels/labels.js';
+import { isValidNumber } from './utils/utils.js';
 import { formatAsTimePhrase } from './utils/time.js';
 import { isElementVisible } from './utils/element-utils.js';
 import { RangeAnimation } from './utils/range-animation.js';
@@ -512,7 +513,10 @@ class MediaTimeRange extends MediaChromeRange {
   #updateRange = (value: number): void => {
     if (this.dragging) return;
 
-    this.range.valueAsNumber = value;
+    if (isValidNumber(value)) {
+      this.range.valueAsNumber = value;
+    }
+
     this.updateBar();
   };
 

diff --git a/src/js/media-volume-range.ts b/src/js/media-volume-range.ts
@@ -18,8 +18,7 @@ const toVolume = (el: any): number => {
   return el.mediaVolume;
 };
 
-const formatAsPercentString = ({ value }: { value: number }): string =>
-  `${Math.round(value * 100)}%`;
+const formatAsPercentString = (value: number): string => `${Math.round(value * 100)}%`;
 
 /**
  * @attr {string} mediavolume - (read-only) Set to the media volume.
@@ -74,7 +73,7 @@ class MediaVolumeRange extends MediaChromeRange {
       this.range.valueAsNumber = toVolume(this);
       this.range.setAttribute(
         'aria-valuetext',
-        formatAsPercentString(this.range)
+        formatAsPercentString(this.range.valueAsNumber)
       );
       this.updateBar();
     }