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

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

Browse Source
This commit is contained in:
Ajay
2022-02-20 18:37:18 -05:00
parent e1de84dce3 d6a0029b85
commit 4e5a883d2e
82 changed files with 12735 additions and 29320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CategoryChooserComponent.tsx
View File

@@ -31,24 +31,24 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
{/* Headers */}
<tr id={"CategoryOptionsRow"}
className="categoryTableElement categoryTableHeader">
<td id={"CategoryOptionName"}>
<th id={"CategoryOptionName"}>
{chrome.i18n.getMessage("category")}
</td>
</th>
<td id={"CategorySkipOption"}
<th id={"CategorySkipOption"}
className="skipOption">
{chrome.i18n.getMessage("skipOption")}
</td>
</th>
<td id={"CategoryColorOption"}
<th id={"CategoryColorOption"}
className="colorOption">
{chrome.i18n.getMessage("seekBarColor")}
</td>
</th>
<td id={"CategoryPreviewColorOption"}
<th id={"CategoryPreviewColorOption"}
className="previewColorOption">
{chrome.i18n.getMessage("previewColor")}
</td>
</th>
</tr>
{this.getCategorySkipOptions()}

51
src/components/CategoryPillComponent.tsx
View File

@@ -8,6 +8,7 @@ import { downvoteButtonColor, SkipNoticeAction } from "../utils/noticeUtils";
import { VoteResponse } from "../messageTypes";
import { AnimationUtils } from "../utils/animationUtils";
import { GenericUtils } from "../utils/genericUtils";
import { Tooltip } from "../render/Tooltip";
export interface CategoryPillProps {
vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
@@ -21,6 +22,8 @@ export interface CategoryPillState {
class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
tooltip?: Tooltip;
constructor(props: CategoryPillProps) {
super(props);
@@ -35,15 +38,16 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
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",
color: this.getTextColor(),
}
return (
<span style={style}
className={"sponsorBlockCategoryPill"}
title={this.getTitleText()}
onClick={(e) => this.toggleOpen(e)}>
aria-label={this.getTitleText()}
onClick={(e) => this.toggleOpen(e)}
onMouseEnter={() => this.openTooltip()}
onMouseLeave={() => this.closeTooltip()}>
<span className="sponsorBlockCategoryPillTitleSection">
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
@@ -116,6 +120,45 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
return configObject?.color;
}
private getTextColor(): string {
const color = this.getColor();
if (!color) return null;
const existingCalculatedColor = Config.config.categoryPillColors[this.state.segment?.category];
if (existingCalculatedColor && existingCalculatedColor.lastColor === color) {
return existingCalculatedColor.textColor;
} else {
const luminance = GenericUtils.getLuminance(color);
const textColor = luminance > 128 ? "black" : "white";
Config.config.categoryPillColors[this.state.segment?.category] = {
lastColor: color,
textColor
};
return textColor;
}
}
private openTooltip(): void {
const tooltipMount = document.querySelector("ytd-video-primary-info-renderer > #container") as HTMLElement;
if (tooltipMount) {
this.tooltip = new Tooltip({
text: this.getTitleText(),
referenceNode: tooltipMount,
bottomOffset: "70px",
opacity: 0.95,
displayTriangle: false,
showLogo: false,
showGotIt: false
});
}
}
private closeTooltip(): void {
this.tooltip?.close();
this.tooltip = null;
}
getTitleText(): string {
const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");

75
src/components/KeybindComponent.tsx Normal file
View File

@@ -0,0 +1,75 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import Config from "../config";
import { Keybind } from "../types";
import KeybindDialogComponent from "./KeybindDialogComponent";
import { keybindEquals, keybindToString, formatKey } from "../utils/configUtils";
export interface KeybindProps {
option: string;
}
export interface KeybindState {
keybind: Keybind;
}
let dialog;
class KeybindComponent extends React.Component<KeybindProps, KeybindState> {
constructor(props: KeybindProps) {
super(props);
this.state = {keybind: Config.config[this.props.option]};
}
render(): React.ReactElement {
return(
<>
<div className="keybind-buttons inline" title={chrome.i18n.getMessage("change")} onClick={() => this.openEditDialog()}>
{this.state.keybind?.ctrl && <div className="key keyControl">Ctrl</div>}
{this.state.keybind?.ctrl && <span className="keyControl">+</span>}
{this.state.keybind?.alt && <div className="key keyAlt">Alt</div>}
{this.state.keybind?.alt && <span className="keyAlt">+</span>}
{this.state.keybind?.shift && <div className="key keyShift">Shift</div>}
{this.state.keybind?.shift && <span className="keyShift">+</span>}
{this.state.keybind?.key != null && <div className="key keyBase">{formatKey(this.state.keybind.key)}</div>}
{this.state.keybind == null && <span className="unbound">{chrome.i18n.getMessage("notSet")}</span>}
</div>
{this.state.keybind != null &&
<div className="option-button trigger-button inline" onClick={() => this.unbind()}>
{chrome.i18n.getMessage("unbind")}
</div>
}
</>
);
}
equals(other: Keybind): boolean {
return keybindEquals(this.state.keybind, other);
}
toString(): string {
return keybindToString(this.state.keybind);
}
openEditDialog(): void {
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);
}
closeEditDialog(updateWith: Keybind): void {
ReactDOM.unmountComponentAtNode(dialog);
dialog.remove();
if (updateWith != null)
this.setState({keybind: updateWith});
}
unbind(): void {
this.setState({keybind: null});
Config.config[this.props.option] = null;
}
}
export default KeybindComponent;

165
src/components/KeybindDialogComponent.tsx Normal file
View File

@@ -0,0 +1,165 @@
import * as React from "react";
import { ChangeEvent } from "react";
import Config from "../config";
import { Keybind } from "../types";
import { keybindEquals, formatKey } from "../utils/configUtils";
export interface KeybindDialogProps {
option: string;
closeListener: (updateWith) => void;
}
export interface KeybindDialogState {
key: Keybind;
error: ErrorMessage;
}
interface ErrorMessage {
message: string;
blocking: boolean;
}
class KeybindDialogComponent extends React.Component<KeybindDialogProps, KeybindDialogState> {
constructor(props: KeybindDialogProps) {
super(props);
this.state = {
key: {
key: null,
code: null,
ctrl: false,
alt: false,
shift: false
},
error: {
message: null,
blocking: false
}
};
}
render(): React.ReactElement {
return(
<>
<div className="blocker"></div>
<div className="dialog">
<div id="change-keybind-description">{chrome.i18n.getMessage("keybindDescription")}</div>
<div id="change-keybind-settings">
<div id="change-keybind-modifiers" className="inline">
<div>
<input id="change-keybind-ctrl" type="checkbox" onChange={this.keybindModifierChecked} />
<label htmlFor="change-keybind-ctrl">Ctrl</label>
</div>
<div>
<input id="change-keybind-alt" type="checkbox" onChange={this.keybindModifierChecked} />
<label htmlFor="change-keybind-alt">Alt</label>
</div>
<div>
<input id="change-keybind-shift" type="checkbox" onChange={this.keybindModifierChecked} />
<label htmlFor="change-keybind-shift">Shift</label>
</div>
</div>
<div className="key inline">{formatKey(this.state.key.key)}</div>
</div>
<div id="change-keybind-error">{this.state.error?.message}</div>
<div id="change-keybind-buttons">
<div className={"option-button save-button inline" + ((this.state.error?.blocking || this.state.key.key == null) ? " disabled" : "")} onClick={() => this.save()}>
{chrome.i18n.getMessage("save")}
</div>
<div className="option-button cancel-button inline" onClick={() => this.props.closeListener(null)}>
{chrome.i18n.getMessage("cancel")}
</div>
</div>
</div>
</>
);
}
componentDidMount(): void {
parent.document.addEventListener("keydown", this.keybindKeyPressed);
document.addEventListener("keydown", this.keybindKeyPressed);
}
componentWillUnmount(): void {
parent.document.removeEventListener("keydown", this.keybindKeyPressed);
document.removeEventListener("keydown", this.keybindKeyPressed);
}
keybindKeyPressed = (e: KeyboardEvent): void => {
if (!e.altKey && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.getModifierState("AltGraph")) {
if (e.code == "Escape") {
this.props.closeListener(null);
return;
}
this.setState({
key: {
key: e.key,
code: e.code,
ctrl: this.state.key.ctrl,
alt: this.state.key.alt,
shift: this.state.key.shift}
}, () => this.setState({ error: this.isKeybindAvailable() }));
}
}
keybindModifierChecked = (e: ChangeEvent<HTMLInputElement>): void => {
const id = e.target.id;
const val = e.target.checked;
this.setState({
key: {
key: this.state.key.key,
code: this.state.key.code,
ctrl: id == "change-keybind-ctrl" ? val: this.state.key.ctrl,
alt: id == "change-keybind-alt" ? val: this.state.key.alt,
shift: id == "change-keybind-shift" ? val: this.state.key.shift}
}, () => this.setState({ error: this.isKeybindAvailable() }));
}
isKeybindAvailable(): ErrorMessage {
if (this.state.key.key == null)
return null;
let youtubeShortcuts: Keybind[];
if (/[a-zA-Z0-9,.+\-\][:]/.test(this.state.key.key)) {
youtubeShortcuts = [{key: "k"}, {key: "j"}, {key: "l"}, {key: "p", shift: true}, {key: "n", shift: true}, {key: ","}, {key: "."}, {key: ",", shift: true}, {key: ".", shift: true},
{key: "ArrowRight"}, {key: "ArrowLeft"}, {key: "ArrowUp"}, {key: "ArrowDown"}, {key: "ArrowRight", ctrl: true}, {key: "ArrowLeft", ctrl: true}, {key: "c"}, {key: "o"},
{key: "w"}, {key: "+"}, {key: "-"}, {key: "f"}, {key: "t"}, {key: "i"}, {key: "m"}, {key: "a"}, {key: "s"}, {key: "d"}, {key: "Home"}, {key: "End"},
{key: "0"}, {key: "1"}, {key: "2"}, {key: "3"}, {key: "4"}, {key: "5"}, {key: "6"}, {key: "7"}, {key: "8"}, {key: "9"}, {key: "]"}, {key: "["}];
} else {
youtubeShortcuts = [{key: null, code: "KeyK"}, {key: null, code: "KeyJ"}, {key: null, code: "KeyL"}, {key: null, code: "KeyP", shift: true}, {key: null, code: "KeyN", shift: true},
{key: null, code: "Comma"}, {key: null, code: "Period"}, {key: null, code: "Comma", shift: true}, {key: null, code: "Period", shift: true}, {key: null, code: "Space"},
{key: null, code: "KeyC"}, {key: null, code: "KeyO"}, {key: null, code: "KeyW"}, {key: null, code: "Equal"}, {key: null, code: "Minus"}, {key: null, code: "KeyF"}, {key: null, code: "KeyT"},
{key: null, code: "KeyI"}, {key: null, code: "KeyM"}, {key: null, code: "KeyA"}, {key: null, code: "KeyS"}, {key: null, code: "KeyD"}, {key: null, code: "BracketLeft"}, {key: null, code: "BracketRight"}];
}
for (const shortcut of youtubeShortcuts) {
const withShift = Object.assign({}, shortcut);
if (!/[0-9]/.test(this.state.key.key)) //shift+numbers don't seem to do anything on youtube, all other keys do
withShift.shift = true;
if (this.equals(shortcut) || this.equals(withShift))
return {message: chrome.i18n.getMessage("youtubeKeybindWarning"), blocking: false};
}
if (this.props.option != "skipKeybind" && this.equals(Config.config['skipKeybind']) ||
this.props.option != "submitKeybind" && this.equals(Config.config['submitKeybind']) ||
this.props.option != "startSponsorKeybind" && this.equals(Config.config['startSponsorKeybind']))
return {message: chrome.i18n.getMessage("keyAlreadyUsed"), blocking: true};
return null;
}
equals(other: Keybind): boolean {
return keybindEquals(this.state.key, other);
}
save(): void {
if (this.state.key.key != null && !this.state.error?.blocking) {
Config.config[this.props.option] = this.state.key;
this.props.closeListener(this.state.key);
}
}
}
export default KeybindDialogComponent;

26
src/components/SkipNoticeComponent.tsx
View File

@@ -6,8 +6,8 @@ import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
import Utils from "../utils";
const utils = new Utils();
import { getSkippingText } from "../utils/categoryUtils";
import { keybindToString } from "../utils/configUtils";
import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
@@ -344,7 +344,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
className="sponsorSkipObject sponsorSkipNoticeButton"
style={style}
onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
{this.state.skipButtonText + (this.state.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "")}
{this.state.skipButtonText + (this.state.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
</button>
</span>
);
@@ -517,9 +517,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
source: SponsorSourceType.Local
};
const segmentTimes = Config.config.segmentTimes.get(sponsorVideoID) || [];
const segmentTimes = Config.config.unsubmittedSegments[sponsorVideoID] || [];
segmentTimes.push(sponsorTimesSubmitting);
Config.config.segmentTimes.set(sponsorVideoID, segmentTimes);
Config.config.unsubmittedSegments[sponsorVideoID] = segmentTimes;
Config.forceSyncUpdate("unsubmittedSegments");
this.props.contentContainer().sponsorTimesSubmitting.push(sponsorTimesSubmitting);
this.props.contentContainer().updatePreviewBar();
@@ -645,18 +646,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
// Change the sponsor locally
if (segment) {
if (type === 0) {
segment.hidden = SponsorHideType.Downvoted;
} else if (category) {
segment.category = category; // This is the actual segment on the video page
this.segments[index].category = category; //this is the segment inside the skip notice.
} else if (type === 1) {
segment.hidden = SponsorHideType.Visible;
}
this.contentContainer().updatePreviewBar();
if (segment && category) {
// This is the segment inside the skip notice
this.segments[index].category = category;
}
}
@@ -693,7 +685,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
clearConfigListener(): void {
if (this.configListener) {
Config.configListeners.splice(Config.configListeners.indexOf(this.configListener), 1);
Config.configSyncListeners.splice(Config.configSyncListeners.indexOf(this.configListener), 1);
this.configListener = null;
}
}

20
src/components/SponsorTimeEditComponent.tsx
View File

@@ -85,7 +85,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
// Add as a config listener
if (!this.configUpdateListener) {
this.configUpdateListener = () => this.configUpdate();
Config.configListeners.push(this.configUpdate.bind(this));
Config.configSyncListeners.push(this.configUpdate.bind(this));
}
this.checkToShowFullVideoWarning();
@@ -93,7 +93,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
componentWillUnmount(): void {
if (this.configUpdateListener) {
Config.configListeners.splice(Config.configListeners.indexOf(this.configUpdate.bind(this)), 1);
Config.configSyncListeners.splice(Config.configSyncListeners.indexOf(this.configUpdate.bind(this)), 1);
}
}
@@ -266,7 +266,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
</span>
): ""}
{(!isNaN(segment[1])) ? (
{(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
<span id={"sponsorTimeInspectButton" + this.idSuffix}
className="sponsorTimeEditButton"
onClick={this.inspectTime.bind(this)}>
@@ -274,7 +274,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
</span>
): ""}
{(!isNaN(segment[1])) ? (
{(!isNaN(segment[1]) && sponsorTime.actionType != ActionType.Full) ? (
<span id={"sponsorTimeEditButton" + this.idSuffix}
className="sponsorTimeEditButton"
onClick={this.toggleEditTime.bind(this)}>
@@ -409,7 +409,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
if (confirm(chrome.i18n.getMessage("enableThisCategoryFirst")
.replace("{0}", chrome.i18n.getMessage("category_" + chosenCategory)))) {
// Open options page
chrome.runtime.sendMessage({message: "openConfig", hash: chosenCategory + "OptionsName"});
chrome.runtime.sendMessage({message: "openConfig", hash: "behavior"});
}
return;
@@ -547,7 +547,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
const description = actionType === ActionType.Chapter ? this.descriptionOptionRef?.current?.value : "";
sponsorTimesSubmitting[this.props.index].description = description;
Config.config.segmentTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimesSubmitting);
Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
Config.forceSyncUpdate("unsubmittedSegments");
this.props.contentContainer().updatePreviewBar();
@@ -593,7 +594,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
sponsorTimes.splice(index, 1);
//save this
Config.config.segmentTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimes);
if (sponsorTimes.length > 0) {
Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimes;
} else {
delete Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID];
}
Config.forceSyncUpdate("unsubmittedSegments");
this.props.contentContainer().updatePreviewBar();

37
src/components/TooltipComponent.tsx Normal file
View File

@@ -0,0 +1,37 @@
import * as React from "react";
import Config from "../config";
import { Category, SegmentUUID, SponsorTime } from "../types";
export interface TooltipProps {
text: string;
show: boolean;
}
export interface TooltipState {
}
class TooltipComponent extends React.Component<TooltipProps, TooltipState> {
constructor(props: TooltipProps) {
super(props);
}
render(): React.ReactElement {
const style: React.CSSProperties = {
display: this.props.show ? "flex" : "none",
position: "absolute",
}
return (
<span style={style}
className={"sponsorBlockTooltip"} >
<span className="sponsorBlockTooltipText">
{this.props.text}
</span>
</span>
);
}
}
export default TooltipComponent;

335
src/config.ts
View File

@@ -1,19 +1,17 @@
import * as CompileConfig from "../config.json";
import * as invidiousList from "../ci/invidiouslist.json";
import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes } from "./types";
import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
import { keybindEquals } from "./utils/configUtils";
interface SBConfig {
userID: string,
isVip: boolean,
lastIsVipUpdate: number,
/* Contains unsubmitted segments that the user has created. */
segmentTimes: SBMap<string, SponsorTime[]>,
unsubmittedSegments: Record<string, SponsorTime[]>,
defaultCategory: Category,
whitelistedChannels: string[],
forceChannelCheck: boolean,
skipKeybind: string,
startSponsorKeybind: string,
submitKeybind: string,
minutesSaved: number,
skipCount: number,
sponsorTimesContributed: number,
@@ -24,6 +22,7 @@ interface SBConfig {
fullVideoSegments: boolean,
trackViewCount: boolean,
trackViewCountInPrivate: boolean,
trackDownvotes: boolean,
dontShowNotice: boolean,
noticeVisibilityMode: NoticeVisbilityMode,
hideVideoPlayerControls: boolean,
@@ -38,13 +37,15 @@ interface SBConfig {
serverAddress: string,
minDuration: number,
skipNoticeDuration: number,
audioNotificationOnSkip,
audioNotificationOnSkip: boolean,
checkForUnlistedVideos: boolean,
testingServer: boolean,
refetchWhenNotFound: boolean,
ytInfoPermissionGranted: boolean,
allowExpirements: boolean,
showDonationLink: boolean,
showPopupDonationCount: number,
donateClicked: number,
autoHideInfoButton: boolean,
autoSkipOnMusicVideos: boolean,
colorPalette: {
@@ -54,6 +55,19 @@ interface SBConfig {
},
scrollToEditTimeUpdate: boolean,
categoryPillUpdate: boolean,
darkMode: boolean,
// Used to cache calculated text color info
categoryPillColors: {
[key in Category]: {
lastColor: string,
textColor: string
}
}
skipKeybind: Keybind,
startSponsorKeybind: Keybind,
submitKeybind: Keybind,
// What categories should be skipped
categorySelections: CategorySelection[],
@@ -83,96 +97,38 @@ interface SBConfig {
}
}
export interface SBObject {
configListeners: Array<(changes: StorageChangesObject) => unknown>;
defaults: SBConfig;
localConfig: SBConfig;
config: SBConfig;
export type VideoDownvotes = { segments: { uuid: HashedValue, hidden: SponsorHideType }[] , lastAccess: number };
// Functions
encodeStoredItem<T>(data: T): T | UnencodedSegmentTimes;
convertJSON(): void;
interface SBStorage {
/* VideoID prefixes to UUID prefixes */
downvotedSegments: Record<VideoID & HashedValue, VideoDownvotes>,
}
// Allows a SBMap to be conveted into json form
// Currently used for local storage
class SBMap<T, U> extends Map {
id: string;
constructor(id: string, entries?: [T, U][]) {
super();
this.id = id;
// Import all entries if they were given
if (entries !== undefined) {
for (const item of entries) {
super.set(item[0], item[1])
}
}
}
get(key): U {
return super.get(key);
}
rawSet(key, value) {
return super.set(key, value);
}
update() {
// Store updated SBMap locally
chrome.storage.sync.set({
[this.id]: encodeStoredItem(this)
});
}
set(key: T, value: U) {
const result = super.set(key, value);
this.update();
return result;
}
delete(key) {
const result = super.delete(key);
// Make sure there are no empty elements
for (const entry of this.entries()) {
if (entry[1].length === 0) {
super.delete(entry[0]);
}
}
this.update();
return result;
}
clear() {
const result = super.clear();
this.update();
return result;
}
export interface SBObject {
configSyncListeners: Array<(changes: StorageChangesObject) => unknown>;
syncDefaults: SBConfig;
localDefaults: SBStorage;
cachedSyncConfig: SBConfig;
cachedLocalStorage: SBStorage;
config: SBConfig;
local: SBStorage;
forceSyncUpdate(prop: string): void;
forceLocalUpdate(prop: string): void;
}
const Config: SBObject = {
/**
* Callback function when an option is updated
*/
configListeners: [],
defaults: {
configSyncListeners: [],
syncDefaults: {
userID: null,
isVip: false,
lastIsVipUpdate: 0,
segmentTimes: new SBMap("segmentTimes"),
unsubmittedSegments: {},
defaultCategory: "chooseACategory" as Category,
whitelistedChannels: [],
forceChannelCheck: false,
skipKeybind: "Enter",
startSponsorKeybind: ";",
submitKeybind: "'",
minutesSaved: 0,
skipCount: 0,
sponsorTimesContributed: 0,
@@ -183,6 +139,7 @@ const Config: SBObject = {
fullVideoSegments: true,
trackViewCount: true,
trackViewCountInPrivate: true,
trackDownvotes: true,
dontShowNotice: false,
noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
hideVideoPlayerControls: false,
@@ -204,10 +161,26 @@ const Config: SBObject = {
ytInfoPermissionGranted: false,
allowExpirements: true,
showDonationLink: true,
showPopupDonationCount: 0,
donateClicked: 0,
autoHideInfoButton: true,
autoSkipOnMusicVideos: false,
scrollToEditTimeUpdate: false, // false means the tooltip will be shown
categoryPillUpdate: false,
darkMode: true,
categoryPillColors: {},
/**
* Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
* Using ctrl+alt, or shift may produce a different character that we will not be able to recognize in different locales.
* The exception for shift is letters, where it only capitalizes. So shift+A is fine, but shift+1 isn't.
* Don't forget to add the new keybind to the checks in "KeybindDialogComponent.isKeybindAvailable()" and in "migrateOldFormats()"!
* TODO: Find a way to skip having to update these checks. Maybe storing keybinds in a Map?
*/
skipKeybind: {key: "Enter"},
startSponsorKeybind: {key: ";"},
submitKeybind: {key: "'"},
categorySelections: [{
name: "sponsor" as Category,
@@ -310,74 +283,49 @@ const Config: SBObject = {
}
}
},
localConfig: null,
localDefaults: {
downvotedSegments: {}
},
cachedSyncConfig: null,
cachedLocalStorage: null,
config: null,
// Functions
encodeStoredItem,
convertJSON
local: null,
forceSyncUpdate,
forceLocalUpdate
};
// Function setup
/**
* A SBMap cannot be stored in the chrome storage.
* This data will be encoded into an array instead
*
* @param data
*/
function encodeStoredItem<T>(data: T): T | UnencodedSegmentTimes {
// if data is SBMap convert to json for storing
if(!(data instanceof SBMap)) return data;
return Array.from(data.entries()).filter((element) => element[1].length > 0); // Remove empty entries
}
/**
* An SBMap cannot be stored in the chrome storage.
* This data will be decoded from the array it is stored in
*
* @param {*} data
*/
function decodeStoredItem<T>(id: string, data: T): T | SBMap<string, SponsorTime[]> {
if (!Config.defaults[id]) return data;
if (Config.defaults[id] instanceof SBMap) {
try {
if (!Array.isArray(data)) return data;
return new SBMap(id, data as UnencodedSegmentTimes);
} catch(e) {
console.error("Failed to parse SBMap: " + id);
}
}
// If all else fails, return the data
return data;
}
function configProxy(): SBConfig {
chrome.storage.onChanged.addListener((changes: {[key: string]: chrome.storage.StorageChange}) => {
for (const key in changes) {
Config.localConfig[key] = decodeStoredItem(key, changes[key].newValue);
}
for (const callback of Config.configListeners) {
callback(changes);
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) {
Config.cachedSyncConfig[key] = changes[key].newValue;
}
for (const callback of Config.configSyncListeners) {
callback(changes);
}
} else if (areaName === "local") {
for (const key in changes) {
Config.cachedLocalStorage[key] = changes[key].newValue;
}
}
});
const handler: ProxyHandler<SBConfig> = {
const syncHandler: ProxyHandler<SBConfig> = {
set<K extends keyof SBConfig>(obj: SBConfig, prop: K, value: SBConfig[K]) {
Config.localConfig[prop] = value;
Config.cachedSyncConfig[prop] = value;
chrome.storage.sync.set({
[prop]: encodeStoredItem(value)
[prop]: value
});
return true;
},
get<K extends keyof SBConfig>(obj: SBConfig, prop: K): SBConfig[K] {
const data = Config.localConfig[prop];
const data = Config.cachedSyncConfig[prop];
return obj[prop] || data;
},
@@ -390,19 +338,73 @@ function configProxy(): SBConfig {
};
return new Proxy<SBConfig>({handler} as unknown as SBConfig, handler);
const localHandler: ProxyHandler<SBStorage> = {
set<K extends keyof SBStorage>(obj: SBStorage, prop: K, value: SBStorage[K]) {
Config.cachedLocalStorage[prop] = value;
chrome.storage.local.set({
[prop]: value
});
return true;
},
get<K extends keyof SBStorage>(obj: SBStorage, prop: K): SBStorage[K] {
const data = Config.cachedLocalStorage[prop];
return obj[prop] || data;
},
deleteProperty(obj: SBStorage, prop: keyof SBStorage) {
chrome.storage.local.remove(<string> prop);
return true;
}
};
return {
sync: new Proxy<SBConfig>({ handler: syncHandler } as unknown as SBConfig, syncHandler),
local: new Proxy<SBStorage>({ handler: localHandler } as unknown as SBStorage, localHandler)
};
}
function fetchConfig(): Promise<void> {
return new Promise((resolve) => {
chrome.storage.sync.get(null, function(items) {
Config.localConfig = <SBConfig> <unknown> items; // Data is ready
resolve();
});
function forceSyncUpdate(prop: string): void {
chrome.storage.sync.set({
[prop]: Config.cachedSyncConfig[prop]
});
}
function migrateOldFormats(config: SBConfig) {
function forceLocalUpdate(prop: string): void {
chrome.storage.local.set({
[prop]: Config.cachedLocalStorage[prop]
});
}
async function fetchConfig(): Promise<void> {
await Promise.all([new Promise<void>((resolve) => {
chrome.storage.sync.get(null, function(items) {
Config.cachedSyncConfig = <SBConfig> <unknown> items;
resolve();
});
}), new Promise<void>((resolve) => {
chrome.storage.local.get(null, function(items) {
Config.cachedLocalStorage = <SBStorage> <unknown> items;
resolve();
});
})]);
}
function migrateOldSyncFormats(config: SBConfig) {
if (config["segmentTimes"]) {
const unsubmittedSegments = {};
for (const item of config["segmentTimes"]) {
unsubmittedSegments[item[0]] = item[1];
}
chrome.storage.sync.remove("segmentTimes", () => config.unsubmittedSegments = unsubmittedSegments);
}
if (!config["exclusive_accessCategoryAdded"] && !config.categorySelections.some((s) => s.name === "exclusive_access")) {
config["exclusive_accessCategoryAdded"] = true;
@@ -450,6 +452,29 @@ function migrateOldFormats(config: SBConfig) {
}
}
if (typeof config["skipKeybind"] == "string") {
config["skipKeybind"] = {key: config["skipKeybind"]};
}
if (typeof config["startSponsorKeybind"] == "string") {
config["startSponsorKeybind"] = {key: config["startSponsorKeybind"]};
}
if (typeof config["submitKeybind"] == "string") {
config["submitKeybind"] = {key: config["submitKeybind"]};
}
// Unbind key if it matches a previous one set by the user (should be ordered oldest to newest)
const keybinds = ["skipKeybind", "startSponsorKeybind", "submitKeybind"];
for (let i = keybinds.length-1; i >= 0; i--) {
for (let j = 0; j < keybinds.length; j++) {
if (i == j)
continue;
if (keybindEquals(config[keybinds[i]], config[keybinds[j]]))
config[keybinds[i]] = null;
}
}
// Remove some old unused options
if (config["sponsorVideoID"] !== undefined) {
chrome.storage.sync.remove("sponsorVideoID");
@@ -469,32 +494,32 @@ async function setupConfig() {
await fetchConfig();
addDefaults();
convertJSON();
const config = configProxy();
migrateOldFormats(config);
migrateOldSyncFormats(config.sync);
Config.config = config;
}
function convertJSON(): void {
Object.keys(Config.localConfig).forEach(key => {
Config.localConfig[key] = decodeStoredItem(key, Config.localConfig[key]);
});
Config.config = config.sync;
Config.local = config.local;
}
// Add defaults
function addDefaults() {
for (const key in Config.defaults) {
if(!Object.prototype.hasOwnProperty.call(Config.localConfig, key)) {
Config.localConfig[key] = Config.defaults[key];
for (const key in Config.syncDefaults) {
if(!Object.prototype.hasOwnProperty.call(Config.cachedSyncConfig, key)) {
Config.cachedSyncConfig[key] = Config.syncDefaults[key];
} else if (key === "barTypes") {
for (const key2 in Config.defaults[key]) {
if(!Object.prototype.hasOwnProperty.call(Config.localConfig[key], key2)) {
Config.localConfig[key][key2] = Config.defaults[key][key2];
for (const key2 in Config.syncDefaults[key]) {
if(!Object.prototype.hasOwnProperty.call(Config.cachedSyncConfig[key], key2)) {
Config.cachedSyncConfig[key][key2] = Config.syncDefaults[key][key2];
}
}
}
}
for (const key in Config.localDefaults) {
if(!Object.prototype.hasOwnProperty.call(Config.cachedLocalStorage, key)) {
Config.cachedLocalStorage[key] = Config.localDefaults[key];
}
}
}
// Sync config

201
src/content.ts
View File

@@ -1,7 +1,7 @@
import Config from "./config";
import { SponsorTime, CategorySkipOption, VideoID, SponsorHideType, VideoInfo, StorageChangesObject, ChannelIDInfo, ChannelIDStatus, SponsorSourceType, SegmentUUID, Category, SkipToTimeParams, ToggleSkippable, ActionType, ScheduledTime } from "./types";
import { SponsorTime, CategorySkipOption, VideoID, SponsorHideType, VideoInfo, StorageChangesObject, ChannelIDInfo, ChannelIDStatus, SponsorSourceType, SegmentUUID, Category, SkipToTimeParams, ToggleSkippable, ActionType, ScheduledTime, HashedValue } from "./types";
import { ContentContainer } from "./types";
import { ContentContainer, Keybind } from "./types";
import Utils from "./utils";
const utils = new Utils();
@@ -16,6 +16,7 @@ import * as Chat from "./js-components/chat";
import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
import { getStartTimeFromUrl } from "./utils/urlParser";
import { findValidElement, getControls, getHashParams, isVisible } from "./utils/pageUtils";
import { isSafari, keybindEquals } from "./utils/configUtils";
import { CategoryPill } from "./render/CategoryPill";
import { AnimationUtils } from "./utils/animationUtils";
import { GenericUtils } from "./utils/genericUtils";
@@ -44,6 +45,7 @@ let lockedCategories: Category[] = [];
// Skips are rescheduled every seeking event.
// Skips are canceled every seeking event
let currentSkipSchedule: NodeJS.Timeout = null;
let currentSkipInterval: NodeJS.Timeout = null;
/** Has the sponsor been skipped */
let sponsorSkipped: boolean[] = [];
@@ -97,6 +99,7 @@ addHotkeyListener();
/** Segments created by the user which have not yet been submitted. */
let sponsorTimesSubmitting: SponsorTime[] = [];
let loadedPreloadedSegment = false;
//becomes true when isInfoFound is called
//this is used to close the popup on YouTube when the other popup opens
@@ -135,6 +138,9 @@ const manualSkipPercentCount = 0.5;
//get messages from the background script and the popup
chrome.runtime.onMessage.addListener(messageListener);
//store pressed modifier keys
const pressedKeys = new Set();
function messageListener(request: Message, sender: unknown, sendResponse: (response: MessageResponse) => void): void | boolean {
//messages from popup script
@@ -206,6 +212,14 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
case "reskip":
reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID));
break;
case "submitVote":
vote(request.type, request.UUID).then((response) => sendResponse(response));
return true;
case "hideSegment":
utils.getSponsorTimeFromUUID(sponsorTimes, request.UUID).hidden = request.type;
utils.addHiddenSegment(sponsorVideoID, request.UUID, request.type);
updatePreviewBar();
break;
}
}
@@ -224,8 +238,8 @@ function contentConfigUpdateListener(changes: StorageChangesObject) {
}
}
if (!Config.configListeners.includes(contentConfigUpdateListener)) {
Config.configListeners.push(contentConfigUpdateListener);
if (!Config.configSyncListeners.includes(contentConfigUpdateListener)) {
Config.configSyncListeners.push(contentConfigUpdateListener);
}
function resetValues() {
@@ -418,9 +432,13 @@ function videoOnReadyListener(): void {
function cancelSponsorSchedule(): void {
if (currentSkipSchedule !== null) {
clearTimeout(currentSkipSchedule);
currentSkipSchedule = null;
}
if (currentSkipInterval !== null) {
clearInterval(currentSkipInterval);
currentSkipInterval = null;
}
}
/**
@@ -482,15 +500,16 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
}
}
const skippingFunction = () => {
const skippingFunction = (forceVideoTime?: number) => {
let forcedSkipTime: number = null;
let forcedIncludeIntersectingSegments = false;
let forcedIncludeNonIntersectingSegments = true;
if (incorrectVideoCheck(videoID, currentSkip)) return;
forceVideoTime ||= video.currentTime;
if ((shouldSkip(currentSkip) || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment))
&& video.currentTime >= skipTime[0] && video.currentTime < skipTime[1]) {
&& forceVideoTime >= skipTime[0] && forceVideoTime < skipTime[1]) {
skipToTime({
v: video,
skipTime,
@@ -514,7 +533,22 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
if (timeUntilSponsor <= 0) {
skippingFunction();
} else {
currentSkipSchedule = setTimeout(skippingFunction, timeUntilSponsor * 1000 * (1 / video.playbackRate));
const delayTime = timeUntilSponsor * 1000 * (1 / video.playbackRate);
if (delayTime < 300 && utils.isFirefox() && !isSafari()) {
// For Firefox, use interval instead of timeout near the end to combat imprecise video time
const startIntervalTime = performance.now();
const startVideoTime = video.currentTime;
currentSkipInterval = setInterval(() => {
const intervalDuration = performance.now() - startIntervalTime;
if (intervalDuration >= delayTime || video.currentTime >= skipTime[0]) {
clearInterval(currentSkipInterval);
skippingFunction(Math.max(video.currentTime, startVideoTime + intervalDuration / 1000));
}
}, 5);
} else {
// Schedule for right before to be more precise than normal timeout
currentSkipSchedule = setTimeout(skippingFunction, Math.max(0, delayTime - 30));
}
}
}
@@ -686,17 +720,14 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
setupVideoMutationListener();
// Create categories list
const categories: string[] = [];
for (const categorySelection of Config.config.categorySelections) {
categories.push(categorySelection.name);
}
const categories: string[] = Config.config.categorySelections.map((category) => category.name);
const extraRequestData: Record<string, unknown> = {};
const hashParams = getHashParams();
if (hashParams.requiredSegment) extraRequestData.requiredSegment = hashParams.requiredSegment;
// Check for hashPrefix setting
const hashPrefix = (await utils.getHash(id, 1)).substr(0, 4);
const hashPrefix = (await utils.getHash(id, 1)).slice(0, 4) as VideoID & HashedValue;
const response = await utils.asyncRequestToServer('GET', "/api/skipSegments/" + hashPrefix, {
categories,
actionTypes: getEnabledActionTypes(),
@@ -735,10 +766,10 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
// Hide all submissions smaller than the minimum duration
if (Config.config.minDuration !== 0) {
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].segment[1] - sponsorTimes[i].segment[0] < Config.config.minDuration
&& sponsorTimes[i].actionType !== ActionType.Poi) {
sponsorTimes[i].hidden = SponsorHideType.MinimumDuration;
for (const segment of sponsorTimes) {
const duration = segment[1] - segment[0];
if (duration > 0 && duration < Config.config.minDuration) {
segment.hidden = SponsorHideType.MinimumDuration;
}
}
}
@@ -754,6 +785,18 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
}
}
// See if some segments should be hidden
const downvotedData = Config.local.downvotedSegments[hashPrefix];
if (downvotedData) {
for (const segment of sponsorTimes) {
const hashedUUID = await utils.getHash(segment.UUID, 1);
const segmentDownvoteData = downvotedData.segments.find((downvote) => downvote.uuid === hashedUUID);
if (segmentDownvoteData) {
segment.hidden = segmentDownvoteData.hidden;
}
}
}
startSkipScheduleCheckingForStartSponsors();
//update the preview bar
@@ -816,7 +859,7 @@ async function updateVipInfo(): Promise<boolean> {
}
async function lockedCategoriesLookup(id: string): Promise<void> {
const hashPrefix = (await utils.getHash(id, 1)).substr(0, 4);
const hashPrefix = (await utils.getHash(id, 1)).slice(0, 4);
const response = await utils.asyncRequestToServer("GET", "/api/lockCategories/" + hashPrefix);
if (response.ok) {
@@ -926,6 +969,8 @@ async function getVideoInfo(): Promise<void> {
function getYouTubeVideoID(document: Document): string | boolean {
const url = document.URL;
// clips should never skip, going from clip to full video has no indications.
if (url.includes("youtube.com/clip/")) return false;
// skip to URL if matches youtube watch or invidious or matches youtube pattern
if ((!url.includes("youtube.com")) || url.includes("/watch") || url.includes("/shorts/") || url.includes("playlist")) return getYouTubeVideoIDFromURL(url);
// skip to document and don't hide if on /embed/
@@ -979,8 +1024,8 @@ function getYouTubeVideoIDFromURL(url: string): string | boolean {
return id.length == 11 ? id : false;
} else if (urlObject.pathname.startsWith("/embed/") || urlObject.pathname.startsWith("/shorts/")) {
try {
const id = urlObject.pathname.split("/")[2];
if (id && id.length >= 11) return id.substr(0, 11);
const id = urlObject.pathname.split("/")[2]
if (id?.length >=11 ) return id.slice(0, 11);
} catch (e) {
console.error("[SB] Video ID not valid for " + url);
return false;
@@ -1054,7 +1099,8 @@ async function whitelistCheck() {
const getChannelID = () => videoInfo?.videoDetails?.channelId
?? document.querySelector(".ytd-channel-name a")?.getAttribute("href")?.replace(/\/.+\//, "") // YouTube
?? document.querySelector(".ytp-title-channel-logo")?.getAttribute("href")?.replace(/https:\/.+\//, "") // YouTube Embed
?? document.querySelector("a > .channel-profile")?.parentElement?.getAttribute("href")?.replace(/\/.+\//, ""); // Invidious
?? document.querySelector("a > .channel-profile")?.parentElement?.getAttribute("href")?.replace(/\/.+\//, "") // Invidious
?? document.querySelector("a.slim-owner-icon-and-title")?.getAttribute("href")?.replace(/\/.+\//, ""); // Mobile YouTube
try {
await utils.wait(() => !!getChannelID(), 6000, 20);
@@ -1285,14 +1331,21 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
if (autoSkip && Config.config.audioNotificationOnSkip) {
const beep = new Audio(chrome.runtime.getURL("icons/beep.ogg"));
beep.volume = video.volume * 0.1;
const oldMetadata = navigator.mediaSession.metadata
beep.play();
beep.addEventListener("ended", () => {
navigator.mediaSession.metadata = null;
setTimeout(() =>
navigator.mediaSession.metadata = oldMetadata
);
})
}
if (!autoSkip
&& skippingSegments.length === 1
&& skippingSegments[0].actionType === ActionType.Poi) {
skipButtonControlBar.enable(skippingSegments[0]);
if (onMobileYouTube) skipButtonControlBar.setShowKeybindHint(false);
if (onMobileYouTube || Config.config.skipKeybind == null) skipButtonControlBar.setShowKeybindHint(false);
activeSkipKeybindElement?.setShowKeybindHint(false);
activeSkipKeybindElement = skipButtonControlBar;
@@ -1301,7 +1354,7 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
//send out the message saying that a sponsor message was skipped
if (!Config.config.dontShowNotice || !autoSkip) {
const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, unskipTime);
if (onMobileYouTube) newSkipNotice.setShowKeybindHint(false);
if (onMobileYouTube || Config.config.skipKeybind == null) newSkipNotice.setShowKeybindHint(false);
skipNotices.push(newSkipNotice);
activeSkipKeybindElement?.setShowKeybindHint(false);
@@ -1508,7 +1561,8 @@ function startOrEndTimingNewSegment() {
}
// Save the newly created segment
Config.config.segmentTimes.set(sponsorVideoID, sponsorTimesSubmitting);
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
Config.forceSyncUpdate("unsubmittedSegments");
// Make sure they know if someone has already submitted something it while they were watching
sponsorsLookup(sponsorVideoID);
@@ -1530,7 +1584,8 @@ function isSegmentCreationInProgress(): boolean {
function cancelCreatingSegment() {
if (isSegmentCreationInProgress()) {
sponsorTimesSubmitting.splice(sponsorTimesSubmitting.length - 1, 1);
Config.config.segmentTimes.set(sponsorVideoID, sponsorTimesSubmitting);
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
Config.forceSyncUpdate("unsubmittedSegments");
if (sponsorTimesSubmitting.length <= 0) resetSponsorSubmissionNotice();
}
@@ -1540,7 +1595,7 @@ function cancelCreatingSegment() {
}
function updateSponsorTimesSubmitting(getFromConfig = true) {
const segmentTimes = Config.config.segmentTimes.get(sponsorVideoID);
const segmentTimes = Config.config.unsubmittedSegments[sponsorVideoID];
//see if this data should be saved in the sponsorTimesSubmitting variable
if (getFromConfig && segmentTimes != undefined) {
@@ -1629,11 +1684,15 @@ function openInfoMenu() {
const copy = <HTMLImageElement> popup.querySelector("#sbPopupIconCopyUserID");
const check = <HTMLImageElement> popup.querySelector("#sbPopupIconCheck");
const refreshSegments = <HTMLImageElement> popup.querySelector("#refreshSegments");
const heart = <HTMLImageElement> popup.querySelector(".sbHeart");
const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate");
logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
settings.src = chrome.extension.getURL("icons/settings.svg");
edit.src = chrome.extension.getURL("icons/pencil.svg");
copy.src = chrome.extension.getURL("icons/clipboard.svg");
check.src = chrome.extension.getURL("icons/check.svg");
heart.src = chrome.extension.getURL("icons/heart.svg");
close.src = chrome.extension.getURL("icons/close.png");
refreshSegments.src = chrome.extension.getURL("icons/refresh.svg");
parentNode.insertBefore(popup, parentNode.firstChild);
@@ -1670,7 +1729,7 @@ function closeInfoMenuAnd<T>(func: () => T): T {
function clearSponsorTimes() {
const currentVideoID = sponsorVideoID;
const sponsorTimes = Config.config.segmentTimes.get(currentVideoID);
const sponsorTimes = Config.config.unsubmittedSegments[currentVideoID];
if (sponsorTimes != undefined && sponsorTimes.length > 0) {
const confirmMessage = chrome.i18n.getMessage("clearThis") + getSegmentsMessage(sponsorTimes)
@@ -1680,7 +1739,8 @@ function clearSponsorTimes() {
resetSponsorSubmissionNotice();
//clear the sponsor times
Config.config.segmentTimes.delete(currentVideoID);
delete Config.config.unsubmittedSegments[currentVideoID];
Config.forceSyncUpdate("unsubmittedSegments");
//clear sponsor times submitting
sponsorTimesSubmitting = [];
@@ -1691,7 +1751,7 @@ function clearSponsorTimes() {
}
//if skipNotice is null, it will not affect the UI
async function vote(type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent): Promise<void> {
async function vote(type: number, UUID: SegmentUUID, category?: Category, skipNotice?: SkipNoticeComponent): Promise<VoteResponse> {
if (skipNotice !== null && skipNotice !== undefined) {
//add loading info
skipNotice.addVoteButtonInfo.bind(skipNotice)(chrome.i18n.getMessage("Loading"))
@@ -1719,6 +1779,8 @@ async function vote(type: number, UUID: SegmentUUID, category?: Category, skipNo
}
}
}
return response;
}
async function voteAsync(type: number, UUID: SegmentUUID, category?: Category): Promise<VoteResponse> {
@@ -1748,7 +1810,29 @@ async function voteAsync(type: number, UUID: SegmentUUID, category?: Category):
type: type,
UUID: UUID,
category: category
}, resolve);
}, (response) => {
if (response.successType === 1) {
// Change the sponsor locally
const segment = utils.getSponsorTimeFromUUID(sponsorTimes, UUID);
if (segment) {
if (type === 0) {
segment.hidden = SponsorHideType.Downvoted;
} else if (category) {
segment.category = category;
} else if (type === 1) {
segment.hidden = SponsorHideType.Visible;
}
if (!category && !Config.config.isVip) {
utils.addHiddenSegment(sponsorVideoID, segment.UUID, segment.hidden);
}
updatePreviewBar();
}
}
resolve(response);
});
});
}
@@ -1807,7 +1891,8 @@ async function sendSubmitMessage() {
}
//update sponsorTimes
Config.config.segmentTimes.set(sponsorVideoID, sponsorTimesSubmitting);
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
Config.forceSyncUpdate("unsubmittedSegments");
// Check to see if any of the submissions are below the minimum duration set
if (Config.config.minDuration > 0) {
@@ -1834,7 +1919,8 @@ async function sendSubmitMessage() {
stopAnimation();
// Remove segments from storage since they've already been submitted
Config.config.segmentTimes.delete(sponsorVideoID);
delete Config.config.unsubmittedSegments[sponsorVideoID];
Config.forceSyncUpdate("unsubmittedSegments");
const newSegments = sponsorTimesSubmitting;
try {
@@ -1883,7 +1969,7 @@ function getSegmentsMessage(sponsorTimes: SponsorTime[]): string {
let timeMessage = utils.getFormattedTime(sponsorTimes[i].segment[s]);
//if this is an end time
if (s == 1) {
timeMessage = " to " + timeMessage;
timeMessage = " " + chrome.i18n.getMessage("to") + " " + timeMessage;
} else if (i > 0) {
//add commas if necessary
timeMessage = ", " + timeMessage;
@@ -1908,30 +1994,47 @@ function addPageListeners(): void {
function addHotkeyListener(): void {
document.addEventListener("keydown", hotkeyListener);
document.addEventListener("keyup", (e) => pressedKeys.delete(e.key));
document.addEventListener("focus", (e) => pressedKeys.clear());
}
function hotkeyListener(e: KeyboardEvent): void {
if (["textarea", "input"].includes(document.activeElement?.tagName?.toLowerCase())
|| document.activeElement?.id?.toLowerCase()?.includes("editable")) return;
const key = e.key;
if (["Alt", "Control", "Shift", "AltGraph"].includes(e.key)) {
pressedKeys.add(e.key);
return;
}
const key:Keybind = {key: e.key, code: e.code, alt: pressedKeys.has("Alt"), ctrl: pressedKeys.has("Control"), shift: pressedKeys.has("Shift")};
const skipKey = Config.config.skipKeybind;
const startSponsorKey = Config.config.startSponsorKeybind;
const submitKey = Config.config.submitKeybind;
switch (key) {
case skipKey:
if (activeSkipKeybindElement) {
if (!pressedKeys.has("AltGraph")) {
if (keybindEquals(key, skipKey)) {
if (activeSkipKeybindElement)
activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
}
break;
case startSponsorKey:
return;
} else if (keybindEquals(key, startSponsorKey)) {
startOrEndTimingNewSegment();
break;
case submitKey:
return;
} else if (keybindEquals(key, submitKey)) {
submitSponsorTimes();
break;
return;
}
}
//legacy - to preserve keybinds for skipKey, startSponsorKey and submitKey for people who set it before the update. (shouldn't be changed for future keybind options)
if (key.key == skipKey?.key && skipKey.code == null && !keybindEquals(Config.syncDefaults.skipKeybind, skipKey)) {
if (activeSkipKeybindElement)
activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
} else if (key.key == startSponsorKey?.key && startSponsorKey.code == null && !keybindEquals(Config.syncDefaults.startSponsorKeybind, startSponsorKey)) {
startOrEndTimingNewSegment();
} else if (key.key == submitKey?.key && submitKey.code == null && !keybindEquals(Config.syncDefaults.submitKeybind, submitKey)) {
submitSponsorTimes();
}
}
@@ -1981,7 +2084,6 @@ function sendRequestToCustomServer(type, fullAddress, callback) {
function updateAdFlag(): void {
const wasAdPlaying = isAdPlaying;
isAdPlaying = document.getElementsByClassName('ad-showing').length > 0;
if(wasAdPlaying != isAdPlaying) {
updatePreviewBar();
updateVisibilityOfPlayerControlsButton();
@@ -2017,8 +2119,12 @@ function showTimeWithoutSkips(skippedDuration: number): void {
}
function checkForPreloadedSegment() {
if (loadedPreloadedSegment) return;
loadedPreloadedSegment = true;
const hashParams = getHashParams();
let pushed = false;
const segments = hashParams.segments;
if (Array.isArray(segments)) {
for (const segment of segments) {
@@ -2031,8 +2137,15 @@ function checkForPreloadedSegment() {
actionType: segment.actionType ? segment.actionType : ActionType.Skip,
source: SponsorSourceType.Local
});
pushed = true;
}
}
}
}
if (pushed) {
Config.config.unsubmittedSegments[sponsorVideoID] = sponsorTimesSubmitting;
Config.forceSyncUpdate("unsubmittedSegments");
}
}

4
src/help.ts
View File

@@ -11,6 +11,10 @@ async function init() {
await utils.wait(() => Config.config !== null);
if (!Config.config.darkMode) {
document.documentElement.setAttribute("data-theme", "light");
}
if (!showDonationLink()) {
document.getElementById("sbDonate").style.display = "none";
}

3
src/js-components/skipButtonControlBar.ts
View File

@@ -1,6 +1,7 @@
import Config from "../config";
import { SponsorTime } from "../types";
import { getSkippingText } from "../utils/categoryUtils";
import { keybindToString } from "../utils/configUtils";
import Utils from "../utils";
import { AnimationUtils } from "../utils/animationUtils";
@@ -180,7 +181,7 @@ export class SkipButtonControlBar {
}
private getTitle(): string {
return getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "");
return getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "");
}
private getChapterPrefix(): HTMLElement {

19
src/messageTypes.ts
View File

@@ -2,7 +2,7 @@
// Message and Response Types
//
import { SegmentUUID, SponsorTime } from "./types";
import { SegmentUUID, SponsorHideType, SponsorTime } from "./types";
interface BaseMessage {
from?: string;
@@ -34,7 +34,19 @@ interface SkipMessage {
UUID: SegmentUUID;
}
export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage);
interface SubmitVoteMessage {
message: "submitVote";
type: number;
UUID: SegmentUUID;
}
interface HideSegmentMessage {
message: "hideSegment";
type: SponsorHideType;
UUID: SegmentUUID;
}
export type Message = BaseMessage & (DefaultMessage | BoolValueMessage | IsInfoFoundMessage | SkipMessage | SubmitVoteMessage | HideSegmentMessage);
export interface IsInfoFoundMessageResponse {
found: boolean;
@@ -64,7 +76,8 @@ export type MessageResponse =
| GetChannelIDResponse
| SponsorStartResponse
| IsChannelWhitelistedResponse
| Record<string, never>;
| Record<string, never>
| VoteResponse;
export interface VoteResponse {
successType: number;

406
src/options.ts
View File

@@ -1,3 +1,6 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import Config from "./config";
import * as CompileConfig from "../config.json";
import * as invidiousList from "../ci/invidiouslist.json";
@@ -7,31 +10,54 @@ window.SB = Config;
import Utils from "./utils";
import CategoryChooser from "./render/CategoryChooser";
import KeybindComponent from "./components/KeybindComponent";
import { showDonationLink } from "./utils/configUtils";
const utils = new Utils();
let embed = false;
window.addEventListener('DOMContentLoaded', init);
async function init() {
utils.localizeHtmlPage();
// selected tab
if (location.hash != "") {
const substr = location.hash.slice(1);
let menuItem = document.querySelector(`[data-for='${substr}']`);
if (menuItem == null)
menuItem = document.querySelector(`[data-for='behavior']`);
menuItem.classList.add("selected");
} else {
document.querySelector(`[data-for='behavior']`).classList.add("selected");
}
document.getElementById("version").innerText = "v. " + chrome.runtime.getManifest().version;
// Remove header if needed
if (window.location.hash === "#embed") {
embed = true;
for (const element of document.getElementsByClassName("titleBar")) {
element.classList.add("hidden");
}
document.getElementById("options").classList.add("embed");
createStickyHeader();
}
if (!Config.configListeners.includes(optionsConfigUpdateListener)) {
Config.configListeners.push(optionsConfigUpdateListener);
if (!Config.configSyncListeners.includes(optionsConfigUpdateListener)) {
Config.configSyncListeners.push(optionsConfigUpdateListener);
}
await utils.wait(() => Config.config !== null);
if (!Config.config.darkMode) {
document.documentElement.setAttribute("data-theme", "light");
}
const donate = document.getElementById("sbDonate");
donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
if (!showDonationLink()) {
document.getElementById("sbDonate").style.visibility = "hidden";
donate.classList.add("hidden");
}
// Set all of the toggle options to the correct option
@@ -39,31 +65,32 @@ async function init() {
const optionsElements = optionsContainer.querySelectorAll("*");
for (let i = 0; i < optionsElements.length; i++) {
if ((optionsElements[i].getAttribute("private-mode-only") === "true" && !(await isIncognitoAllowed()))
|| (optionsElements[i].getAttribute("no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.")
|| (optionsElements[i].getAttribute("if-false") && Config.config[optionsElements[i].getAttribute("if-false")])) {
optionsElements[i].classList.add("hidden");
continue;
const dependentOnName = optionsElements[i].getAttribute("data-dependent-on");
const dependentOn = optionsContainer.querySelector(`[data-sync='${dependentOnName}']`);
let isDependentOnReversed = false;
if (dependentOn)
isDependentOnReversed = dependentOn.getAttribute("data-toggle-type") === "reverse" || optionsElements[i].getAttribute("data-dependent-on-inverted") === "true";
if (await shouldHideOption(optionsElements[i]) || (dependentOn && (isDependentOnReversed ? Config.config[dependentOnName] : !Config.config[dependentOnName]))) {
optionsElements[i].classList.add("hidden", "hiding");
if (!dependentOn)
continue;
}
const option = optionsElements[i].getAttribute("sync-option");
const option = optionsElements[i].getAttribute("data-sync");
switch (optionsElements[i].getAttribute("option-type")) {
switch (optionsElements[i].getAttribute("data-type")) {
case "toggle": {
const optionResult = Config.config[option];
const checkbox = optionsElements[i].querySelector("input");
const reverse = optionsElements[i].getAttribute("toggle-type") === "reverse";
const reverse = optionsElements[i].getAttribute("data-toggle-type") === "reverse";
const confirmMessage = optionsElements[i].getAttribute("confirm-message");
const confirmMessage = optionsElements[i].getAttribute("data-confirm-message");
const confirmOnTrue = optionsElements[i].getAttribute("data-confirm-on") !== "false";
if (optionResult != undefined) {
checkbox.checked = optionResult;
if (reverse) {
optionsElements[i].querySelector("input").checked = !optionResult;
}
}
if (optionResult != undefined)
checkbox.checked = reverse ? !optionResult : optionResult;
// See if anything extra should be run first time
switch (option) {
@@ -73,10 +100,11 @@ async function init() {
}
// Add click listener
checkbox.addEventListener("click", () => {
checkbox.addEventListener("click", async () => {
// Confirm if required
if (checkbox.checked && confirmMessage && !confirm(chrome.i18n.getMessage(confirmMessage))){
checkbox.checked = false;
if (confirmMessage && ((confirmOnTrue && checkbox.checked) || (!confirmOnTrue && !checkbox.checked))
&& !confirm(chrome.i18n.getMessage(confirmMessage))){
checkbox.checked = !checkbox.checked;
return;
}
@@ -92,11 +120,41 @@ async function init() {
// Enable the notice
Config.config["dontShowNotice"] = false;
const showNoticeSwitch = <HTMLInputElement> document.querySelector("[sync-option='dontShowNotice'] > label > label > input");
const showNoticeSwitch = <HTMLInputElement> document.querySelector("[data-sync='dontShowNotice'] > div > label > input");
showNoticeSwitch.checked = true;
}
break;
case "showDonationLink":
if (checkbox.checked)
document.getElementById("sbDonate").classList.add("hidden");
else
document.getElementById("sbDonate").classList.remove("hidden");
break;
case "darkMode":
if (checkbox.checked) {
document.documentElement.setAttribute("data-theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
}
break;
case "trackDownvotes":
if (!checkbox.checked) {
Config.local.downvotedSegments = {};
}
break;
}
// If other options depend on this, hide/show them
const dependents = optionsContainer.querySelectorAll(`[data-dependent-on='${option}']`);
for (let j = 0; j < dependents.length; j++) {
const disableWhenChecked = dependents[j].getAttribute("data-dependent-on-inverted") === "true";
if (!await shouldHideOption(dependents[j]) && (!disableWhenChecked && checkbox.checked || disableWhenChecked && !checkbox.checked)) {
dependents[j].classList.remove("hidden");
setTimeout(() => dependents[j].classList.remove("hiding"), 1);
} else {
dependents[j].classList.add("hiding");
setTimeout(() => dependents[j].classList.add("hidden"), 400);
}
}
});
break;
@@ -144,7 +202,7 @@ async function init() {
textChangeResetButton.addEventListener("click", () => {
if (!confirm(chrome.i18n.getMessage("areYouSureReset"))) return;
Config.config[option] = Config.defaults[option];
Config.config[option] = Config.syncDefaults[option];
textChangeInput.value = Config.config[option];
});
@@ -155,7 +213,15 @@ async function init() {
const button = optionsElements[i].querySelector(".trigger-button");
button.addEventListener("click", () => activatePrivateTextChange(<HTMLElement> optionsElements[i]));
const privateTextChangeOption = optionsElements[i].getAttribute("sync-option");
if (option == "*") {
const downloadButton = optionsElements[i].querySelector(".download-button");
downloadButton.addEventListener("click", downloadConfig);
const uploadButton = optionsElements[i].querySelector(".upload-button");
uploadButton.addEventListener("change", (e) => uploadConfig(e));
}
const privateTextChangeOption = optionsElements[i].getAttribute("data-sync");
// See if anything extra must be done
switch (privateTextChangeOption) {
case "invidiousInstances":
@@ -167,7 +233,7 @@ async function init() {
case "button-press": {
const actionButton = optionsElements[i].querySelector(".trigger-button");
switch(optionsElements[i].getAttribute("sync-option")) {
switch(optionsElements[i].getAttribute("data-sync")) {
case "copyDebugInformation":
actionButton.addEventListener("click", copyDebugOutputToClipboard);
break;
@@ -176,9 +242,7 @@ async function init() {
break;
}
case "keybind-change": {
const keybindButton = optionsElements[i].querySelector(".trigger-button");
keybindButton.addEventListener("click", () => activateKeybindChange(<HTMLElement> optionsElements[i]));
ReactDOM.render(React.createElement(KeybindComponent, {option: option}), optionsElements[i].querySelector("div"));
break;
}
case "display": {
@@ -190,7 +254,7 @@ async function init() {
const numberInput = optionsElements[i].querySelector("input");
if (isNaN(configValue) || configValue < 0) {
numberInput.value = Config.defaults[option];
numberInput.value = Config.syncDefaults[option];
} else {
numberInput.value = configValue;
}
@@ -220,10 +284,57 @@ async function init() {
}
}
optionsContainer.classList.remove("hidden");
// Tab interaction
const tabElements = document.getElementsByClassName("tab-heading");
for (let i = 0; i < tabElements.length; i++) {
const tabFor = tabElements[i].getAttribute("data-for");
if (tabElements[i].classList.contains("selected"))
document.getElementById(tabFor).classList.remove("hidden");
tabElements[i].addEventListener("click", () => {
if (!embed) location.hash = tabFor;
createStickyHeader();
document.querySelectorAll(".tab-heading").forEach(element => { element.classList.remove("selected"); });
optionsContainer.querySelectorAll(".option-group").forEach(element => { element.classList.add("hidden"); });
tabElements[i].classList.add("selected");
document.getElementById(tabFor).classList.remove("hidden");
});
}
window.addEventListener("scroll", () => createStickyHeader());
optionsContainer.classList.add("animated");
}
function createStickyHeader() {
const container = document.getElementById("options-container");
const options = document.getElementById("options");
if (!embed && window.pageYOffset > 90 && (window.innerHeight <= 770 || window.innerWidth <= 1200)) {
if (!container.classList.contains("sticky")) {
options.style.marginTop = options.offsetTop.toString()+"px";
container.classList.add("sticky");
}
} else {
options.style.marginTop = "unset";
container.classList.remove("sticky");
}
}
/**
* Handle special cases where an option shouldn't show
*
* @param {String} element
*/
async function shouldHideOption(element: Element): Promise<boolean> {
return (element.getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
|| (element.getAttribute("data-no-safari") === "true" && navigator.vendor === "Apple Computer, Inc.");
}
/**
* Called when the config is updated
*
@@ -234,7 +345,7 @@ function optionsConfigUpdateListener() {
const optionsElements = optionsContainer.querySelectorAll("*");
for (let i = 0; i < optionsElements.length; i++) {
switch (optionsElements[i].getAttribute("option-type")) {
switch (optionsElements[i].getAttribute("data-type")) {
case "display":
updateDisplayElement(<HTMLElement> optionsElements[i])
}
@@ -247,15 +358,25 @@ function optionsConfigUpdateListener() {
* @param element
*/
function updateDisplayElement(element: HTMLElement) {
const displayOption = element.getAttribute("sync-option")
const displayOption = element.getAttribute("data-sync")
const displayText = Config.config[displayOption];
element.innerText = displayText;
// See if anything extra must be run
switch (displayOption) {
case "invidiousInstances":
case "invidiousInstances": {
element.innerText = displayText.join(', ');
let allEquals = displayText.length == invidiousList.length;
for (let i = 0; i < invidiousList.length && allEquals; i++) {
if (displayText[i] != invidiousList[i])
allEquals = false;
}
if (!allEquals) {
const resetButton = element.parentElement.querySelector(".invidious-instance-reset");
resetButton.classList.remove("hidden");
}
break;
}
}
}
@@ -270,6 +391,8 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
const button = element.querySelector(".trigger-button");
const setButton = element.querySelector(".text-change-set");
const cancelButton = element.querySelector(".text-change-reset");
const resetButton = element.querySelector(".invidious-instance-reset");
setButton.addEventListener("click", async function() {
if (textBox.value == "" || textBox.value.includes("/") || textBox.value.includes("http")) {
alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
@@ -287,19 +410,26 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
invidiousOnClick(checkbox, "supportInvidious");
textBox.value = "";
resetButton.classList.remove("hidden");
// Hide this section again
textBox.value = "";
element.querySelector(".option-hidden-section").classList.add("hidden");
button.classList.remove("disabled");
}
});
const resetButton = element.querySelector(".invidious-instance-reset");
cancelButton.addEventListener("click", async function() {
textBox.value = "";
element.querySelector(".option-hidden-section").classList.add("hidden");
button.classList.remove("disabled");
});
resetButton.addEventListener("click", function() {
if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
// Set to CI populated list
Config.config[option] = invidiousList;
resetButton.classList.add("hidden");
}
});
}
@@ -351,91 +481,6 @@ async function invidiousOnClick(checkbox: HTMLInputElement, option: string): Pro
});
}
/**
* Will trigger the container to ask the user for a keybind.
*
* @param element
*/
function activateKeybindChange(element: HTMLElement) {
const button = element.querySelector(".trigger-button");
if (button.classList.contains("disabled")) return;
button.classList.add("disabled");
const option = element.getAttribute("sync-option");
const currentlySet = Config.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
const status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
if (Config.config[option] !== null) {
const statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = Config.config[option];
}
element.querySelector(".option-hidden-section").classList.remove("hidden");
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
}
/**
* Called when a key is pressed in an activiated keybind change option.
*
* @param element
* @param e
*/
function keybindKeyPressed(element: HTMLElement, e: KeyboardEvent) {
const key = e.key;
if (["Shift", "Control", "Meta", "Alt", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"].indexOf(key) !== -1) {
// Wait for more
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
} else {
const button: HTMLElement = element.querySelector(".trigger-button");
const option = element.getAttribute("sync-option");
// Make sure keybind isn't used by the other listener
// TODO: If other keybindings are going to be added, we need a better way to find the other keys used.
const otherKeybind = (option === "startSponsorKeybind") ? Config.config['submitKeybind'] : Config.config['startSponsorKeybind'];
if (key === otherKeybind) {
closeKeybindOption(element, button);
alert(chrome.i18n.getMessage("theKey") + " " + key + " " + chrome.i18n.getMessage("keyAlreadyUsed"));
return;
}
// cancel setting a keybind
if (key === "Escape") {
closeKeybindOption(element, button);
return;
}
Config.config[option] = key;
const status = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status");
status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
const statusKey = <HTMLElement> element.querySelector(".option-hidden-section > .keybind-status-key");
statusKey.innerText = key;
button.classList.remove("disabled");
}
}
/**
* Closes the menu for editing the keybind
*
* @param element
* @param button
*/
function closeKeybindOption(element: HTMLElement, button: HTMLElement) {
element.querySelector(".option-hidden-section").classList.add("hidden");
button.classList.remove("disabled");
}
/**
* Will trigger the textbox to appear to be able to change an option's text.
*
@@ -448,7 +493,7 @@ function activatePrivateTextChange(element: HTMLElement) {
button.classList.add("disabled");
const textBox = <HTMLInputElement> element.querySelector(".option-text-box");
const option = element.getAttribute("sync-option");
const option = element.getAttribute("data-sync");
// See if anything extra must be done
switch (option) {
@@ -458,16 +503,10 @@ function activatePrivateTextChange(element: HTMLElement) {
}
let result = Config.config[option];
// See if anything extra must be done
switch (option) {
case "*": {
const jsonData = JSON.parse(JSON.stringify(Config.localConfig));
// Fix segmentTimes data as it is destroyed from the JSON stringify
jsonData.segmentTimes = Config.encodeStoredItem(Config.localConfig.segmentTimes);
result = JSON.stringify(jsonData);
result = JSON.stringify(Config.cachedSyncConfig);
break;
}
}
@@ -476,38 +515,7 @@ function activatePrivateTextChange(element: HTMLElement) {
const setButton = element.querySelector(".text-change-set");
setButton.addEventListener("click", async () => {
const confirmMessage = element.getAttribute("confirm-message");
if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
// See if anything extra must be done
switch (option) {
case "*":
try {
const newConfig = JSON.parse(textBox.value);
for (const key in newConfig) {
Config.config[key] = newConfig[key];
}
Config.convertJSON();
if (newConfig.supportInvidious) {
const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > label > label > input");
checkbox.checked = true;
await invidiousOnClick(checkbox, "supportInvidious");
}
window.location.reload();
} catch (e) {
alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
}
break;
default:
Config.config[option] = textBox.value;
}
}
setTextOption(option, element, textBox.value);
});
// See if anything extra must be done
@@ -531,6 +539,75 @@ function activatePrivateTextChange(element: HTMLElement) {
element.querySelector(".option-hidden-section").classList.remove("hidden");
}
/**
* Function to run when a textbox change is submitted
*
* @param option data-sync value
* @param element main container div
* @param value new text
* @param callbackOnError function to run if confirmMessage was denied
*/
async function setTextOption(option: string, element: HTMLElement, value: string, callbackOnError?: () => void) {
const confirmMessage = element.getAttribute("data-confirm-message");
if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
// See if anything extra must be done
switch (option) {
case "*":
try {
const newConfig = JSON.parse(value);
for (const key in newConfig) {
Config.config[key] = newConfig[key];
}
if (newConfig.supportInvidious) {
const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > div > label > input");
checkbox.checked = true;
await invidiousOnClick(checkbox, "supportInvidious");
}
window.location.reload();
} catch (e) {
alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
}
break;
default:
Config.config[option] = value;
}
} else {
if (typeof callbackOnError == "function")
callbackOnError();
}
}
function downloadConfig() {
const file = document.createElement("a");
const jsonData = JSON.parse(JSON.stringify(Config.cachedSyncConfig));
file.setAttribute("href", "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(jsonData)));
file.setAttribute("download", "SponsorBlockConfig.json");
document.body.append(file);
file.click();
file.remove();
}
function uploadConfig(e) {
if (e.target.files.length == 1) {
const file = e.target.files[0];
const reader = new FileReader();
const element = document.querySelector("[data-sync='*']") as HTMLElement;
reader.onload = function(ev) {
setTextOption("*", element, ev.target.result as string, () => {
e.target.value = null;
});
};
reader.readAsText(file);
}
}
/**
* Validates the value used for the database server address.
* Returns null and alerts the user if there is an issue.
@@ -563,12 +640,9 @@ function copyDebugOutputToClipboard() {
language: navigator.language,
extensionVersion: chrome.runtime.getManifest().version
},
config: JSON.parse(JSON.stringify(Config.localConfig)) // Deep clone config object
config: JSON.parse(JSON.stringify(Config.cachedSyncConfig)) // Deep clone config object
};
// Fix segmentTimes data as it is destroyed from the JSON stringify
output.config.segmentTimes = Config.encodeStoredItem(Config.localConfig.segmentTimes);
// Sanitise sensitive user config values
delete output.config.userID;
output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)

119
src/popup.ts
View File

@@ -111,13 +111,17 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
"sbDonate",
"issueReporterTabs",
"issueReporterTabSegments",
"issueReporterTabChapters"
"issueReporterTabChapters",
"sponsorTimesDonateContainer",
"sbConsiderDonateLink",
"sbCloseDonate"
].forEach(id => PageElements[id] = document.getElementById(id));
// Hide donate button if wanted (Safari, or user choice)
if (!showDonationLink()) {
PageElements.sbDonate.style.display = "none";
}
PageElements.sbDonate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
//setup click listeners
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
@@ -128,7 +132,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
unwhitelistChannel();
}
});
PageElements.whitelistForceCheck.addEventListener("click", openOptions);
PageElements.whitelistForceCheck.addEventListener("click", () => {openOptionsAt("behavior")});
PageElements.toggleSwitch.addEventListener("change", function () {
toggleSkipping(!this.checked);
});
@@ -201,6 +205,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.sponsorTimesViewsDisplay.innerText = viewCount.toLocaleString();
PageElements.sponsorTimesViewsContainer.style.display = "unset";
}
showDonateWidget(viewCount);
}
});
@@ -266,6 +272,23 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
getSegmentsFromContentScript(true);
});
function showDonateWidget(viewCount: number) {
if (Config.config.showDonationLink && Config.config.donateClicked <= 0 && Config.config.showPopupDonationCount < 5
&& viewCount < 50000 && !Config.config.isVip && Config.config.skipCount > 10) {
PageElements.sponsorTimesDonateContainer.style.display = "flex";
PageElements.sbConsiderDonateLink.addEventListener("click", () => {
Config.config.donateClicked = Config.config.donateClicked + 1;
});
PageElements.sbCloseDonate.addEventListener("click", () => {
PageElements.sponsorTimesDonateContainer.style.display = "none";
Config.config.showPopupDonationCount = 100;
});
Config.config.showPopupDonationCount = Config.config.showPopupDonationCount + 1;
}
}
function onTabs(tabs, updating: boolean): void {
messageHandler.sendMessage(tabs[0].id, { message: 'getVideoID' }, function (result) {
if (result !== undefined && result.videoID) {
@@ -287,7 +310,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
return;
}
sponsorTimes = Config.config.segmentTimes.get(currentVideoID) ?? [];
sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] ?? [];
updateSegmentEditingUI();
messageHandler.sendMessage(
@@ -362,8 +385,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
// Perform a second update after the config changes take effect as a workaround for a race condition
const removeListener = (listener: typeof lateUpdate) => {
const index = Config.configListeners.indexOf(listener);
if (index !== -1) Config.configListeners.splice(index, 1);
const index = Config.configSyncListeners.indexOf(listener);
if (index !== -1) Config.configSyncListeners.splice(index, 1);
};
const lateUpdate = () => {
@@ -371,7 +394,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
removeListener(lateUpdate);
};
Config.configListeners.push(lateUpdate);
Config.configSyncListeners.push(lateUpdate);
// Remove the listener after 200ms in case the changes were propagated by the time we got the response
setTimeout(() => removeListener(lateUpdate), 200);
@@ -385,7 +408,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
// Only update the segments after a segment was created
if (!creatingSegment) {
sponsorTimes = Config.config.segmentTimes.get(currentVideoID) || [];
sponsorTimes = Config.config.unsubmittedSegments[currentVideoID] || [];
}
// Update the UI
@@ -446,6 +469,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
} else if (segmentTimes[i].hidden === SponsorHideType.MinimumDuration) {
//this one is too short
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
} else if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
}
const name = segmentTimes[i].description || utils.shortCategoryName(category);
@@ -487,7 +512,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
downvoteButton.src = locked && isVip ? chrome.runtime.getURL("icons/thumbs_down_locked.svg") : chrome.runtime.getURL("icons/thumbs_down.svg");
downvoteButton.addEventListener("click", () => vote(0, UUID));
//uuid button
const uuidButton = document.createElement("img");
uuidButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
uuidButton.className = "voteButton";
@@ -498,6 +522,41 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
stopAnimation();
});
const hideButton = document.createElement("img");
hideButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
hideButton.className = "voteButton";
if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
hideButton.src = chrome.runtime.getURL("icons/not_visible.svg");
} else {
hideButton.src = chrome.runtime.getURL("icons/visible.svg");
}
hideButton.addEventListener("click", () => {
const stopAnimation = AnimationUtils.applyLoadingAnimation(hideButton, 0.4);
stopAnimation();
if (segmentTimes[i].hidden === SponsorHideType.Hidden) {
hideButton.src = chrome.runtime.getURL("icons/visible.svg");
segmentTimes[i].hidden = SponsorHideType.Visible;
} else {
hideButton.src = chrome.runtime.getURL("icons/not_visible.svg");
segmentTimes[i].hidden = SponsorHideType.Hidden;
}
messageHandler.query({
active: true,
currentWindow: true
}, tabs => {
messageHandler.sendMessage(
tabs[0].id,
{
message: "hideSegment",
type: segmentTimes[i].hidden,
UUID: UUID
}
);
});
});
const skipButton = document.createElement("img");
skipButton.id = "sponsorTimesSkipButtonContainer" + UUID;
skipButton.className = "voteButton";
@@ -509,8 +568,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
voteButtonsContainer.appendChild(upvoteButton);
voteButtonsContainer.appendChild(downvoteButton);
voteButtonsContainer.appendChild(uuidButton);
if (segmentTimes[i].actionType === ActionType.Skip
&& [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segmentTimes[i].hidden)) {
voteButtonsContainer.appendChild(hideButton);
}
voteButtonsContainer.appendChild(skipButton);
//add click listener to open up vote panel
sponsorTimeButton.addEventListener("click", function () {
voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
@@ -568,6 +632,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
chrome.runtime.sendMessage({ "message": "openConfig" });
}
function openOptionsAt(location) {
chrome.runtime.sendMessage({ "message": "openConfig", "hash": location });
}
function openHelp() {
chrome.runtime.sendMessage({ "message": "openHelp" });
}
@@ -639,21 +707,28 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//add loading info
addVoteMessage(chrome.i18n.getMessage("Loading"), UUID);
//send the vote message to the tab
chrome.runtime.sendMessage({
message: "submitVote",
type: type,
UUID: UUID
}, function (response) {
if (response != undefined) {
//see if it was a success or failure
if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
//success (treat rate limits as a success)
addVoteMessage(chrome.i18n.getMessage("voted"), UUID);
} else if (response.successType == -1) {
addVoteMessage(GenericUtils.getErrorMessage(response.statusCode, response.responseText), UUID);
messageHandler.query({
active: true,
currentWindow: true
}, tabs => {
messageHandler.sendMessage(
tabs[0].id,
{
message: "submitVote",
type: type,
UUID: UUID
}, function (response) {
if (response != undefined) {
//see if it was a success or failure
if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
//success (treat rate limits as a success)
addVoteMessage(chrome.i18n.getMessage("voted"), UUID);
} else if (response.successType == -1) {
addVoteMessage(GenericUtils.getErrorMessage(response.statusCode, response.responseText), UUID);
}
}
}
}
);
});
}

30
src/render/Tooltip.tsx
View File

@@ -9,6 +9,9 @@ export interface TooltipProps {
bottomOffset?: string
timeout?: number;
opacity?: number;
displayTriangle?: boolean;
showLogo?: boolean;
showGotIt?: boolean;
}
export class Tooltip {
@@ -20,6 +23,9 @@ export class Tooltip {
constructor(props: TooltipProps) {
props.bottomOffset ??= "70px";
props.opacity ??= 0.7;
props.displayTriangle ??= true;
props.showLogo ??= true;
props.showGotIt ??= true;
this.text = props.text;
this.container = document.createElement('div');
@@ -40,11 +46,13 @@ export class Tooltip {
ReactDOM.render(
<div style={{bottom: props.bottomOffset, backgroundColor}}
className="sponsorBlockTooltip" >
className={"sponsorBlockTooltip" + (props.displayTriangle ? " sbTriangle" : "")} >
<div>
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
{props.showLogo ?
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
: null}
<span className="sponsorSkipObject">
{this.text + (props.link ? ". " : "")}
{props.link ?
@@ -53,16 +61,18 @@ export class Tooltip {
rel="noopener noreferrer"
href={props.link}>
{chrome.i18n.getMessage("LearnMore")}
</a>
</a>
: null}
</span>
</div>
<button className="sponsorSkipObject sponsorSkipNoticeButton"
style ={{float: "right" }}
onClick={() => this.close()}>
{props.showGotIt ?
<button className="sponsorSkipObject sponsorSkipNoticeButton"
style ={{float: "right" }}
onClick={() => this.close()}>
{chrome.i18n.getMessage("GotIt")}
</button>
{chrome.i18n.getMessage("GotIt")}
</button>
: null}
</div>,
this.container
)

13
src/types.ts
View File

@@ -32,6 +32,8 @@ export interface FetchResponse {
ok: boolean
}
export type HashedValue = string & { __hashBrand: unknown };
export interface VideoDurationResponse {
duration: number;
}
@@ -50,7 +52,8 @@ export interface CategorySelection {
export enum SponsorHideType {
Visible = undefined,
Downvoted = 1,
MinimumDuration
MinimumDuration,
Hidden,
}
export enum ActionType {
@@ -225,4 +228,12 @@ export enum NoticeVisbilityMode {
MiniForAll = 2,
FadedForAutoSkip = 3,
FadedForAll = 4
}
export type Keybind = {
key: string,
code?: string,
ctrl?: boolean,
alt?: boolean,
shift?: boolean
}

55
src/utils.ts
View File

@@ -1,5 +1,5 @@
import Config from "./config";
import { CategorySelection, SponsorTime, FetchResponse, BackgroundScriptContainer, Registration } from "./types";
import Config, { VideoDownvotes } from "./config";
import { CategorySelection, SponsorTime, FetchResponse, BackgroundScriptContainer, Registration, HashedValue, VideoID, SponsorHideType } from "./types";
import * as CompileConfig from "../config.json";
import { findValidElementFromSelector } from "./utils/pageUtils";
@@ -258,6 +258,8 @@ export default class Utils {
localizeHtmlPage(): void {
//Localize by replacing __MSG_***__ meta tags
const localizedMessage = this.getLocalizedMessage(document.title);
if (localizedMessage) document.title = localizedMessage;
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) {
const obj = objects[j];
@@ -473,10 +475,10 @@ export default class Utils {
return typeof(browser) !== "undefined";
}
async getHash(value: string, times = 5000): Promise<string> {
if (times <= 0) return "";
async getHash<T extends string>(value: T, times = 5000): Promise<T & HashedValue> {
if (times <= 0) return "" as T & HashedValue;
let hashHex = value;
let hashHex: string = value;
for (let i = 0; i < times; i++) {
const hashBuffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(hashHex).buffer);
@@ -484,6 +486,47 @@ export default class Utils {
hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}
return hashHex;
return hashHex as T & HashedValue;
}
async addHiddenSegment(videoID: VideoID, segmentUUID: string, hidden: SponsorHideType) {
if (chrome.extension.inIncognitoContext || !Config.config.trackDownvotes) return;
const hashedVideoID = (await this.getHash(videoID, 1)).slice(0, 4) as VideoID & HashedValue;
const UUIDHash = await this.getHash(segmentUUID, 1);
const allDownvotes = Config.local.downvotedSegments;
const currentVideoData = allDownvotes[hashedVideoID] || { segments: [], lastAccess: 0 };
currentVideoData.lastAccess = Date.now();
const existingData = currentVideoData.segments.find((segment) => segment.uuid === UUIDHash);
if (hidden === SponsorHideType.Visible) {
delete allDownvotes[hashedVideoID];
} else {
if (existingData) {
existingData.hidden = hidden;
} else {
currentVideoData.segments.push({
uuid: UUIDHash,
hidden
});
}
allDownvotes[hashedVideoID] = currentVideoData;
}
const entries = Object.entries(allDownvotes);
if (entries.length > 10000) {
let min: [string, VideoDownvotes] = null;
for (let i = 0; i < entries[0].length; i++) {
if (min === null || entries[i][1].lastAccess < min[1].lastAccess) {
min = entries[i];
}
}
delete allDownvotes[min[0]];
}
Config.forceLocalUpdate("downvotedSegments");
}
}

43
src/utils/configUtils.ts
View File

@@ -1,5 +1,48 @@
import Config from "../config";
import { Keybind } from "../types";
export function showDonationLink(): boolean {
return navigator.vendor !== "Apple Computer, Inc." && Config.config.showDonationLink;
}
export function isSafari(): boolean {
return navigator.vendor === "Apple Computer, Inc.";
}
export function keybindEquals(first: Keybind, second: Keybind): boolean {
if (first == null || second == null ||
Boolean(first.alt) != Boolean(second.alt) || Boolean(first.ctrl) != Boolean(second.ctrl) || Boolean(first.shift) != Boolean(second.shift) ||
first.key == null && first.code == null || second.key == null && second.code == null)
return false;
if (first.code != null && second.code != null)
return first.code === second.code;
if (first.key != null && second.key != null)
return first.key.toUpperCase() === second.key.toUpperCase();
return false;
}
export function formatKey(key: string): string {
if (key == null)
return "";
else if (key == " ")
return "Space";
else if (key.length == 1)
return key.toUpperCase();
else
return key;
}
export function keybindToString(keybind: Keybind): string {
if (keybind == null || keybind.key == null)
return "";
let ret = "";
if (keybind.ctrl)
ret += "Ctrl+";
if (keybind.alt)
ret += "Alt+";
if (keybind.shift)
ret += "Shift+";
return ret += formatKey(keybind.key);
}

25
src/utils/genericUtils.ts
View File

@@ -44,7 +44,30 @@ function getErrorMessage(statusCode: number, responseText: string): string {
return errorMessage + postFix;
}
/* Gets percieved luminance of a color */
function getLuminance(color: string): number {
const {r, g, b} = hexToRgb(color);
return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
}
/* From https://stackoverflow.com/a/5624139 */
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) {
return r + r + g + g + b + b;
});
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
export const GenericUtils = {
wait,
getErrorMessage
getErrorMessage,
getLuminance
}

2
src/utils/pageUtils.ts
View File

@@ -43,7 +43,7 @@ function findValidElementFromGenerator<T>(objects: T[] | NodeListOf<HTMLElement>
}
export function getHashParams(): Record<string, unknown> {
const windowHash = window.location.hash.substr(1);
const windowHash = window.location.hash.slice(1);
if (windowHash) {
const params: Record<string, unknown> = windowHash.split('&').reduce((acc, param) => {
const [key, value] = param.split('=');