Added a smaller notice

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",

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;

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>

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>

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,
+    countdownMode: CountdownMode,
-    countdownManuallyPaused: boolean,
+
+    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,
+            countdownMode: CountdownMode.Timer,
-            countdownManuallyPaused: false
+            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();

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">
+                        {this.getSkipButton()}
-                        <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>
 
                         {/* 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[] = [];
 

src/components/SubmissionNoticeComponent.tsx

@@ -13,7 +13,6 @@ export interface SubmissionNoticeProps {
     callback: () => unknown;
 
     closeListener: () => void;
-    smaller: boolean;
 }
 
 export interface SubmissionNoticeeState {

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
         );
     }

src/render/SubmissionNotice.tsx

@@ -47,8 +47,7 @@ class SubmissionNotice {
                 contentContainer={contentContainer}
                 callback={callback} 
                 ref={this.noticeRef}
-                closeListener={() => this.close()}
+                closeListener={() => this.close()} />,
-                smaller={true} />,
             this.noticeElement
         );
     }