external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 09:07:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

Split notice text into a separate component

Browse source
This commit is contained in:
Ajay Ramachandran 2020-03-10 12:57:26 -04:00
parent 1a92265e65
commit a02aef591e
4 changed files with 72 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/NoticeComponent.tsx
View file

@ -48,10 +48,6 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
this.startCountdown();
}
// forwardRef(props, ref) {
// }
render() {
let noticeStyle: React.CSSProperties = {
zIndex: 50 + this.amountOfPreviousNotices

32
src/components/NoticeTextSectionComponent.tsx Normal file
View file

@ -0,0 +1,32 @@
import * as React from "react";
export interface NoticeTextSelectionProps {
text: string,
idSuffix: string
}
export interface NoticeTextSelectionState {
}
class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionProps, NoticeTextSelectionState> {
countdownInterval: NodeJS.Timeout;
idSuffix: any;
amountOfPreviousNotices: number;
constructor(props: NoticeTextSelectionProps) {
super(props);
}
render() {
return (
<p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
className="sponsorTimesInfoMessage">
{this.props.text}
</p>
);
}
}
export default NoticeTextSelectionComponent;

72
src/components/SkipNoticeComponent.tsx
View file

@ -2,6 +2,7 @@ import * as React from "react";
import Config from "../config"
import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
export interface SkipNoticeProps {
UUID: string;
@ -13,6 +14,8 @@ export interface SkipNoticeProps {
export interface SkipNoticeState {
noticeTitle: string,
messages: string[],
countdownTime: number,
maxCountdownTime: () => number;
countdownText: string,
@ -63,6 +66,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
// Setup state
this.state = {
noticeTitle,
messages: [],
//the countdown until this notice closes
maxCountdownTime: () => 4,
@ -90,12 +94,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
timed={true}
maxCountdownTime={this.state.maxCountdownTime}
ref={this.noticeRef}>
{/* Spacer */}
<tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
className="sponsorBlockSpacer">
</tr>
{/* Text Boxes */}
{this.getMessageBoxes()}
{/* Last Row */}
<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
@ -150,6 +152,29 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
);
}
getMessageBoxes(): JSX.Element[] | JSX.Element {
if (this.state.messages.length === 0) {
// Add a spacer if there is no text
return (
<tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
className="sponsorBlockSpacer">
</tr>
);
}
let elements: JSX.Element[] = [];
for (let i = 0; i < this.state.messages.length; i++) {
elements.push(
<NoticeTextSelectionComponent idSuffix={this.idSuffix}
text={this.state.messages[i]}>
</NoticeTextSelectionComponent>
)
}
return elements;
}
unskip() {
this.contentContainer().unskipSponsorTime(this.UUID);
@ -206,7 +231,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
afterDownvote() {
this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
//remove this sponsor from the sponsors looked up
//find which one it is
@ -223,37 +248,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}
}
addNoticeInfoMessage(message: string, message2: string = "") {
let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
if (previousInfoMessage != null) {
//remove it
document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
}
let previousInfoMessage2 = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix + "2");
if (previousInfoMessage2 != null) {
//remove it
document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage2);
}
//add info
let thanksForVotingText = document.createElement("p");
thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
thanksForVotingText.className = "sponsorTimesInfoMessage";
thanksForVotingText.innerText = message;
//add element to div
document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
if (message2 !== undefined) {
let thanksForVotingText2 = document.createElement("p");
thanksForVotingText2.id = "sponsorTimesInfoMessage" + this.idSuffix + "2";
thanksForVotingText2.className = "sponsorTimesInfoMessage";
thanksForVotingText2.innerText = message2;
//add element to div
document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
}
setNoticeInfoMessage(...messages: string[]) {
this.setState({
messages
})
}
addVoteButtonInfo(message) {

9
src/content.ts
View file

@ -7,6 +7,7 @@ import runThePopup from "./popup";
import PreviewBar from "./js-components/previewBar";
import SkipNotice from "./render/SkipNotice";
import SkipNoticeComponent from "./components/SkipNoticeComponent";
// Hack to get the CSS loaded on permission-based sites (Invidious)
utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@ -1129,11 +1130,11 @@ function clearSponsorTimes() {
}
//if skipNotice is null, it will not affect the UI
function vote(type, UUID, skipNotice) {
function vote(type, UUID, skipNotice: SkipNoticeComponent) {
if (skipNotice != null) {
//add loading info
skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
skipNotice.setNoticeInfoMessage.bind(skipNotice)();
}
let sponsorIndex = UUIDs.indexOf(UUID);
@ -1168,10 +1169,10 @@ function vote(type, UUID, skipNotice) {
}
} else if (response.successType == 0) {
//failure: duplicate vote
skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
skipNotice.setNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
skipNotice.resetVoteButtonInfo.bind(skipNotice)();
} else if (response.successType == -1) {
skipNotice.addNoticeInfoMessage.bind(skipNotice)(utils.getErrorMessage(response.statusCode))
skipNotice.setNoticeInfoMessage.bind(skipNotice)(utils.getErrorMessage(response.statusCode))
skipNotice.resetVoteButtonInfo.bind(skipNotice)();
}
}