Fix speed plugin always controlling the first player on the page via keyboard when multiple players exist

Author: sebbayer

dist/speed/speed.js

@@ -100,13 +100,6 @@ Object.assign(MediaElementPlayer.prototype, {
 		    radios = player.speedButton.querySelectorAll('input[type="radio"]'),
 		    labels = player.speedButton.querySelectorAll('.' + t.options.classPrefix + 'speed-selector-label');
 
-		/**
-		 * Store a reference to the radio buttons to prevent a scope bug in keyboard events
-		 * with multiple MediaElement players are on the same page. Otherwise these keyboard
-		 * events would always control the first speed button instance on the page.
-		 */
-		player.speedRadioButtons = radios;
-
 		for (var _i2 = 0, _total2 = inEvents.length; _i2 < _total2; _i2++) {
 			player.speedButton.addEventListener(inEvents[_i2], function () {
 				mejs.Utils.removeClass(player.speedSelector, t.options.classPrefix + 'offscreen');
@@ -161,10 +154,9 @@ Object.assign(MediaElementPlayer.prototype, {
 			action: function action(player, media, key, event) {
 				if (event.key != '<') return;
 
-				const _radios = player.speedRadioButtons;
-				for (var _i7 = 0; _i7 < _radios.length - 1; _i7++) {
-					if (_radios[_i7].checked) {
-						var nextRadio = _radios[_i7 + 1];
+				for (var _i7 = 0; _i7 < radios.length - 1; _i7++) {
+					if (radios[_i7].checked) {
+						var nextRadio = radios[_i7 + 1];
 						nextRadio.dispatchEvent(mejs.Utils.createEvent('click', nextRadio));
 						break;
 					}
@@ -175,10 +167,9 @@ Object.assign(MediaElementPlayer.prototype, {
 			action: function action(player, media, key, event) {
 				if (event.key != '>') return;
 
-				const _radios = player.speedRadioButtons;
-				for (var _i8 = 1; _i8 < _radios.length; _i8++) {
-					if (_radios[_i8].checked) {
-						var prevRadio = _radios[_i8 - 1];
+				for (var _i8 = 1; _i8 < radios.length; _i8++) {
+					if (radios[_i8].checked) {
+						var prevRadio = radios[_i8 - 1];
 						prevRadio.dispatchEvent(mejs.Utils.createEvent('click', prevRadio));
 						break;
 					}

src/speed/speed.js

@@ -141,6 +141,13 @@ Object.assign(MediaElementPlayer.prototype, {
 			labels = player.speedButton.querySelectorAll(`.${t.options.classPrefix}speed-selector-label`)
 		;
 
+		/**
+		 * Store a reference to the radio buttons to prevent a scope bug in keyboard events
+		 * with multiple MediaElement players are on the same page. Otherwise these keyboard
+		 * events would always control the first speed button instance on the page.
+		 */
+		player.speedRadioButtons = radios;
+
 		// hover or keyboard focus
 		for (let i = 0, total = inEvents.length; i < total; i++) {
 			player.speedButton.addEventListener(inEvents[i], () => {
@@ -202,9 +209,10 @@ Object.assign(MediaElementPlayer.prototype, {
 				if (event.key != '<')
 					return;
 
-				for (let i = 0; i < radios.length - 1; i++) {
-					if (radios[i].checked) {
-						const nextRadio = radios[i+1];
+				const _radios = player.speedRadioButtons;
+				for (let i = 0; i < _radios.length - 1; i++) {
+					if (_radios[i].checked) {
+						const nextRadio = _radios[i+1];
 						nextRadio.dispatchEvent(mejs.Utils.createEvent('click', nextRadio));
 						break;
 					}
@@ -216,9 +224,10 @@ Object.assign(MediaElementPlayer.prototype, {
 				if (event.key != '>')
 					return;
 
-				for (let i = 1; i < radios.length; i++) {
-					if (radios[i].checked) {
-						const prevRadio = radios[i-1];
+				const _radios = player.speedRadioButtons;
+				for (let i = 1; i < _radios.length; i++) {
+					if (_radios[i].checked) {
+						const prevRadio = _radios[i-1];
 						prevRadio.dispatchEvent(mejs.Utils.createEvent('click', prevRadio));
 						break;
 					}