diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index 3aa330c8..9a81ce4e 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -48,10 +48,6 @@ class NoticeComponent extends React.Component { this.startCountdown(); } - // forwardRef(props, ref) { - - // } - render() { let noticeStyle: React.CSSProperties = { zIndex: 50 + this.amountOfPreviousNotices diff --git a/src/components/NoticeTextSectionComponent.tsx b/src/components/NoticeTextSectionComponent.tsx new file mode 100644 index 00000000..3b64f106 --- /dev/null +++ b/src/components/NoticeTextSectionComponent.tsx @@ -0,0 +1,32 @@ +import * as React from "react"; + +export interface NoticeTextSelectionProps { + text: string, + idSuffix: string +} + +export interface NoticeTextSelectionState { + +} + +class NoticeTextSelectionComponent extends React.Component { + countdownInterval: NodeJS.Timeout; + idSuffix: any; + + amountOfPreviousNotices: number; + + constructor(props: NoticeTextSelectionProps) { + super(props); + } + + render() { + return ( +

+ {this.props.text} +

+ ); + } +} + +export default NoticeTextSelectionComponent; \ No newline at end of file diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index 50cc34a9..85f95893 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -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 4, @@ -90,12 +94,10 @@ class SkipNoticeComponent extends React.Component - - {/* Spacer */} - - + {/* Text Boxes */} + {this.getMessageBoxes()} + {/* Last Row */} @@ -150,6 +152,29 @@ class SkipNoticeComponent extends React.Component + + ); + } + + let elements: JSX.Element[] = []; + + for (let i = 0; i < this.state.messages.length; i++) { + elements.push( + + + ) + } + + return elements; + } + unskip() { this.contentContainer().unskipSponsorTime(this.UUID); @@ -206,7 +231,7 @@ class SkipNoticeComponent extends React.Component 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) { diff --git a/src/content.ts b/src/content.ts index 03515e28..e071f033 100644 --- a/src/content.ts +++ b/src/content.ts @@ -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)(); } }