diff --git a/src/content.ts b/src/content.ts index 5068a297..24b9bffa 100644 --- a/src/content.ts +++ b/src/content.ts @@ -1558,7 +1558,7 @@ function submitSponsorTimes() { async function sendSubmitMessage() { // Add loading animation playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker.svg"); - playerButtons.submit.button.style.animation = "rotate 1s 0s infinite"; + const stopAnimation = utils.applyLoadingAnimation(playerButtons.submit.button, 1, () => updateEditButtonsOnPlayer()); //check if a sponsor exceeds the duration of the video for (let i = 0; i < sponsorTimesSubmitting.length; i++) { @@ -1590,22 +1590,7 @@ async function sendSubmitMessage() { }); if (response.status === 200) { - // Handle submission success - const submitButton = playerButtons.submit.button; - - // Make the animation finite - submitButton.style.animation = "rotate 1s"; - - // When the animation is over, hide the button - const animationEndListener = () => { - updateEditButtonsOnPlayer(); - - submitButton.style.animation = "none"; - - submitButton.removeEventListener("animationend", animationEndListener); - }; - - submitButton.addEventListener("animationend", animationEndListener); + stopAnimation(); // Remove segments from storage since they've already been submitted Config.config.segmentTimes.delete(sponsorVideoID); diff --git a/src/popup.ts b/src/popup.ts index 087bf56a..1c8271ed 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -431,7 +431,11 @@ async function runThePopup(messageListener?: MessageListener): Promise { uuidButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID; uuidButton.className = "voteButton"; uuidButton.src = chrome.extension.getURL("icons/clipboard.svg"); - uuidButton.addEventListener("click", () => navigator.clipboard.writeText(UUID)); + uuidButton.addEventListener("click", () => { + navigator.clipboard.writeText(UUID); + const stopAnimation = utils.applyLoadingAnimation(uuidButton, 0.3); + stopAnimation(); + }); //add thumbs up, thumbs down and uuid copy buttons to the container voteButtonsContainer.appendChild(upvoteButton); @@ -679,7 +683,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { } function refreshSegments() { - PageElements.refreshSegmentsButton.style.animation = "rotate 0.3s 0s infinite"; + const stopAnimation = utils.applyLoadingAnimation(PageElements.refreshSegmentsButton, 0.3); messageHandler.query({ active: true, @@ -688,19 +692,7 @@ async function runThePopup(messageListener?: MessageListener): Promise { messageHandler.sendMessage( tabs[0].id, {message: 'refreshSegments'}, - () => { - // Make the animation finite - PageElements.refreshSegmentsButton.style.animation = "rotate 0.3s"; - - // When the animation is over, hide the button - const animationEndListener = () => { - PageElements.refreshSegmentsButton.style.animation = "none"; - - PageElements.refreshSegmentsButton.removeEventListener("animationend", animationEndListener); - }; - - PageElements.refreshSegmentsButton.addEventListener("animationend", animationEndListener); - } + () => stopAnimation() )} ); } diff --git a/src/utils.ts b/src/utils.ts index 4aa21dbf..02e2447e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -158,6 +158,31 @@ export default class Utils { }); } + /** + * Starts a spinning animation and returns a function to be called when it should be stopped + * The callback will be called when the animation is finished + * It waits until a full rotation is complete + */ + applyLoadingAnimation(element: HTMLElement, time: number, callback?: () => void): () => void { + element.style.animation = `rotate ${time}s 0s infinite`; + + return () => { + // Make the animation finite + element.style.animation = `rotate ${time}s`; + + // When the animation is over, hide the button + const animationEndListener = () => { + if (callback) callback(); + + element.style.animation = "none"; + + element.removeEventListener("animationend", animationEndListener); + }; + + element.addEventListener("animationend", animationEndListener); + } + } + /** * Merges any overlapping timestamp ranges into single segments and returns them as a new array. */