From 5b61a75c9b5715db7ce3c76c496edc2ac601d249 Mon Sep 17 00:00:00 2001 From: Fabian Foerg <3429782+faf0@users.noreply.github.com> Date: Sat, 20 Mar 2021 12:08:55 -0400 Subject: [PATCH] Fix issue #7 and clean up code Fixes https://github.com/intOrfloat/spotitySpeedExtension/issues/7 Cleans up code and only only sets playback speed on certain events: https://github.com/intOrfloat/spotitySpeedExtension/pull/6 --- content-script.js | 70 ++++++++++++++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 25 deletions(-) diff --git a/content-script.js b/content-script.js index 02e5ca9..0982f20 100644 --- a/content-script.js +++ b/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, 100);/*volume-bar doesnt exist yet so lets try again in 100ms*/ + 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 */