Don't show animations before loading

This commit is contained in:
Ajay Ramachandran
2020-12-14 00:35:49 -05:00
parent 1afabb934f
commit 125a83ac3f
3 changed files with 56 additions and 79 deletions

View File

@@ -166,8 +166,12 @@ background-color:#ec1c1c;
background: white; background: white;
position: absolute; position: absolute;
border-radius: 12.5px; border-radius: 12.5px;
transition: transform .2s ease-out;
box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45); box-shadow: .75px .75px 3.8px 0px rgba(50, 50, 50, 0.45);
transition: transform .2s ease-out;
}
.preload * {
transition: none !important;
} }
#toggleSwitch:checked~.switchDot { #toggleSwitch:checked~.switchDot {

View File

@@ -5,7 +5,7 @@
</head> </head>
<body style="margin: 0; min-width: 320px; background: var(--sb-main-bg-color);"> <body style="margin: 0; min-width: 320px; background: var(--sb-main-bg-color);">
<div id="sponsorblockPopup" class="sponsorBlockPageBody"> <div id="sponsorblockPopup" class="sponsorBlockPageBody preload">
<div class="logoText bottomSpace"> <div class="logoText bottomSpace">
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo"> <img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
<p>SponsorBlock</p> <p>SponsorBlock</p>

View File

@@ -47,62 +47,52 @@ async function runThePopup(messageListener?: MessageListener) {
var PageElements: any = {}; var PageElements: any = {};
["sponsorStart", [
// Top toggles "sponsorblockPopup",
"whitelistChannel", "sponsorStart",
"unwhitelistChannel", // Top toggles
"whitelistToggle", "whitelistChannel",
"whitelistForceCheck", "unwhitelistChannel",
"disableSkipping", "whitelistToggle",
"enableSkipping", "whitelistForceCheck",
"toggleSwitch", "disableSkipping",
// Options "enableSkipping",
//"showNoticeAgain", "toggleSwitch",
"optionsButton", // Options
"helpButton", //"showNoticeAgain",
// More controls "optionsButton",
"submitTimes", "helpButton",
//"reportAnIssue", // More controls
// sponsorTimesContributions "submitTimes",
"sponsorTimesContributionsContainer", "sponsorTimesContributionsContainer",
"sponsorTimesContributionsDisplay", "sponsorTimesContributionsDisplay",
//"sponsorTimesContributionsDisplayEndWord", "sponsorTimesViewsContainer",
// sponsorTimesViewsDisplay "sponsorTimesViewsDisplay",
"sponsorTimesViewsContainer", "sponsorTimesViewsDisplayEndWord",
"sponsorTimesViewsDisplay", "sponsorTimesOthersTimeSavedDisplay",
"sponsorTimesViewsDisplayEndWord", "sponsorTimesOthersTimeSavedEndWord",
// sponsorTimesOthersTimeSaved "sponsorTimesSkipsDoneContainer",
//"sponsorTimesOthersTimeSavedContainer", "sponsorTimesSkipsDoneDisplay",
"sponsorTimesOthersTimeSavedDisplay", "sponsorTimesSkipsDoneEndWord",
"sponsorTimesOthersTimeSavedEndWord", "sponsorTimeSavedDisplay",
// sponsorTimesSkipsDone "sponsorTimeSavedEndWord",
"sponsorTimesSkipsDoneContainer", // Username
"sponsorTimesSkipsDoneDisplay", "setUsernameContainer",
"sponsorTimesSkipsDoneEndWord", "setUsernameButton",
// sponsorTimeSaved "setUsernameStatusContainer",
//"sponsorTimeSavedContainer", "setUsernameStatus",
"sponsorTimeSavedDisplay", "setUsername",
"sponsorTimeSavedEndWord", "usernameInput",
// discordButtons "usernameValue",
//"discordButtonContainer", "submitUsername",
//"hideDiscordButton", // More
// Username "submissionSection",
"setUsernameContainer", "mainControls",
"setUsernameButton", "loadingIndicator",
"setUsernameStatusContainer", "videoFound",
"setUsernameStatus", "sponsorMessageTimes",
"setUsername", //"downloadedSponsorMessageTimes",
"usernameInput", "whitelistButton",
"usernameValue",
"submitUsername",
// More
"submissionSection",
"mainControls",
"loadingIndicator",
"videoFound",
"sponsorMessageTimes",
//"downloadedSponsorMessageTimes",
"whitelistButton",
].forEach(id => PageElements[id] = document.getElementById(id)); ].forEach(id => PageElements[id] = document.getElementById(id));
//setup click listeners //setup click listeners
@@ -114,18 +104,10 @@ async function runThePopup(messageListener?: MessageListener) {
unwhitelistChannel(); unwhitelistChannel();
} }
}); });
//PageElements.whitelistChannel.addEventListener("click", whitelistChannel);
PageElements.whitelistForceCheck.addEventListener("click", openOptions); PageElements.whitelistForceCheck.addEventListener("click", openOptions);
//PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
PageElements.toggleSwitch.addEventListener("change", function() { PageElements.toggleSwitch.addEventListener("change", function() {
if (this.checked) { toggleSkipping(!this.checked);
toggleSkipping(false);
} else {
toggleSkipping(true);
}
}); });
//PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
//PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
PageElements.submitTimes.addEventListener("click", submitTimes); PageElements.submitTimes.addEventListener("click", submitTimes);
//PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain); //PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
PageElements.setUsernameButton.addEventListener("click", setUsernameButton); PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
@@ -133,8 +115,6 @@ async function runThePopup(messageListener?: MessageListener) {
PageElements.submitUsername.addEventListener("click", submitUsername); PageElements.submitUsername.addEventListener("click", submitUsername);
PageElements.optionsButton.addEventListener("click", openOptions); PageElements.optionsButton.addEventListener("click", openOptions);
PageElements.helpButton.addEventListener("click", openHelp); PageElements.helpButton.addEventListener("click", openHelp);
//PageElements.reportAnIssue.addEventListener("click", reportAnIssue);
//PageElements.hideDiscordButton.addEventListener("click", hideDiscordButton);
//if true, the button now selects the end time //if true, the button now selects the end time
let startTimeChosen = false; let startTimeChosen = false;
@@ -183,11 +163,6 @@ async function runThePopup(messageListener?: MessageListener) {
//get the amount of times this user has contributed and display it to thank them //get the amount of times this user has contributed and display it to thank them
if (Config.config.sponsorTimesContributed != undefined) { if (Config.config.sponsorTimesContributed != undefined) {
/*if (Config.config.sponsorTimesContributed !== 1) {
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
} else {
PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
}*/
PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed.toLocaleString(); PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed.toLocaleString();
PageElements.sponsorTimesContributionsContainer.classList.remove("hidden"); PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
@@ -255,6 +230,9 @@ async function runThePopup(messageListener?: MessageListener) {
//PageElements.sponsorTimeSavedContainer.style.display = "unset"; //PageElements.sponsorTimeSavedContainer.style.display = "unset";
} }
// Must be delayed so it only happens once loaded
setTimeout(() => PageElements.sponsorblockPopup.classList.remove("preload"), 250);
messageHandler.query({ messageHandler.query({
active: true, active: true,
currentWindow: true currentWindow: true
@@ -897,11 +875,6 @@ async function runThePopup(messageListener?: MessageListener) {
document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID"); document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
} }
/*function reportAnIssue() {
document.getElementById("issueReporterContainer").style.display = "unset";
//PageElements.reportAnIssue.style.display = "none";
}*/
function addVoteMessage(message, UUID) { function addVoteMessage(message, UUID) {
let voteButtonsContainer = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID); let voteButtonsContainer = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
voteButtonsContainer.style.display = "none"; voteButtonsContainer.style.display = "none";