Added a smaller notice

2025-12-13 06:57:09 +03:00 · 2021-05-13 20:03:05 -04:00
parent e680099cec
commit ebf3b324b6
9 changed files with 279 additions and 74 deletions
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -1,5 +1,11 @@
 import * as React from "react";

+enum CountdownMode {
+    Timer,
+    Paused,
+    Stopped
+}
+
 export interface NoticeProps {
    noticeTitle: string,

@@ -11,6 +17,10 @@ export interface NoticeProps {
    videoSpeed?: () => number,

    fadeIn?: boolean,
+    firstColumn?: React.ReactElement,
+    firstRow?: React.ReactElement,
+
+    smaller?: boolean,

    // Callback for when this is closed
    closeListener: () => void,
@@ -24,8 +34,9 @@ export interface NoticeState {
    maxCountdownTime: () => number,

    countdownTime: number,
-    countdownText: string,
-    countdownManuallyPaused: boolean,
+    countdownMode: CountdownMode,
+
+    mouseHovering: boolean;
 }

 class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
@@ -59,8 +70,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

            //the countdown until this notice closes
            countdownTime: maxCountdownTime(),
-            countdownText: null,
-            countdownManuallyPaused: false
+            countdownMode: CountdownMode.Timer,
+            mouseHovering: false
        }
    }

@@ -86,7 +97,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                    {/* First row */}
                    <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
                        {/* Left column */}
-                        <td>
+                        <td className="noticeLeftIcon">
                            {/* Logo */}
                            <img id={"sponsorSkipLogo" + this.idSuffix} 
                                className="sponsorSkipLogo sponsorSkipObject"
@@ -99,11 +110,15 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                
                                {this.state.noticeTitle}
                            </span>
+
+                            {this.props.firstColumn}
                        </td>

+                        {this.props.firstRow}
+
                        {/* Right column */}
                        <td className="sponsorSkipNoticeRightSection"
-                            style={{top: "11px"}}>
+                            style={{top: this.props.smaller ? "9.32px" : "8px"}}>
                            
                            {/* Time left */}
                            {this.props.timed ? ( 
@@ -111,7 +126,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                    onClick={() => this.toggleManualPause()}
                                    className="sponsorSkipObject sponsorSkipNoticeTimeLeft">

-                                    {this.state.countdownText || (this.state.countdownTime + "s")}
+                                    {this.getCountdownElements()}
+
                                </span>
                            ) : ""}
                        
@@ -131,23 +147,56 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
        );
    }

+    getCountdownElements(): React.ReactElement[] {
+        return [(
+                    <span 
+                        id={"skipNoticeTimerText" + this.idSuffix}
+                        key="skipNoticeTimerText"
+                        className={this.state.countdownMode !== CountdownMode.Timer ? "hidden" : ""} >
+                            {this.state.countdownTime + "s"}
+                    </span>
+                ),(
+                    <img 
+                        id={"skipNoticeTimerPaused" + this.idSuffix}
+                        key="skipNoticeTimerPaused"
+                        className={this.state.countdownMode !== CountdownMode.Paused ? "hidden" : ""}
+                        src={chrome.runtime.getURL("icons/pause.svg")}
+                        alt={chrome.i18n.getMessage("paused")} />
+                ),(
+                    <img 
+                        id={"skipNoticeTimerStopped" + this.idSuffix}
+                        key="skipNoticeTimerStopped"
+                        className={this.state.countdownMode !== CountdownMode.Stopped ? "hidden" : ""}
+                        src={chrome.runtime.getURL("icons/stop.svg")}
+                        alt={chrome.i18n.getMessage("manualPaused")} />
+        )];
+    }
+
    timerMouseEnter(): void {
-        if (this.state.countdownManuallyPaused) return;
+        if (this.state.countdownMode === CountdownMode.Stopped) return;

        this.pauseCountdown();
+
+        this.setState({
+            mouseHovering: true
+        });
    }

    timerMouseLeave(): void {
-        if (this.state.countdownManuallyPaused) return;
+        if (this.state.countdownMode === CountdownMode.Stopped) return;

        this.startCountdown();
+
+        this.setState({
+            mouseHovering: false
+        });
    }

    toggleManualPause(): void {
        this.setState({
-            countdownManuallyPaused: !this.state.countdownManuallyPaused
+            countdownMode: this.state.countdownMode === CountdownMode.Stopped ? CountdownMode.Timer : CountdownMode.Stopped
        }, () => {
-            if (this.state.countdownManuallyPaused) {
+            if (this.state.countdownMode === CountdownMode.Stopped || this.state.mouseHovering) {
                this.pauseCountdown();
            } else {
                this.startCountdown();
@@ -204,7 +253,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
        //reset countdown and inform the user
        this.setState({
            countdownTime: this.state.maxCountdownTime(),
-            countdownText: this.state.countdownManuallyPaused ? chrome.i18n.getMessage("manualPaused") : chrome.i18n.getMessage("paused")
+            countdownMode: this.state.countdownMode === CountdownMode.Timer ? CountdownMode.Paused : this.state.countdownMode
        });
        
        this.removeFadeAnimation();
@@ -218,7 +267,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

        this.setState({
            countdownTime: this.state.maxCountdownTime(),
-            countdownText: null
+            countdownMode: CountdownMode.Timer
        });

        this.setupInterval();
@@ -240,7 +289,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

        this.setState({
            countdownTime: this.state.maxCountdownTime(),
-            countdownText: null
+            countdownMode: CountdownMode.Timer
        });

        this.removeFadeAnimation();
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -25,6 +25,7 @@ export interface SkipNoticeProps {

    closeListener: () => void;
    showKeybindHint?: boolean;
+    smaller: boolean;
 }

 export interface SkipNoticeState {
@@ -142,6 +143,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
        }

+        const firstColumn = this.props.smaller ? (
+            this.getSkipButton()
+        ) : null;
+
        return (
            <NoticeComponent noticeTitle={this.state.noticeTitle}
                amountOfPreviousNotices={this.amountOfPreviousNotices}
@@ -151,75 +156,73 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                maxCountdownTime={this.state.maxCountdownTime}
                videoSpeed={() => this.contentContainer().v?.playbackRate}
                ref={this.noticeRef}
-                closeListener={() => this.closeListener()}>
+                closeListener={() => this.closeListener()}
+                smaller={this.props.smaller}
+                firstColumn={firstColumn}>
                    
                {(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.getMessageBoxes()}
+                {!this.props.smaller ? 
+                    this.getMessageBoxes() 
+                : ""}
              
                {/* Bottom Row */}
-                <tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
+                {!this.props.smaller ?
+                    (<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>

-                    {/* Vote Button Container */}
-                    {!this.state.thanksForVotingText ?
-                        <td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
-                            className="sponsorTimesVoteButtonsContainer">
+                        {/* 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>
+                                {/* 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>
+                                {/* 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>

-                        :
+                            :

-                        <td id={"sponsorTimesVoteButtonInfoMessage" + this.idSuffix}
-                                className="sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"
-                                style={{marginRight: "10px"}}>
-                            {this.state.thanksForVotingText}
-                        </td>
-                    }
+                            <td id={"sponsorTimesVoteButtonInfoMessage" + this.idSuffix}
+                                    className="sponsorTimesInfoMessage sponsorTimesVoteButtonMessage"
+                                    style={{marginRight: "10px"}}>
+                                {this.state.thanksForVotingText}
+                            </td>
+                        }

-                    {/* Unskip/Skip Button */}
-                    <td className="sponsorSkipNoticeUnskipSection">
-                        <button id={"sponsorSkipUnskipButton" + this.idSuffix}
-                            className="sponsorSkipObject sponsorSkipNoticeButton"
-                            style={{marginLeft: "4px"}}
-                            onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
+                        {/* Unskip/Skip Button */}
+                        {this.getSkipButton()}

-                            {this.state.unskipText + (this.state.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "")}
-                        </button>
-                    </td>
+                        {/* Never show button if autoSkip is enabled */}
+                        {!this.autoSkip ? "" : 
+                            <td className="sponsorSkipNoticeRightSection">
+                                <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                                    onClick={this.contentContainer().dontShowNoticeAgain}>

-                    {/* 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>
+                                    {chrome.i18n.getMessage("Hide")}
+                                </button>
+                            </td>
+                        }
+                    </tr>)
+                : ""}

                {/* Downvote Options Row */}
                {this.state.downvoting &&
@@ -283,6 +286,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        );
    }

+    getSkipButton(): JSX.Element {
+        return (
+            <span className="sponsorSkipNoticeUnskipSection">
+                <button id={"sponsorSkipUnskipButton" + this.idSuffix}
+                    className="sponsorSkipObject sponsorSkipNoticeButton"
+                    style={{marginLeft: "4px"}}
+                    onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
+
+                    {this.state.unskipText + (this.state.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "")}
+                </button>
+            </span>
+        );
+    }
+
    getSubmissionChooser(): JSX.Element[] {
        const elements: JSX.Element[] = [];

--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -13,7 +13,6 @@ export interface SubmissionNoticeProps {
    callback: () => unknown;

    closeListener: () => void;
-    smaller: boolean;
 }

 export interface SubmissionNoticeeState {