external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 09:07:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add animation to copy button

Browse source 
Closes https://github.com/ajayyy/SponsorBlock/issues/796
This commit is contained in:
Ajay Ramachandran 2021-07-13 18:22:56 -04:00
parent 76b78ef132
commit b8cbedbc4d
3 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/content.ts
View file

@ -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);

22
src/popup.ts
View file

@ -431,7 +431,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
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<void> {
}
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<void> {
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()
)}
);
}

25
src/utils.ts
View file

@ -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.
*/