+ className="small-description categoryTableDescription">
{chrome.i18n.getMessage("category_" + this.props.category + "_description")}
@@ -149,10 +153,13 @@ class CategorySkipOptionsComponent extends React.Component
- {chrome.i18n.getMessage(optionName)}
+ {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategoryActionType(this.props.category)
+ : optionName)}
);
}
diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index 38638de2..4c088258 100644
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -1,20 +1,34 @@
import * as React from "react";
import Config from "../config";
+enum CountdownMode {
+ Timer,
+ Paused,
+ Stopped
+}
+
export interface NoticeProps {
noticeTitle: string,
maxCountdownTime?: () => number,
amountOfPreviousNotices?: number,
+ showInSecondSlot?: boolean,
timed?: boolean,
idSuffix?: string,
videoSpeed?: () => number,
fadeIn?: boolean,
+ startFaded?: boolean,
+ firstColumn?: React.ReactElement,
+ firstRow?: React.ReactElement,
+ bottomRow?: React.ReactElement[],
+
+ smaller?: boolean,
// Callback for when this is closed
closeListener: () => void,
+ onMouseEnter?: (e: React.MouseEvent) => void,
zIndex?: number,
style?: React.CSSProperties
@@ -26,8 +40,11 @@ export interface NoticeState {
maxCountdownTime: () => number,
countdownTime: number,
- countdownText: string,
- countdownManuallyPaused: boolean,
+ countdownMode: CountdownMode,
+
+ mouseHovering: boolean;
+
+ startFaded: boolean;
}
class NoticeComponent extends React.Component {
@@ -61,8 +78,10 @@ class NoticeComponent extends React.Component {
//the countdown until this notice closes
countdownTime: maxCountdownTime(),
- countdownText: null,
- countdownManuallyPaused: false
+ countdownMode: CountdownMode.Timer,
+ mouseHovering: false,
+
+ startFaded: this.props.startFaded ?? false
}
}
@@ -77,80 +96,149 @@ class NoticeComponent extends React.Component {
}
return (
-
+
+ {/* Add as a hidden table to keep the height constant */}
+ {this.props.smaller && this.props.bottomRow ?
+
+
+ {this.props.bottomRow}
+
+
+ : null}
+
);
}
+ getCountdownElements(): React.ReactElement[] {
+ return [(
+
+ {this.state.countdownTime + "s"}
+
+ ),(
+ ): void {
+ if (this.props.onMouseEnter) this.props.onMouseEnter(event);
+
+ this.fadedMouseEnter();
+ this.timerMouseEnter();
+ }
+
+ fadedMouseEnter(): void {
+ if (this.state.startFaded) {
+ this.setState({
+ startFaded: false
+ });
+ }
+ }
+
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();
@@ -207,7 +295,7 @@ class NoticeComponent extends React.Component {
//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();
@@ -221,7 +309,7 @@ class NoticeComponent extends React.Component {
this.setState({
countdownTime: this.state.maxCountdownTime(),
- countdownText: null
+ countdownMode: CountdownMode.Timer
});
this.setupInterval();
@@ -243,7 +331,7 @@ class NoticeComponent extends React.Component {
this.setState({
countdownTime: this.state.maxCountdownTime(),
- countdownText: null
+ countdownMode: CountdownMode.Timer
});
this.removeFadeAnimation();
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index f8269e88..b3231404 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -1,10 +1,12 @@
import * as React from "react";
import * as CompileConfig from "../../config.json";
import Config from "../config"
-import { ContentContainer, SponsorHideType, SponsorTime } from "../types";
+import { Category, ContentContainer, CategoryActionType, SponsorHideType, SponsorTime } from "../types";
import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
+import { getCategoryActionType, getSkippingText } from "../utils/categoryUtils";
+
export enum SkipNoticeAction {
None,
Upvote,
@@ -20,7 +22,11 @@ export interface SkipNoticeProps {
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
- closeListener: () => void
+ closeListener: () => void;
+ showKeybindHint?: boolean;
+ smaller: boolean;
+
+ unskipTime?: number;
}
export interface SkipNoticeState {
@@ -41,6 +47,10 @@ export interface SkipNoticeState {
thanksForVotingText?: string; //null until the voting buttons should be hidden
actionState?: SkipNoticeAction;
+
+ showKeybindHint?: boolean;
+
+ smaller?: boolean;
}
class SkipNoticeComponent extends React.Component {
@@ -50,6 +60,7 @@ class SkipNoticeComponent extends React.Component 1 ? "multipleSegments"
- : "category_" + this.segments[0].category + "_short") || chrome.i18n.getMessage("category_" + this.segments[0].category);
- let noticeTitle = categoryName + " " + chrome.i18n.getMessage("skipped");
- if (!this.autoSkip) {
- noticeTitle = chrome.i18n.getMessage("skip_category").replace("{0}", categoryName);
- }
+ const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
- //add notice
- this.amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+ const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
+ this.amountOfPreviousNotices = previousSkipNotices.length;
+ // If there is at least one already in the first slot
+ this.showInSecondSlot = previousSkipNotices.length > 0 && [...previousSkipNotices].some(notice => !notice.classList.contains("secondSkipNotice"));
// Sort segments
if (this.segments.length > 1) {
@@ -109,7 +117,11 @@ class SkipNoticeComponent extends React.Component this.contentContainer().v?.playbackRate}
style={noticeStyle}
ref={this.noticeRef}
- closeListener={() => this.closeListener()}>
+ closeListener={() => this.closeListener()}
+ smaller={this.state.smaller}
+ firstColumn={firstColumn}
+ bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
+ onMouseEnter={() => this.onMouseEnter() } >
{(Config.config.audioNotificationOnSkip) && { this.audio = source; }}>
}
+
+ );
+ }
- {/* Text Boxes */}
- {this.getMessageBoxes()}
-
- {/* Bottom Row */}
- ),
+
+ /* Downvote Options Row */
+ (this.state.downvoting &&
+
+ ),
- {/* Downvote Options Row */}
- {this.state.downvoting &&
-
+ ),
- {/* Category vote */}
- this.openCategoryChooser()}>
+ /* Segment Chooser Row */
+ (this.state.actionState !== SkipNoticeAction.None &&
+
+ )
+ ];
+ }
- {chrome.i18n.getMessage("incorrectCategory")}
-
-
+ getSkipButton(): JSX.Element {
+ if (this.segments.length > 1
+ || getCategoryActionType(this.segments[0].category) !== CategoryActionType.POI
+ || this.props.unskipTime) {
+ return (
+
+
- }
-
- {/* Category Chooser Row */}
- {this.state.choosingCategory &&
-
- }
-
- {/* Segment Chooser Row */}
- {this.state.actionState !== SkipNoticeAction.None &&
-
- }
-
-
- );
+ {this.state.unskipText + (this.state.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "")}
+
+
+ );
+ }
}
getSubmissionChooser(): JSX.Element[] {
@@ -289,6 +328,14 @@ class SkipNoticeComponent extends React.Component![]({chrome.extension.getURL("icons/IconSponsorBlocker256px.png")})
-
+ {/* First row */}
+ ![]({chrome.extension.getURL("icons/close.png")})
this.close()}>
-
- ![{chrome.i18n.getMessage("paused")}]({chrome.runtime.getURL("icons/pause.svg")})
+ ),(
+ ![{chrome.i18n.getMessage("manualPaused")}]({chrome.runtime.getURL("icons/stop.svg")})
+ )];
+ }
+
+ onMouseEnter(event: React.MouseEvent![]({chrome.extension.getURL("icons/thumbs_up.svg")} "{chrome.i18n.getMessage(\"upvoteButtonInfo\")}")
this.prepAction(SkipNoticeAction.Upvote)}>
-
-
+ {/* Upvote Button */}
+ ![]({chrome.extension.getURL("icons/thumbs_down.svg")} "{chrome.i18n.getMessage(\"reportButtonInfo\")}")
this.adjustDownvotingState(true)}>
-
-
+ {/* Report Button */}
+