Added a smaller notice

2025-12-08 12:37:05 +03:00 · 2021-05-13 20:03:05 -04:00
parent e680099cec
commit ebf3b324b6
9 changed files with 279 additions and 74 deletions
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -40,6 +40,8 @@
        "icons/report.png",
        "icons/close.png",
        "icons/beep.ogg",
+        "icons/pause.svg",
+        "icons/stop.svg",
        "icons/PlayerInfoIconSponsorBlocker256px.png",
        "icons/PlayerDeleteIconSponsorBlocker256px.png",
        "popup.html",
--- a/public/content.css
+++ b/public/content.css
@@ -116,6 +116,10 @@
 	border-collapse: unset;
 }

+.sponsorSkipNotice .hidden {
+	display: none;
+}
+
 .sponsorSkipNoticeFadeIn {
 	animation: fadeIn 0.5s;
 }
@@ -131,9 +135,20 @@
    padding: 2px 5px;
    font-size: 12px;

+	display: flex;
+    align-items: center;
+
 	border: 1px solid #eeeeee;
 }

+.sponsorSkipNoticeTimeLeft img {
+	vertical-align: middle;
+    height: 13px;
+
+	padding-top: 7.8%;
+    padding-bottom: 7.8%;
+}
+
 /* if two are very close to eachother */
 .secondSkipNotice {
 	bottom: 250px;
@@ -141,6 +156,11 @@
  	transition: bottom 0.2s;
 }

+.noticeLeftIcon {
+	display: flex;
+  	align-items: center;
+}
+
 .sponsorSkipNoticeUnskipSection {
 	float: left;

@@ -183,6 +203,8 @@
 	float: right;

 	margin-right: 5px;
+	display: flex;
+	align-items: center;
 }

 .sponsorSkipNoticeRightButton {
@@ -205,7 +227,9 @@
 	font-weight: bold;
 	color: rgb(235, 235, 235);
 	
+	margin-top: auto;
 	display: inline-block;
+	margin-right: 10px;
 }

 .sponsorSkipInfo {
@@ -406,10 +430,6 @@ input::-webkit-inner-spin-button {
    padding: 3px;
 }

-.helpButton {
-
-}
-
 .helpButton {
 	height: 25px;
 	cursor: pointer;
--- a/public/icons/pause.svg
+++ b/public/icons/pause.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="pause.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="730"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>
--- a/public/icons/stop.svg
+++ b/public/icons/stop.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="24px"
+   viewBox="0 0 24 24"
+   width="24px"
+   fill="#000000"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="stop.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="730"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M6 6h12v12H6z"
+     id="path4"
+     style="fill:#ffffff" />
+</svg>
--- 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,17 +156,22 @@ 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 ?
@@ -199,15 +209,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                        }

                        {/* Unskip/Skip Button */}
-                    <td 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>
-                    </td>
+                        {this.getSkipButton()}

                        {/* Never show button if autoSkip is enabled */}
                        {!this.autoSkip ? "" : 
@@ -219,7 +221,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                                </button>
                            </td>
                        }
-                </tr>
+                    </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 {
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -62,7 +62,8 @@ class SkipNotice {
                autoSkip={autoSkip} 
                contentContainer={contentContainer}
                ref={this.skipNoticeRef}
-                closeListener={() => this.close()} />,
+                closeListener={() => this.close()}
+                smaller={true} />,
            this.noticeElement
        );
    }
--- a/src/render/SubmissionNotice.tsx
+++ b/src/render/SubmissionNotice.tsx
@@ -47,8 +47,7 @@ class SubmissionNotice {
                contentContainer={contentContainer}
                callback={callback} 
                ref={this.noticeRef}
-                closeListener={() => this.close()}
-                smaller={true} />,
+                closeListener={() => this.close()} />,
            this.noticeElement
        );
    }