From e4013e65b7b9d0cb33224b30f88dd7ea0079c5be Mon Sep 17 00:00:00 2001
From: nholtman <NHoltman@a-vision.nu>
Date: Fri, 20 Sep 2024 14:58:21 +0200
Subject: [PATCH] Make speed UI update when changed from another source. (such
 as the iPad video menu)

---
 package-lock.json  |  4 ++--
 package.json       |  2 +-
 src/speed/speed.js | 40 ++++++++++++++++++++++++++++++++--------
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 809dec5..a21de57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@A-VISION-BV/mediaelement-plugins",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@A-VISION-BV/mediaelement-plugins",
-      "version": "4.1.0",
+      "version": "4.1.1",
       "dependencies": {
         "global": "^4.3.1"
       },
diff --git a/package.json b/package.json
index 4121066..87cf106 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@A-VISION-BV/mediaelement-plugins",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/A-VISION-BV/mediaelement-plugins.git"
diff --git a/src/speed/speed.js b/src/speed/speed.js
index 81011bf..744efc3 100644
--- a/src/speed/speed.js
+++ b/src/speed/speed.js
@@ -203,7 +203,10 @@ Object.assign(MediaElementPlayer.prototype, {
 			speedButton.setAttribute('aria-expanded', 'true');
 			
 			// focus on selected radio input
-			speedList.querySelector('.' + t.options.classPrefix + 'speed-selected-input').focus();
+			const selectedSpeedInput = speedList.querySelector('.' + t.options.classPrefix + 'speed-selected-input')
+			if(selectedSpeedInput != undefined) {
+				selectedSpeedInput.focus();
+			}
 			
 			menuIsHidden = false;
 		}
@@ -280,14 +283,22 @@ Object.assign(MediaElementPlayer.prototype, {
 		media.addEventListener('loadedmetadata', () => {
 			if (currentPlaybackSpeed) {
 				media.playbackRate = Number(currentPlaybackSpeed);
+				speedButton.innerHTML = getSpeedNameFromValue(currentPlaybackSpeed)
 			}
 		});
 		
-		
-		function handleChangeSpeed() {
+		media.addEventListener('ratechange', () => {
+			const numericPlaybackRate = Number(media.playbackRate);
+			if (numericPlaybackRate != currentPlaybackSpeed) {
+				currentPlaybackSpeed = numericPlaybackRate;
+			}
+			speedButton.innerHTML = getSpeedNameFromValue(currentPlaybackSpeed);
+			
+			
+			
 			const total = radios.length;
 			for(let i = 0; i < total; i++) {
-				const radio = radios[i]
+				const radio = radios[i];
 				
 				// remove the speed-selected class from the previous selected speed label
 				mejs.Utils.removeClass(radio, `${t.options.classPrefix}speed-selected-input`);
@@ -296,8 +307,10 @@ Object.assign(MediaElementPlayer.prototype, {
 					mejs.Utils.removeClass(siblings[i], `${t.options.classPrefix}speed-selected`);
 				}
 				
-				// handle the new speed.
-				if (radio.checked) {
+				const radioSpeed = Number(radio.value)
+				if(radioSpeed == numericPlaybackRate) {
+					
+					radio.checked = true;
 					
 					mejs.Utils.addClass(radio, `${t.options.classPrefix}speed-selected-input`);
 					
@@ -306,12 +319,23 @@ Object.assign(MediaElementPlayer.prototype, {
 					for (let i = 0, total = siblings.length; i < total; i++) {
 						mejs.Utils.addClass(siblings[i], `${t.options.classPrefix}speed-selected`);
 					}
+				}
+			}
+			
+		});
+		
+		
+		function handleChangeSpeed() {
+			const total = radios.length;
+			for(let i = 0; i < total; i++) {
+				const radio = radios[i]
+				
+				// handle the new speed.
+				if (radio.checked) {
 					
 					// set the speed onto the media
 					const newSpeed = Number(radio.value)
 					media.playbackRate = newSpeed
-					currentPlaybackSpeed = newSpeed
-					speedButton.innerHTML = getSpeedNameFromValue(newSpeed)
 				}
 			}
 		}