Merge pull request #317 from ajayyy/react

Categories Improvements
This commit is contained in:
Ajay Ramachandran
2020-04-19 20:54:25 -04:00
committed by GitHub
10 changed files with 252 additions and 340 deletions

View File

@@ -1,7 +1,7 @@
{
"name": "__MSG_fullName__",
"short_name": "__MSG_Name__",
"version": "1.2.25",
"version": "1.2.26",
"default_locale": "en",
"description": "__MSG_Description__",
"content_scripts": [{

View File

@@ -515,7 +515,7 @@
"message": "Manual Skip"
},
"showOverlay": {
"message": "Show Overlay On Player"
"message": "Show In Seek Bar"
},
"enableTestingServer": {
"message": "Enable Beta Testing Server"
@@ -528,5 +528,8 @@
},
"bracketNow": {
"message": "(Now)"
},
"moreCategories": {
"message": "More Categories"
}
}

View File

@@ -338,6 +338,13 @@ input::-webkit-inner-spin-button {
margin: 0;
}
.sponsorTimeMessagesRow {
max-height: 300px;
display: flex;
overflow: auto;
}
.sponsorTimeEdit {
font-size: 14px;

View File

@@ -11,7 +11,7 @@ export interface NoticeProps {
fadeIn?: boolean,
// Callback for when this is closed
closeListener?: () => void,
closeListener: () => void,
zIndex?: number
}
@@ -195,16 +195,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
* @param silent If true, the close listener will not be called
*/
close(silent?: boolean) {
//TODO: Change to a listener in the renderer (not component)
let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
if (notice != null) {
notice.remove();
}
//remove setInterval
if (this.countdownInterval !== null) clearInterval(this.countdownInterval);
if (this.props.closeListener && !silent) this.props.closeListener();
if (!silent) this.props.closeListener();
}
changeNoticeTitle(title) {

View File

@@ -14,6 +14,8 @@ export interface SkipNoticeProps {
autoSkip: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
closeListener: () => void
}
export interface SkipNoticeState {
@@ -112,7 +114,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
fadeIn={true}
timed={true}
maxCountdownTime={this.state.maxCountdownTime}
ref={this.noticeRef}>
ref={this.noticeRef}
closeListener={this.props.closeListener}>
{(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
<source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>

View File

@@ -154,7 +154,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
className="sponsorTimeCategories"
defaultValue={sponsorTime.category}
ref={this.categoryOptionRef}
onChange={this.saveEditTimes.bind(this)}>
onChange={this.categorySelectionChange.bind(this)}>
{this.getCategoryOptions()}
</select>
@@ -190,13 +190,21 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
getCategoryOptions() {
let elements = [];
//TODO: Remove this when testing server is not needed
let categoryList = Config.config.testingServer ? CompileConfig.categoryList : ["sponsor"];
for (const category of categoryList) {
for (const category of Config.config.categorySelections) {
elements.push(
<option value={category}
key={category}>
{chrome.i18n.getMessage("category_" + category)}
<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>
);
}
@@ -204,6 +212,20 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
return elements;
}
categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>) {
// See if show more categories was pressed
if (event.target.value === "moreCategories") {
// Open options page
chrome.runtime.sendMessage({"message": "openConfig"});
// Reset option to previous
event.target.value = this.props.contentContainer().sponsorTimesSubmitting[this.props.index].category;
return;
}
this.saveEditTimes();
}
setTimeToNow(index: number) {
let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
@@ -259,7 +281,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
let index = this.props.index;
let skipTime = sponsorTimes[index][0];
let skipTime = sponsorTimes[index].segment[0];
if (this.state.editing) {
// Save edits before previewing

View File

@@ -11,6 +11,8 @@ export interface SubmissionNoticeProps {
contentContainer: ContentContainer;
callback: () => any;
closeListener: () => void
}
export interface SubmissionNoticeeState {
@@ -28,6 +30,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
noticeRef: React.MutableRefObject<NoticeComponent>;
timeEditRefs: React.RefObject<SponsorTimeEditComponent>[];
videoObserver: MutationObserver;
constructor(props: SubmissionNoticeProps) {
super(props);
this.noticeRef = React.createRef();
@@ -45,6 +49,24 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
}
}
componentDidMount() {
// Catch and rerender when the video size changes
//TODO: Use ResizeObserver when it is supported in TypeScript
this.videoObserver = new MutationObserver(() => {
this.forceUpdate();
});
this.videoObserver.observe(this.contentContainer().v, {
attributes: true
});
}
componentWillUnmount() {
if (this.videoObserver) {
this.videoObserver.disconnect();
}
}
render() {
return (
<NoticeComponent noticeTitle={this.state.noticeTitle}
@@ -57,8 +79,10 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
{this.getMessageBoxes()}
{/* Sponsor Time List */}
<tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}>
<td>
<tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}
className="sponsorTimeMessagesRow"
style={{maxHeight: (this.contentContainer().v.offsetHeight - 200) + "px"}}>
<td style={{width: "100%"}}>
{this.getSponsorTimeMessages()}
</td>
</tr>
@@ -133,6 +157,8 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
this.noticeRef.current.close(true);
this.contentContainer().resetSponsorSubmissionNotice();
this.props.closeListener();
}
submit() {

View File

@@ -593,239 +593,122 @@ function sponsorsLookup(id: string, channelIDPromise?) {
//check database for sponsor times
//made true once a setTimeout has been created to try again after a server error
let recheckStarted = false;
if (Config.config.testingServer) {
// Create categories list
let categories: string[] = [];
for (const categorySelection of Config.config.categorySelections) {
categories.push(categorySelection.name);
}
utils.asyncRequestToServer('GET', "/api/skipSegments", {
videoID: id,
categories
}).then(async (response: Response) => {
if (response.status === 200) {
let recievedSegments: SponsorTime[] = await response.json();
if (!recievedSegments.length) {
console.error("[SponsorBlock] Server returned malformed response: " + JSON.stringify(recievedSegments));
return;
}
sponsorDataFound = true;
// Check if any old submissions should be kept
if (sponsorTimes !== null) {
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].UUID === null) {
// This is a user submission, keep it
recievedSegments.push(sponsorTimes[i]);
}
}
}
sponsorTimes = recievedSegments;
// Remove all submissions smaller than the minimum duration
if (Config.config.minDuration !== 0) {
let smallSegments: SponsorTime[] = [];
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].segment[1] - sponsorTimes[i].segment[0] >= Config.config.minDuration) {
smallSegments.push(sponsorTimes[i]);
}
}
sponsorTimes = smallSegments;
}
if (!switchingVideos) {
// See if there are any starting sponsors
let startingSponsor: number = -1;
for (const time of sponsorTimes) {
if (time[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
if (!startingSponsor) {
for (const time of sponsorTimesSubmitting) {
if (time.segment[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
}
if (startingSponsor !== -1) {
startSponsorSchedule(false, startingSponsor);
} else {
startSponsorSchedule();
}
}
// Reset skip save
sponsorSkipped = [];
//update the preview bar
//leave the type blank for now until categories are added
if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(video.duration))) {
//set it now
//otherwise the listener can handle it
updatePreviewBar();
}
sponsorLookupRetries = 0;
} else if (response.status === 404) {
sponsorDataFound = false;
//check if this video was uploaded recently
//use the invidious api to get the time published
sendRequestToCustomServer('GET', "https://www.youtube.com/get_video_info?video_id=" + id, function(xmlhttp, error) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let decodedData = decodeURIComponent(xmlhttp.responseText).match(/player_response=([^&]*)/)[1];
if (decodedData === undefined) {
console.error("[SB] Failed at getting video upload date info from YouTube.");
return;
}
let dateUploaded = JSON.parse(decodedData).microformat.playerMicroformatRenderer.uploadDate;
//if less than 3 days old
if (Date.now() - new Date(dateUploaded).getTime() < 259200000) {
//TODO lower when server becomes better
setTimeout(() => sponsorsLookup(id, channelIDPromise), 180000);
}
}
});
sponsorLookupRetries = 0;
} else if (sponsorLookupRetries < 90 && !recheckStarted) {
recheckStarted = true;
//TODO lower when server becomes better (back to 1 second)
//some error occurred, try again in a second
setTimeout(() => sponsorsLookup(id, channelIDPromise), 10000);
sponsorLookupRetries++;
}
});
} else {
utils.sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
sponsorDataFound = true;
let recievedSegments: number[][] = JSON.parse(xmlhttp.responseText).sponsorTimes;
let recievedUUIDs: string[] = JSON.parse(xmlhttp.responseText).UUIDs;
// Check if any old submissions should be kept
if (sponsorTimes !== null) {
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].UUID === null) {
// This is a user submission, keep it
recievedSegments.push(sponsorTimes[i].segment);
}
}
}
// Create formatted array
sponsorTimes = [];
for (let i = 0; i < recievedSegments.length; i++) {
sponsorTimes.push({
segment: recievedSegments[i],
UUID: recievedUUIDs[i],
// Force sponsor category for now
//TODO: Remove this
category: "sponsor"
});
}
// Remove all submissions smaller than the minimum duration
if (Config.config.minDuration !== 0) {
let smallSegments: SponsorTime[] = [];
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].segment[1] - sponsorTimes[i].segment[0] >= Config.config.minDuration) {
smallSegments.push(sponsorTimes[i]);
}
}
sponsorTimes = smallSegments;
}
if (!switchingVideos) {
// See if there are any starting sponsors
let startingSponsor: number = -1;
for (const time of sponsorTimes) {
if (time[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
if (!startingSponsor) {
for (const time of sponsorTimesSubmitting) {
if (time.segment[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
}
if (startingSponsor !== -1) {
startSponsorSchedule(false, startingSponsor);
} else {
startSponsorSchedule();
}
}
// Reset skip save
sponsorSkipped = [];
//update the preview bar
//leave the type blank for now until categories are added
if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(video.duration))) {
//set it now
//otherwise the listener can handle it
updatePreviewBar();
}
sponsorLookupRetries = 0;
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
sponsorDataFound = false;
//check if this video was uploaded recently
//use the invidious api to get the time published
sendRequestToCustomServer('GET', "https://www.youtube.com/get_video_info?video_id=" + id, function(xmlhttp, error) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let decodedData = decodeURIComponent(xmlhttp.responseText).match(/player_response=([^&]*)/)[1];
if (decodedData === undefined) {
console.error("[SB] Failed at getting video upload date info from YouTube.");
return;
}
let dateUploaded = JSON.parse(decodedData).microformat.playerMicroformatRenderer.uploadDate;
//if less than 3 days old
if (Date.now() - new Date(dateUploaded).getTime() < 259200000) {
//TODO lower when server becomes better
setTimeout(() => sponsorsLookup(id, channelIDPromise), 180000);
}
}
});
sponsorLookupRetries = 0;
} else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 90 && !recheckStarted) {
recheckStarted = true;
//TODO lower when server becomes better (back to 1 second)
//some error occurred, try again in a second
setTimeout(() => sponsorsLookup(id, channelIDPromise), 10000);
sponsorLookupRetries++;
}
});
// Create categories list
let categories: string[] = [];
for (const categorySelection of Config.config.categorySelections) {
categories.push(categorySelection.name);
}
utils.asyncRequestToServer('GET', "/api/skipSegments", {
videoID: id,
categories
}).then(async (response: Response) => {
if (response.status === 200) {
let recievedSegments: SponsorTime[] = await response.json();
if (!recievedSegments.length) {
console.error("[SponsorBlock] Server returned malformed response: " + JSON.stringify(recievedSegments));
return;
}
sponsorDataFound = true;
// Check if any old submissions should be kept
if (sponsorTimes !== null) {
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].UUID === null) {
// This is a user submission, keep it
recievedSegments.push(sponsorTimes[i]);
}
}
}
sponsorTimes = recievedSegments;
// Remove all submissions smaller than the minimum duration
if (Config.config.minDuration !== 0) {
let smallSegments: SponsorTime[] = [];
for (let i = 0; i < sponsorTimes.length; i++) {
if (sponsorTimes[i].segment[1] - sponsorTimes[i].segment[0] >= Config.config.minDuration) {
smallSegments.push(sponsorTimes[i]);
}
}
sponsorTimes = smallSegments;
}
if (!switchingVideos) {
// See if there are any starting sponsors
let startingSponsor: number = -1;
for (const time of sponsorTimes) {
if (time[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
if (!startingSponsor) {
for (const time of sponsorTimesSubmitting) {
if (time.segment[0] <= video.currentTime && time.segment[0] > startingSponsor && time.segment[1] > video.currentTime) {
startingSponsor = time.segment[0];
break;
}
}
}
if (startingSponsor !== -1) {
startSponsorSchedule(false, startingSponsor);
} else {
startSponsorSchedule();
}
}
// Reset skip save
sponsorSkipped = [];
//update the preview bar
//leave the type blank for now until categories are added
if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(video.duration))) {
//set it now
//otherwise the listener can handle it
updatePreviewBar();
}
sponsorLookupRetries = 0;
} else if (response.status === 404) {
sponsorDataFound = false;
//check if this video was uploaded recently
//use the invidious api to get the time published
sendRequestToCustomServer('GET', "https://www.youtube.com/get_video_info?video_id=" + id, function(xmlhttp, error) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let decodedData = decodeURIComponent(xmlhttp.responseText).match(/player_response=([^&]*)/)[1];
if (decodedData === undefined) {
console.error("[SB] Failed at getting video upload date info from YouTube.");
return;
}
let dateUploaded = JSON.parse(decodedData).microformat.playerMicroformatRenderer.uploadDate;
//if less than 3 days old
if (Date.now() - new Date(dateUploaded).getTime() < 259200000) {
//TODO lower when server becomes better
setTimeout(() => sponsorsLookup(id, channelIDPromise), 180000);
}
}
});
sponsorLookupRetries = 0;
} else if (sponsorLookupRetries < 90 && !recheckStarted) {
recheckStarted = true;
//TODO lower when server becomes better (back to 1 second)
//some error occurred, try again in a second
setTimeout(() => sponsorsLookup(id, channelIDPromise), 10000);
sponsorLookupRetries++;
}
});
}
function getYouTubeVideoID(url: string) {
@@ -1577,92 +1460,46 @@ async function sendSubmitMessage(){
}
}
if (Config.config.testingServer) {
let response = await utils.asyncRequestToServer("POST", "/api/skipSegments", {
videoID: sponsorVideoID,
userID: Config.config.userID,
segments: sponsorTimesSubmitting
});
let response = await utils.asyncRequestToServer("POST", "/api/skipSegments", {
videoID: sponsorVideoID,
userID: Config.config.userID,
segments: sponsorTimesSubmitting
});
if (response.status === 200) {
//hide loading message
let submitButton = document.getElementById("submitButton");
submitButton.style.animation = "rotate 1s";
//finish this animation
//when the animation is over, hide the button
let animationEndListener = function() {
changeStartSponsorButton(true, false);
if (response.status === 200) {
//hide loading message
let submitButton = document.getElementById("submitButton");
submitButton.style.animation = "rotate 1s";
//finish this animation
//when the animation is over, hide the button
let animationEndListener = function() {
changeStartSponsorButton(true, false);
submitButton.style.animation = "none";
submitButton.style.animation = "none";
submitButton.removeEventListener("animationend", animationEndListener);
};
submitButton.removeEventListener("animationend", animationEndListener);
};
submitButton.addEventListener("animationend", animationEndListener);
submitButton.addEventListener("animationend", animationEndListener);
//clear the sponsor times
Config.config.sponsorTimes.delete(sponsorVideoID);
//clear the sponsor times
Config.config.sponsorTimes.delete(sponsorVideoID);
//add submissions to current sponsors list
if (sponsorTimes === null) sponsorTimes = [];
sponsorTimes = sponsorTimes.concat(sponsorTimesSubmitting);
//add submissions to current sponsors list
if (sponsorTimes === null) sponsorTimes = [];
sponsorTimes = sponsorTimes.concat(sponsorTimesSubmitting);
// Empty the submitting times
sponsorTimesSubmitting = [];
updatePreviewBar();
} else {
//show that the upload failed
document.getElementById("submitButton").style.animation = "unset";
(<HTMLImageElement> document.getElementById("submitImage")).src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
alert(utils.getErrorMessage(response.status) + "\n\n" + (await response.text()));
}
// Empty the submitting times
sponsorTimesSubmitting = [];
updatePreviewBar();
} else {
chrome.runtime.sendMessage({
message: "submitTimes",
videoID: sponsorVideoID
}, function(response) {
if (response != undefined) {
if (response.statusCode == 200) {
//hide loading message
let submitButton = document.getElementById("submitButton");
submitButton.style.animation = "rotate 1s";
//finish this animation
//when the animation is over, hide the button
let animationEndListener = function() {
changeStartSponsorButton(true, false);
submitButton.style.animation = "none";
submitButton.removeEventListener("animationend", animationEndListener);
};
submitButton.addEventListener("animationend", animationEndListener);
//clear the sponsor times
Config.config.sponsorTimes.delete(sponsorVideoID);
//add submissions to current sponsors list
if (sponsorTimes === null) sponsorTimes = [];
sponsorTimes = sponsorTimes.concat(sponsorTimesSubmitting);
// Empty the submitting times
sponsorTimesSubmitting = [];
updatePreviewBar();
} else {
//show that the upload failed
document.getElementById("submitButton").style.animation = "unset";
(<HTMLImageElement> document.getElementById("submitImage")).src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
alert(utils.getErrorMessage(response.statusCode) + "\n\n" + response.responseText);
}
}
});
//show that the upload failed
document.getElementById("submitButton").style.animation = "unset";
(<HTMLImageElement> document.getElementById("submitImage")).src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
alert(utils.getErrorMessage(response.status) + "\n\n" + (await response.text()));
}
}

View File

@@ -9,6 +9,8 @@ class SkipNotice {
// 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;
this.autoSkip = autoSkip;
@@ -35,16 +37,25 @@ class SkipNotice {
//this is the suffix added at the end of every id
let idSuffix = this.UUID + amountOfPreviousNotices;
let noticeElement = document.createElement("div");
noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
this.noticeElement = document.createElement("div");
this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
referenceNode.prepend(noticeElement);
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
<SkipNoticeComponent UUID={UUID} autoSkip={autoSkip} contentContainer={contentContainer} />,
noticeElement
<SkipNoticeComponent UUID={UUID}
autoSkip={autoSkip}
contentContainer={contentContainer}
closeListener={() => this.close()} />,
this.noticeElement
);
}
close() {
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.noticeElement.remove();
}
}
export default SkipNotice;

View File

@@ -11,6 +11,8 @@ class SubmissionNotice {
noticeRef: React.MutableRefObject<SubmissionNoticeComponent>;
noticeElement: HTMLDivElement;
constructor(contentContainer: () => any, callback: () => any) {
this.noticeRef = React.createRef();
@@ -34,23 +36,30 @@ class SubmissionNotice {
}
}
let noticeElement = document.createElement("div");
noticeElement.id = "submissionNoticeContainer";
this.noticeElement = document.createElement("div");
this.noticeElement.id = "submissionNoticeContainer";
referenceNode.prepend(noticeElement);
referenceNode.prepend(this.noticeElement);
ReactDOM.render(
<SubmissionNoticeComponent
contentContainer={contentContainer}
callback={callback}
ref={this.noticeRef} />,
noticeElement
ref={this.noticeRef}
closeListener={() => this.close()} />,
this.noticeElement
);
}
update() {
this.noticeRef.current.forceUpdate();
}
close() {
ReactDOM.unmountComponentAtNode(this.noticeElement);
this.noticeElement.remove();
}
}
export default SubmissionNotice;