From 930bc113fe8276cdb7d24432e9ee4551b20d95ca Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Mon, 21 Feb 2022 11:17:58 -0500
Subject: [PATCH] Add sort segments button

---
 manifest/manifest.json                       |  1 +
 public/content.css                           |  5 +++++
 public/icons/sort.svg                        |  1 +
 src/components/SubmissionNoticeComponent.tsx | 19 ++++++++++++++++++-
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/sort.svg

diff --git a/manifest/manifest.json b/manifest/manifest.json
index 740e292c..4eafb170 100644
--- a/manifest/manifest.json
+++ b/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",
diff --git a/public/content.css b/public/content.css
index ce4e2f8f..64e0c56e 100644
--- a/public/content.css
+++ b/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;
diff --git a/public/icons/sort.svg b/public/icons/sort.svg
new file mode 100644
index 00000000..29c6d16f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx
index 82aa0cca..08b60dd5 100644
--- a/src/components/SubmissionNoticeComponent.tsx
+++ b/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;