Add export to unsubmitted segments

public/content.css

@@ -235,6 +235,10 @@ div:hover > .sponsorBlockChapterBar {
 	min-width: 100%;
 }
 
+.exportCopiedNotice .sponsorSkipNoticeTableContainer {
+	background-color: transparent; 
+}
+
 .sponsorSkipNotice {
 	transition: all 0.1s ease-out;
 }
@@ -256,6 +260,10 @@ div:hover > .sponsorBlockChapterBar {
 	animation: fadeIn 0.5s ease-out;
 }
 
+.exportCopiedNotice .sponsorSkipNoticeFadeIn {
+	animation: none;
+}
+
 .sponsorSkipNoticeFaded {
 	opacity: 0.5;
 }

public/icons/export.svg

@@ -8,7 +8,7 @@
    style="enable-background:new 0 0 67.671 67.671;"
    xml:space="preserve"
    sodipodi:docname="export.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -23,17 +23,20 @@
    inkscape:pagecheckerboard="0"
    showgrid="false"
    inkscape:zoom="9.309749"
-   inkscape:cx="33.835499"
+   inkscape:cx="33.889206"
-   inkscape:cy="16.649214"
+   inkscape:cy="33.835499"
-   inkscape:window-width="1366"
+   inkscape:window-width="1920"
-   inkscape:window-height="731"
+   inkscape:window-height="983"
    inkscape:window-x="0"
-   inkscape:window-y="0"
+   inkscape:window-y="768"
    inkscape:window-maximized="1"
-   inkscape:current-layer="Capa_1" />
+   inkscape:current-layer="Capa_1"
+   inkscape:showpageshadow="2"
+   inkscape:deskcolor="#d1d1d1" />
 <g
    id="g6"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,6)">
 	<path
    d="M 52.946,23.348 H 42.834 v 6 h 10.112 c 3.007,0 5.34,1.536 5.34,2.858 v 26.606 c 0,1.322 -2.333,2.858 -5.34,2.858 H 14.724 c -3.007,0 -5.34,-1.536 -5.34,-2.858 V 32.207 c 0,-1.322 2.333,-2.858 5.34,-2.858 h 10.11 v -6 h -10.11 c -6.359,0 -11.34,3.891 -11.34,8.858 v 26.606 c 0,4.968 4.981,8.858 11.34,8.858 h 38.223 c 6.358,0 11.34,-3.891 11.34,-8.858 V 32.207 C 64.286,27.239 59.305,23.348 52.946,23.348 Z"
    id="path2"
@@ -45,62 +48,77 @@
 </g>
 <g
    id="g8"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g10"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g12"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g14"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g16"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g18"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g20"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g22"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g24"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g26"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g28"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g30"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g32"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g34"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 <g
    id="g36"
-   style="fill:#ffffff">
+   style="fill:#ffffff"
+   transform="matrix(0.82363056,0,0,0.82363056,5.9675483,5.9675483)">
 </g>
 </svg>

public/icons/import.svg

@@ -8,7 +8,7 @@
    style="enable-background:new 0 0 67.671 67.671;"
    xml:space="preserve"
    sodipodi:docname="import.svg"
-   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -23,25 +23,27 @@
    inkscape:pagecheckerboard="0"
    showgrid="false"
    inkscape:zoom="9.309749"
-   inkscape:cx="33.835499"
+   inkscape:cx="33.889206"
    inkscape:cy="33.835499"
    inkscape:window-width="1920"
    inkscape:window-height="983"
-   inkscape:window-x="482"
+   inkscape:window-x="0"
    inkscape:window-y="768"
    inkscape:window-maximized="1"
-   inkscape:current-layer="g6" />
+   inkscape:current-layer="g6"
+   inkscape:showpageshadow="2"
+   inkscape:deskcolor="#d1d1d1" />
 <g
    id="g6">
 	<path
-   d="M52.946,23.348H42.834v6h10.112c3.007,0,5.34,1.536,5.34,2.858v26.606c0,1.322-2.333,2.858-5.34,2.858H14.724   c-3.007,0-5.34-1.536-5.34-2.858V32.207c0-1.322,2.333-2.858,5.34-2.858h10.11v-6h-10.11c-6.359,0-11.34,3.891-11.34,8.858v26.606   c0,4.968,4.981,8.858,11.34,8.858h38.223c6.358,0,11.34-3.891,11.34-8.858V32.207C64.286,27.239,59.305,23.348,52.946,23.348z"
+   d="M 49.575492,25.197675 H 41.24694 v 4.941783 h 8.328552 c 2.476657,0 4.398187,1.265096 4.398187,2.353936 v 21.913515 c 0,1.088839 -1.92153,2.353936 -4.398187,2.353936 H 18.094685 c -2.476657,0 -4.398188,-1.265097 -4.398188,-2.353936 V 32.494218 c 0,-1.08884 1.921531,-2.353936 4.398188,-2.353936 h 8.326905 v -4.941784 h -8.326905 c -5.237467,0 -9.3399709,3.204747 -9.3399709,7.29572 v 21.913514 c 0,4.091797 4.1025039,7.29572 9.3399709,7.29572 h 31.48163 c 5.236643,0 9.339971,-3.204747 9.339971,-7.29572 V 32.494218 c -8.24e-4,-4.091797 -4.103328,-7.296543 -9.340794,-7.296543 z"
    id="path2"
-   style="fill:#ffffff" />
+   style="fill:#ffffff;stroke-width:0.823631" />
 	<path
-   d="m 42.913,34.887 c -0.768,0 -1.370265,0.528017 -2.121,0.879 l -3.756,3.756 v -19.028 -6 V 3 c 0,-1.657 -1.343,-3 -3,-3 -1.657,0 -3,1.343 -3,3 v 11.494 12 13.231 l -3.959,-3.959 c -0.586,-0.586 -1.354,-0.879 -2.121,-0.879 -0.767,0 -1.535,0.293 -2.121,0.879 -1.172,1.171 -1.172,3.071 0,4.242 l 8.957,8.957 c 0.586,0.586 1.353,0.877 2.12,0.877 h 0.023 0.023 c 0.767,0 1.534,-0.291 2.12,-0.877 l 8.957,-8.957 c 1.172,-1.171 1.172,-3.071 0,-4.242 -0.587,-0.586 -1.354,-0.879 -2.122,-0.879 z"
+   d="m 41.312006,34.701548 c -0.632548,0 -1.128592,0.43489 -1.74692,0.723971 L 36.47153,38.519075 V 22.847033 17.90525 8.4384399 c 0,-1.3647558 -1.106136,-2.4708916 -2.470892,-2.4708916 -1.364756,0 -2.470892,1.1061358 -2.470892,2.4708916 v 9.4668101 9.883566 10.897456 l -3.260753,-3.260753 c -0.482648,-0.482648 -1.115196,-0.723971 -1.746921,-0.723971 -0.631724,0 -1.264272,0.241323 -1.74692,0.723971 -0.965295,0.964471 -0.965295,2.529369 0,3.493841 l 7.377259,7.377259 c 0.482647,0.482647 1.114372,0.722324 1.746097,0.722324 h 0.01894 0.01894 c 0.631724,0 1.263449,-0.239677 1.746097,-0.722324 L 43.05975,38.91936 c 0.965295,-0.964472 0.965295,-2.52937 0,-3.493841 -0.483471,-0.482648 -1.115195,-0.723971 -1.747744,-0.723971 z"
    id="path4"
    sodipodi:nodetypes="sscccssscccssccsscssccs"
-   style="fill:#ffffff" />
+   style="fill:#ffffff;stroke-width:0.823631" />
 </g>
 <g
    id="g8">

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()} >
-                    
+                    {options.textBoxes?.length > 0 ?
-                    <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
+                        <tr id={"sponsorSkipNoticeMiddleRow" + this.idSuffix}
-                        className="sponsorTimeMessagesRow"
+                            className="sponsorTimeMessagesRow"
-                        style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
+                            style={{maxHeight: this.contentContainer ? (this.contentContainer().v.offsetHeight - 200) + "px" : null}}>
-                        <td style={{width: "100%"}}>
+                            <td style={{width: "100%"}}>
-                            {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
+                                {this.getMessageBoxes(this.idSuffix, options.textBoxes)}
-                        </td>
+                            </td>
-                    </tr>
+                        </tr>
+                    : null}
 
-                    <tr id={"sponsorSkipNoticeSpacer" + this.idSuffix}
+                    {!options.hideLogo ?
-                        className="sponsorBlockSpacer">
+                        <>
-                    </tr>
+                            <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
         );