From 1b2bc6def43e60e84cd46ded93bfbd8539ae1d4d Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Tue, 14 Apr 2020 00:47:09 -0400
Subject: [PATCH] Submission notice size now updates when the video size
 changes.

React listeners are properly cleaned up now.
---
 src/components/SubmissionNoticeComponent.tsx | 20 ++++++++++++++++++++
 src/render/SkipNotice.tsx                    |  2 ++
 src/render/SubmissionNotice.tsx              |  2 ++
 3 files changed, 24 insertions(+)

diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index 153e63dc..a9943479 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -30,6 +30,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     noticeRef: React.MutableRefObject<NoticeComponent>;
     timeEditRefs: React.RefObject<SponsorTimeEditComponent>[];
 
+    videoObserver: MutationObserver;
+
     constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
@@ -47,6 +49,24 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         }
     }
 
+    componentDidMount() {
+        // Catch and rerender when the video size changes
+        //TODO: Use ResizeObserver when it is supported in TypeScript
+        this.videoObserver = new MutationObserver(() => {
+            this.forceUpdate();
+        });
+
+        this.videoObserver.observe(this.contentContainer().v, {
+            attributes: true
+        });
+    }
+
+    componentWillUnmount() {
+        if (this.videoObserver) {
+            this.videoObserver.disconnect();
+        }
+    }
+
     render() {
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index 281260ed..49265fb8 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -52,6 +52,8 @@ class SkipNotice {
     }
 
     close() {
+        ReactDOM.unmountComponentAtNode(this.noticeElement);
+
         this.noticeElement.remove();
     }
 }
diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx
index 3220c50f..71f4c1e7 100644
--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@@ -56,6 +56,8 @@ class SubmissionNotice {
     }
 
     close() {
+        ReactDOM.unmountComponentAtNode(this.noticeElement);
+
         this.noticeElement.remove();
     }
 }