Add notice about YouCap

2 files changed, 41 insertions, 3 deletions

diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index c6aae60a..23726df6 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -32,6 +32,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
     videoObserver: MutationObserver;
 
+    showingYouCapNotice: boolean;
+
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -45,7 +47,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.state = {
             noticeTitle,
             messages: [],
-            idSuffix: "SubmissionNotice"
+            idSuffix: "SubmissionNotice",
         }
     }
 
@@ -87,6 +89,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                     </td>
                 </tr>
 
+                {this.getYouCapMessage()}
+
                 {/* Last Row */}
                 <tr id={"sponsorSkipNoticeSecondRow" + this.state.idSuffix}>
 
@@ -113,6 +117,36 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         );
     }
 
+    /** TODO: Remove */
+    getYouCapMessage(): JSX.Element {
+        if (Config.config.sponsorTimesContributed < 20 
+            || (Config.config.hasShownYouCapNotice && !this.showingYouCapNotice)) {
+            return;
+        }
+
+        Config.config.hasShownYouCapNotice = true;
+        if (!this.showingYouCapNotice) {
+            this.showingYouCapNotice = true;
+        }
+
+        return (
+            <tr style={{textAlign: "center"}}>
+                <p style={{width: "300px", textAlign: "center", display: "inline-block"}}>
+                    Like contributing to crowdsourced projects? 
+                    Consider checking out <a href="https://youcap.video/" style={{textDecoration: "underline"}}>YouCap</a>,
+                    a new open-source replacement for YouTube{"'"}s now defunct community captions.
+                    YouCap is NOT made by me, but I think it looks like a cool idea.
+                </p>
+
+                <img src={chrome.extension.getURL("icons/close.png")}
+                    style={{padding: "0", margin: "auto"}}
+                    className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton"
+                    onClick={() => { this.showingYouCapNotice = false; this.forceUpdate(); }}>
+                </img>
+            </tr>
+        );
+    }
+
     getSponsorTimeMessages(): JSX.Element[] | JSX.Element {
         const elements: JSX.Element[] = [];
         this.timeEditRefs = [];
diff --git a/src/config.ts b/src/config.ts
index 2a40dbf6..d113e86c 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -55,7 +55,9 @@ interface SBConfig {
         "preview-selfpromo": PreviewBarOption,
         "music_offtopic": PreviewBarOption,
         "preview-music_offtopic": PreviewBarOption,
-    }
+    },
+
+    hasShownYouCapNotice: boolean
 }
 
 export interface SBObject {
@@ -229,7 +231,9 @@ const Config: SBObject = {
                 color: "#a6634a",
                 opacity: "0.7"
             }
-        }
+        },
+
+        hasShownYouCapNotice: false
     },
     localConfig: null,
     config: null,