Added delete function to new dialog

public/content.css

@@ -314,3 +314,20 @@
 	position:relative;
 	top:1px;
 }
+
+/* Submission Notice */
+
+.sponsorTimeDisplay {
+	font-size: 15px;
+}
+
+.sponsorTimeEditButton {
+	text-decoration: underline;
+
+	margin-left: 20px;
+	margin-right: 20px;
+
+	font-size: 13px;
+	
+	cursor: pointer;
+}

src/background.ts

@@ -187,7 +187,7 @@ async function submitTimes(videoID, callback) {
     let userID = Config.config.userID;
 		
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-        let durationResult = <Types.videoDurationResponse> await new Promise((resolve, reject) => {
+        let durationResult = <Types.VideoDurationResponse> await new Promise((resolve, reject) => {
             chrome.tabs.query({
                 active: true,
                 currentWindow: true

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;

src/content.ts

@@ -1,8 +1,10 @@
 import Config from "./config";
 
+import { ContentContainer } from "./types";
 import Utils from "./utils";
 var utils = new Utils();
 
+
 import runThePopup from "./popup";
 
 import PreviewBar from "./js-components/previewBar";
@@ -91,20 +93,22 @@ var popupInitialised = false;
 var submissionNotice: SubmissionNotice = null;
 
 // Contains all of the functions and variables needed by the skip notice
-var skipNoticeContentContainer = () => ({
+var skipNoticeContentContainer: ContentContainer = () => ({
     vote,
     dontShowNoticeAgain,
     unskipSponsorTime,
     sponsorTimes,
     sponsorTimesSubmitting,
+    hiddenSponsorTimes,
     UUIDs,
     v: video,
+    sponsorVideoID,
     reskipSponsorTime,
-    hiddenSponsorTimes,
     updatePreviewBar,
     onMobileYouTube,
     sponsorSubmissionNotice: submissionNotice,
-    resetSponsorSubmissionNotice
+    resetSponsorSubmissionNotice,
+    changeStartSponsorButton
 });
 
 //get messages from the background script and the popup
@@ -1136,8 +1140,8 @@ function clearSponsorTimes() {
 }
 
 //if skipNotice is null, it will not affect the UI
-function vote(type, UUID, skipNotice: SkipNoticeComponent) {
-    if (skipNotice != null) {
+function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
+    if (skipNotice !== null && skipNotice !== undefined) {
         //add loading info
         skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
         skipNotice.setNoticeInfoMessage.bind(skipNotice)();

src/types.ts

@@ -1,7 +1,32 @@
-interface videoDurationResponse {
+import SubmissionNotice from "./render/SubmissionNotice";
+import SkipNoticeComponent from "./components/SkipNoticeComponent";
+
+interface ContentContainer {
+    (): {
+        vote: (type: any, UUID: any, skipNotice?: SkipNoticeComponent) => void,
+        dontShowNoticeAgain: () => void,
+        unskipSponsorTime: (UUID: any) => void,
+        sponsorTimes: number[][],
+        sponsorTimesSubmitting: number[][],
+        hiddenSponsorTimes: any[],
+        UUIDs: any[],
+        v: HTMLVideoElement,
+        sponsorVideoID,
+        reskipSponsorTime: (UUID: any) => void,
+        updatePreviewBar: () => void,
+        onMobileYouTube: boolean,
+        sponsorSubmissionNotice: SubmissionNotice,
+        resetSponsorSubmissionNotice: () => void,
+        changeStartSponsorButton: (showStartSponsor: any, uploadButtonVisible: any) => Promise<boolean>
+    }
+}
+
+interface VideoDurationResponse {
     duration: number;
 }
 
+
 export {
-    videoDurationResponse
+    VideoDurationResponse,
+    ContentContainer
 };