Added segment chooser when skipping multiple segments.

Now the skip notice supports skipping multiple segments.
This commit is contained in:
Ajay Ramachandran 2020-05-19 23:21:51 -04:00
parent edf06ac908
commit 05acb1669e
5 changed files with 188 additions and 91 deletions

View file

@ -566,5 +566,8 @@
},
"nonMusicCategoryOnMusic": {
"message": "This video is categorized as music. Are you sure you would like to submit segments with non-music categories? Unless this video is not actually music, you should not be submitting this segment. Please read the guidelines if you are confused."
},
"multipleSegments": {
"message": "Multiple Segments"
}
}

View file

@ -1,7 +1,7 @@
import * as React from "react";
import * as CompileConfig from "../../config.json";
import Config from "../config"
import { ContentContainer, SponsorHideType } from "../types";
import { ContentContainer, SponsorHideType, SponsorTime } from "../types";
import Utils from "../utils";
var utils = new Utils();
@ -9,9 +9,17 @@ var utils = new Utils();
import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
enum SkipNoticeAction {
None,
Upvote,
Downvote,
CategoryVote,
Unskip
}
export interface SkipNoticeProps {
segments: SponsorTime[];
export interface SkipNoticeProps {
UUID: string;
autoSkip: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
@ -29,14 +37,16 @@ export interface SkipNoticeState {
countdownText: string;
unskipText: string;
unskipCallback: () => void;
unskipCallback: (index: number) => void;
downvoting: boolean;
choosingCategory: boolean;
actionState: SkipNoticeAction;
}
class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
UUID: string;
segments: SponsorTime[];
autoSkip: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
@ -57,22 +67,30 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.noticeRef = React.createRef();
this.categoryOptionRef = React.createRef();
this.UUID = props.UUID;
this.segments = props.segments;
this.autoSkip = props.autoSkip;
this.contentContainer = props.contentContainer;
this.audio = null;
let noticeTitle = chrome.i18n.getMessage("category_" + this.getSponsorTime().category) + " " + chrome.i18n.getMessage("skipped");
let categoryName = chrome.i18n.getMessage(this.segments.length > 1 ? "multipleSegments" : "category_" + this.segments[0].category);
let noticeTitle = categoryName + " " + chrome.i18n.getMessage("skipped");
if (!this.autoSkip) {
noticeTitle = chrome.i18n.getMessage("skip") + " " + chrome.i18n.getMessage("category_" + this.getSponsorTime().category) + "?";
noticeTitle = chrome.i18n.getMessage("skip") + " " + categoryName + "?";
}
//add notice
this.amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
// Sort segments
if (this.segments.length > 1) {
this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
}
//this is the suffix added at the end of every id
this.idSuffix = this.UUID + this.amountOfPreviousNotices;
for (const segment of this.segments) {
this.idSuffix += segment.UUID;
}
this.idSuffix += this.amountOfPreviousNotices;
if (this.amountOfPreviousNotices > 0) {
//another notice exists
@ -92,22 +110,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
countdownText: null,
unskipText: chrome.i18n.getMessage("unskip"),
unskipCallback: this.unskip.bind(this),
unskipCallback: (index) => this.unskip(index),
downvoting: false,
choosingCategory: false
choosingCategory: false,
actionState: SkipNoticeAction.None
}
if (!this.autoSkip) {
Object.assign(this.state, this.getUnskippedModeInfo(chrome.i18n.getMessage("skip")));
// Assume manual skip is only skipping 1 submission
Object.assign(this.state, this.getUnskippedModeInfo(0, chrome.i18n.getMessage("skip")));
}
}
// Helper method
getSponsorTime() {
return utils.getSponsorTimeFromUUID(this.contentContainer().sponsorTimes, this.UUID);
}
componentDidMount() {
if (Config.config.audioNotificationOnSkip && this.audio) {
this.audio.volume = this.contentContainer().v.volume * 0.1;
@ -173,7 +189,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
<button id={"sponsorSkipUnskipButton" + this.idSuffix}
className="sponsorSkipObject sponsorSkipNoticeButton"
style={{marginLeft: "4px"}}
onClick={this.state.unskipCallback}>
onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
{this.state.unskipText}
</button>
@ -198,7 +214,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
{/* Normal downvote */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.contentContainer().vote(0, this.UUID, undefined, this)}>
onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
{chrome.i18n.getMessage("downvoteDescription")}
</button>
@ -220,7 +236,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
{/* Category Selector */}
<select id={"sponsorTimeCategories" + this.idSuffix}
className="sponsorTimeCategories"
defaultValue={this.getSponsorTime().category}
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)}>
@ -228,11 +244,23 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
</select>
{/* Submit Button */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.contentContainer().vote(undefined, this.UUID, this.categoryOptionRef.current.value, this)}>
{this.segments.length === 1 &&
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.prepAction(SkipNoticeAction.CategoryVote)}>
{chrome.i18n.getMessage("submit")}
</button>
{chrome.i18n.getMessage("submit")}
</button>
}
</td>
</tr>
}
{/* Segment Chooser Row */}
{this.state.actionState !== SkipNoticeAction.None &&
<tr id={"sponsorSkipNoticeSubmissionOptionsRow" + this.idSuffix}>
<td id={"sponsorTimesSubmissionOptionsContainer" + this.idSuffix}>
{this.getSubmissionChooser()}
</td>
</tr>
}
@ -241,6 +269,32 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
);
}
getSubmissionChooser(): JSX.Element[] {
let elements: JSX.Element[] = [];
for (let i = 0; i < this.segments.length; i++) {
elements.push(
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.performAction(i)}
key={"submission" + i + this.segments[i].category + this.idSuffix}>
{(i + 1) + ". " + chrome.i18n.getMessage("category_" + this.segments[i].category)}
</button>
);
}
return elements;
}
prepAction(action: SkipNoticeAction) {
if (this.segments.length === 1) {
this.performAction(0, action);
} else {
this.setState({
actionState: action
});
}
}
getMessageBoxes(): JSX.Element[] | JSX.Element {
if (this.state.messages.length === 0) {
// Add a spacer if there is no text
@ -265,6 +319,31 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
return elements;
}
/**
* Performs the action from the current state
*
* @param index
*/
performAction(index: number, action?: SkipNoticeAction) {
switch (action ?? this.state.actionState) {
case SkipNoticeAction.None:
break;
case SkipNoticeAction.Downvote:
this.contentContainer().vote(0, this.segments[index].UUID, undefined, this);
break;
case SkipNoticeAction.CategoryVote:
this.contentContainer().vote(undefined, this.segments[index].UUID, this.categoryOptionRef.current.value, this)
break;
case SkipNoticeAction.Unskip:
this.state.unskipCallback(index);
break;
}
this.setState({
actionState: SkipNoticeAction.None
});
}
adjustDownvotingState(value: boolean) {
if (!value) this.clearConfigListener();
@ -289,6 +368,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.setState({
choosingCategory: true,
downvoting: false
}, () => {
if (this.segments.length > 1) {
// Use the action selectors as a submit button
this.prepAction(SkipNoticeAction.CategoryVote);
}
});
}
@ -324,37 +408,38 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
chrome.runtime.sendMessage({"message": "openConfig"});
// Reset option to original
event.target.value = this.getSponsorTime().category;
event.target.value = this.segments[0].category;
return;
}
}
unskip() {
this.contentContainer().unskipSponsorTime(this.UUID);
unskip(index: number) {
this.contentContainer().unskipSponsorTime(this.segments[index]);
this.unskippedMode(chrome.i18n.getMessage("reskip"));
this.unskippedMode(index, chrome.i18n.getMessage("reskip"));
}
/** Sets up notice to be not skipped yet */
unskippedMode(buttonText: string) {
unskippedMode(index: number, buttonText: string) {
//setup new callback and reset countdown
this.setState(this.getUnskippedModeInfo(buttonText), () => {
this.setState(this.getUnskippedModeInfo(index, buttonText), () => {
this.noticeRef.current.resetCountdown();
});
}
getUnskippedModeInfo(buttonText: string) {
getUnskippedModeInfo(index: number, buttonText: string) {
let self = this;
let maxCountdownTime = function() {
let sponsorTime = this.getSponsorTime();
let duration = Math.round((sponsorTime.segment[1] - this.contentContainer().v.currentTime) * (1 / this.contentContainer().v.playbackRate));
let sponsorTime = self.segments[index];
let duration = Math.round((sponsorTime.segment[1] - self.contentContainer().v.currentTime) * (1 / self.contentContainer().v.playbackRate));
return Math.max(duration, 4);
}.bind(this);
};
return {
unskipText: buttonText,
unskipCallback: this.reskip.bind(this),
unskipCallback: (index) => this.reskip(index),
//change max duration to however much of the sponsor is left
maxCountdownTime: maxCountdownTime,
@ -363,8 +448,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}
}
reskip() {
this.contentContainer().reskipSponsorTime(this.UUID);
reskip(index: number) {
this.contentContainer().reskipSponsorTime(this.segments[index]);
//reset countdown
this.setState({
@ -380,24 +465,21 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.setState({
noticeTitle: chrome.i18n.getMessage("noticeTitle")
});
if(Config.config.autoUpvote) this.contentContainer().vote(1, this.UUID);
}
}
afterDownvote(type: number, category: string) {
afterDownvote(segment: SponsorTime, type: number, category: string) {
this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
this.adjustDownvotingState(false);
// Change the sponsor locally
let sponsorTime = this.getSponsorTime();
if (sponsorTime) {
if (segment) {
if (type === 0) {
sponsorTime.hidden = SponsorHideType.Downvoted;
segment.hidden = SponsorHideType.Downvoted;
} else if (category) {
sponsorTime.category = category;
segment.category = category;
}
this.contentContainer().updatePreviewBar();
@ -407,7 +489,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
setNoticeInfoMessage(...messages: string[]) {
this.setState({
messages
})
});
}
addVoteButtonInfo(message) {

View file

@ -81,12 +81,6 @@ utils.wait(() => Config.config !== null, 1000, 1).then(() => videoIDChange(getYo
//this only happens if there is an error
var sponsorLookupRetries = 0;
//the last time in the video a sponsor was skipped
//used for the go back button
var lastSponsorTimeSkipped: number = null;
//used for ratings
var lastSponsorTimeSkippedUUID: string = null;
//if showing the start sponsor button or the end sponsor button on the player
var showingStartSponsor = true;
@ -483,6 +477,19 @@ function startSponsorSchedule(includeIntersectingSegments: boolean = false, curr
let timeUntilSponsor = skipTime[0] - currentTime;
let videoID = sponsorVideoID;
// Find all indexes in between the start and end
let skippingSegments = [skipInfo.array[skipInfo.index]];
if (skipInfo.index !== skipInfo.endIndex) {
skippingSegments = [];
for (const segment of skipInfo.array) {
if (utils.getCategorySelection(segment.category).option === CategorySkipOption.AutoSkip &&
segment.segment[0] >= skipTime[0] && segment.segment[1] <= skipTime[1]) {
skippingSegments.push(segment);
}
}
}
// Don't skip if this category should not be skipped
if (utils.getCategorySelection(currentSkip.category).option === CategorySkipOption.ShowOverlay) return;
@ -493,7 +500,7 @@ function startSponsorSchedule(includeIntersectingSegments: boolean = false, curr
if (incorrectVideoCheck(videoID, currentSkip)) return;
if (video.currentTime >= skipTime[0] && video.currentTime < skipTime[1]) {
skipToTime(video, skipInfo.endIndex, skipInfo.array, skipInfo.openNotice);
skipToTime(video, skipTime, skippingSegments, skipInfo.openNotice);
// TODO: Know the autoSkip settings for ALL items being skipped
if (utils.getCategorySelection(currentSkip.category).option === CategorySkipOption.ManualSkip) {
@ -955,58 +962,58 @@ function previewTime(time: number) {
}
//skip from the start time to the end time for a certain index sponsor time
function skipToTime(v: HTMLVideoElement, index: number, sponsorTimes: SponsorTime[], openNotice: boolean) {
let autoSkip: boolean = utils.getCategorySelection(sponsorTimes[index].category).option === CategorySkipOption.AutoSkip;
function skipToTime(v: HTMLVideoElement, skipTime: number[], skippingSegments: SponsorTime[], openNotice: boolean) {
// There will only be one submission if it is manual skip
let autoSkip: boolean = utils.getCategorySelection(skippingSegments[0].category).option === CategorySkipOption.AutoSkip;
if (autoSkip || previewResetter !== null) {
v.currentTime = sponsorTimes[index].segment[1];
v.currentTime = skipTime[1];
}
lastSponsorTimeSkipped = sponsorTimes[index].segment[0];
let currentUUID: string = sponsorTimes[index].UUID;
lastSponsorTimeSkippedUUID = currentUUID;
if (openNotice) {
//send out the message saying that a sponsor message was skipped
if (!Config.config.dontShowNotice || !autoSkip) {
let skipNotice = new SkipNotice(currentUUID, autoSkip, skipNoticeContentContainer);
//auto-upvote this sponsor
if (Config.config.trackViewCount && autoSkip && Config.config.autoUpvote) {
vote(1, currentUUID);
}
let skipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer);
}
//send telemetry that a this sponsor was skipped
if (Config.config.trackViewCount && !sponsorSkipped[index] && autoSkip) {
utils.sendRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
if (Config.config.trackViewCount && autoSkip) {
let alreadySkipped = false;
let isPreviewSegment = false;
for (const segment of skippingSegments) {
let index = sponsorTimes.indexOf(segment);
if (index !== -1 && !sponsorSkipped[index]) {
utils.sendRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + segment.UUID);
sponsorSkipped[index] = true;
} else if (sponsorSkipped[index]) {
alreadySkipped = true;
}
if (index !== -1) isPreviewSegment = true;
}
// Count this as a skip
Config.config.minutesSaved = Config.config.minutesSaved + (sponsorTimes[index].segment[1] - sponsorTimes[index].segment[0]) / 60;
Config.config.skipCount = Config.config.skipCount + 1;
sponsorSkipped[index] = true;
if (!alreadySkipped && !isPreviewSegment) {
Config.config.minutesSaved = Config.config.minutesSaved + (skipTime[1] - skipTime[0]) / 60;
Config.config.skipCount = Config.config.skipCount + 1;
}
}
}
}
function unskipSponsorTime(UUID) {
function unskipSponsorTime(segment: SponsorTime) {
if (sponsorTimes != null) {
//add a tiny bit of time to make sure it is not skipped again
video.currentTime = utils.getSponsorTimeFromUUID(sponsorTimes, UUID).segment[0] + 0.001;
video.currentTime = segment.segment[0] + 0.001;
checkIfInsideSegment();
}
}
function reskipSponsorTime(UUID) {
if (sponsorTimes != null) {
video.currentTime = utils.getSponsorTimeFromUUID(sponsorTimes, UUID).segment[1];
// See if any skips need to be done if this is inside of another segment
startSponsorSchedule(true, utils.getSponsorTimeFromUUID(sponsorTimes, UUID).segment[1]);
}
function reskipSponsorTime(segment: SponsorTime) {
video.currentTime = segment.segment[1];
}
/**
@ -1370,7 +1377,7 @@ function vote(type: number, UUID: string, category?: string, skipNotice?: SkipNo
if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
//success (treat rate limits as a success)
if (type === 0 || category) {
skipNotice.afterDownvote.bind(skipNotice)(type, category);
skipNotice.afterDownvote.bind(skipNotice)(utils.getSponsorTimeFromUUID(sponsorTimes, UUID), type, category);
}
} else if (response.successType == 0) {
//failure: duplicate vote

View file

@ -2,17 +2,18 @@ import * as React from "react";
import * as ReactDOM from "react-dom";
import SkipNoticeComponent from "../components/SkipNoticeComponent";
import { SponsorTime } from "../types";
class SkipNotice {
UUID: string;
segments: SponsorTime[];
autoSkip: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: () => any;
noticeElement: HTMLDivElement;
constructor(UUID: string, autoSkip: boolean = false, contentContainer) {
this.UUID = UUID;
constructor(segments: SponsorTime[], autoSkip: boolean = false, contentContainer) {
this.segments = segments;
this.autoSkip = autoSkip;
this.contentContainer = contentContainer;
@ -35,7 +36,11 @@ class SkipNotice {
let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
//this is the suffix added at the end of every id
let idSuffix = this.UUID + amountOfPreviousNotices;
let idSuffix = "";
for (const segment of this.segments) {
idSuffix += segment.UUID;
}
idSuffix += amountOfPreviousNotices;
this.noticeElement = document.createElement("div");
this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
@ -43,7 +48,7 @@ class SkipNotice {
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
<SkipNoticeComponent UUID={UUID}
<SkipNoticeComponent segments={segments}
autoSkip={autoSkip}
contentContainer={contentContainer}
closeListener={() => this.close()} />,

View file

@ -5,12 +5,12 @@ interface ContentContainer {
(): {
vote: (type: any, UUID: any, category?: string, skipNotice?: SkipNoticeComponent) => void,
dontShowNoticeAgain: () => void,
unskipSponsorTime: (UUID: any) => void,
unskipSponsorTime: (segment: SponsorTime) => void,
sponsorTimes: SponsorTime[],
sponsorTimesSubmitting: SponsorTime[],
v: HTMLVideoElement,
sponsorVideoID,
reskipSponsorTime: (UUID: any) => void,
reskipSponsorTime: (segment: SponsorTime) => void,
updatePreviewBar: () => void,
onMobileYouTube: boolean,
sponsorSubmissionNotice: SubmissionNotice,