Added basic PoC expanding notice

todo: move code to the general notice

public/content.css

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

src/components/NoticeComponent.tsx

@@ -26,6 +26,7 @@ export interface NoticeProps {
 
     // Callback for when this is closed
     closeListener: () => void,
+    onMouseEnter?: (e: React.MouseEvent<HTMLTableElement, MouseEvent>) => void,
 
     zIndex?: number,
     style?: React.CSSProperties
@@ -99,7 +100,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                         + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
                         + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
                 style={noticeStyle}
-                onMouseEnter={() => { this.timerMouseEnter(); this.fadedMouseEnter(); } }
+                onMouseEnter={(e) => this.onMouseEnter(e) }
                 onMouseLeave={() => this.timerMouseLeave()}>
                 <tbody>
 
@@ -181,6 +182,13 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         )];
     }
 
+    onMouseEnter(event: React.MouseEvent<HTMLTableElement, MouseEvent>): void {
+        if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+
+        this.fadedMouseEnter();
+        this.timerMouseEnter();
+    }
+
     fadedMouseEnter(): void {
         if (this.state.startFaded) {
             this.setState({

src/components/SkipNoticeComponent.tsx

@@ -48,6 +48,8 @@ export interface SkipNoticeState {
     actionState?: SkipNoticeAction;
 
     showKeybindHint?: boolean;
+
+    smaller?: boolean;
 }
 
 class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
@@ -118,7 +120,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
             actionState: SkipNoticeAction.None,
 
-            showKeybindHint: this.props.showKeybindHint ?? true
+            showKeybindHint: this.props.showKeybindHint ?? true,
+
+            smaller: this.props.smaller ?? false
         }
 
         if (!this.autoSkip) {
@@ -141,11 +145,19 @@ 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 ? (
             this.getSkipButton()
         ) : null;
 
         return (
+            <div className="sponsorSkipNoticeParent">
                 <NoticeComponent noticeTitle={this.state.noticeTitle}
                     amountOfPreviousNotices={this.amountOfPreviousNotices}
                     idSuffix={this.idSuffix}
@@ -158,20 +170,41 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     ref={this.noticeRef}
                     closeListener={() => this.closeListener()}
                     smaller={this.props.smaller}
-                firstColumn={firstColumn}>
+                    firstColumn={firstColumn}
+                    onMouseEnter={() => this.onMouseEnter() } >
                         
                     {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
                         <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
                     </audio>}
 
                     {/* Text Boxes */}
-                {!this.props.smaller ? 
+                    {!this.state.smaller ? 
                         this.getMessageBoxes() 
-                : ""}
+                    : null}
 
-                {/* Bottom Row */}
-                {!this.props.smaller ?
-                    (<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
+                    {!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>
+        );
+    }
+
+    getBottomRow(): JSX.Element[] {
+        return [
+            /* Bottom Row */
+            (<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}
+                key={0}>
 
                 {/* Vote Button Container */}
                 {!this.state.thanksForVotingText ?
@@ -209,11 +242,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 }
 
                 {/* Unskip/Skip Button */}
-                        {this.getSkipButton()}
+                {!this.props.smaller ? this.getSkipButton() : null}
 
                 {/* Never show button if autoSkip is enabled */}
                 {!this.autoSkip ? "" : 
-                            <td className="sponsorSkipNoticeRightSection">
+                    <td className="sponsorSkipNoticeRightSection"
+                        key={1}>
                         <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
                             onClick={this.contentContainer().dontShowNoticeAgain}>
 
@@ -221,12 +255,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         </button>
                     </td>
                 }
-                    </tr>)
-                : ""}
+            </tr>),
 
-                {/* Downvote Options Row */}
-                {this.state.downvoting &&
-                    <tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}>
+            /* Downvote Options Row */
+            (this.state.downvoting &&
+                <tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}
+                    key={2}>
                     <td id={"sponsorTimesDownvoteOptionsContainer" + this.idSuffix}>
 
                         {/* Normal downvote */}
@@ -244,11 +278,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     </td>
 
                 </tr>
-                }
+            ),
 
-                {/* Category Chooser Row */}
-                {this.state.choosingCategory &&
-                    <tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}>
+            /* Category Chooser Row */
+            (this.state.choosingCategory &&
+                <tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}
+                    key={3}>
                     <td>
                         {/* Category Selector */}
                         <select id={"sponsorTimeCategories" + this.idSuffix}
@@ -270,19 +305,18 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                         
                     </td>
                 </tr>
-                }
+            ),
 
-                {/* Segment Chooser Row */}
-                {this.state.actionState !== SkipNoticeAction.None &&
-                    <tr id={"sponsorSkipNoticeSubmissionOptionsRow" + this.idSuffix}>
+            /* Segment Chooser Row */
+            (this.state.actionState !== SkipNoticeAction.None &&
+                <tr id={"sponsorSkipNoticeSubmissionOptionsRow" + this.idSuffix}
+                    key={4}>
                     <td id={"sponsorTimesSubmissionOptionsContainer" + this.idSuffix}>
                         {this.getSubmissionChooser()}
                     </td>
                 </tr>
-                }
-
-            </NoticeComponent>
-        );
+            )
+        ];
     }
 
     getSkipButton(): JSX.Element {
@@ -315,6 +349,14 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         return elements;
     }
 
+    onMouseEnter(): void {
+        if (this.state.smaller) {
+            this.setState({
+                smaller: false
+            });
+        }
+    }
+
     prepAction(action: SkipNoticeAction): void {
         if (this.segments.length === 1) {
             this.performAction(0, action);