Moved notice closing to renderer (no leftover nodes)

src/components/NoticeComponent.tsx

@@ -11,7 +11,7 @@ export interface NoticeProps {
     fadeIn?: boolean,
 
     // Callback for when this is closed
-    closeListener?: () => void,
+    closeListener: () => void,
 
     zIndex?: number
 }
@@ -195,16 +195,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
      * @param silent If true, the close listener will not be called
      */
     close(silent?: boolean) {
-        //TODO: Change to a listener in the renderer (not component)
-        let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-        if (notice != null) {
-            notice.remove();
-        }
-
         //remove setInterval
         if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
 
-        if (this.props.closeListener && !silent) this.props.closeListener();
+        if (!silent) this.props.closeListener();
     }
 
     changeNoticeTitle(title) {

src/components/SkipNoticeComponent.tsx

@@ -14,6 +14,8 @@ export interface SkipNoticeProps {
     autoSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
+
+    closeListener: () => void
 }
 
 export interface SkipNoticeState {
@@ -112,7 +114,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 fadeIn={true}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
-                ref={this.noticeRef}>
+                ref={this.noticeRef}
+                closeListener={this.props.closeListener}>
                     
                 {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
                     <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>

src/components/SubmissionNoticeComponent.tsx

@@ -11,6 +11,8 @@ export interface SubmissionNoticeProps {
     contentContainer: ContentContainer;
 
     callback: () => any;
+
+    closeListener: () => void
 }
 
 export interface SubmissionNoticeeState {
@@ -134,6 +136,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.noticeRef.current.close(true);
 
         this.contentContainer().resetSponsorSubmissionNotice();
+
+        this.props.closeListener();
     }
 
     submit() {

src/render/SkipNotice.tsx

@@ -9,6 +9,8 @@ class SkipNotice {
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: () => any;
 
+    noticeElement: HTMLDivElement;
+
     constructor(UUID: string, autoSkip: boolean = false, contentContainer) {
         this.UUID = UUID;
         this.autoSkip = autoSkip;
@@ -35,16 +37,23 @@ class SkipNotice {
         //this is the suffix added at the end of every id
         let idSuffix = this.UUID + amountOfPreviousNotices;
 
-        let noticeElement = document.createElement("div");
-        noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
-        referenceNode.prepend(noticeElement);
+        referenceNode.prepend(this.noticeElement);
 
         ReactDOM.render(
-            <SkipNoticeComponent UUID={UUID} autoSkip={autoSkip} contentContainer={contentContainer} />,
-            noticeElement
+            <SkipNoticeComponent UUID={UUID} 
+                autoSkip={autoSkip} 
+                contentContainer={contentContainer}
+                closeListener={() => this.close()} />,
+            this.noticeElement
         );
     }
+
+    close() {
+        this.noticeElement.remove();
+    }
 }
 
 export default SkipNotice;

src/render/SubmissionNotice.tsx

@@ -11,6 +11,8 @@ class SubmissionNotice {
 
     noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
 
+    noticeElement: HTMLDivElement;
+
     constructor(contentContainer: () => any, callback: () => any) {
         this.noticeRef = React.createRef();
 
@@ -34,23 +36,28 @@ class SubmissionNotice {
             }
         }
     
-        let noticeElement = document.createElement("div");
-        noticeElement.id = "submissionNoticeContainer";
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "submissionNoticeContainer";
 
-        referenceNode.prepend(noticeElement);
+        referenceNode.prepend(this.noticeElement);
 
         ReactDOM.render(
             <SubmissionNoticeComponent
                 contentContainer={contentContainer}
                 callback={callback} 
-                ref={this.noticeRef} />,
-            noticeElement
+                ref={this.noticeRef}
+                closeListener={() => this.close()} />,
+            this.noticeElement
         );
     }
 
     update() {
         this.noticeRef.current.forceUpdate();
     }
+
+    close() {
+        this.noticeElement.remove();
+    }
 }
 
 export default SubmissionNotice;