Add sort segments button

manifest/manifest.json

@@ -51,6 +51,7 @@
         "icons/heart.svg",
         "icons/visible.svg",
         "icons/not_visible.svg",
+        "icons/sort.svg",
         "icons/PlayerInfoIconSponsorBlocker.svg",
         "icons/PlayerDeleteIconSponsorBlocker.svg",
         "popup.html",

public/content.css

@@ -291,6 +291,11 @@ div:hover > .sponsorBlockChapterBar {
 	transition: background-color 0.4s;
 }
 
+.sponsorSkipNoticeFirstRow .sponsorSkipNoticeButton.sponsorSkipSmallButton {
+	height: 1.3em;
+	padding: 0;
+}
+
 .sponsorTimesVoteButtonsContainer {
 	float: left;
 	vertical-align:middle;

public/icons/sort.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/></svg>

src/components/SubmissionNoticeComponent.tsx

@@ -68,12 +68,19 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
     }
 
     render(): React.ReactElement {
+        const sortButton = 
+            <img id={"sponsorSkipSortButton" + this.state.idSuffix} 
+                className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipSmallButton"
+                onClick={() => this.sortSegments()}
+                src={chrome.extension.getURL("icons/sort.svg")}>
+            </img>;
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 idSuffix={this.state.idSuffix}
                 ref={this.noticeRef}
                 closeListener={this.cancel.bind(this)}
-                zIndex={5000}>
+                zIndex={5000}
+                firstColumn={sortButton}>
 
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}
@@ -190,6 +197,16 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
 
         this.cancel();
     }
+
+    sortSegments(): void {
+        let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
+        sponsorTimesSubmitting = sponsorTimesSubmitting.sort((a, b) => a.segment[0] - b.segment[0]);
+
+        Config.config.unsubmittedSegments[this.props.contentContainer().sponsorVideoID] = sponsorTimesSubmitting;
+        Config.forceSyncUpdate("unsubmittedSegments");
+
+        this.forceUpdate();
+    }
 }
 
 export default SubmissionNoticeComponent;