Move code for smaller notice into general notice component

Fixes other notices

public/content.css

@@ -120,17 +120,17 @@
 }
 
 .sponsorSkipNoticeParent {
-	min-width: 350px;
     position: absolute;
 
 	right: 5px;
 	bottom: 100px;
 	right: 10px;
-	
+}
-	z-index: 1000;
-	
-	border-radius: 5px;
 
+.sponsorSkipNoticeParent, .sponsorSkipNotice {
+	min-width: 350px;
+
+	border-radius: 5px;
 	border-spacing: 5px 10px;
 	padding-left: 5px;
 	padding-right: 5px;
@@ -142,21 +142,9 @@
 	min-width: 350px;
 	background-color: rgba(28, 28, 28, 0.9);
 
-	border-radius: 5px;
-
-	border-spacing: 5px 10px;
-	padding-left: 5px;
-	padding-right: 5px;
-
-	border-collapse: unset;
-
 	transition: all 0.1s ease-out;
 }
 
-/* .sponsorSkipNotice .miniNotice {
-	bottom: 146px;
-} */
-
 .sponsorSkipNotice .hidden {
 	display: none;
 }

src/components/NoticeComponent.tsx

@@ -21,12 +21,13 @@ export interface NoticeProps {
     startFaded?: boolean,
     firstColumn?: React.ReactElement,
     firstRow?: React.ReactElement,
+    bottomRow?: React.ReactElement[],
 
     smaller?: boolean,
 
     // Callback for when this is closed
     closeListener: () => void,
-    onMouseEnter?: (e: React.MouseEvent<HTMLTableElement, MouseEvent>) => void,
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
 
     zIndex?: number,
     style?: React.CSSProperties
@@ -94,66 +95,79 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         }
 
         return (
-            <table id={"sponsorSkipNotice" + this.idSuffix} 
+            <div id={"sponsorSkipNotice" + this.idSuffix} 
-                className={"sponsorSkipObject sponsorSkipNotice" 
+                className={"sponsorSkipObject sponsorSkipNoticeParent"
-                        + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+                    + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
-                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
-                        + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
-                style={noticeStyle}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
-                onMouseLeave={() => this.timerMouseLeave()}>
+                onMouseLeave={() => this.timerMouseLeave()}
-                <tbody>
+                style={noticeStyle} >
+                <table className={"sponsorSkipObject sponsorSkipNotice" 
+                        + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") } >
+                    <tbody>
 
-                    {/* First row */}
+                        {/* First row */}
-                    <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
+                        <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
-                        {/* Left column */}
+                            {/* Left column */}
-                        <td className="noticeLeftIcon">
+                            <td className="noticeLeftIcon">
-                            {/* Logo */}
+                                {/* Logo */}
-                            <img id={"sponsorSkipLogo" + this.idSuffix} 
+                                <img id={"sponsorSkipLogo" + this.idSuffix} 
-                                className="sponsorSkipLogo sponsorSkipObject"
+                                    className="sponsorSkipLogo sponsorSkipObject"
-                                src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                    src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
-                            </img>
+                                </img>
-
-                            <span id={"sponsorSkipMessage" + this.idSuffix}
-                                style={{float: "left"}}
-                                className="sponsorSkipMessage sponsorSkipObject">
-                                
-                                {this.state.noticeTitle}
-                            </span>
-
-                            {this.props.firstColumn}
-                        </td>
-
-                        {this.props.firstRow}
-
-                        {/* Right column */}
-                        <td className="sponsorSkipNoticeRightSection"
-                            style={{top: this.props.smaller ? "9.32px" : "8px"}}>
-                            
-                            {/* Time left */}
-                            {this.props.timed ? ( 
-                                <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
-                                    onClick={() => this.toggleManualPause()}
-                                    className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
-
-                                    {this.getCountdownElements()}
 
+                                <span id={"sponsorSkipMessage" + this.idSuffix}
+                                    style={{float: "left"}}
+                                    className="sponsorSkipMessage sponsorSkipObject">
+                                    
+                                    {this.state.noticeTitle}
                                 </span>
-                            ) : ""}
-                        
 
-                            {/* Close button */}
+                                {this.props.firstColumn}
-                            <img src={chrome.extension.getURL("icons/close.png")}
+                            </td>
-                                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
-                                onClick={() => this.close()}>
-                            </img>
-                        </td>
-                    </tr> 
 
-                    {this.props.children}
+                            {this.props.firstRow}
 
-                </tbody> 
+                            {/* Right column */}
-            </table>
+                            <td className="sponsorSkipNoticeRightSection"
+                                style={{top: "9.32px"}}>
+                                
+                                {/* Time left */}
+                                {this.props.timed ? ( 
+                                    <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
+                                        onClick={() => this.toggleManualPause()}
+                                        className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
+
+                                        {this.getCountdownElements()}
+
+                                    </span>
+                                ) : ""}
+                            
+
+                                {/* Close button */}
+                                <img src={chrome.extension.getURL("icons/close.png")}
+                                    className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
+                                    onClick={() => this.close()}>
+                                </img>
+                            </td>
+                        </tr> 
+
+                        {this.props.children}
+
+                        {!this.props.smaller ? 
+                            this.props.bottomRow
+                        : null}
+
+                    </tbody> 
+                </table>
+
+                {/* Add as a hidden table to keep the height constant */}
+                {this.props.smaller ? 
+                    <table style={{visibility: "hidden", paddingTop: "14px"}}>
+                        {this.props.bottomRow}
+                    </table>
+                : null}
+            </div>
         );
     }
 
@@ -182,7 +196,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         )];
     }
 
-    onMouseEnter(event: React.MouseEvent<HTMLTableElement, MouseEvent>): void {
+    onMouseEnter(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
 
         this.fadedMouseEnter();

src/components/SkipNoticeComponent.tsx

@@ -145,11 +145,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
         }
 
-        if (this.state.smaller) {
-            // noticeStyle.transform = "translate(0, -45%)";
-            // noticeStyle.bottom = "148px";
-        }
-
         // If it started out as smaller, always keep the 
         // skip button there
         const firstColumn = this.props.smaller ? (
@@ -157,46 +152,26 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         ) : null;
 
         return (
-            <div className="sponsorSkipNoticeParent">
+            <NoticeComponent noticeTitle={this.state.noticeTitle}
-                <NoticeComponent noticeTitle={this.state.noticeTitle}
+                amountOfPreviousNotices={this.amountOfPreviousNotices}
-                    amountOfPreviousNotices={this.amountOfPreviousNotices}
+                idSuffix={this.idSuffix}
-                    idSuffix={this.idSuffix}
+                fadeIn={true}
-                    fadeIn={true}
+                startFaded={true}
-                    startFaded={true}
+                timed={true}
-                    timed={true}
+                maxCountdownTime={this.state.maxCountdownTime}
-                    maxCountdownTime={this.state.maxCountdownTime}
+                videoSpeed={() => this.contentContainer().v?.playbackRate}
-                    videoSpeed={() => this.contentContainer().v?.playbackRate}
+                style={noticeStyle}
-                    style={noticeStyle}
+                ref={this.noticeRef}
-                    ref={this.noticeRef}
+                closeListener={() => this.closeListener()}
-                    closeListener={() => this.closeListener()}
+                smaller={this.state.smaller}
-                    smaller={this.props.smaller}
+                firstColumn={firstColumn}
-                    firstColumn={firstColumn}
+                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
-                    onMouseEnter={() => this.onMouseEnter() } >
+                onMouseEnter={() => this.onMouseEnter() } >
-                        
+                    
-                    {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
+                {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
-                        <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
+                    <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
-                    </audio>}
+                </audio>}
-
+            </NoticeComponent>
-                    {/* Text Boxes */}
-                    {!this.state.smaller ? 
-                        this.getMessageBoxes() 
-                    : null}
-
-                    {!this.state.smaller ? 
-                        this.getBottomRow() 
-                    : null}
-
-                </NoticeComponent>
-
-                {/* Text Boxes */}
-                {this.state.smaller ? (
-                    <table style={{visibility: "hidden", paddingTop: "14px"}}>
-                        {this.getMessageBoxes()}
-
-                        {this.getBottomRow()}
-                    </table>
-                ) : null}
-            </div>
         );
     }
 
@@ -367,14 +342,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
-    getMessageBoxes(): JSX.Element[] | JSX.Element {
+    getMessageBoxes(): JSX.Element[] {
         if (this.state.messages.length === 0) {
             // Add a spacer if there is no text
-            return (
+            return [
                 <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
-                    className="sponsorBlockSpacer">
+                    className="sponsorBlockSpacer"
+                    key={0}>
                 </tr>
-            );
+            ];
         }
 
         const elements: JSX.Element[] = [];