Add export to unsubmitted segments

src/components/NoticeComponent.tsx

@@ -19,7 +19,7 @@ export interface NoticeProps {
 
     fadeIn?: boolean,
     startFaded?: boolean,
-    firstColumn?: React.ReactElement,
+    firstColumn?: React.ReactElement[] | React.ReactElement,
     firstRow?: React.ReactElement,
     bottomRow?: React.ReactElement[],
 

src/components/SubmissionNoticeComponent.tsx

@@ -8,6 +8,7 @@ import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import SponsorTimeEditComponent from "./SponsorTimeEditComponent";
 import { getGuidelineInfo } from "../utils/constants";
+import { exportTimes } from "../utils/exporter";
 
 export interface SubmissionNoticeProps { 
     // Contains functions and variables from the content script needed by the skip notice
@@ -78,15 +79,24 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                 className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipSmallButton"
                 onClick={() => this.sortSegments()}
                 title={chrome.i18n.getMessage("sortSegments")}
+                key="sortButton"
                 src={chrome.extension.getURL("icons/sort.svg")}>
             </img>;
+        const exportButton = 
+            <img id={"sponsorSkipExportButton" + this.state.idSuffix} 
+                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipSmallButton"
+                onClick={() => this.exportSegments()}
+                title={chrome.i18n.getMessage("exportSegments")}
+                key="exportButton"
+                src={chrome.extension.getURL("icons/export.svg")}>
+            </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 idSuffix={this.state.idSuffix}
                 ref={this.noticeRef}
                 closeListener={this.cancel.bind(this)}
                 zIndex={5000}
-                firstColumn={sortButton}>
+                firstColumn={[sortButton, exportButton]}>
 
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}
@@ -216,6 +226,30 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
         this.forceUpdate();
     }
 
+    exportSegments() {
+        const sponsorTimesSubmitting = this.props.contentContainer()
+            .sponsorTimesSubmitting.sort((a, b) => a.segment[0] - b.segment[0]);
+        window.navigator.clipboard.writeText(exportTimes(sponsorTimesSubmitting));
+
+        new GenericNotice(null, "exportCopied", {
+            title: chrome.i18n.getMessage(`CopiedExclamation`),
+            timed: true,
+            maxCountdownTime: () => 0.6,
+            referenceNode: document.querySelector(".noticeLeftIcon"),
+            dontPauseCountdown: true,
+            style: {
+                top: 0,
+                bottom: 0,
+                minWidth: 0,
+                right: "30px",
+                margin: "auto"
+            },
+            hideLogo: true,
+            hideRightInfo: true,
+            extraClass: "exportCopiedNotice"
+        });
+    }
+
     categoryChangeListener(index: number, category: Category): void {
         const dialogWidth = this.noticeRef?.current?.getElement()?.current?.offsetWidth;
         if (category !== "chooseACategory" && Config.config.showCategoryGuidelines

src/render/GenericNotice.tsx

@@ -67,25 +67,31 @@ export default class GenericNotice {
                 hideLogo={options.hideLogo}
                 hideRightInfo={options.hideRightInfo}
                 closeListener={() => this.close()} >
-                    
-                    <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
-                        className="sponsorTimeMessagesRow"
-                        style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
-                        <td style={{width: "100%"}}>
-                            {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
-                        </td>
-                    </tr>
+                    {options.textBoxes?.length > 0 ?
+                        <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
+                            className="sponsorTimeMessagesRow"
+                            style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
+                            <td style={{width: "100%"}}>
+                                {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
+                            </td>
+                        </tr>
+                    : null}
 
-                    <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
-                        className="sponsorBlockSpacer">
-                    </tr>
+                    {!options.hideLogo ?
+                        <>
+                            <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                                className="sponsorBlockSpacer">
+                            </tr>
+
+                            <tr className="sponsorSkipNoticeRightSection"
+                                style={{position: "relative"}}>
+                                <td>
+                                    {this.getButtons(options.buttons)}
+                                </td>
+                            </tr>
+                        </>
+                    : null}
 
-                    <tr className="sponsorSkipNoticeRightSection"
-                        style={{position: "relative"}}>
-                        <td>
-                            {this.getButtons(options.buttons)}
-                        </td>
-                    </tr>
             </NoticeComponent>,
             this.noticeElement
         );