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

2025-12-10 05:27:03 +03:00 · 2022-01-16 15:58:09 -05:00
parent 7895b9d2c1 b6c1ee1743
commit e2d56d32fe
62 changed files with 2954 additions and 653 deletions
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -0,0 +1,125 @@
+import * as React from "react";
+import Config from "../config";
+import { Category, SegmentUUID, SponsorTime } from "../types";
+
+import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
+import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
+import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
+import { VoteResponse } from "../messageTypes";
+import { AnimationUtils } from "../utils/animationUtils";
+import { GenericUtils } from "../utils/genericUtils";
+
+export interface CategoryPillProps {
+    vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
+}
+
+export interface CategoryPillState {
+    segment?: SponsorTime;
+    show: boolean;
+    open?: boolean;
+}
+
+class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
+
+    constructor(props: CategoryPillProps) {
+        super(props);
+
+        this.state = {
+            segment: null,
+            show: false,
+            open: false
+        };
+    }
+
+    render(): React.ReactElement {
+        const style: React.CSSProperties = {
+            backgroundColor: this.getColor(),
+            display: this.state.show ? "flex" : "none",
+            color: this.state.segment?.category === "sponsor" 
+                || this.state.segment?.category === "exclusive_access" ? "white" : "black",
+        }
+
+        return (
+            <span style={style}
+                className={"sponsorBlockCategoryPill"} 
+                title={this.getTitleText()}
+                onClick={(e) => this.toggleOpen(e)}>
+                <span className="sponsorBlockCategoryPillTitleSection">
+                    <img className="sponsorSkipLogo sponsorSkipObject"
+                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                    </img>
+                    <span className="sponsorBlockCategoryPillTitle">
+                        {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
+                    </span>
+                </span>
+
+                {this.state.open && (
+                    <>
+                        {/* Upvote Button */}
+                        <div id={"sponsorTimesDownvoteButtonsContainerUpvoteCategoryPill"}
+                                className="voteButton"
+                                style={{marginLeft: "5px"}}
+                                title={chrome.i18n.getMessage("upvoteButtonInfo")}
+                                onClick={(e) => this.vote(e, 1)}>
+                            <ThumbsUpSvg fill={Config.config.colorPalette.white} />
+                        </div>
+
+                        {/* Downvote Button */}
+                        <div id={"sponsorTimesDownvoteButtonsContainerDownvoteCategoryPill"}
+                                className="voteButton"
+                                title={chrome.i18n.getMessage("reportButtonInfo")}
+                                onClick={(event) => this.vote(event, 0)}>
+                            <ThumbsDownSvg fill={downvoteButtonColor(null, null, SkipNoticeAction.Downvote)} />
+                        </div>
+                    </>
+                )}
+
+                {/* Close Button */}
+                <img src={chrome.extension.getURL("icons/close.png")}
+                    className="categoryPillClose"
+                    onClick={() => this.setState({ show: false })}>
+                </img>
+            </span>
+        );
+    }
+
+    private toggleOpen(event: React.MouseEvent): void {
+        event.stopPropagation();
+
+        if (this.state.show) {
+            this.setState({ open: !this.state.open });
+        }
+    }
+
+    private async vote(event: React.MouseEvent, type: number): Promise<void> {
+        event.stopPropagation();
+        if (this.state.segment) {
+            const stopAnimation = AnimationUtils.applyLoadingAnimation(event.currentTarget as HTMLElement, 0.3);
+
+            const response = await this.props.vote(type, this.state.segment.UUID);
+            await stopAnimation();
+
+            if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+                this.setState({ 
+                    open: false, 
+                    show: type === 1
+                });
+            } else if (response.statusCode !== 403) {
+                alert(GenericUtils.getErrorMessage(response.statusCode, response.responseText));
+            }
+        }
+    }
+
+    private getColor(): string {
+        const configObject = Config.config.barTypes["preview-" + this.state.segment?.category] 
+            || Config.config.barTypes[this.state.segment?.category];
+        return configObject?.color;
+    }
+
+    getTitleText(): string {
+        const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
+        return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");
+    }
+}
+
+export default CategoryPillComponent;
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -4,7 +4,7 @@ import Config from "../config"
 import * as CompileConfig from "../../config.json";
 import { Category, CategorySkipOption } from "../types";

-import { getCategoryActionType } from "../utils/categoryUtils";
+import { getCategorySuffix } from "../utils/categoryUtils";

 export interface CategorySkipOptionsProps { 
    category: Category;
@@ -80,7 +80,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                        </td>
                    }

-                    {this.props.category !== "chapter" &&
+                    {!["chapter", "exclusive_access"].includes(this.props.category) &&
                        <td id={this.props.category + "PreviewColorOption"}
                            className="previewColorOption">
                            <input
@@ -160,11 +160,12 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr

        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
        if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
+        else if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];

        for (const optionName of optionNames) {
            elements.push(
                <option key={optionName} value={optionName}>
-                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategoryActionType(this.props.category) 
+                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category) 
                                                                     : optionName)}
                </option>
            );
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -16,8 +16,6 @@ export interface NoticeProps {
    timed?: boolean,
    idSuffix?: string,

-    videoSpeed?: () => number,
-
    fadeIn?: boolean,
    startFaded?: boolean,
    firstColumn?: React.ReactElement,
@@ -51,7 +49,6 @@ export interface NoticeState {

 class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
    countdownInterval: NodeJS.Timeout;
-    intervalVideoSpeed: number;

    idSuffix: string;

@@ -259,10 +256,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {

        const countdownTime = Math.min(this.state.countdownTime - 1, this.state.maxCountdownTime());

-        if (this.props.videoSpeed && this.intervalVideoSpeed != this.props.videoSpeed()) {
-            this.setupInterval();
-        }
-
        if (countdownTime <= 0) {
            //remove this from setInterval
            clearInterval(this.countdownInterval);
@@ -325,10 +318,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
    setupInterval(): void {
        if (this.countdownInterval) clearInterval(this.countdownInterval);

-        const intervalDuration = this.props.videoSpeed ? 1000 / this.props.videoSpeed() : 1000;
-        this.countdownInterval = setInterval(this.countdown.bind(this), intervalDuration);
-
-        if (this.props.videoSpeed) this.intervalVideoSpeed = this.props.videoSpeed();
+        this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
    }

    resetCountdown(): void {
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -4,7 +4,6 @@ import Config from "../config"
 import { Category, ContentContainer, CategoryActionType, SponsorHideType, SponsorTime, NoticeVisbilityMode, ActionType, SponsorSourceType, SegmentUUID } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
-import SubmissionNotice from "../render/SubmissionNotice";
 import Utils from "../utils";
 const utils = new Utils();

@@ -13,15 +12,7 @@ import { getCategoryActionType, getSkippingText } from "../utils/categoryUtils";
 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
 import PencilSvg from "../svg-icons/pencil_svg";
-
-export enum SkipNoticeAction {
-    None,
-    Upvote,
-    Downvote,
-    CategoryVote,
-    CopyDownvote,
-    Unskip
-}
+import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";

 export interface SkipNoticeProps {
    segments: SponsorTime[];
@@ -74,7 +65,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta

    amountOfPreviousNotices: number;
    showInSecondSlot: boolean;
-    audio: HTMLAudioElement;
    
    idSuffix: string;

@@ -96,7 +86,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        this.segments = props.segments;
        this.autoSkip = props.autoSkip;
        this.contentContainer = props.contentContainer;
-        this.audio = null;

        const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);

@@ -156,13 +145,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        }
    }

-    componentDidMount(): void {
-        if (Config.config.audioNotificationOnSkip && this.audio) {
-            this.audio.volume = this.contentContainer().v.volume * 0.1;
-            if (this.autoSkip) this.audio.play();
-        }
-    }
-
    render(): React.ReactElement {
        const noticeStyle: React.CSSProperties = { }
        if (this.contentContainer().onMobileYouTube) {
@@ -186,7 +168,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
                timed={true}
                maxCountdownTime={this.state.maxCountdownTime}
-                videoSpeed={() => this.contentContainer().v?.playbackRate}
                style={noticeStyle}
                biggerCloseButton={this.contentContainer().onMobileYouTube}
                ref={this.noticeRef}
@@ -196,10 +177,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                firstColumn={firstColumn}
                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
                onMouseEnter={() => this.onMouseEnter() } >
-                    
-                {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
-                    <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
-                </audio>}
            </NoticeComponent>
        );
    }
@@ -230,7 +207,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                                style={{marginRight: "5px", marginLeft: "5px"}}
                                title={chrome.i18n.getMessage("reportButtonInfo")}
                                onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
-                            <ThumbsDownSvg fill={this.downvoteButtonColor(SkipNoticeAction.Downvote)} />
+                            <ThumbsDownSvg fill={downvoteButtonColor(this.segments, this.state.actionState, SkipNoticeAction.Downvote)} />
                        </div>

                        {/* Copy and Downvote Button */}
@@ -293,7 +270,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                        {/* Copy Segment */}
                        <button className="sponsorSkipObject sponsorSkipNoticeButton"
                                title={chrome.i18n.getMessage("CopyDownvoteButtonInfo")}
-                                style={{color: this.downvoteButtonColor(SkipNoticeAction.Downvote)}}
+                                style={{color: downvoteButtonColor(this.segments, this.state.actionState, SkipNoticeAction.Downvote)}}
                                onClick={() => this.prepAction(SkipNoticeAction.CopyDownvote)}>
                            {chrome.i18n.getMessage("CopyAndDownvote")}
                        </button>
@@ -741,16 +718,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        });
    }

-    downvoteButtonColor(downvoteType: SkipNoticeAction): string {
-        // Also used for "Copy and Downvote"
-        if (this.segments.length > 1) {
-            return (this.state.actionState === downvoteType) ? this.selectedColor : this.unselectedColor;
-        } else {
-            // You dont have segment selectors so the lockbutton needs to be colored and cannot be selected.
-            return Config.config.isVip && this.segments[0].locked === 1 ? this.lockedColor : this.unselectedColor;
-        }
-    }
-
    private getUnskipText(): string {
        switch (this.props.segments[0].actionType) {
            case ActionType.Mute: {
--- a/src/components/SponsorTimeEditComponent.tsx
+++ b/src/components/SponsorTimeEditComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, ActionTypes, Category, CategoryActionType, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, CategoryActionType, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
 import Utils from "../utils";
 import { getCategoryActionType } from "../utils/categoryUtils";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
@@ -45,6 +45,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo

    previousSkipType: CategoryActionType;
    timeBeforeChangingToPOI: number; // Initialized when first selecting POI
+    fullVideoWarningShown = false;

    // For description auto-complete
    fetchingSuggestions: boolean;
@@ -86,6 +87,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
            this.configUpdateListener = () => this.configUpdate();
            Config.configListeners.push(this.configUpdate.bind(this));
        }
+
+        this.checkToShowFullVideoWarning();
    }

    componentWillUnmount(): void {
@@ -95,6 +98,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
    }

    render(): React.ReactElement {
+        this.checkToShowFullVideoWarning();
+
        const style: React.CSSProperties = {
            textAlign: "center"
        };
@@ -113,11 +118,14 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        };
        // Create time display
        let timeDisplay: JSX.Element;
+        const timeDisplayStyle: React.CSSProperties = {};
        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
        const segment = sponsorTime.segment;
+        if (sponsorTime?.actionType === ActionType.Full) timeDisplayStyle.display = "none";
        if (this.state.editing) {
            timeDisplay = (
                <div id={"sponsorTimesContainer" + this.idSuffix}
+                    style={timeDisplayStyle}
                    className="sponsorTimeDisplay">

                        <span id={"nowButton0" + this.idSuffix}
@@ -168,6 +176,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
            timeDisplay = (
                
                <div id={"sponsorTimesContainer" + this.idSuffix}
+                    style={timeDisplayStyle}
                    className="sponsorTimeDisplay"
                    onClick={this.toggleEditTime.bind(this)}>
                        {utils.getFormattedTime(segment[0], true) +
@@ -193,7 +202,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                    </select>

                    {/* open in new tab */}
-                    <a href="https://wiki.sponsor.ajay.app/index.php/Segment_Categories"
+                    <a href={CompileConfig.wikiLinks[sponsorTime.category] 
+                            || "https://wiki.sponsor.ajay.app/index.php/Segment_Categories"}
                        target="_blank" rel="noreferrer">
                        <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                            className="helpButton"
@@ -203,7 +213,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                </div>

                {/* Action Type */}
-                {CompileConfig.categorySupport[sponsorTime.category]?.length > 1 ? (
+                {CompileConfig.categorySupport[sponsorTime.category] && 
+                    (CompileConfig.categorySupport[sponsorTime.category]?.length > 1 
+                        || CompileConfig.categorySupport[sponsorTime.category]?.[0] !== "skip") ? (
                    <div style={{position: "relative"}}>
                        <select id={"sponsorTimeActionTypes" + this.idSuffix}
                            className="sponsorTimeEditSelector sponsorTimeActionTypes"
@@ -280,7 +292,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        const before = utils.getFormattedTimeToSeconds(sponsorTimeEdits[index]);
        const after = utils.getFormattedTimeToSeconds(targetValue);
        const difference = Math.abs(before - after);
-        if (0 < difference && difference < 0.5) this.showToolTip();
+        if (0 < difference && difference < 0.5) this.showScrollToEditToolTip();

        sponsorTimeEdits[index] = targetValue;
        if (index === 0 && getCategoryActionType(sponsorTime.category) === CategoryActionType.POI) sponsorTimeEdits[1] = targetValue;
@@ -319,11 +331,17 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        }
    }

-    showToolTip(): void {
+    showScrollToEditToolTip(): void {
        if (!Config.config.scrollToEditTimeUpdate && document.getElementById("sponsorRectangleTooltip" + "sponsorTimesContainer" + this.idSuffix) === null) {
-            const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
+            this.showToolTip(chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"), () => { Config.config.scrollToEditTimeUpdate = true });
+        }
+    }
+
+    showToolTip(text: string, buttonFunction?: () => void): boolean {
+        const element = document.getElementById("sponsorTimesContainer" + this.idSuffix);
+        if (element) { 
            new RectangleTooltip({
-                text: chrome.i18n.getMessage("SponsorTimeEditScrollNewFeature"),
+                text,
                referenceNode: element.parentElement,
                prependElement: element,
                timeout: 15,
@@ -331,10 +349,27 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                leftOffset: -318 + "px",
                backgroundColor: "rgba(28, 28, 28, 1.0)",
                htmlId: "sponsorTimesContainer" + this.idSuffix,
-                buttonFunction: () => { Config.config.scrollToEditTimeUpdate = true },
+                buttonFunction,
                fontSize: "14px",
                maxHeight: "200px"
            });
+
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    checkToShowFullVideoWarning(): void {
+        const sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
+        const segmentDuration = sponsorTime.segment[1] - sponsorTime.segment[0];
+        const videoPercentage = segmentDuration / this.props.contentContainer().v.duration;
+
+        if (videoPercentage > 0.6 && !this.fullVideoWarningShown 
+                && (sponsorTime.category === "sponsor" || sponsorTime.category === "selfpromo" || sponsorTime.category === "chooseACategory")) {
+            if (this.showToolTip(chrome.i18n.getMessage("fullVideoTooltipWarning"))) {
+                this.fullVideoWarningShown = true;
+            }
        }
    }

@@ -480,7 +515,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        const actionType = inputActionType && CompileConfig.categorySupport[category]?.includes(inputActionType) ? inputActionType as ActionType 
                                : CompileConfig.categorySupport[category]?.[0] ?? ActionType.Skip;
        sponsorTimesSubmitting[this.props.index].actionType = actionType;
-        

        const description = actionType === ActionType.Chapter ? this.descriptionOptionRef?.current?.value : "";
        sponsorTimesSubmitting[this.props.index].description = description;
@@ -488,6 +522,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
        Config.config.segmentTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimesSubmitting);

        this.props.contentContainer().updatePreviewBar();
+
+        if (sponsorTimesSubmitting[this.props.index].actionType === ActionType.Full 
+                && (sponsorTimesSubmitting[this.props.index].segment[0] !== 0 || sponsorTimesSubmitting[this.props.index].segment[1] !== 0)) {
+            this.setTimeTo(0, 0);
+            this.setTimeTo(1, 0);
+        }
    }

    previewTime(ctrlPressed = false, shiftPressed = false): void {
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/src/components/SubmissionNoticeComponent.tsx
@@ -73,7 +73,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                idSuffix={this.state.idSuffix}
                ref={this.noticeRef}
                closeListener={this.cancel.bind(this)}
-                zIndex={50000}>
+                zIndex={5000}>

                {/* Text Boxes */}
                {this.getMessageBoxes()}