From 3906ccaf53fad1a8c82eb456cb27ff77acba5c4e Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 17 Sep 2024 10:49:53 -0500
Subject: [PATCH] fix: NaN valueAsNumber Safari error (#967)

fix #947
---
 src/js/media-chrome-range.ts | 2 +-
 src/js/media-time-range.ts   | 6 +++++-
 src/js/media-volume-range.ts | 5 ++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index 258eec453..eea81c67e 100644
--- 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
index 34fcc4f99..91b8b2ed4 100644
--- 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
index 8f6e8929e..9d885000f 100644
--- 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();
     }