Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-12 22:47:18 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ajay
2022-10-09 16:44:55 -04:00
parent 4a532e751c b2ef9e5d6e
commit f4cac58322
33 changed files with 407 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/NoticeComponent.tsx
View File

@@ -8,41 +8,42 @@ enum CountdownMode {
}
export interface NoticeProps {
noticeTitle: string,
noticeTitle: string;
maxCountdownTime?: () => number,
dontPauseCountdown?: boolean,
amountOfPreviousNotices?: number,
showInSecondSlot?: boolean,
timed?: boolean,
idSuffix?: string,
maxCountdownTime?: () => number;
dontPauseCountdown?: boolean;
amountOfPreviousNotices?: number;
showInSecondSlot?: boolean;
timed?: boolean;
idSuffix?: string;
fadeIn?: boolean,
startFaded?: boolean,
firstColumn?: React.ReactElement[] | React.ReactElement,
firstRow?: React.ReactElement,
bottomRow?: React.ReactElement[],
fadeIn?: boolean;
startFaded?: boolean;
firstColumn?: React.ReactElement[] | React.ReactElement;
firstRow?: React.ReactElement;
bottomRow?: React.ReactElement[];
smaller?: boolean,
limitWidth?: boolean,
extraClass?: string,
hideLogo?: boolean,
hideRightInfo?: boolean,
smaller?: boolean;
limitWidth?: boolean;
extraClass?: string;
hideLogo?: boolean;
hideRightInfo?: boolean;
// Callback for when this is closed
closeListener: () => void,
onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void,
closeListener: () => void;
onMouseEnter?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
zIndex?: number,
style?: React.CSSProperties
zIndex?: number;
style?: React.CSSProperties;
biggerCloseButton?: boolean;
children?: React.ReactNode;
}
export interface NoticeState {
maxCountdownTime: () => number,
maxCountdownTime: () => number;
countdownTime: number,
countdownMode: CountdownMode,
countdownTime: number;
countdownMode: CountdownMode;
mouseHovering: boolean;

9
src/components/NoticeTextSectionComponent.tsx
View File

@@ -1,10 +1,11 @@
import * as React from "react";
export interface NoticeTextSelectionProps {
icon?: string,
text: string,
idSuffix: string,
onClick?: (event: React.MouseEvent) => unknown
icon?: string;
text: string;
idSuffix: string;
onClick?: (event: React.MouseEvent) => unknown;
children?: React.ReactNode;
}
export interface NoticeTextSelectionState {

7
src/components/SponsorTimeEditComponent.tsx
View File

@@ -14,15 +14,16 @@ import { DEFAULT_CATEGORY } from "../utils/categoryUtils";
const utils = new Utils();
export interface SponsorTimeEditProps {
index: number,
index: number;
idSuffix: string,
idSuffix: string;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer,
contentContainer: ContentContainer;
submissionNotice: SubmissionNoticeComponent;
categoryList?: Category[];
categoryChangeListener?: (index: number, category: Category) => void;
children?: React.ReactNode;
}
export interface SponsorTimeEditState {

4
src/components/SubmissionNoticeComponent.tsx
View File

@@ -20,8 +20,8 @@ export interface SubmissionNoticeProps {
}
export interface SubmissionNoticeState {
noticeTitle: string,
messages: string[],
noticeTitle: string;
messages: string[];
idSuffix: string;
}

1
src/components/options/CategorySkipOptionsComponent.tsx
View File

@@ -13,6 +13,7 @@ export interface CategorySkipOptionsProps {
category: Category;
defaultColor?: string;
defaultPreviewColor?: string;
children?: React.ReactNode;
}
export interface CategorySkipOptionsState {

8
src/components/options/KeybindComponent.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import Config from "../../config";
import { Keybind } from "../../types";
import KeybindDialogComponent from "./KeybindDialogComponent";
@@ -14,6 +14,7 @@ export interface KeybindState {
}
let dialog;
let root: Root;
class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
constructor(props: KeybindProps) {
@@ -56,11 +57,12 @@ class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
dialog = parent.document.createElement("div");
dialog.id = "keybind-dialog";
parent.document.body.prepend(dialog);
ReactDOM.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />, dialog);
root = createRoot(dialog);
root.render(<KeybindDialogComponent option={this.props.option} closeListener={(updateWith) => this.closeEditDialog(updateWith)} />);
}
closeEditDialog(updateWith: Keybind): void {
ReactDOM.unmountComponentAtNode(dialog);
root.unmount();
dialog.remove();
if (updateWith != null)
this.setState({keybind: updateWith});

1
src/components/options/UnsubmittedVideoListItem.tsx
View File

@@ -5,6 +5,7 @@ import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
export interface UnsubmittedVideosListItemProps {
videoID: string;
children?: React.ReactNode;
}
export interface UnsubmittedVideosListItemState {

2
src/components/options/UnsubmittedVideosComponent.tsx
View File

@@ -7,7 +7,7 @@ export interface UnsubmittedVideosProps {
}
export interface UnsubmittedVideosState {
tableVisible: boolean,
tableVisible: boolean;
}
class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps, UnsubmittedVideosState> {

194
src/config.ts
View File

@@ -8,122 +8,122 @@ export interface Permission {
}
interface SBConfig {
userID: string,
isVip: boolean,
permissions: Record<Category, Permission>,
userID: string;
isVip: boolean;
permissions: Record<Category, Permission>;
/* Contains unsubmitted segments that the user has created. */
unsubmittedSegments: Record<string, SponsorTime[]>,
defaultCategory: Category,
renderSegmentsAsChapters: boolean,
whitelistedChannels: string[],
forceChannelCheck: boolean,
minutesSaved: number,
skipCount: number,
sponsorTimesContributed: number,
submissionCountSinceCategories: number, // New count used to show the "Read The Guidelines!!" message
showTimeWithSkips: boolean,
disableSkipping: boolean,
muteSegments: boolean,
fullVideoSegments: boolean,
manualSkipOnFullVideo: boolean,
trackViewCount: boolean,
trackViewCountInPrivate: boolean,
trackDownvotes: boolean,
dontShowNotice: boolean,
noticeVisibilityMode: NoticeVisbilityMode,
hideVideoPlayerControls: boolean,
hideInfoButtonPlayerControls: boolean,
hideDeleteButtonPlayerControls: boolean,
hideUploadButtonPlayerControls: boolean,
hideSkipButtonPlayerControls: boolean,
hideDiscordLaunches: number,
hideDiscordLink: boolean,
invidiousInstances: string[],
supportInvidious: boolean,
serverAddress: string,
minDuration: number,
skipNoticeDuration: number,
audioNotificationOnSkip: boolean,
checkForUnlistedVideos: boolean,
testingServer: boolean,
refetchWhenNotFound: boolean,
ytInfoPermissionGranted: boolean,
allowExpirements: boolean,
showDonationLink: boolean,
showPopupDonationCount: number,
showUpsells: boolean,
donateClicked: number,
autoHideInfoButton: boolean,
autoSkipOnMusicVideos: boolean,
unsubmittedSegments: Record<string, SponsorTime[]>;
defaultCategory: Category;
renderSegmentsAsChapters: boolean;
whitelistedChannels: string[];
forceChannelCheck: boolean;
minutesSaved: number;
skipCount: number;
sponsorTimesContributed: number;
submissionCountSinceCategories: number; // New count used to show the "Read The Guidelines!!" message
showTimeWithSkips: boolean;
disableSkipping: boolean;
muteSegments: boolean;
fullVideoSegments: boolean;
manualSkipOnFullVideo: boolean;
trackViewCount: boolean;
trackViewCountInPrivate: boolean;
trackDownvotes: boolean;
dontShowNotice: boolean;
noticeVisibilityMode: NoticeVisbilityMode;
hideVideoPlayerControls: boolean;
hideInfoButtonPlayerControls: boolean;
hideDeleteButtonPlayerControls: boolean;
hideUploadButtonPlayerControls: boolean;
hideSkipButtonPlayerControls: boolean;
hideDiscordLaunches: number;
hideDiscordLink: boolean;
invidiousInstances: string[];
supportInvidious: boolean;
serverAddress: string;
minDuration: number;
skipNoticeDuration: number;
audioNotificationOnSkip: boolean;
checkForUnlistedVideos: boolean;
testingServer: boolean;
refetchWhenNotFound: boolean;
ytInfoPermissionGranted: boolean;
allowExpirements: boolean;
showDonationLink: boolean;
showPopupDonationCount: number;
showUpsells: boolean;
donateClicked: number;
autoHideInfoButton: boolean;
autoSkipOnMusicVideos: boolean;
colorPalette: {
red: string,
white: string,
locked: string
},
scrollToEditTimeUpdate: boolean,
categoryPillUpdate: boolean,
showChapterInfoMessage: boolean,
darkMode: boolean,
showCategoryGuidelines: boolean,
showCategoryWithoutPermission: boolean,
showSegmentNameInChapterBar: boolean,
red: string;
white: string;
locked: string;
};
scrollToEditTimeUpdate: boolean;
categoryPillUpdate: boolean;
showChapterInfoMessage: boolean;
darkMode: boolean;
showCategoryGuidelines: boolean;
showCategoryWithoutPermission: boolean;
showSegmentNameInChapterBar: boolean;
// Used to cache calculated text color info
categoryPillColors: {
[key in Category]: {
lastColor: string,
textColor: string
lastColor: string;
textColor: string;
}
}
};
skipKeybind: Keybind,
startSponsorKeybind: Keybind,
submitKeybind: Keybind,
nextChapterKeybind: Keybind,
previousChapterKeybind: Keybind,
skipKeybind: Keybind;
startSponsorKeybind: Keybind;
submitKeybind: Keybind;
nextChapterKeybind: Keybind;
previousChapterKeybind: Keybind;
// What categories should be skipped
categorySelections: CategorySelection[],
categorySelections: CategorySelection[];
payments: {
licenseKey: string,
lastCheck: number,
lastFreeCheck: number,
freeAccess: boolean,
chaptersAllowed: boolean
}
licenseKey: string;
lastCheck: number;
lastFreeCheck: number;
freeAccess: boolean;
chaptersAllowed: boolean;
};
// Preview bar
barTypes: {
"preview-chooseACategory": PreviewBarOption,
"sponsor": PreviewBarOption,
"preview-sponsor": PreviewBarOption,
"selfpromo": PreviewBarOption,
"preview-selfpromo": PreviewBarOption,
"exclusive_access": PreviewBarOption,
"interaction": PreviewBarOption,
"preview-interaction": PreviewBarOption,
"intro": PreviewBarOption,
"preview-intro": PreviewBarOption,
"outro": PreviewBarOption,
"preview-outro": PreviewBarOption,
"preview": PreviewBarOption,
"preview-preview": PreviewBarOption,
"music_offtopic": PreviewBarOption,
"preview-music_offtopic": PreviewBarOption,
"poi_highlight": PreviewBarOption,
"preview-poi_highlight": PreviewBarOption,
"filler": PreviewBarOption,
"preview-filler": PreviewBarOption,
}
"preview-chooseACategory": PreviewBarOption;
"sponsor": PreviewBarOption;
"preview-sponsor": PreviewBarOption;
"selfpromo": PreviewBarOption;
"preview-selfpromo": PreviewBarOption;
"exclusive_access": PreviewBarOption;
"interaction": PreviewBarOption;
"preview-interaction": PreviewBarOption;
"intro": PreviewBarOption;
"preview-intro": PreviewBarOption;
"outro": PreviewBarOption;
"preview-outro": PreviewBarOption;
"preview": PreviewBarOption;
"preview-preview": PreviewBarOption;
"music_offtopic": PreviewBarOption;
"preview-music_offtopic": PreviewBarOption;
"poi_highlight": PreviewBarOption;
"preview-poi_highlight": PreviewBarOption;
"filler": PreviewBarOption;
"preview-filler": PreviewBarOption;
};
}
export type VideoDownvotes = { segments: { uuid: HashedValue, hidden: SponsorHideType }[] , lastAccess: number };
export type VideoDownvotes = { segments: { uuid: HashedValue; hidden: SponsorHideType }[] ; lastAccess: number };
interface SBStorage {
/* VideoID prefixes to UUID prefixes */
downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
navigationApiAvailable: boolean,
downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>;
navigationApiAvailable: boolean;
}
export interface SBObject {
@@ -340,7 +340,7 @@ const Config: SBObject = {
// Function setup
function configProxy(): { sync: SBConfig, local: SBStorage } {
function configProxy(): { sync: SBConfig; local: SBStorage } {
chrome.storage.onChanged.addListener((changes: {[key: string]: chrome.storage.StorageChange}, areaName) => {
if (areaName === "sync") {
for (const key in changes) {

32
src/content.ts
View File

@@ -8,6 +8,7 @@ import {
ContentContainer,
HashedValue,
Keybind,
PageType,
ScheduledTime,
SegmentUUID,
SkipToTimeParams,
@@ -18,7 +19,6 @@ import {
ToggleSkippable,
VideoID,
VideoInfo,
PageType
} from "./types";
import Utils from "./utils";
import PreviewBar, { PreviewBarSegment } from "./js-components/previewBar";
@@ -68,7 +68,7 @@ let channelIDInfo: ChannelIDInfo;
// Locked Categories in this tab, like: ["sponsor","intro","outro"]
let lockedCategories: Category[] = [];
// Used to calculate a more precise "virtual" video time
let lastKnownVideoTime: { videoTime: number, preciseTime: number } = {
let lastKnownVideoTime: { videoTime: number; preciseTime: number } = {
videoTime: null,
preciseTime: null
};
@@ -125,7 +125,7 @@ let categoryPill: CategoryPill = null;
let controls: HTMLElement | null = null;
/** Contains buttons created by `createButton()`. */
const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImageElement, setupListener: boolean}> = {};
const playerButtons: Record<string, {button: HTMLButtonElement; image: HTMLImageElement; setupListener: boolean}> = {};
// Direct Links after the config is loaded
utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYouTubeVideoID(document)));
@@ -948,13 +948,13 @@ async function sponsorsLookup(keepOldSubmissions = true) {
setupVideoMutationListener();
const showChapterMessage = Config.config.showUpsells
&& Config.config.payments.lastCheck !== 0
&& Config.config.payments.lastCheck !== 0
&& !noRefreshFetchingChaptersAllowed()
&& Config.config.showChapterInfoMessage
&& Config.config.skipCount > 200;
if (!showChapterMessage
&& Config.config.showChapterInfoMessage
if (!showChapterMessage
&& Config.config.showChapterInfoMessage
&& Config.config.payments.freeAccess) {
Config.config.showChapterInfoMessage = false;
@@ -1238,7 +1238,7 @@ function getYouTubeVideoID(document: Document, url?: string): string | boolean {
function getYouTubeVideoIDFromDocument(hideIcon = true, pageHint = PageType.Watch): string | boolean {
const selector = "a.ytp-title-link[data-sessionlink='feature=player-title']";
// get ID from document (channel trailer / embedded playlist)
const element = pageHint === PageType.Embed ? document.querySelector(selector)
const element = pageHint === PageType.Embed ? document.querySelector(selector)
: video?.parentElement?.parentElement?.querySelector(selector);
const videoURL = element?.getAttribute("href");
if (videoURL) {
@@ -1403,7 +1403,7 @@ async function whitelistCheck() {
* Returns info about the next upcoming sponsor skip
*/
function getNextSkipIndex(currentTime: number, includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean):
{array: ScheduledTime[], index: number, endIndex: number, extraIndexes: number[], openNotice: boolean} {
{array: ScheduledTime[]; index: number; endIndex: number; extraIndexes: number[]; openNotice: boolean} {
const autoSkipSorter = (segment: ScheduledTime) => {
const skipOption = utils.getCategorySelection(segment.category)?.option;
@@ -1515,7 +1515,7 @@ function getLatestEndTimeIndex(sponsorTimes: SponsorTime[], index: number, hideH
* the current time, but end after
*/
function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments: boolean, includeNonIntersectingSegments: boolean,
minimum?: number, hideHiddenSponsors = false): {includedTimes: ScheduledTime[], scheduledTimes: number[]} {
minimum?: number, hideHiddenSponsors = false): {includedTimes: ScheduledTime[]; scheduledTimes: number[]} {
if (!sponsorTimes) return {includedTimes: [], scheduledTimes: []};
const includedTimes: ScheduledTime[] = [];
@@ -1751,7 +1751,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
}
function shouldAutoSkip(segment: SponsorTime): boolean {
return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
return (!Config.config.manualSkipOnFullVideo || !sponsorTimes?.some((s) => s.category === segment.category && s.actionType === ActionType.Full))
&& (utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
(Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
&& segment.actionType !== ActionType.Poi));
@@ -1904,11 +1904,15 @@ function isSegmentCreationInProgress(): boolean {
function cancelCreatingSegment() {
if (isSegmentCreationInProgress()) {
sponsorTimesSubmitting.splice(sponsorTimesSubmitting.length - 1, 1);
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
if (sponsorTimesSubmitting.length > 1) { // If there's more than one segment: remove last
sponsorTimesSubmitting.pop();
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
} else { // Otherwise delete the video entry & close submission menu
resetSponsorSubmissionNotice();
sponsorTimesSubmitting = [];
delete Config.config.unsubmittedSegments[sponsorVideoID];
}
Config.forceSyncUpdate("unsubmittedSegments");
if (sponsorTimesSubmitting.length <= 0) resetSponsorSubmissionNotice();
}
updateEditButtonsOnPlayer();

22
src/document.ts
View File

@@ -6,26 +6,26 @@
import { PageType } from "./types";
interface StartMessage {
type: "navigation",
pageType: PageType
videoID: string | null,
type: "navigation";
pageType: PageType;
videoID: string | null;
}
interface FinishMessage extends StartMessage {
channelID: string,
channelTitle: string
channelID: string;
channelTitle: string;
}
interface AdMessage {
type: "ad",
playing: boolean
type: "ad";
playing: boolean;
}
interface VideoData {
type: "data",
videoID: string,
isLive: boolean,
isPremiere: boolean
type: "data";
videoID: string;
isLive: boolean;
isPremiere: boolean;
}
type WindowMessage = StartMessage | FinishMessage | AdMessage | VideoData;

2
src/globals.d.ts vendored
View File

@@ -1,6 +1,6 @@
import { SBObject } from "./config";
declare global {
interface Window { SB: SBObject; }
interface Window { SB: SBObject }
// Remove this once the API becomes stable and types are shipped in @types/chrome
namespace chrome {
namespace declarativeContent {

2
src/js-components/previewBar.ts
View File

@@ -651,7 +651,7 @@ class PreviewBar {
}
private findLeftAndScale(selector: string, currentElement: HTMLElement, progressBar: HTMLElement):
{ left: number, scale: number } {
{ left: number; scale: number } {
const sections = currentElement.parentElement.parentElement.parentElement.children;
let currentWidth = 0;
let lastWidth = 0;

5
src/options.ts
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import Config from "./config";
import * as CompileConfig from "../config.json";
@@ -258,7 +258,8 @@ async function init() {
break;
}
case "keybind-change": {
ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
const root = createRoot(optionsElements[i].querySelector("div"));
root.render(React.createElement(KeybindComponent, {option: option}));
break;
}
case "display": {

6
src/popup.ts
View File

@@ -61,9 +61,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
localizeHtmlPage();
type InputPageElements = {
whitelistToggle?: HTMLInputElement,
toggleSwitch?: HTMLInputElement,
usernameInput?: HTMLInputElement,
whitelistToggle?: HTMLInputElement;
toggleSwitch?: HTMLInputElement;
usernameInput?: HTMLInputElement;
};
type PageElements = { [key: string]: HTMLElement } & InputPageElements

9
src/render/CategoryChooser.tsx
View File

@@ -1,5 +1,6 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
class CategoryChooser {
@@ -9,9 +10,9 @@ class CategoryChooser {
constructor(element: Element) {
this.ref = React.createRef();
ReactDOM.render(
<CategoryChooserComponent ref={this.ref} />,
element
const root = createRoot(element);
root.render(
<CategoryChooserComponent ref={this.ref} />
);
}

11
src/render/ChapterVote.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import ChapterVoteComponent, { ChapterVoteState } from "../components/ChapterVoteComponent";
import { VoteResponse } from "../messageTypes";
import { Category, SegmentUUID, SponsorTime } from "../types";
@@ -7,6 +7,7 @@ import { Category, SegmentUUID, SponsorTime } from "../types";
export class ChapterVote {
container: HTMLElement;
ref: React.RefObject<ChapterVoteComponent>;
root: Root;
unsavedState: ChapterVoteState;
@@ -19,10 +20,8 @@ export class ChapterVote {
this.container.id = "chapterVote";
this.container.style.height = "100%";
ReactDOM.render(
<ChapterVoteComponent ref={this.ref} vote={vote} />,
this.container
);
this.root = createRoot(this.container);
this.root.render(<ChapterVoteComponent ref={this.ref} vote={vote} />);
}
getContainer(): HTMLElement {
@@ -30,7 +29,7 @@ export class ChapterVote {
}
close(): void {
ReactDOM.unmountComponentAtNode(this.container);
this.root.unmount();
this.container.remove();
}

30
src/render/GenericNotice.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import NoticeComponent from "../components/NoticeComponent";
import Utils from "../utils";
@@ -9,17 +9,17 @@ import { ButtonListener, ContentContainer } from "../types";
import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
export interface TextBox {
icon: string,
text: string
icon: string;
text: string;
}
export interface NoticeOptions {
title: string,
referenceNode?: HTMLElement,
textBoxes?: TextBox[],
buttons?: ButtonListener[],
fadeIn?: boolean,
timed?: boolean
title: string;
referenceNode?: HTMLElement;
textBoxes?: TextBox[];
buttons?: ButtonListener[];
fadeIn?: boolean;
timed?: boolean;
style?: React.CSSProperties;
extraClass?: string;
maxCountdownTime?: () => number;
@@ -35,6 +35,7 @@ export default class GenericNotice {
noticeElement: HTMLDivElement;
noticeRef: React.MutableRefObject<NoticeComponent>;
idSuffix: string;
root: Root;
constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
this.noticeRef = React.createRef();
@@ -49,11 +50,13 @@ export default class GenericNotice {
referenceNode.prepend(this.noticeElement);
this.update(options);
this.root = createRoot(this.noticeElement);
this.update(options);
}
update(options: NoticeOptions): void {
ReactDOM.render(
this.root.render(
<NoticeComponent
noticeTitle={options.title}
idSuffix={this.idSuffix}
@@ -92,8 +95,7 @@ export default class GenericNotice {
</>
: null}
</NoticeComponent>,
this.noticeElement
</NoticeComponent>
);
}
@@ -137,7 +139,7 @@ export default class GenericNotice {
}
close(): void {
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.root.unmount();
this.noticeElement.remove();
}

36
src/render/RectangleTooltip.tsx
View File

@@ -1,26 +1,26 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
export interface RectangleTooltipProps {
text: string,
link?: string,
referenceNode: HTMLElement,
prependElement?: HTMLElement, // Element to append before
bottomOffset?: string,
leftOffset?: string,
timeout?: number,
htmlId?: string,
maxHeight?: string,
maxWidth?: string,
backgroundColor?: string,
fontSize?: string,
text: string;
link?: string;
referenceNode: HTMLElement;
prependElement?: HTMLElement; // Element to append before
bottomOffset?: string;
leftOffset?: string;
timeout?: number;
htmlId?: string;
maxHeight?: string;
maxWidth?: string;
backgroundColor?: string;
fontSize?: string;
buttonFunction?: () => void;
}
export class RectangleTooltip {
text: string;
container: HTMLDivElement;
root: Root;
timer: NodeJS.Timeout;
constructor(props: RectangleTooltipProps) {
@@ -47,7 +47,8 @@ export class RectangleTooltip {
this.timer = setTimeout(() => this.close(), props.timeout * 1000);
}
ReactDOM.render(
this.root = createRoot(this.container);
this.root.render(
<div style={{
bottom: props.bottomOffset,
left: props.leftOffset,
@@ -81,13 +82,12 @@ export class RectangleTooltip {
{chrome.i18n.getMessage("GotIt")}
</button>
</div>,
this.container
</div>
)
}
close(): void {
ReactDOM.unmountComponentAtNode(this.container);
this.root.unmount();
this.container.remove();
if (this.timer) clearTimeout(this.timer);

11
src/render/SkipNotice.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import Utils from "../utils";
const utils = new Utils();
@@ -18,6 +18,7 @@ class SkipNotice {
noticeElement: HTMLDivElement;
skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
root: Root;
constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
this.skipNoticeRef = React.createRef();
@@ -41,7 +42,8 @@ class SkipNotice {
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
this.root = createRoot(this.noticeElement);
this.root.render(
<SkipNoticeComponent segments={segments}
autoSkip={autoSkip}
startReskip={startReskip}
@@ -50,8 +52,7 @@ class SkipNotice {
closeListener={() => this.close()}
smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll
|| (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
unskipTime={unskipTime} />,
this.noticeElement
unskipTime={unskipTime} />
);
}
@@ -62,7 +63,7 @@ class SkipNotice {
}
close(): void {
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.root.unmount();
this.noticeElement.remove();

12
src/render/SubmissionNotice.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import Utils from "../utils";
const utils = new Utils();
@@ -17,6 +17,8 @@ class SubmissionNotice {
noticeElement: HTMLDivElement;
root: Root;
constructor(contentContainer: ContentContainer, callback: () => unknown) {
this.noticeRef = React.createRef();
@@ -30,13 +32,13 @@ class SubmissionNotice {
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
this.root = createRoot(this.noticeElement);
this.root.render(
<SubmissionNoticeComponent
contentContainer={contentContainer}
callback={callback}
ref={this.noticeRef}
closeListener={() => this.close(false)} />,
this.noticeElement
closeListener={() => this.close(false)} />
);
}
@@ -46,7 +48,7 @@ class SubmissionNotice {
close(callRef = true): void {
if (callRef) this.noticeRef.current.cancel();
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.root.unmount();
this.noticeElement.remove();
}

13
src/render/Tooltip.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot, Root } from 'react-dom/client';
import { ButtonListener } from "../types";
export interface TooltipProps {
@@ -26,6 +26,7 @@ export class Tooltip {
container: HTMLDivElement;
timer: NodeJS.Timeout;
root: Root;
constructor(props: TooltipProps) {
props.bottomOffset ??= "70px";
@@ -54,8 +55,9 @@ export class Tooltip {
}
const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
ReactDOM.render(
this.root = createRoot(this.container);
this.root.render(
<div style={{bottom: props.bottomOffset, left: props.leftOffset, right: props.rightOffset, backgroundColor}}
className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "") + ` ${props.extraClass}`}>
<div>
@@ -93,8 +95,7 @@ export class Tooltip {
{chrome.i18n.getMessage("GotIt")}
</button>
: null}
</div>,
this.container
</div>
)
}
@@ -120,7 +121,7 @@ export class Tooltip {
}
close(): void {
ReactDOM.unmountComponentAtNode(this.container);
this.root.unmount();
this.container.remove();
if (this.timer) clearTimeout(this.timer);

8
src/render/UnsubmittedVideos.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { createRoot } from 'react-dom/client';
import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";
class UnsubmittedVideos {
@@ -9,9 +9,9 @@ class UnsubmittedVideos {
constructor(element: Element) {
this.ref = React.createRef();
ReactDOM.render(
<UnsubmittedVideosComponent ref={this.ref} />,
element
const root = createRoot(element);
root.render(
<UnsubmittedVideosComponent ref={this.ref} />
);
}

198
src/types.ts
View File

@@ -4,32 +4,32 @@ import SkipNotice from "./render/SkipNotice";
export interface ContentContainer {
(): {
vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void,
dontShowNoticeAgain: () => void,
unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void,
sponsorTimes: SponsorTime[],
sponsorTimesSubmitting: SponsorTime[],
skipNotices: SkipNotice[],
v: HTMLVideoElement,
sponsorVideoID,
reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void,
updatePreviewBar: () => void,
onMobileYouTube: boolean,
sponsorSubmissionNotice: SubmissionNotice,
resetSponsorSubmissionNotice: (callRef?: boolean) => void,
updateEditButtonsOnPlayer: () => void,
previewTime: (time: number, unpause?: boolean) => void,
videoInfo: VideoInfo,
getRealCurrentTime: () => number,
lockedCategories: string[],
channelIDInfo: ChannelIDInfo
}
vote: (type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent) => void;
dontShowNoticeAgain: () => void;
unskipSponsorTime: (segment: SponsorTime, unskipTime: number, forceSeek?: boolean) => void;
sponsorTimes: SponsorTime[];
sponsorTimesSubmitting: SponsorTime[];
skipNotices: SkipNotice[];
v: HTMLVideoElement;
sponsorVideoID;
reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void;
updatePreviewBar: () => void;
onMobileYouTube: boolean;
sponsorSubmissionNotice: SubmissionNotice;
resetSponsorSubmissionNotice: (callRef?: boolean) => void;
updateEditButtonsOnPlayer: () => void;
previewTime: (time: number, unpause?: boolean) => void;
videoInfo: VideoInfo;
getRealCurrentTime: () => number;
lockedCategories: string[];
channelIDInfo: ChannelIDInfo;
};
}
export interface FetchResponse {
responseText: string,
status: number,
ok: boolean
responseText: string;
status: number;
ok: boolean;
}
export type HashedValue = string & { __hashBrand: unknown };
@@ -46,7 +46,7 @@ export enum CategorySkipOption {
export interface CategorySelection {
name: Category;
option: CategorySkipOption
option: CategorySkipOption;
}
export enum SponsorHideType {
@@ -97,95 +97,95 @@ export interface ScheduledTime extends SponsorTime {
}
export interface PreviewBarOption {
color: string,
opacity: string
color: string;
opacity: string;
}
export interface Registration {
message: string,
id: string,
allFrames: boolean,
js: browser.extensionTypes.ExtensionFileOrCode[],
css: browser.extensionTypes.ExtensionFileOrCode[],
matches: string[]
message: string;
id: string;
allFrames: boolean;
js: browser.extensionTypes.ExtensionFileOrCode[];
css: browser.extensionTypes.ExtensionFileOrCode[];
matches: string[];
}
export interface BackgroundScriptContainer {
registerFirefoxContentScript: (opts: Registration) => void,
unregisterFirefoxContentScript: (id: string) => void
registerFirefoxContentScript: (opts: Registration) => void;
unregisterFirefoxContentScript: (id: string) => void;
}
export interface VideoInfo {
responseContext: {
serviceTrackingParams: Array<{service: string, params: Array<{key: string, value: string}>}>,
serviceTrackingParams: Array<{service: string; params: Array<{key: string; value: string}>}>;
webResponseContextExtensionData: {
hasDecorated: boolean
}
},
hasDecorated: boolean;
};
};
playabilityStatus: {
status: string,
playableInEmbed: boolean,
status: string;
playableInEmbed: boolean;
miniplayer: {
miniplayerRenderer: {
playbackMode: string
}
}
playbackMode: string;
};
};
};
streamingData: unknown;
playbackTracking: unknown;
videoDetails: {
videoId: string,
title: string,
lengthSeconds: string,
keywords: string[],
channelId: string,
isOwnerViewing: boolean,
shortDescription: string,
isCrawlable: boolean,
videoId: string;
title: string;
lengthSeconds: string;
keywords: string[];
channelId: string;
isOwnerViewing: boolean;
shortDescription: string;
isCrawlable: boolean;
thumbnail: {
thumbnails: Array<{url: string, width: number, height: number}>
},
averageRating: number,
allowRatings: boolean,
viewCount: string,
author: string,
isPrivate: boolean,
isUnpluggedCorpus: boolean,
isLiveContent: boolean,
thumbnails: Array<{url: string; width: number; height: number}>;
};
averageRating: number;
allowRatings: boolean;
viewCount: string;
author: string;
isPrivate: boolean;
isUnpluggedCorpus: boolean;
isLiveContent: boolean;
};
playerConfig: unknown;
storyboards: unknown;
microformat: {
playerMicroformatRenderer: {
thumbnail: {
thumbnails: Array<{url: string, width: number, height: number}>
},
thumbnails: Array<{url: string; width: number; height: number}>;
};
embed: {
iframeUrl: string,
flashUrl: string,
width: number,
height: number,
flashSecureUrl: string,
},
iframeUrl: string;
flashUrl: string;
width: number;
height: number;
flashSecureUrl: string;
};
title: {
simpleText: string,
},
simpleText: string;
};
description: {
simpleText: string,
},
lengthSeconds: string,
ownerProfileUrl: string,
externalChannelId: string,
availableCountries: string[],
isUnlisted: boolean,
hasYpcMetadata: boolean,
viewCount: string,
category: Category,
publishDate: string,
ownerChannelName: string,
uploadDate: string,
}
simpleText: string;
};
lengthSeconds: string;
ownerProfileUrl: string;
externalChannelId: string;
availableCountries: string[];
isUnlisted: boolean;
hasYpcMetadata: boolean;
viewCount: string;
category: Category;
publishDate: string;
ownerChannelName: string;
uploadDate: string;
};
};
trackingParams: string;
attestation: unknown;
@@ -205,17 +205,17 @@ export enum ChannelIDStatus {
}
export interface ChannelIDInfo {
id: string,
status: ChannelIDStatus
id: string;
status: ChannelIDStatus;
}
export interface SkipToTimeParams {
v: HTMLVideoElement,
skipTime: number[],
skippingSegments: SponsorTime[],
openNotice: boolean,
forceAutoSkip?: boolean,
unskipTime?: number
v: HTMLVideoElement;
skipTime: number[];
skippingSegments: SponsorTime[];
openNotice: boolean;
forceAutoSkip?: boolean;
unskipTime?: number;
}
export interface ToggleSkippable {
@@ -232,11 +232,11 @@ export enum NoticeVisbilityMode {
}
export type Keybind = {
key: string,
code?: string,
ctrl?: boolean,
alt?: boolean,
shift?: boolean
key: string;
code?: string;
ctrl?: boolean;
alt?: boolean;
shift?: boolean;
}
export enum PageType {
@@ -249,6 +249,6 @@ export enum PageType {
}
export interface ButtonListener {
name: string,
listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
name: string;
listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
}

2
src/utils.ts
View File

@@ -24,7 +24,7 @@ export default class Utils {
/* Used for waitForElement */
creatingWaitingMutationObserver = false;
waitingMutationObserver: MutationObserver = null;
waitingElements: { selector: string, visibleCheck: boolean, callback: (element: Element) => void }[] = [];
waitingElements: { selector: string; visibleCheck: boolean; callback: (element: Element) => void }[] = [];
constructor(backgroundScriptContainer: BackgroundScriptContainer = null) {
this.backgroundScriptContainer = backgroundScriptContainer;

2
src/utils/animationUtils.ts
View File

@@ -25,7 +25,7 @@ function applyLoadingAnimation(element: HTMLElement, time: number, callback?: ()
});
}
function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void, show: () => void } {
function setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void; show: () => void } {
if (enabled) element.classList.add("autoHiding");
element.classList.add("hidden");
element.classList.add("animationDone");

2
src/utils/genericUtils.ts
View File

@@ -93,7 +93,7 @@ function getLuminance(color: string): number {
}
/* From https://stackoverflow.com/a/5624139 */
function hexToRgb(hex: string): {r: number, g: number, b: number} {
function hexToRgb(hex: string): {r: number; g: number; b: number} {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {

6
src/utils/warnings.ts
View File

@@ -6,9 +6,9 @@ import { GenericUtils } from "./genericUtils";
const utils = new Utils();
export interface ChatConfig {
displayName: string,
composerInitialValue?: string,
customDescription?: string
displayName: string;
composerInitialValue?: string;
customDescription?: string;
}
export async function openWarningDialog(contentContainer: ContentContainer): Promise<void> {