mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 09:07:45 +01:00
Submission notice size now updates when the video size changes.
React listeners are properly cleaned up now.
This commit is contained in:
parent
18c7be8161
commit
1b2bc6def4
3 changed files with 24 additions and 0 deletions
|
@ -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}
|
||||
|
|
|
@ -52,6 +52,8 @@ class SkipNotice {
|
|||
}
|
||||
|
||||
close() {
|
||||
ReactDOM.unmountComponentAtNode(this.noticeElement);
|
||||
|
||||
this.noticeElement.remove();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -56,6 +56,8 @@ class SubmissionNotice {
|
|||
}
|
||||
|
||||
close() {
|
||||
ReactDOM.unmountComponentAtNode(this.noticeElement);
|
||||
|
||||
this.noticeElement.remove();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue