Add popup donation prompt

src/config.ts

@@ -43,6 +43,8 @@ interface SBConfig {
     ytInfoPermissionGranted: boolean,
     allowExpirements: boolean,
     showDonationLink: boolean,
+    showPopupDonationCount: number,
+    donateClicked: number,
     autoHideInfoButton: boolean,
     autoSkipOnMusicVideos: boolean,
     colorPalette: {
@@ -146,6 +148,8 @@ const Config: SBObject = {
         ytInfoPermissionGranted: false,
         allowExpirements: true,
         showDonationLink: true,
+        showPopupDonationCount: 0,
+        donateClicked: 0,
         autoHideInfoButton: true,
         autoSkipOnMusicVideos: false,
         scrollToEditTimeUpdate: false, // false means the tooltip will be shown

src/options.ts

@@ -54,8 +54,10 @@ async function init() {
         document.documentElement.setAttribute("data-theme", "light");
     }
 
+    const donate = document.getElementById("sbDonate");
+    donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
     if (!showDonationLink()) {
-        document.getElementById("sbDonate").classList.add("hidden");
+        donate.classList.add("hidden");
     }
 
     // Set all of the toggle options to the correct option
@@ -501,7 +503,7 @@ function activatePrivateTextChange(element: HTMLElement) {
             break;
         }
     }
-    
+
     textBox.value = result;
     
     const setButton = element.querySelector(".text-change-set");

src/popup.ts

@@ -108,13 +108,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         //"downloadedSponsorMessageTimes",
         "refreshSegmentsButton",
         "whitelistButton",
-        "sbDonate"
+        "sbDonate",
+        "sponsorTimesDonateContainer",
+        "sbConsiderDonateLink",
+        "sbCloseDonate"
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
     // Hide donate button if wanted (Safari, or user choice)
     if (!showDonationLink()) {
         PageElements.sbDonate.style.display = "none";
     }
+    PageElements.sbDonate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
 
     //setup click listeners
     PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
@@ -192,6 +196,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                         PageElements.sponsorTimesViewsDisplay.innerText = viewCount.toLocaleString();
                         PageElements.sponsorTimesViewsContainer.style.display = "unset";
                     }
+
+                    showDonateWidget(viewCount);
                 }
             });
 
@@ -241,6 +247,23 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     getSegmentsFromContentScript(false);
 
+    function showDonateWidget(viewCount: number) {
+        if (Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
+                && viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10) {
+            PageElements.sponsorTimesDonateContainer.style.display = "flex";
+            PageElements.sbConsiderDonateLink.addEventListener("click", () => {
+                Config.config.donateClicked = Config.config.donateClicked + 1;
+            });
+            
+            PageElements.sbCloseDonate.addEventListener("click", () => {
+                PageElements.sponsorTimesDonateContainer.style.display = "none";
+                Config.config.showPopupDonationCount = 100;
+            });
+
+            Config.config.showPopupDonationCount = Config.config.showPopupDonationCount + 1;
+        }
+    }
+
     function onTabs(tabs, updating: boolean): void {
         messageHandler.sendMessage(tabs[0].id, { message: 'getVideoID' }, function (result) {
             if (result !== undefined && result.videoID) {