Added delete function to new dialog

src/components/SkipNoticeComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Config from "../config"
+import { ContentContainer } from "../types";
 
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
@@ -8,7 +9,7 @@ export interface SkipNoticeProps {
     UUID: string;
     manualSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer;
 }
 
 export interface SkipNoticeState {
@@ -28,7 +29,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     UUID: string;
     manualSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer;
 
     amountOfPreviousNotices: number;
     

src/components/SponsorTimeEditComponent.tsx

@@ -1,11 +1,20 @@
 import * as React from "react";
 
+import Config from "../config"
+
+import Utils from "../utils";
+import { ContentContainer } from "../types";
+import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
+var utils = new Utils();
+
 export interface SponsorTimeEditProps {
     index: number,
 
     idSuffix: string,
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer,
+
+    submissionNotice: SubmissionNoticeComponent;
 }
 
 export interface SponsorTimeEditState {
@@ -19,28 +28,69 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     render() {
+        let style: React.CSSProperties = {
+            textAlign: "center"
+        };
+
+        if (this.props.index != 0) {
+            style.marginTop = "15px";
+        }
+
         return (
-            <>
+            <div style={style}>
                 <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]}
+                    className="sponsorTimeDisplay">
+                        {utils.getFormattedTime(this.props.contentContainer().sponsorTimesSubmitting[this.props.index][0])
+                            + " to " + utils.getFormattedTime(this.props.contentContainer().sponsorTimesSubmitting[this.props.index][1])}
                 </div>
 
-                <span id={"sponsorTimeDeleteButton" + this.props.index + this.props.idSuffix}>
+                <span id={"sponsorTimeDeleteButton" + this.props.index + this.props.idSuffix}
+                    className="sponsorTimeEditButton"
+                    onClick={this.deleteTime.bind(this)}>
                     {chrome.i18n.getMessage("delete")}
                 </span>
 
-                <span id={"sponsorTimePreviewButton" + this.props.index + this.props.idSuffix}>
+                <span id={"sponsorTimePreviewButton" + this.props.index + this.props.idSuffix}
+                    className="sponsorTimeEditButton">
                     {chrome.i18n.getMessage("preview")}
                 </span>
 
-                <span id={"sponsorTimeEditButton" + this.props.index + this.props.idSuffix}>
+                <span id={"sponsorTimeEditButton" + this.props.index + this.props.idSuffix}
+                    className="sponsorTimeEditButton">
                     {chrome.i18n.getMessage("edit")}
                 </span>
-            </>
+            </div>
         );
     }
+
+    deleteTime(): void {
+        let sponsorTimes = this.props.contentContainer().sponsorTimesSubmitting;
+        let index = this.props.index;
+
+        //if it is not a complete sponsor time
+        if (sponsorTimes[index].length < 2) {
+            //update video player
+            this.props.contentContainer().changeStartSponsorButton(true, false);
+        }
+  
+        sponsorTimes.splice(index, 1);
+  
+        //save this
+        Config.config.sponsorTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimes);
+
+        this.props.contentContainer().updatePreviewBar();
+        
+        //if they are all removed
+        if (sponsorTimes.length == 0) {
+            this.props.submissionNotice.cancel();
+            
+            //update video player
+            this.props.contentContainer().changeStartSponsorButton(true, false);
+        } else {
+            //update display
+            this.props.submissionNotice.forceUpdate();
+        }
+    }
 }
 
 export default SponsorTimeEditComponent;

src/components/SubmissionNoticeComponent.tsx

@@ -1,32 +1,33 @@
 import * as React from "react";
 import Config from "../config"
+import { ContentContainer } from "../types";
 
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
 
-export interface SkipNoticeProps { 
+export interface SubmissionNoticeProps { 
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer;
 
     callback: () => any;
 }
 
-export interface SkipNoticeState {
+export interface SubmissionNoticeeState {
     noticeTitle: string,
     messages: string[],
     idSuffix: string;
 }
 
-class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
+class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, SubmissionNoticeeState> {
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer;
 
     callback: () => any;
 
     noticeRef: React.MutableRefObject<NoticeComponent>;
 
-    constructor(props: SkipNoticeProps) {
+    constructor(props: SubmissionNoticeProps) {
         super(props);
         this.noticeRef = React.createRef();
 
@@ -101,7 +102,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 <SponsorTimeEditComponent key={i}
                     idSuffix={this.state.idSuffix}
                     index={i}
-                    contentContainer={this.props.contentContainer}>
+                    contentContainer={this.props.contentContainer}
+                    submissionNotice={this}>
                 </SponsorTimeEditComponent>
             )
         }
@@ -118,7 +120,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     text={this.state.messages[i]}
                     key={i}>
                 </NoticeTextSelectionComponent>
-            )
+            );
         }
 
         return elements;
@@ -135,7 +137,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
 
         this.cancel();
     }
-
 }
 
-export default SkipNoticeComponent;
+export default SubmissionNoticeComponent;