Merge branch 'master' of https://github.com/ajayyy/SponsorBlock into chapters

2025-12-12 14:37:23 +03:00 · 2022-06-03 02:20:30 -04:00
parent 621e28c7e7 a18f431e06
commit c3cb450e92
48 changed files with 4931 additions and 3459 deletions
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -18,6 +18,7 @@ export interface CategorySkipOptionsState {
 }

 class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
+    setBarColorTimeout: NodeJS.Timeout;

    constructor(props: CategorySkipOptionsProps) {
        super(props);
@@ -175,6 +176,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
    }

    setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean): void {
+        clearTimeout(this.setBarColorTimeout);
+
        if (preview) {
            this.setState({
                previewColor: event.currentTarget.value
@@ -191,7 +194,9 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
        }

        // Make listener get called
-        Config.config.barTypes = Config.config.barTypes;
+        this.setBarColorTimeout = setTimeout(() => {
+            Config.config.barTypes = Config.config.barTypes;
+        }, 50);
    }
 }

--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -24,6 +24,7 @@ export interface NoticeProps {

    smaller?: boolean,
    limitWidth?: boolean,
+    extraClass?: string,

    // Callback for when this is closed
    closeListener: () => void,
@@ -35,8 +36,6 @@ export interface NoticeProps {
 }

 export interface NoticeState {
-    noticeTitle: string,
-
    maxCountdownTime: () => number,

    countdownTime: number,
@@ -54,9 +53,13 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

    amountOfPreviousNotices: number;

+    parentRef: React.RefObject<HTMLDivElement>;
+
    constructor(props: NoticeProps) {
        super(props);

+        this.parentRef = React.createRef();
+
        const maxCountdownTime = () => {
            if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
            else return Config.config.skipNoticeDuration;
@@ -71,8 +74,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

        // Setup state
        this.state = {
-            noticeTitle: props.noticeTitle,
-
            maxCountdownTime,

            //the countdown until this notice closes
@@ -97,9 +98,11 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
        return (
            <div id={"sponsorSkipNotice" + this.idSuffix} 
                className={"sponsorSkipObject sponsorSkipNoticeParent"
-                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")}
+                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")
+                    + (this.props.extraClass ? ` ${this.props.extraClass}` : "")}
                onMouseEnter={(e) => this.onMouseEnter(e) }
                onMouseLeave={() => this.timerMouseLeave()}
+                ref={this.parentRef}
                style={noticeStyle} >
                <div className={"sponsorSkipNoticeTableContainer" 
                        + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
@@ -123,7 +126,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                        style={{float: "left"}}
                                        className="sponsorSkipMessage sponsorSkipObject">
                                        
-                                        {this.state.noticeTitle}
+                                        {this.props.noticeTitle}
                                    </span>

                                    {this.props.firstColumn}
@@ -344,12 +347,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
        if (!silent) this.props.closeListener();
    }

-    changeNoticeTitle(title: string): void {
-        this.setState({
-            noticeTitle: title
-        });
-    }
-    
    addNoticeInfoMessage(message: string, message2 = ""): void {
        //TODO: Replace

@@ -384,6 +381,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
            document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
        }
    }
+
+    getElement(): React.RefObject<HTMLDivElement> {
+        return this.parentRef;
+    }
 }

 export default NoticeComponent;
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/src/components/NoticeTextSectionComponent.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";

 export interface NoticeTextSelectionProps {
+    icon?: string,
    text: string,
    idSuffix: string,
    onClick?: (event: React.MouseEvent) => unknown
@@ -24,12 +25,21 @@ class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionPr
        }

        return (
-            <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+            <tr id={"sponsorTimesInfoMessage" + this.props.idSuffix}
                onClick={this.props.onClick}
                style={style}
                className="sponsorTimesInfoMessage">
-                    {this.props.text}
-            </p>
+                    
+                <td>
+                    {this.props.icon ? 
+                        <img src={chrome.runtime.getURL(this.props.icon)} className="sponsorTimesInfoIcon" /> 
+                    : null}
+
+                    <span>
+                        {this.props.text}
+                    </span>
+                </td>
+            </tr>
        );
    }
 }
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, SponsorHideType, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
+import { Category, ContentContainer, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
@@ -73,7 +73,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta

    amountOfPreviousNotices: number;
    showInSecondSlot: boolean;
-    
+
    idSuffix: string;

    noticeRef: React.MutableRefObject<NoticeComponent>;
@@ -106,7 +106,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        if (this.segments.length > 1) {
            this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
        }
-    
+
        // This is the suffix added at the end of every id
        for (const segment of this.segments) {
            this.idSuffix += segment.UUID;
@@ -169,7 +169,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
        }

-        // If it started out as smaller, always keep the 
+        // If it started out as smaller, always keep the
        // skip button there
        const showFirstSkipButton = this.props.smaller || this.segments[0].actionType === ActionType.Mute;
        const firstColumn = showFirstSkipButton ? (
@@ -182,7 +182,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                showInSecondSlot={this.showInSecondSlot}
                idSuffix={this.idSuffix}
                fadeIn={true}
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll 
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
                timed={true}
                maxCountdownTime={this.state.maxCountdownTime}
@@ -206,7 +206,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                key={0}>

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

@@ -269,7 +269,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                    ? this.getSkipButton(1) : null}

                {/* Never show button */}
-                {!this.autoSkip || this.props.startReskip ? "" : 
+                {!this.autoSkip || this.props.startReskip ? "" :
                    <td className="sponsorSkipNoticeRightSection"
                        key={1}>
                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
@@ -344,7 +344,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
    }

    getSkipButton(buttonIndex: number): JSX.Element {
-        if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1 
+        if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1
                || this.segments[0].actionType !== ActionType.Poi
                || this.props.unskipTime)) {

@@ -366,8 +366,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                            className="sponsorSkipObject sponsorSkipNoticeButton"
                            style={style}
                            onClick={() => this.prepAction(buttonIndex === 1 ? SkipNoticeAction.Unskip1 : SkipNoticeAction.Unskip0)}>
-                        {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null) 
-                            + (!forceSeek && this.state.showKeybindHint 
+                        {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null)
+                            + (!forceSeek && this.state.showKeybindHint
                                ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
                    </button>
                </span>
@@ -380,7 +380,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        for (let i = 0; i < this.segments.length; i++) {
            elements.push(
                <button className="sponsorSkipObject sponsorSkipNoticeButton"
-                        style={{opacity: this.getSubmissionChooserOpacity(i), 
+                        style={{opacity: this.getSubmissionChooserOpacity(i),
                                color: this.getSubmissionChooserColor(i)}}
                        onClick={() => this.performAction(i)}
                        key={"submission" + i + this.segments[i].category + this.idSuffix}>
@@ -405,7 +405,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
    getSubmissionChooserColor(index: number): string {
        const isDownvote = this.state.actionState == SkipNoticeAction.Downvote;
        const isCopyDownvote = this.state.actionState == SkipNoticeAction.CopyDownvote;
-        const shouldWarnUser = Config.config.isVip && (isDownvote || isCopyDownvote) 
+        const shouldWarnUser = Config.config.isVip && (isDownvote || isCopyDownvote)
                                        && this.segments[index].locked === 1;

        return shouldWarnUser ? this.lockedColor : this.unselectedColor;
@@ -481,8 +481,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta

    /**
     * Performs the action from the current state
-     * 
-     * @param index 
+     *
+     * @param index
     */
    performAction(index: number, action?: SkipNoticeAction): void {
        switch (action ?? this.state.actionState) {
@@ -618,11 +618,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            countdownTime: Config.config.skipNoticeDuration
        };

-        // See if the title should be changed
-        if (!this.autoSkip) {
-            newState.noticeTitle = chrome.i18n.getMessage("noticeTitle");
-        }       
-
        //reset countdown
        this.setState(newState, () => {
            this.noticeRef.current.resetCountdown();
@@ -724,7 +719,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            messages
        });
    }
-    
+
    addVoteButtonInfo(message: string): void {
        this.setState({
            thanksForVotingText: message
@@ -787,7 +782,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            case ActionType.Mute: {
                return chrome.i18n.getMessage("unmute");
            }
-            case ActionType.Skip: 
+            case ActionType.Skip:
            default: {
                return chrome.i18n.getMessage("unskip");
            }
@@ -800,7 +795,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            case ActionType.Mute: {
                return chrome.i18n.getMessage("mute");
            }
-            case ActionType.Skip: 
+            case ActionType.Skip:
            default: {
                return chrome.i18n.getMessage("reskip");
            }
@@ -813,7 +808,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            case ActionType.Mute: {
                return chrome.i18n.getMessage("mute");
            }
-            case ActionType.Skip: 
+            case ActionType.Skip:
            default: {
                return chrome.i18n.getMessage("skip");
            }
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -20,6 +20,7 @@ export interface SponsorTimeEditProps {

    submissionNotice: SubmissionNoticeComponent;
    categoryList?: Category[];
+    categoryChangeListener?: (index: number, category: Category) => void;
 }

 export interface SponsorTimeEditState {
@@ -419,6 +420,10 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
        this.handleReplacingLostTimes(chosenCategory, sponsorTime.actionType, sponsorTime);
        this.saveEditTimes();
+
+        if (this.props.categoryChangeListener) {
+            this.props.categoryChangeListener(this.props.index, chosenCategory);
+        }
    }

    actionTypeSelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -1,10 +1,13 @@
 import * as React from "react";
 import Config from "../config"
-import { ContentContainer } from "../types";
+import GenericNotice from "../render/GenericNotice";
+import { Category, ContentContainer } from "../types";
+import * as CompileConfig from "../../config.json";

 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
+import { getGuidelineInfo } from "../utils/constants";

 export interface SubmissionNoticeProps { 
    // Contains functions and variables from the content script needed by the skip notice
@@ -32,6 +35,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S

    videoObserver: MutationObserver;

+    guidelinesReminder: GenericNotice;
+
    constructor(props: SubmissionNoticeProps) {
        super(props);
        this.noticeRef = React.createRef();
@@ -135,6 +140,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                    index={i}
                    contentContainer={this.props.contentContainer}
                    submissionNotice={this}
+                    categoryChangeListener={this.categoryChangeListener.bind(this)}
                    ref={timeRef}>
                </SponsorTimeEditComponent>
            );
@@ -161,6 +167,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
    }

    cancel(): void {
+        this.guidelinesReminder?.close();
        this.noticeRef.current.close(true);

        this.contentContainer().resetSponsorSubmissionNotice();
@@ -207,6 +214,45 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S

        this.forceUpdate();
    }
+
+    categoryChangeListener(index: number, category: Category): void {
+        const dialogWidth = this.noticeRef?.current?.getElement()?.current?.offsetWidth;
+        if (category !== "chooseACategory" && Config.config.showCategoryGuidelines
+                && this.contentContainer().v.offsetWidth > dialogWidth * 2) {
+            const options = {
+                title:  chrome.i18n.getMessage(`category_${category}`),
+                textBoxes: getGuidelineInfo(category),
+                buttons: [{
+                        name: chrome.i18n.getMessage("FullDetails"),
+                        listener: () => window.open(CompileConfig.wikiLinks[category])
+                    },
+                    {
+                        name: chrome.i18n.getMessage("Hide"),
+                        listener: () => {
+                            Config.config.showCategoryGuidelines = false;
+                            this.guidelinesReminder?.close();
+                            this.guidelinesReminder = null;
+                        }
+                }],
+                timed: false,
+                style: {
+                    right: `${dialogWidth + 10}px`,
+                },
+                extraClass: "sb-guidelines-notice"
+            };
+
+            if (options.textBoxes) {
+                if (this.guidelinesReminder) {
+                    this.guidelinesReminder.update(options);
+                } else {
+                    this.guidelinesReminder = new GenericNotice(null, "GuidelinesReminder", options);
+                }
+            } else {
+                this.guidelinesReminder?.close();
+                this.guidelinesReminder = null;
+            }
+        }
+    }
 }

 export default SubmissionNoticeComponent;
--- a/src/components/TooltipComponent.tsx
+++ b/src/components/TooltipComponent.tsx
@@ -1,6 +1,4 @@
 import * as React from "react";
-import Config from "../config";
-import { Category, SegmentUUID, SponsorTime } from "../types";

 export interface TooltipProps {
    text: string;