Added basic PoC expanding notice

todo: move code to the general notice

public/content.css

@@ -119,13 +119,28 @@
 	margin-left: 5px;
 }
 
-.sponsorSkipNotice {
+.sponsorSkipNoticeParent {
-    min-width: 350px;
+	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;
 
@@ -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,8 +100,8 @@ 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()}> 
+                onMouseLeave={() => this.timerMouseLeave()}>
                 <tbody>
 
                     {/* First row */}
@@ -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,150 +145,180 @@ 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 (
-            <NoticeComponent noticeTitle={this.state.noticeTitle}
+            <div className="sponsorSkipNoticeParent">
-                amountOfPreviousNotices={this.amountOfPreviousNotices}
+                <NoticeComponent noticeTitle={this.state.noticeTitle}
-                idSuffix={this.idSuffix}
+                    amountOfPreviousNotices={this.amountOfPreviousNotices}
-                fadeIn={true}
+                    idSuffix={this.idSuffix}
-                startFaded={true}
+                    fadeIn={true}
-                timed={true}
+                    startFaded={true}
-                maxCountdownTime={this.state.maxCountdownTime}
+                    timed={true}
-                videoSpeed={() => this.contentContainer().v?.playbackRate}
+                    maxCountdownTime={this.state.maxCountdownTime}
-                style={noticeStyle}
+                    videoSpeed={() => this.contentContainer().v?.playbackRate}
-                ref={this.noticeRef}
+                    style={noticeStyle}
-                closeListener={() => this.closeListener()}
+                    ref={this.noticeRef}
-                smaller={this.props.smaller}
+                    closeListener={() => this.closeListener()}
-                firstColumn={firstColumn}>
+                    smaller={this.props.smaller}
-                    
+                    firstColumn={firstColumn}
-                {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
+                    onMouseEnter={() => this.onMouseEnter() } >
-                    <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
+                        
-                </audio>}
+                    {(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.state.smaller ? 
+                        this.getMessageBoxes() 
+                    : null}
+
+                    {!this.state.smaller ? 
+                        this.getBottomRow() 
+                    : null}
+
+                </NoticeComponent>
 
                 {/* Text Boxes */}
-                {!this.props.smaller ? 
+                {this.state.smaller ? (
-                    this.getMessageBoxes() 
+                    <table style={{visibility: "hidden", paddingTop: "14px"}}>
-                : ""}
+                        {this.getMessageBoxes()}
-              
-                {/* Bottom Row */}
-                {!this.props.smaller ?
-                    (<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
 
-                        {/* Vote Button Container */}
+                        {this.getBottomRow()}
-                        {!this.state.thanksForVotingText ?
+                    </table>
-                            <td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
+                ) : null}
-                                className="sponsorTimesVoteButtonsContainer">
+            </div>
-
-                                {/* Upvote Button */}
-                                <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
-                                    className="sponsorSkipObject voteButton"
-                                    style={{marginRight: "10px"}}
-                                    src={chrome.extension.getURL("icons/thumbs_up.svg")}
-                                    title={chrome.i18n.getMessage("upvoteButtonInfo")}
-                                    onClick={() => this.prepAction(SkipNoticeAction.Upvote)}>
-                                
-                                </img>
-
-                                {/* Report Button */}
-                                <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
-                                    className="sponsorSkipObject voteButton"
-                                    src={chrome.extension.getURL("icons/thumbs_down.svg")}
-                                    title={chrome.i18n.getMessage("reportButtonInfo")}
-                                    onClick={() => this.adjustDownvotingState(true)}>
-                                
-                                </img>
-
-                            </td>
-
-                            :
-
-                            <td id={"sponsorTimesVoteButtonInfoMessage" + this.idSuffix}
-                                    className="sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"
-                                    style={{marginRight: "10px"}}>
-                                {this.state.thanksForVotingText}
-                            </td>
-                        }
-
-                        {/* Unskip/Skip Button */}
-                        {this.getSkipButton()}
-
-                        {/* Never show button if autoSkip is enabled */}
-                        {!this.autoSkip ? "" : 
-                            <td className="sponsorSkipNoticeRightSection">
-                                <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
-                                    onClick={this.contentContainer().dontShowNoticeAgain}>
-
-                                    {chrome.i18n.getMessage("Hide")}
-                                </button>
-                            </td>
-                        }
-                    </tr>)
-                : ""}
-
-                {/* Downvote Options Row */}
-                {this.state.downvoting &&
-                    <tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}>
-                        <td id={"sponsorTimesDownvoteOptionsContainer" + this.idSuffix}>
-
-                            {/* Normal downvote */}
-                            <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                                    onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
-                                {chrome.i18n.getMessage("downvoteDescription")}
-                            </button>
-
-                            {/* Category vote */}
-                            <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                                    onClick={() => this.openCategoryChooser()}>
-
-                                {chrome.i18n.getMessage("incorrectCategory")}
-                            </button>
-                        </td>
-
-                    </tr>
-                }
-
-                {/* Category Chooser Row */}
-                {this.state.choosingCategory &&
-                    <tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}>
-                        <td>
-                            {/* Category Selector */}
-                            <select id={"sponsorTimeCategories" + this.idSuffix}
-                                    className="sponsorTimeCategories"
-                                    defaultValue={this.segments[0].category} //Just default to the first segment, as we don't know which they'll choose
-                                    ref={this.categoryOptionRef}>
-
-                                {this.getCategoryOptions()}
-                            </select>
-
-                            {/* Submit Button */}
-                            {this.segments.length === 1 &&
-                                <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                                        onClick={() => this.prepAction(SkipNoticeAction.CategoryVote)}>
-
-                                    {chrome.i18n.getMessage("submit")}
-                                </button>
-                            }
-                            
-                        </td>
-                    </tr>
-                }
-
-                {/* Segment Chooser Row */}
-                {this.state.actionState !== SkipNoticeAction.None &&
-                    <tr id={"sponsorSkipNoticeSubmissionOptionsRow" + this.idSuffix}>
-                        <td id={"sponsorTimesSubmissionOptionsContainer" + this.idSuffix}>
-                            {this.getSubmissionChooser()}
-                        </td>
-                    </tr>
-                }
-
-            </NoticeComponent>
         );
     }
 
+    getBottomRow(): JSX.Element[] {
+        return [
+            /* Bottom Row */
+            (<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}
+                key={0}>
+
+                {/* Vote Button Container */}
+                {!this.state.thanksForVotingText ?
+                    <td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
+                        className="sponsorTimesVoteButtonsContainer">
+
+                        {/* Upvote Button */}
+                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                            className="sponsorSkipObject voteButton"
+                            style={{marginRight: "10px"}}
+                            src={chrome.extension.getURL("icons/thumbs_up.svg")}
+                            title={chrome.i18n.getMessage("upvoteButtonInfo")}
+                            onClick={() => this.prepAction(SkipNoticeAction.Upvote)}>
+                        
+                        </img>
+
+                        {/* Report Button */}
+                        <img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
+                            className="sponsorSkipObject voteButton"
+                            src={chrome.extension.getURL("icons/thumbs_down.svg")}
+                            title={chrome.i18n.getMessage("reportButtonInfo")}
+                            onClick={() => this.adjustDownvotingState(true)}>
+                        
+                        </img>
+
+                    </td>
+
+                    :
+
+                    <td id={"sponsorTimesVoteButtonInfoMessage" + this.idSuffix}
+                            className="sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"
+                            style={{marginRight: "10px"}}>
+                        {this.state.thanksForVotingText}
+                    </td>
+                }
+
+                {/* Unskip/Skip Button */}
+                {!this.props.smaller ? this.getSkipButton() : null}
+
+                {/* Never show button if autoSkip is enabled */}
+                {!this.autoSkip ? "" : 
+                    <td className="sponsorSkipNoticeRightSection"
+                        key={1}>
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            onClick={this.contentContainer().dontShowNoticeAgain}>
+
+                            {chrome.i18n.getMessage("Hide")}
+                        </button>
+                    </td>
+                }
+            </tr>),
+
+            /* Downvote Options Row */
+            (this.state.downvoting &&
+                <tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}
+                    key={2}>
+                    <td id={"sponsorTimesDownvoteOptionsContainer" + this.idSuffix}>
+
+                        {/* Normal downvote */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
+                            {chrome.i18n.getMessage("downvoteDescription")}
+                        </button>
+
+                        {/* Category vote */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                onClick={() => this.openCategoryChooser()}>
+
+                            {chrome.i18n.getMessage("incorrectCategory")}
+                        </button>
+                    </td>
+
+                </tr>
+            ),
+
+            /* Category Chooser Row */
+            (this.state.choosingCategory &&
+                <tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}
+                    key={3}>
+                    <td>
+                        {/* Category Selector */}
+                        <select id={"sponsorTimeCategories" + this.idSuffix}
+                                className="sponsorTimeCategories"
+                                defaultValue={this.segments[0].category} //Just default to the first segment, as we don't know which they'll choose
+                                ref={this.categoryOptionRef}>
+
+                            {this.getCategoryOptions()}
+                        </select>
+
+                        {/* Submit Button */}
+                        {this.segments.length === 1 &&
+                            <button className="sponsorSkipObject sponsorSkipNoticeButton"
+                                    onClick={() => this.prepAction(SkipNoticeAction.CategoryVote)}>
+
+                                {chrome.i18n.getMessage("submit")}
+                            </button>
+                        }
+                        
+                    </td>
+                </tr>
+            ),
+
+            /* Segment Chooser Row */
+            (this.state.actionState !== SkipNoticeAction.None &&
+                <tr id={"sponsorSkipNoticeSubmissionOptionsRow" + this.idSuffix}
+                    key={4}>
+                    <td id={"sponsorTimesSubmissionOptionsContainer" + this.idSuffix}>
+                        {this.getSubmissionChooser()}
+                    </td>
+                </tr>
+            )
+        ];
+    }
+
     getSkipButton(): JSX.Element {
         return (
             <span className="sponsorSkipNoticeUnskipSection">
@@ -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);