Fix issue #7 and clean up code

content-script.js

@@ -14,6 +14,10 @@
 var code = `
 	var base = document.createElement; /* A backup reference to the browser's original document.createElement */
 	var VideoElementsMade = []; /* Array of video/audio elements made by spotify's scripts */
+
+	function debugLog(text) {
+		console.log(text)
+	}
 
 	/* Replacing the DOM's original reference to the browser's createElement function */
 	document.createElement = function(message) {
@@ -22,7 +26,7 @@ var code = `
 
 		/* we check the first argument sent to us Examp. document.createElement('video') would have message = 'video' */
 		/* ignores the many document.createElement('div'), document.createElement('nav'), ect... */
-		if(message == 'video' || message == 'audio'){ /* Checking if spotify scripts are making a video or audio element */
+		if(message === 'video' || message === 'audio'){ /* Checking if spotify scripts are making a video or audio element */
 			VideoElementsMade.push(element); /* Add a reference to the element in our array. Arrays hold references not copies by default in javascript. */
 		}
 		return element /* return the element and complete the loop so the page is allowed to be made */
@@ -33,10 +37,13 @@ var code = `
 		function getStoredSpeed(){ /* Gets stored speed between refreshes*/
 			return localStorage.getItem('speed');
 		}
+
+		// locally cache the speed, so getStoredSpeed does not need to be called repetitively
 		var lastSpeed = getStoredSpeed() || 1.0; /* if stored speed is null make lastSpeed 1.0 */
 
 		function setStoredSpeed(value){ /* Sets variable in the site's cookie along-side spotify's stuff */
 			localStorage.setItem('speed',value);
+			lastSpeed = value; 
 		}
 
 		/* Building our playback speed input element */
@@ -48,49 +55,62 @@ var code = `
 			+ 'width: 45px;'
 			+ 'margin: 5px;';
 		input.value = lastSpeed * 100;
-		input.oninput = function(e){ /* What happens when we change the number in our input box element */
-			validateAndChangeSpeed();  /* We call our function */
+		input.onkeypress = function(e){ /* What happens when we change the number in our input box element */
+			if (e.code === "Enter") {
+				validateAndChangeSpeed();
+			}
+		};
+		input.onblur = function() {
+			// "onfocusout" event not working
+			validateAndChangeSpeed();
 		};
 
 		function validateAndChangeSpeed(value){ 
-			var val = parseFloat( value || (input.value / 100)); /* val must be in format 0.0625 - 16.0 https://stackoverflow.com/a/32320020 */
-			if(!isNaN(val)){ /* check if val is a number */
-				changeSpeed(val);
+			var val = parseFloat( value || (input.value / 100));
+			if (!isNaN(val) && (val !== lastSpeed)) {
+				/* only change if input is valid and it changed */
+				setStoredSpeed(val);
+				videosChangeSpeed(val);
 			}
 		}
 
-		function changeSpeed(val) {
+		function videosChangeSpeed(val) {
 			for(var i = 0; i < VideoElementsMade.length; i++){ /* change speed for all elements found (i havent seen this be more than 1 but you never know) */
-				VideoElementsMade[i].playbackRate = val; /* set the playback rate here */
-				if(val != lastSpeed){ /* update the lastSpeed if the speed actually changed */
-					lastSpeed = val;
-					setStoredSpeed(val);
+				/* val is clamped to range 0.0625 - 16.0 https://stackoverflow.com/a/32320020 */
+				if (VideoElementsMade[i].playbackRate !== val) {
+					debugLog("changing playback rate from " + VideoElementsMade[i].playbackRate + " to " + val)
 				}
+				VideoElementsMade[i].playbackRate = val; /* set the playback rate here */
+				VideoElementsMade[i].defaultPlaybackRate = val;
 			}
 		}
 
-		function timeout() { /* This function is called by itself over and over */
-			if(document.getElementById('speed-extension-input') == null) /* check if our input element doesnt exist */
-			{
-				try {
-					document.getElementsByClassName('now-playing-bar__right')[0].appendChild (input); /* make our input exist on page */
-				}catch{
-					setTimeout(timeout, 100);/*now-playing-bar__right doesnt exist yet so lets try again in 100ms*/
-					return;
-				}
+		function addSpeedInput() { /* adds speed input next to volume bar */
+			debugLog("Adding speed input");
+			try {
+				document.getElementsByClassName('volume-bar')[0].appendChild(input); /* make our input exist on page */
+				debugLog("Added speed input");
+			}catch{
+				setTimeout(addSpeedInput, 1000);/*volume-bar doesnt exist yet so lets try again in 1 second*/
+				return;
 			}
+		}
+
+		addSpeedInput();
+
+		function ensureSpeedNotChanged() {
+			/* sometimes playbackRate is set back to 1.0 by spotify's code so timeout just ensures it goes the speed the user desires */
 			setTimeout(function () { /* setTimeout is a delayed call(500 milliseconds) to the code below */
 				try {
-					validateAndChangeSpeed(lastSpeed); /* this is in a try/catch because if an error happens timeout wouldnt be called again. */
+					/* this is in a try/catch because if an error happens timeout wouldnt be called again. */
+					validateAndChangeSpeed(lastSpeed);
 				}catch{
 
 				}
-				timeout(); /* call timeout again which starts the loop and eventually it will come back here */
+				ensureSpeedNotChanged(); /* call timeout again which starts the loop and eventually it will come back here */
 			}, 500); /* 500ms */
 		}
-
-		timeout(); /* starts the loop to check and create our inputbox and to set the playback speed without having to mess with input box(by refreshing and having it load from cookie) */
-		/* sometimes playbackRate is set back to 1.0 by spotify's code so timeout just ensures it goes the speed the user desires */
+		ensureSpeedNotChanged();
 	};`; 
 /* ======== End of code string literal ======== */
 var script = document.createElement('script'); /* Create our dummy script to be inserted with our code variable  */