Added basic react submission confirmation notice

src/components/NoticeComponent.tsx

@@ -6,12 +6,16 @@ export interface NoticeProps {
     maxCountdownTime?: () => number,
     amountOfPreviousNotices?: number,
     timed?: boolean,
-    idSuffix: string
+    idSuffix?: string,
+
+    fadeIn?: boolean
 }
 
 export interface NoticeState {
     noticeTitle: string,
 
+    maxCountdownTime?: () => number,
+
     countdownTime: number,
     countdownText: string,
 }
@@ -25,21 +29,23 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
     constructor(props: NoticeProps) {
         super(props);
 
-        if (props.maxCountdownTime === undefined) props.maxCountdownTime = () => 4;
+        let maxCountdownTime = props.maxCountdownTime || (() => 4);
     
         //the id for the setInterval running the countdown
         this.countdownInterval = null;
 
         this.amountOfPreviousNotices = props.amountOfPreviousNotices || 0;
 
-        this.idSuffix = props.idSuffix;
+        this.idSuffix = props.idSuffix || "";
 
         // Setup state
         this.state = {
             noticeTitle: props.noticeTitle,
 
+            maxCountdownTime,
+
             //the countdown until this notice closes
-            countdownTime: props.maxCountdownTime(),
+            countdownTime: maxCountdownTime(),
             countdownText: null,
         }
     }
@@ -55,7 +61,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
         return (
             <table id={"sponsorSkipNotice" + this.idSuffix} 
-                className="sponsorSkipObject sponsorSkipNotice" style={noticeStyle}
+                className={"sponsorSkipObject sponsorSkipNotice" + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")}
+                style={noticeStyle}
                 onMouseEnter={this.pauseCountdown.bind(this)}
                 onMouseLeave={this.startCountdown.bind(this)}> <tbody>
 
@@ -141,7 +148,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
 
         //reset countdown and inform the user
         this.setState({
-            countdownTime: this.props.maxCountdownTime(),
+            countdownTime: this.state.maxCountdownTime(),
             countdownText: chrome.i18n.getMessage("paused")
         });
         
@@ -158,7 +165,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         if (this.countdownInterval !== null) return;
 
         this.setState({
-            countdownTime: this.props.maxCountdownTime(),
+            countdownTime: this.state.maxCountdownTime(),
             countdownText: null
         });
 
@@ -169,7 +176,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         if (!this.props.timed) return;
 
         this.setState({
-            countdownTime: this.props.maxCountdownTime(),
+            countdownTime: this.state.maxCountdownTime(),
             countdownText: null
         });
     }

src/components/NoticeTextSectionComponent.tsx

@@ -10,10 +10,6 @@ export interface NoticeTextSelectionState {
 }
 
 class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionProps, NoticeTextSelectionState> {
-    countdownInterval: NodeJS.Timeout;
-    idSuffix: any;
-
-    amountOfPreviousNotices: number;
 
     constructor(props: NoticeTextSelectionProps) {
         super(props);

src/components/SkipNoticeComponent.tsx

@@ -91,6 +91,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 idSuffix={this.idSuffix}
+                fadeIn={true}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 ref={this.noticeRef}>
@@ -167,7 +168,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         for (let i = 0; i < this.state.messages.length; i++) {
             elements.push(
                 <NoticeTextSelectionComponent idSuffix={this.idSuffix}
-                    text={this.state.messages[i]}>
+                    text={this.state.messages[i]}
+                    key={i}>
                 </NoticeTextSelectionComponent>
             )
         }

src/components/SponsorTimeEditComponent.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+export interface SponsorTimeEditProps {
+    index: number,
+
+    idSuffix: string,
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: () => any;
+}
+
+export interface SponsorTimeEditState {
+
+}
+
+class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
+
+    constructor(props: SponsorTimeEditProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <>
+                <div id={"sponsorTimesContainer" + this.props.index + this.props.idSuffix}
+                    className="sponsorTime">
+                        {this.props.contentContainer().sponsorTimesSubmitting[this.props.index][0] 
+                            + " to " + this.props.contentContainer().sponsorTimesSubmitting[this.props.index][1]}
+                </div>
+
+                <span id={"sponsorTimeDeleteButton" + this.props.index + this.props.idSuffix}>
+                    {chrome.i18n.getMessage("delete")}
+                </span>
+
+                <span id={"sponsorTimePreviewButton" + this.props.index + this.props.idSuffix}>
+                    {chrome.i18n.getMessage("preview")}
+                </span>
+
+                <span id={"sponsorTimeEditButton" + this.props.index + this.props.idSuffix}>
+                    {chrome.i18n.getMessage("edit")}
+                </span>
+            </>
+        );
+    }
+}
+
+export default SponsorTimeEditComponent;

src/components/SubmissionNoticeComponent.tsx

@@ -0,0 +1,141 @@
+import * as React from "react";
+import Config from "../config"
+
+import NoticeComponent from "./NoticeComponent";
+import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
+import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
+
+export interface SkipNoticeProps { 
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: () => any;
+
+    callback: () => any;
+}
+
+export interface SkipNoticeState {
+    noticeTitle: string,
+    messages: string[],
+    idSuffix: string;
+}
+
+class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: () => any;
+
+    callback: () => any;
+
+    noticeRef: React.MutableRefObject<NoticeComponent>;
+
+    constructor(props: SkipNoticeProps) {
+        super(props);
+        this.noticeRef = React.createRef();
+
+        this.contentContainer = props.contentContainer;
+        this.callback = props.callback;
+    
+        let noticeTitle = chrome.i18n.getMessage("confirmNoticeTitle");
+
+        // Setup state
+        this.state = {
+            noticeTitle,
+            messages: [],
+            idSuffix: "SubmissionNotice"
+        }
+    }
+
+    render() {
+        let noticeStyle: React.CSSProperties = {};
+        if (this.contentContainer().onMobileYouTube) {
+            noticeStyle.bottom = "4em";
+            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
+        }
+
+        return (
+            <NoticeComponent noticeTitle={this.state.noticeTitle}
+                idSuffix={this.state.idSuffix}
+                ref={this.noticeRef}>
+
+                {/* Text Boxes */}
+                {this.getMessageBoxes()}
+
+                {/* Sponsor Time List */}
+                <tr id={"sponsorSkipNoticeMiddleRow" + this.state.idSuffix}>
+                    <td>
+                        {this.getSponsorTimeMessages()}
+                    </td>
+                </tr>
+              
+                {/* Last Row */}
+                <tr id={"sponsorSkipNoticeSecondRow" + this.state.idSuffix}>
+
+                    <td className="sponsorSkipNoticeRightSection"
+                        style={{position: "relative"}}>
+
+                        {/* Cancel Button */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            onClick={this.cancel.bind(this)}>
+
+                            {chrome.i18n.getMessage("cancel")}
+                        </button>
+
+                        {/* Submit Button */}
+                        <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            onClick={this.submit.bind(this)}>
+
+                            {chrome.i18n.getMessage("submit")}
+                        </button>
+                    </td>
+                </tr>
+
+            </NoticeComponent>
+        );
+    }
+
+    getSponsorTimeMessages(): JSX.Element[] | JSX.Element {
+        let elements: JSX.Element[] = [];
+
+        let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
+
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            elements.push(
+                <SponsorTimeEditComponent key={i}
+                    idSuffix={this.state.idSuffix}
+                    index={i}
+                    contentContainer={this.props.contentContainer}>
+                </SponsorTimeEditComponent>
+            )
+        }
+
+        return elements;
+    }
+
+    getMessageBoxes(): JSX.Element[] | JSX.Element {
+        let elements: JSX.Element[] = [];
+
+        for (let i = 0; i < this.state.messages.length; i++) {
+            elements.push(
+                <NoticeTextSelectionComponent idSuffix={this.state.idSuffix}
+                    text={this.state.messages[i]}
+                    key={i}>
+                </NoticeTextSelectionComponent>
+            )
+        }
+
+        return elements;
+    }
+
+    cancel() {
+        this.noticeRef.current.close();
+
+        this.contentContainer().resetSponsorSubmissionNotice();
+    }
+
+    submit() {
+        this.props.callback();
+
+        this.cancel();
+    }
+
+}
+
+export default SkipNoticeComponent;