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

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

Browse Source 
# Conflicts:
#	src/components/SkipNoticeComponent.tsx
#	src/config.ts
#	src/content.ts
This commit is contained in:
Ajay Ramachandran
2021-06-30 21:27:21 -04:00
parent 71ec724295 bd429f02a7
commit d458bb0cdf
56 changed files with 1677 additions and 1265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/NoticeComponent.tsx
View File

@@ -1,4 +1,5 @@
import * as React from "react";
import Config from "../config";
enum CountdownMode {
Timer,
@@ -53,7 +54,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
const maxCountdownTime = () => {
if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
else return 4;
else return Config.config.skipNoticeDuration;
};
//the id for the setInterval running the countdown

43
src/components/SkipNoticeComponent.tsx
View File

@@ -105,8 +105,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
messageOnClick: null,
//the countdown until this notice closes
maxCountdownTime: () => 4,
countdownTime: 4,
maxCountdownTime: () => Config.config.skipNoticeDuration,
countdownTime: Config.config.skipNoticeDuration,
countdownText: null,
unskipText: chrome.i18n.getMessage("unskip"),
@@ -253,8 +253,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
<select id={"sponsorTimeCategories" + this.idSuffix}
className="sponsorTimeCategories"
defaultValue={this.segments[0].category} //Just default to the first segment, as we don't know which they'll choose
ref={this.categoryOptionRef}
onChange={this.categorySelectionChange.bind(this)}>
ref={this.categoryOptionRef}>
{this.getCategoryOptions()}
</select>
@@ -413,22 +412,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
getCategoryOptions(): React.ReactElement[] {
const elements = [];
const categories = Config.config.categorySelections.filter((cat => utils.getCategoryActionType(cat.name as Category) === CategoryActionType.Skippable));
const categories = CompileConfig.categoryList.filter((cat => utils.getCategoryActionType(cat as Category) === CategoryActionType.Skippable));
for (const category of categories) {
elements.push(
<option value={category.name}
key={category.name}>
{chrome.i18n.getMessage("category_" + category.name)}
</option>
);
}
if (elements.length < CompileConfig.categoryList.length) {
// Add show more button
elements.push(
<option value={"moreCategories"}
key={"moreCategories"}>
{chrome.i18n.getMessage("moreCategories")}
<option value={category}
key={category}>
{chrome.i18n.getMessage("category_" + category)}
</option>
);
}
@@ -436,18 +425,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
return elements;
}
categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>): void {
// See if show more categories was pressed
if (event.target.value === "moreCategories") {
// Open options page
chrome.runtime.sendMessage({message: "openConfig", hash: event.target.value + "OptionsName"});
// Reset option to original
event.target.value = this.segments[0].category;
return;
}
}
unskip(index: number): void {
this.contentContainer().unskipSponsorTime(this.segments[index]);
@@ -467,7 +444,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
const sponsorTime = this.segments[index];
const duration = Math.round((sponsorTime.segment[1] - this.contentContainer().v.currentTime) * (1 / this.contentContainer().v.playbackRate));
return Math.max(duration, 4);
return Math.max(duration, Config.config.skipNoticeDuration);
};
return {
@@ -486,8 +463,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
unskipText: chrome.i18n.getMessage("unskip"),
unskipCallback: this.unskip.bind(this),
maxCountdownTime: () => 4,
countdownTime: 4
maxCountdownTime: () => Config.config.skipNoticeDuration,
countdownTime: Config.config.skipNoticeDuration
};
// See if the title should be changed

43
src/config.ts
View File

@@ -30,11 +30,15 @@ interface SBConfig {
supportInvidious: boolean,
serverAddress: string,
minDuration: number,
skipNoticeDuration: number,
audioNotificationOnSkip,
checkForUnlistedVideos: boolean,
testingServer: boolean,
refetchWhenNotFound: boolean,
ytInfoPermissionGranted: boolean,
askAboutUnlistedVideos: boolean,
allowExpirements: boolean,
autoHideInfoButton: boolean,
// What categories should be skipped
categorySelections: CategorySelection[],
@@ -168,11 +172,15 @@ const Config: SBObject = {
supportInvidious: false,
serverAddress: CompileConfig.serverAddress,
minDuration: 0,
skipNoticeDuration: 4,
audioNotificationOnSkip: false,
checkForUnlistedVideos: false,
testingServer: false,
refetchWhenNotFound: true,
ytInfoPermissionGranted: false,
askAboutUnlistedVideos: true,
allowExpirements: true,
autoHideInfoButton: true,
categorySelections: [{
name: "sponsor" as Category,
@@ -226,11 +234,11 @@ const Config: SBObject = {
opacity: "0.7"
},
"preview": {
color: "#0b9d65",
color: "#008fd6",
opacity: "0.7"
},
"preview-preview": {
color: "#065b3a",
color: "#005799",
opacity: "0.7"
},
"music_offtopic": {
@@ -346,7 +354,7 @@ function fetchConfig(): Promise<void> {
function migrateOldFormats(config: SBConfig) {
if (!config["highlightCategoryAdded"] && !config.categorySelections.some((s) => s.name === "highlight")) {
config["highlightCategoryAdded"] = true;
config.categorySelections.push({
name: "highlight" as Category,
option: CategorySkipOption.ManualSkip
@@ -355,6 +363,35 @@ function migrateOldFormats(config: SBConfig) {
config.categorySelections = config.categorySelections;
}
// Adding preview category
if (!config["previewCategoryUpdate"]) {
config["previewCategoryUpdate"] = true;
for (const selection of config.categorySelections) {
if (selection.name === "intro"
&& selection.option === CategorySkipOption.AutoSkip || selection.option === CategorySkipOption.ManualSkip) {
// Add a default skip option for preview category
config.categorySelections.push({
name: "preview" as Category,
option: CategorySkipOption.ManualSkip
});
// Ensure it gets updated
config.categorySelections = config.categorySelections;
break;
}
}
}
if (config["disableAutoSkip"]) {
for (const selection of config.categorySelections) {
if (selection.name === "sponsor") {
selection.option = CategorySkipOption.ManualSkip;
chrome.storage.sync.remove("disableAutoSkip");
}
}
}
// Remove some old unused options
if (config["sponsorVideoID"] !== undefined) {
chrome.storage.sync.remove("sponsorVideoID");

93
src/content.ts
View File

@@ -11,6 +11,7 @@ import SkipNotice from "./render/SkipNotice";
import SkipNoticeComponent from "./components/SkipNoticeComponent";
import SubmissionNotice from "./render/SubmissionNotice";
import { Message, MessageResponse } from "./messageTypes";
import GenericNotice from "./render/GenericNotice";
// Hack to get the CSS loaded on permission-based sites (Invidious)
utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -42,6 +43,7 @@ let video: HTMLVideoElement;
let videoMutationObserver: MutationObserver = null;
// List of videos that have had event listeners added to them
const videosWithEventListeners: HTMLVideoElement[] = [];
const controlsWithEventListeners: HTMLElement[] = []
let onInvidious;
let onMobileYouTube;
@@ -70,7 +72,7 @@ let previewBar: PreviewBar = null;
let controls: HTMLElement | null = null;
/** Contains buttons created by `createButton()`. */
const playerButtons: Record<string, {button: HTMLButtonElement, image: HTMLImageElement}> = {};
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.URL)));
@@ -269,6 +271,9 @@ async function videoIDChange(id) {
// Update whitelist data when the video data is loaded
whitelistCheck();
// Temporary expirement
unlistedCheck();
//setup the preview bar
if (previewBar === null) {
if (onMobileYouTube) {
@@ -389,7 +394,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
return;
}
if (video.paused) return;
if (!video || video.paused) return;
if (Config.config.disableSkipping || channelWhitelisted || (channelIDInfo.status === ChannelIDStatus.Fetching && Config.config.forceChannelCheck)){
return;
@@ -721,7 +726,7 @@ function startSkipScheduleCheckingForStartSponsors() {
* Get the video info for the current tab from YouTube
*/
async function getVideoInfo(): Promise<void> {
const result = await utils.asyncRequestToCustomServer("GET", "https://www.youtube.com/get_video_info?video_id=" + sponsorVideoID + "&html5=1");
const result = await utils.asyncRequestToCustomServer("GET", "https://www.youtube.com/get_video_info?video_id=" + sponsorVideoID + "&html5=1&c=TVHTML5&cver=7.20190319");
if (result.ok) {
const decodedData = decodeURIComponent(result.responseText).match(/player_response=([^&]*)/)[1];
@@ -864,6 +869,66 @@ async function whitelistCheck() {
if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();
}
async function unlistedCheck() {
if (!Config.config.allowExpirements || !Config.config.askAboutUnlistedVideos) return;
try {
await utils.wait(() => !!videoInfo && !!document.getElementById("info-text")
&& !!document.querySelector(".ytd-video-primary-info-renderer > .badge > yt-icon > svg"), 6000, 1000);
const isUnlisted = document.querySelector(".ytd-video-primary-info-renderer > .badge > yt-icon > svg > g > path")
?.getAttribute("d")?.includes("M3.9 12c0-1.71 1.39-3.1 3.1-3.1h"); // Icon of unlisted badge
const yearMatches = document.querySelector("#info-text > #info-strings > yt-formatted-string")
?.innerHTML?.match(/20[0-9]{2}/);
const year = yearMatches ? parseInt(yearMatches[0]) : -1;
const isOld = !isNaN(year) && year < 2017 && year > 2004;
const views = parseInt(videoInfo?.videoDetails?.viewCount);
const isHighViews = views > 15000;
if (isUnlisted && isOld && isHighViews && (!sponsorTimes || sponsorTimes.length <= 0)) {
// Ask if they want to submit this videoID
const notice = new GenericNotice(skipNoticeContentContainer, "unlistedWarning", {
title: chrome.i18n.getMessage("experimentUnlistedTitle"),
textBoxes: chrome.i18n.getMessage("experimentUnlistedText").split("\n"),
buttons: [
{
name: chrome.i18n.getMessage("experiementOptOut"),
listener: () => {
Config.config.allowExpirements = false;
notice.close();
}
},
{
name: chrome.i18n.getMessage("hideForever"),
listener: () => {
Config.config.askAboutUnlistedVideos = false;
notice.close();
}
},
{
name: "Submit",
listener: () => {
utils.asyncRequestToServer("POST", "/api/unlistedVideo", {
videoID: sponsorVideoID,
year,
views,
channelID: channelIDInfo.status === ChannelIDStatus.Found ? channelIDInfo.id : undefined
});
notice.close();
}
}
]
});
}
} catch (e) {
return;
}
}
/**
* Returns info about the next upcoming sponsor skip
*/
@@ -1080,6 +1145,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
playerButtons[baseID] = {
button: newButton,
image: newButtonImage,
setupListener: false
};
return newButton;
@@ -1115,9 +1181,24 @@ async function createButtons(): Promise<void> {
// Add button if does not already exist in html
createButton("startSegment", "sponsorStart", () => closeInfoMenuAnd(() => startOrEndTimingNewSegment()), "PlayerStartIconSponsorBlocker.svg");
createButton("cancelSegment", "sponsorCancel", () => closeInfoMenuAnd(() => cancelCreatingSegment()), "PlayerCancelSegmentIconSponsorBlocker.svg");
createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
createButton("delete", "clearTimes", () => closeInfoMenuAnd(() => clearSponsorTimes()), "PlayerDeleteIconSponsorBlocker.svg");
createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker.svg");
createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker.svg");
const controlsContainer = getControls();
if (Config.config.autoHideInfoButton && !onInvidious && controlsContainer
&& playerButtons["info"]?.button && !controlsWithEventListeners.includes(controlsContainer)) {
controlsWithEventListeners.push(controlsContainer);
playerButtons["info"].button.classList.add("hidden");
controlsContainer.addEventListener("mouseenter", () => {
playerButtons["info"].button.classList.remove("hidden");
});
controlsContainer.addEventListener("mouseleave", () => {
playerButtons["info"].button.classList.add("hidden");
});
}
}
/** Creates any missing buttons on the player and updates their visiblity. */
@@ -1496,8 +1577,8 @@ async function sendSubmitMessage() {
const response = await utils.asyncRequestToServer("POST", "/api/skipSegments", {
videoID: sponsorVideoID,
userID: Config.config.userID,
videoDuration: video.duration,
segments: sponsorTimesSubmitting
segments: sponsorTimesSubmitting,
videoDuration: video?.duration
});
if (response.status === 200) {

4
src/options.ts
View File

@@ -31,7 +31,9 @@ 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())) {
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;
}

6
src/popup.ts
View File

@@ -103,8 +103,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
"sponsorMessageTimes",
//"downloadedSponsorMessageTimes",
"whitelistButton",
"sbDonate"
].forEach(id => PageElements[id] = document.getElementById(id));
// Hide donate button on safari
if (navigator.vendor === "Apple Computer, Inc.") {
PageElements.sbDonate.style.display = "none";
}
//setup click listeners
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
PageElements.whitelistToggle.addEventListener("change", function() {

111
src/render/GenericNotice.tsx Normal file
View File

@@ -0,0 +1,111 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import NoticeComponent from "../components/NoticeComponent";
import Utils from "../utils";
const utils = new Utils();
import { ContentContainer } from "../types";
import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
export interface ButtonListener {
name: string,
listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}
export interface NoticeOptions {
title: string,
textBoxes?: string[],
buttons?: ButtonListener[],
fadeIn?: boolean,
timed?: boolean
}
export default class GenericNotice {
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
noticeElement: HTMLDivElement;
noticeRef: React.MutableRefObject<NoticeComponent>;
constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
this.noticeRef = React.createRef();
this.contentContainer = contentContainer;
const referenceNode = utils.findReferenceNode();
this.noticeElement = document.createElement("div");
this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
<NoticeComponent
noticeTitle={options.title}
idSuffix={idSuffix}
fadeIn={options.fadeIn ?? true}
timed={options.timed ?? true}
ref={this.noticeRef}
closeListener={() => this.close()} >
{this.getMessageBox(idSuffix, options.textBoxes)}
<tr id={"sponsorSkipNoticeSpacer" + idSuffix}
className="sponsorBlockSpacer">
</tr>
<div className="sponsorSkipNoticeRightSection"
style={{position: "relative"}}>
{this.getButtons(options.buttons)}
</div>
</NoticeComponent>,
this.noticeElement
);
}
getMessageBox(idSuffix: string, textBoxes: string[]): JSX.Element[] {
if (textBoxes) {
const result = [];
for (let i = 0; i < textBoxes.length; i++) {
result.push(
<NoticeTextSelectionComponent idSuffix={idSuffix}
key={i}
text={textBoxes[i]} />
)
}
return result;
} else {
return null;
}
}
getButtons(buttons?: ButtonListener[]): JSX.Element[] {
if (buttons) {
const result: JSX.Element[] = [];
for (const button of buttons) {
result.push(
<button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
key={button.name}
onClick={(e) => button.listener(e)}>
{button.name}
</button>
)
}
return result;
} else {
return null;
}
}
close(): void {
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.noticeElement.remove();
}
}

24
src/render/SkipNotice.tsx
View File

@@ -1,6 +1,9 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import Utils from "../utils";
const utils = new Utils();
import SkipNoticeComponent, { SkipNoticeAction } from "../components/SkipNoticeComponent";
import { SponsorTime, ContentContainer } from "../types";
@@ -21,26 +24,7 @@ class SkipNotice {
this.autoSkip = autoSkip;
this.contentContainer = contentContainer;
//get reference node
let referenceNode = document.getElementById("player-container-id")
?? document.getElementById("movie_player")
?? document.querySelector("#main-panel.ytmusic-player-page") // YouTube music
?? document.querySelector("#player-container .video-js") // Invidious
?? document.querySelector(".main-video-section > .video-container"); // Cloudtube
if (referenceNode == null) {
//for embeds
const player = document.getElementById("player");
referenceNode = player.firstChild as HTMLElement;
let index = 1;
//find the child that is the video player (sometimes it is not the first)
while (index < player.children.length && (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed"))) {
referenceNode = player.children[index] as HTMLElement;
index++;
}
}
const referenceNode = utils.findReferenceNode();
const amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
//this is the suffix added at the end of every id

20
src/render/SubmissionNotice.tsx
View File

@@ -1,6 +1,9 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import Utils from "../utils";
const utils = new Utils();
import SubmissionNoticeComponent from "../components/SubmissionNoticeComponent";
import { ContentContainer } from "../types";
@@ -20,22 +23,7 @@ class SubmissionNotice {
this.contentContainer = contentContainer;
this.callback = callback;
//get reference node
let referenceNode = document.getElementById("player-container-id")
|| document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
if (referenceNode == null) {
//for embeds
const player = document.getElementById("player");
referenceNode = player.firstChild as HTMLElement;
let index = 1;
//find the child that is the video player (sometimes it is not the first)
while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
referenceNode = player.children[index] as HTMLElement;
index++;
}
}
const referenceNode = utils.findReferenceNode();
this.noticeElement = document.createElement("div");
this.noticeElement.id = "submissionNoticeContainer";

23
src/utils.ts
View File

@@ -375,6 +375,29 @@ export default class Utils {
});
}
findReferenceNode(): HTMLElement {
let referenceNode = document.getElementById("player-container-id")
?? document.getElementById("movie_player")
?? document.querySelector("#main-panel.ytmusic-player-page") // YouTube music
?? document.querySelector("#player-container .video-js") // Invidious
?? document.querySelector(".main-video-section > .video-container"); // Cloudtube
if (referenceNode == null) {
//for embeds
const player = document.getElementById("player");
referenceNode = player.firstChild as HTMLElement;
let index = 1;
//find the child that is the video player (sometimes it is not the first)
while (index < player.children.length && (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed"))) {
referenceNode = player.children[index] as HTMLElement;
index++;
}
}
return referenceNode;
}
getFormattedTime(seconds: number, precise?: boolean): string {
const hours = Math.floor(seconds / 60 / 60);
const minutes = Math.floor(seconds / 60) % 60;