From 9915d46ad42d41be6f21f1ebadd51113a2c37cac Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Fri, 19 Aug 2022 21:05:45 +0200
Subject: [PATCH 1/8] Add a section in options for unsubmitted segments

---
 public/_locales/en/messages.json              | 32 +++++++++
 public/options/options.html                   |  6 +-
 .../UnsubmittedVideoListComponent.tsx         | 71 +++++++++++++++++++
 src/components/UnsubmittedVideoListItem.tsx   | 64 +++++++++++++++++
 src/components/UnsubmittedVideosComponent.tsx | 51 +++++++++++++
 src/options.ts                                | 64 +++++++++--------
 src/render/UnsubmittedVideos.tsx              | 15 ++++
 7 files changed, 274 insertions(+), 29 deletions(-)
 create mode 100644 src/components/UnsubmittedVideoListComponent.tsx
 create mode 100644 src/components/UnsubmittedVideoListItem.tsx
 create mode 100644 src/components/UnsubmittedVideosComponent.tsx
 create mode 100644 src/render/UnsubmittedVideos.tsx

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index f5e55cd4..baa9fb40 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -1153,5 +1153,37 @@
     },
     "chaptersPage1": {
         "message": "SponsorBlock crowd-sourced chapters feature is only available to people who purchase a license, or for people who are granted access for free due their past contributions"
+    },
+    "unsubmittedSegmentCounts": {
+        "message": "You currently have {0} unsubmitted segments on {1} videos",
+        "description": "Example: You currently have 12 unsubmitted segments on 5 videos"
+    },
+    "clearUnsubmittedSegments": {
+        "message": "Clear all segments",
+        "description": "Label for a button in settings"
+    },
+    "clearUnsubmittedSegmentsConfirm": {
+        "message": "Are you sure you want to clear all your unsubmitted segments?",
+        "description": "Confirmation message for the Clear unsubmitted segments button"
+    },
+    "showUnsubmittedSegments": {
+        "message": "Show segments",
+        "description": "Show/hide button for the unsubmitted segments list"
+    },
+    "hideUnsubmittedSegments": {
+        "message": "Hide segments",
+        "description": "Show/hide button for the unsubmitted segments list"
+    },
+    "videoID": {
+        "message": "Video ID",
+        "description": "Header of the unsubmitted segments list"
+    },
+    "segmentCount": {
+        "message": "Segment Count",
+        "description": "Header of the unsubmitted segments list"
+    },
+    "actions": {
+        "message": "Actions",
+        "description": "Header of the unsubmitted segments list"
     }
 }
diff --git a/public/options/options.html b/public/options/options.html
index 765134ec..dbf9473f 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -490,7 +490,11 @@
 	
 					<div class="small-description">__MSG_copyDebugInformationOptions__</div>
 				</div>
-	
+
+				<div data-type="react-UnsubmittedVideosComponent">
+
+				</div>
+
 				<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
diff --git a/src/components/UnsubmittedVideoListComponent.tsx b/src/components/UnsubmittedVideoListComponent.tsx
new file mode 100644
index 00000000..d726b5f2
--- /dev/null
+++ b/src/components/UnsubmittedVideoListComponent.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+
+import Config from "../config";
+import UnsubmittedVideoListItem from "./UnsubmittedVideoListItem";
+
+export interface UnsubmittedVideoListProps {
+
+}
+
+export interface UnsubmittedVideoListState {
+
+}
+
+class UnsubmittedVideoListComponent extends React.Component<UnsubmittedVideoListProps, UnsubmittedVideoListState> {
+
+    constructor(props: UnsubmittedVideoListProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+
+        };
+    }
+
+    render(): React.ReactElement {
+        // Render nothing if there are no unsubmitted segments
+        if (Object.keys(Config.config.unsubmittedSegments).length == 0)
+            return <></>;
+
+        return (
+            <table id="unsubmittedVideosList"
+                className="categoryChooserTable">
+                <tbody>
+                    {/* Headers */}
+                    <tr id="UnsubmittedVideosListHeader"
+                            className="categoryTableElement categoryTableHeader">
+                        <th id="UnsubmittedVideoID">
+                            {chrome.i18n.getMessage("videoID")}
+                        </th>
+
+                        <th id="UnsubmittedSegmentCount">
+                            {chrome.i18n.getMessage("segmentCount")}
+                        </th>
+
+                        <th id="UnsubmittedVideoActions">
+                            {chrome.i18n.getMessage("actions")}
+                        </th>
+
+                    </tr>
+
+                    {this.getUnsubmittedVideos()}
+                </tbody>
+            </table>
+        );
+    }
+
+    getUnsubmittedVideos(): JSX.Element[] {
+        const elements: JSX.Element[] = [];
+
+        for (const videoID of Object.keys(Config.config.unsubmittedSegments)) {
+            elements.push(
+                <UnsubmittedVideoListItem videoID={videoID} key={videoID}>
+                </UnsubmittedVideoListItem>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default UnsubmittedVideoListComponent;
diff --git a/src/components/UnsubmittedVideoListItem.tsx b/src/components/UnsubmittedVideoListItem.tsx
new file mode 100644
index 00000000..b0933f9a
--- /dev/null
+++ b/src/components/UnsubmittedVideoListItem.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import Config from "../config"
+
+export interface UnsubmittedVideosListItemProps {
+    videoID: string;
+}
+
+export interface UnsubmittedVideosListItemState {
+}
+
+class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItemProps, UnsubmittedVideosListItemState> {
+
+    constructor(props: UnsubmittedVideosListItemProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+
+        };
+    }
+
+    render(): React.ReactElement {
+        const segmentCount = Config.config.unsubmittedSegments[this.props.videoID]?.length ?? 0;
+
+        return (
+            <>
+                <tr id={this.props.videoID + "UnsubmittedSegmentsRow"}
+                    className="categoryTableElement">
+                    <td id={this.props.videoID + "UnsubmittedVideoID"}
+                        className="categoryTableLabel">
+                        <a href={`https://youtu.be/${this.props.videoID}`}
+                           target="_blank" rel="noreferrer">
+                            {this.props.videoID}
+                        </a>
+                    </td>
+
+                    <td id={this.props.videoID + "UnsubmittedSegmentCount"}>
+                        {segmentCount}
+                    </td>
+
+                    <td id={this.props.videoID + "UnsubmittedVideoActions"}>
+                        <div id={this.props.videoID + "ClearSegmentsAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.clearSegments.bind(this)}>
+                            {chrome.i18n.getMessage("clearTimes")}
+                        </div>
+                    </td>
+
+                </tr>
+
+            </>
+        );
+    }
+
+    clearSegments(): void {
+        if (confirm(chrome.i18n.getMessage("clearThis")))
+            delete Config.config.unsubmittedSegments[this.props.videoID]
+
+        Config.forceSyncUpdate("unsubmittedSegments")
+    }
+}
+
+export default UnsubmittedVideoListItem;
diff --git a/src/components/UnsubmittedVideosComponent.tsx b/src/components/UnsubmittedVideosComponent.tsx
new file mode 100644
index 00000000..18ce43d7
--- /dev/null
+++ b/src/components/UnsubmittedVideosComponent.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import Config from "../config";
+import UnsubmittedVideoListComponent from "./UnsubmittedVideoListComponent";
+
+export interface UnsubmittedVideosProps {
+
+}
+
+export interface UnsubmittedVideosState {
+    tableVisible: boolean,
+}
+
+class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps, UnsubmittedVideosState> {
+
+    constructor(props: UnsubmittedVideosProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            tableVisible: false,
+        };
+    }
+
+    render(): React.ReactElement {
+        const videoCount = Object.keys(Config.config.unsubmittedSegments).length;
+        const segmentCount = Object.values(Config.config.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc+vid.length, 0);
+
+        return <>
+            <div>
+                {chrome.i18n.getMessage("unsubmittedSegmentCounts").replace("{0}", segmentCount.toString()).replace("{1}", videoCount.toString())}
+            </div>
+
+            {videoCount > 0 && <div className="option-button inline" onClick={() => this.setState({tableVisible: !this.state.tableVisible})}>
+                {chrome.i18n.getMessage(this.state.tableVisible ? "hideUnsubmittedSegments" : "showUnsubmittedSegments")}
+            </div>}
+
+            <div className="option-button inline" onClick={this.clearAllSegments}>
+                {chrome.i18n.getMessage("clearUnsubmittedSegments")}
+            </div>
+
+            {this.state.tableVisible && <UnsubmittedVideoListComponent/>}
+        </>;
+    }
+
+    clearAllSegments(): void {
+        if (confirm(chrome.i18n.getMessage("clearUnsubmittedSegmentsConfirm")))
+            Config.config.unsubmittedSegments = {};
+    }
+}
+
+export default UnsubmittedVideosComponent;
diff --git a/src/options.ts b/src/options.ts
index 1a522c9b..8d66834c 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -10,6 +10,7 @@ window.SB = Config;
 
 import Utils from "./utils";
 import CategoryChooser from "./render/CategoryChooser";
+import UnsubmittedVideos from "./render/UnsubmittedVideos";
 import KeybindComponent from "./components/options/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
 import { localizeHtmlPage } from "./utils/pageUtils";
@@ -103,7 +104,7 @@ async function init() {
                 // Add click listener
                 checkbox.addEventListener("click", async () => {
                     // Confirm if required
-                    if (confirmMessage && ((confirmOnTrue && checkbox.checked) || (!confirmOnTrue && !checkbox.checked)) 
+                    if (confirmMessage && ((confirmOnTrue && checkbox.checked) || (!confirmOnTrue && !checkbox.checked))
                             && !confirm(chrome.i18n.getMessage(confirmMessage))){
                         checkbox.checked = !checkbox.checked;
                         return;
@@ -120,7 +121,7 @@ async function init() {
                             if (!checkbox.checked) {
                                 // Enable the notice
                                 Config.config["dontShowNotice"] = false;
-                                
+
                                 const showNoticeSwitch = <HTMLInputElement> document.querySelector("[data-sync='dontShowNotice'] > div > label > input");
                                 showNoticeSwitch.checked = true;
                             }
@@ -162,7 +163,7 @@ async function init() {
             }
             case "text-change": {
                 const textChangeInput = <HTMLInputElement> optionsElements[i].querySelector(".option-text-box");
-                
+
                 const textChangeSetButton = <HTMLElement> optionsElements[i].querySelector(".text-change-set");
 
                 textChangeInput.value = Config.config[option];
@@ -292,6 +293,9 @@ async function init() {
             case "react-CategoryChooserComponent":
                 new CategoryChooser(optionsElements[i]);
                 break;
+            case "react-UnsubmittedVideosComponent":
+                new UnsubmittedVideos(optionsElements[i])
+                break;
         }
     }
 
@@ -338,8 +342,8 @@ function createStickyHeader() {
 
 /**
  * Handle special cases where an option shouldn't show
- * 
- * @param {String} element 
+ *
+ * @param {String} element
  */
 async function shouldHideOption(element: Element): Promise<boolean> {
     return (element.getAttribute("data-private-only") === "true" && !(await isIncognitoAllowed()))
@@ -348,8 +352,8 @@ async function shouldHideOption(element: Element): Promise<boolean> {
 
 /**
  * Called when the config is updated
- * 
- * @param {String} element 
+ *
+ * @param {String} element
  */
 function optionsConfigUpdateListener() {
     const optionsContainer = document.getElementById("options");
@@ -359,14 +363,18 @@ function optionsConfigUpdateListener() {
         switch (optionsElements[i].getAttribute("data-type")) {
             case "display":
                 updateDisplayElement(<HTMLElement> optionsElements[i])
+                break;
+            case "react-UnsubmittedVideosComponent":
+                new UnsubmittedVideos(optionsElements[i])
+                break;
         }
     }
 }
 
 /**
  * Will set display elements to the proper text
- * 
- * @param element 
+ *
+ * @param element
  */
 function updateDisplayElement(element: HTMLElement) {
     const displayOption = element.getAttribute("data-sync")
@@ -393,9 +401,9 @@ function updateDisplayElement(element: HTMLElement) {
 
 /**
  * Initializes the option to add Invidious instances
- * 
- * @param element 
- * @param option 
+ *
+ * @param element
+ * @param option
  */
 function invidiousInstanceAddInit(element: HTMLElement, option: string) {
     const textBox = <HTMLInputElement> element.querySelector(".option-text-box");
@@ -447,9 +455,9 @@ function invidiousInstanceAddInit(element: HTMLElement, option: string) {
 
 /**
  * Run when the invidious button is being initialized
- * 
- * @param checkbox 
- * @param option 
+ *
+ * @param checkbox
+ * @param option
  */
 function invidiousInit(checkbox: HTMLInputElement, option: string) {
     utils.containsInvidiousPermission().then((result) => {
@@ -463,9 +471,9 @@ function invidiousInit(checkbox: HTMLInputElement, option: string) {
 
 /**
  * Run whenever the invidious checkbox is clicked
- * 
- * @param checkbox 
- * @param option 
+ *
+ * @param checkbox
+ * @param option
  */
 async function invidiousOnClick(checkbox: HTMLInputElement, option: string): Promise<void> {
     const enabled = await utils.applyInvidiousPermissions(checkbox.checked, option);
@@ -474,8 +482,8 @@ async function invidiousOnClick(checkbox: HTMLInputElement, option: string): Pro
 
 /**
  * Will trigger the textbox to appear to be able to change an option's text.
- * 
- * @param element 
+ *
+ * @param element
  */
 function activatePrivateTextChange(element: HTMLElement) {
     const button = element.querySelector(".trigger-button");
@@ -492,7 +500,7 @@ function activatePrivateTextChange(element: HTMLElement) {
             element.querySelector(".option-hidden-section").classList.remove("hidden");
             return;
     }
-    
+
     let result = Config.config[option];
     // See if anything extra must be done
     switch (option) {
@@ -503,7 +511,7 @@ function activatePrivateTextChange(element: HTMLElement) {
     }
 
     textBox.value = result;
-    
+
     const setButton = element.querySelector(".text-change-set");
     setButton.addEventListener("click", async () => {
         setTextOption(option, element, textBox.value);
@@ -532,7 +540,7 @@ function activatePrivateTextChange(element: HTMLElement) {
 
 /**
  * Function to run when a textbox change is submitted
- * 
+ *
  * @param option data-sync value
  * @param element main container div
  * @param value new text
@@ -542,7 +550,7 @@ async function setTextOption(option: string, element: HTMLElement, value: string
     const confirmMessage = element.getAttribute("data-confirm-message");
 
     if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
-        
+
         // See if anything extra must be done
         switch (option) {
             case "*":
@@ -554,13 +562,13 @@ async function setTextOption(option: string, element: HTMLElement, value: string
 
                     if (newConfig.supportInvidious) {
                         const checkbox = <HTMLInputElement> document.querySelector("#support-invidious > div > label > input");
-                        
+
                         checkbox.checked = true;
                         await invidiousOnClick(checkbox, "supportInvidious");
                     }
 
                     window.location.reload();
-                    
+
                 } catch (e) {
                     alert(chrome.i18n.getMessage("incorrectlyFormattedOptions"));
                 }
@@ -603,7 +611,7 @@ function uploadConfig(e) {
 /**
  * Validates the value used for the database server address.
  * Returns null and alerts the user if there is an issue.
- * 
+ *
  * @param input Input server address
  */
 function validateServerAddress(input: string): string {
@@ -637,7 +645,7 @@ function copyDebugOutputToClipboard() {
 
     // Sanitise sensitive user config values
     delete output.config.userID;
-    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress) 
+    output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress)
         ? "Default server address" : "Custom server address";
     output.config.invidiousInstances = output.config.invidiousInstances.length;
     output.config.whitelistedChannels = output.config.whitelistedChannels.length;
diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx
new file mode 100644
index 00000000..0b90fd27
--- /dev/null
+++ b/src/render/UnsubmittedVideos.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import UnsubmittedVideosComponent from "../components/UnsubmittedVideosComponent";
+
+class UnsubmittedVideos {
+
+    constructor(element: Element) {
+        ReactDOM.render(
+            <UnsubmittedVideosComponent/>,
+            element
+        );
+    }
+}
+
+export default UnsubmittedVideos;

From bd292ff8869a048f7c2764c37b31108d281ff60c Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Sat, 20 Aug 2022 11:50:41 +0200
Subject: [PATCH 2/8] Split unsubmittedSegmentCounts string into many to
 account for singular/plural forms of nouns

hopefully with enough context for translators to properly translate...
---
 public/_locales/en/messages.json              | 22 ++++++++++++++++++-
 src/components/UnsubmittedVideosComponent.tsx |  7 +++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index baa9fb40..df50b436 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -1155,9 +1155,29 @@
         "message": "SponsorBlock crowd-sourced chapters feature is only available to people who purchase a license, or for people who are granted access for free due their past contributions"
     },
     "unsubmittedSegmentCounts": {
-        "message": "You currently have {0} unsubmitted segments on {1} videos",
+        "message": "You currently have {0} on {1}",
         "description": "Example: You currently have 12 unsubmitted segments on 5 videos"
     },
+    "unsubmittedSegmentCountsZero": {
+        "message": "You currently have no unsubmitted segments",
+        "description": "Replaces 'unsubmittedSegmentCounts' string when there are no unsubmitted segments"
+    },
+    "unsubmittedSegmentsSingular": {
+        "message": "unsubmitted segment",
+        "description": "Example: You currently have 1 *unsubmitted segment* on 1 video"
+    },
+    "unsubmittedSegmentsPlural": {
+        "message": "unsubmitted segments",
+        "description": "Example: You currently have 12 *unsubmitted segments* on 5 videos"
+    },
+    "videosSingular": {
+        "message": "video",
+        "description": "Example: You currently have 3 unsubmitted segments on 1 *video*"
+    },
+    "videosPlural": {
+        "message": "videos",
+        "description": "Example: You currently have 12 unsubmitted segments on 5 *videos*"
+    },
     "clearUnsubmittedSegments": {
         "message": "Clear all segments",
         "description": "Label for a button in settings"
diff --git a/src/components/UnsubmittedVideosComponent.tsx b/src/components/UnsubmittedVideosComponent.tsx
index 18ce43d7..04542adc 100644
--- a/src/components/UnsubmittedVideosComponent.tsx
+++ b/src/components/UnsubmittedVideosComponent.tsx
@@ -27,7 +27,12 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
 
         return <>
             <div>
-                {chrome.i18n.getMessage("unsubmittedSegmentCounts").replace("{0}", segmentCount.toString()).replace("{1}", videoCount.toString())}
+                {segmentCount == 0 ?
+                    chrome.i18n.getMessage("unsubmittedSegmentCountsZero") :
+                    chrome.i18n.getMessage("unsubmittedSegmentCounts")
+                        .replace("{0}", `${segmentCount} ${chrome.i18n.getMessage("unsubmittedSegments" + (segmentCount == 1 ? "Singular" : "Plural"))}`)
+                        .replace("{1}", `${videoCount} ${chrome.i18n.getMessage("videos" + (videoCount == 1 ? "Singular" : "Plural"))}`)
+                }
             </div>
 
             {videoCount > 0 && <div className="option-button inline" onClick={() => this.setState({tableVisible: !this.state.tableVisible})}>

From 26f214324799135c8178019c1083d3d91071c671 Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Sat, 20 Aug 2022 16:47:18 +0200
Subject: [PATCH 3/8] Don't force-sync unsubmitted segments when clear confirm
 prompt is cancelled

---
 src/components/UnsubmittedVideoListItem.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/UnsubmittedVideoListItem.tsx b/src/components/UnsubmittedVideoListItem.tsx
index b0933f9a..ab00fa83 100644
--- a/src/components/UnsubmittedVideoListItem.tsx
+++ b/src/components/UnsubmittedVideoListItem.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import Config from "../config"
+import Config from "../config";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
@@ -54,10 +54,10 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
     }
 
     clearSegments(): void {
-        if (confirm(chrome.i18n.getMessage("clearThis")))
+        if (confirm(chrome.i18n.getMessage("clearThis"))) {
             delete Config.config.unsubmittedSegments[this.props.videoID]
-
-        Config.forceSyncUpdate("unsubmittedSegments")
+            Config.forceSyncUpdate("unsubmittedSegments")
+        }
     }
 }
 

From 5f6307041a0b00424c13a56628ed21f65a1ba583 Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Wed, 24 Aug 2022 14:25:35 +0200
Subject: [PATCH 4/8] Add an Export Segments button to the unsubmitted segments
 list

---
 src/components/UnsubmittedVideoListItem.tsx   | 21 +++++++++++++++++--
 src/components/UnsubmittedVideosComponent.tsx |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/UnsubmittedVideoListItem.tsx b/src/components/UnsubmittedVideoListItem.tsx
index ab00fa83..fec08dc9 100644
--- a/src/components/UnsubmittedVideoListItem.tsx
+++ b/src/components/UnsubmittedVideoListItem.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import Config from "../config";
+import { exportTimes } from "../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
@@ -40,6 +41,12 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
                     </td>
 
                     <td id={this.props.videoID + "UnsubmittedVideoActions"}>
+                        <div id={this.props.videoID + "ExportSegmentsAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.exportSegments.bind(this)}>
+                            {chrome.i18n.getMessage("exportSegments")}
+                        </div>
+                        {" "}
                         <div id={this.props.videoID + "ClearSegmentsAction"}
                              className="option-button inline low-profile"
                              onClick={this.clearSegments.bind(this)}>
@@ -55,10 +62,20 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
 
     clearSegments(): void {
         if (confirm(chrome.i18n.getMessage("clearThis"))) {
-            delete Config.config.unsubmittedSegments[this.props.videoID]
-            Config.forceSyncUpdate("unsubmittedSegments")
+            delete Config.config.unsubmittedSegments[this.props.videoID];
+            Config.forceSyncUpdate("unsubmittedSegments");
         }
     }
+
+    exportSegments(): void {
+        navigator.clipboard.writeText(exportTimes(Config.config.unsubmittedSegments[this.props.videoID]))
+            .then(() => {
+                alert(chrome.i18n.getMessage("CopiedExclamation"));
+            })
+            .catch(() => {
+                alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
+            });
+    }
 }
 
 export default UnsubmittedVideoListItem;
diff --git a/src/components/UnsubmittedVideosComponent.tsx b/src/components/UnsubmittedVideosComponent.tsx
index 04542adc..ee1f70f2 100644
--- a/src/components/UnsubmittedVideosComponent.tsx
+++ b/src/components/UnsubmittedVideosComponent.tsx
@@ -38,7 +38,7 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
             {videoCount > 0 && <div className="option-button inline" onClick={() => this.setState({tableVisible: !this.state.tableVisible})}>
                 {chrome.i18n.getMessage(this.state.tableVisible ? "hideUnsubmittedSegments" : "showUnsubmittedSegments")}
             </div>}
-
+            {" "}
             <div className="option-button inline" onClick={this.clearAllSegments}>
                 {chrome.i18n.getMessage("clearUnsubmittedSegments")}
             </div>

From 59093cdf212d06cc2c56fea384923f5553be864c Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Thu, 1 Sep 2022 21:46:21 +0200
Subject: [PATCH 5/8] Move new react components to components/options/,
 following latest changes

---
 .../{ => options}/UnsubmittedVideoListComponent.tsx           | 2 +-
 src/components/{ => options}/UnsubmittedVideoListItem.tsx     | 4 ++--
 src/components/{ => options}/UnsubmittedVideosComponent.tsx   | 2 +-
 src/render/UnsubmittedVideos.tsx                              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename src/components/{ => options}/UnsubmittedVideoListComponent.tsx (98%)
 rename src/components/{ => options}/UnsubmittedVideoListItem.tsx (96%)
 rename src/components/{ => options}/UnsubmittedVideosComponent.tsx (98%)

diff --git a/src/components/UnsubmittedVideoListComponent.tsx b/src/components/options/UnsubmittedVideoListComponent.tsx
similarity index 98%
rename from src/components/UnsubmittedVideoListComponent.tsx
rename to src/components/options/UnsubmittedVideoListComponent.tsx
index d726b5f2..2f3aa75a 100644
--- a/src/components/UnsubmittedVideoListComponent.tsx
+++ b/src/components/options/UnsubmittedVideoListComponent.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import Config from "../config";
+import Config from "../../config";
 import UnsubmittedVideoListItem from "./UnsubmittedVideoListItem";
 
 export interface UnsubmittedVideoListProps {
diff --git a/src/components/UnsubmittedVideoListItem.tsx b/src/components/options/UnsubmittedVideoListItem.tsx
similarity index 96%
rename from src/components/UnsubmittedVideoListItem.tsx
rename to src/components/options/UnsubmittedVideoListItem.tsx
index fec08dc9..c203f533 100644
--- a/src/components/UnsubmittedVideoListItem.tsx
+++ b/src/components/options/UnsubmittedVideoListItem.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import Config from "../config";
-import { exportTimes } from "../utils/exporter";
+import Config from "../../config";
+import { exportTimes } from "../../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
diff --git a/src/components/UnsubmittedVideosComponent.tsx b/src/components/options/UnsubmittedVideosComponent.tsx
similarity index 98%
rename from src/components/UnsubmittedVideosComponent.tsx
rename to src/components/options/UnsubmittedVideosComponent.tsx
index ee1f70f2..d01c8294 100644
--- a/src/components/UnsubmittedVideosComponent.tsx
+++ b/src/components/options/UnsubmittedVideosComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import Config from "../config";
+import Config from "../../config";
 import UnsubmittedVideoListComponent from "./UnsubmittedVideoListComponent";
 
 export interface UnsubmittedVideosProps {
diff --git a/src/render/UnsubmittedVideos.tsx b/src/render/UnsubmittedVideos.tsx
index 0b90fd27..1ae119e3 100644
--- a/src/render/UnsubmittedVideos.tsx
+++ b/src/render/UnsubmittedVideos.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import UnsubmittedVideosComponent from "../components/UnsubmittedVideosComponent";
+import UnsubmittedVideosComponent from "../components/options/UnsubmittedVideosComponent";
 
 class UnsubmittedVideos {
 

From df2586e76dd668ebdd82b3c0486f18eb3074c1e2 Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Thu, 1 Sep 2022 23:10:03 +0200
Subject: [PATCH 6/8] Load segment description from hashparams

---
 src/content.ts | 76 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/content.ts b/src/content.ts
index 0842e521..cb2d3964 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -1,11 +1,26 @@
 import Config from "./config";
-import { SponsorTime, CategorySkipOption, VideoID, SponsorHideType, VideoInfo, StorageChangesObject, ChannelIDInfo, ChannelIDStatus, SponsorSourceType, SegmentUUID, Category, SkipToTimeParams, ToggleSkippable, ActionType, ScheduledTime, HashedValue } from "./types";
-
-import { ContentContainer, Keybind } from "./types";
+import {
+    ActionType,
+    Category,
+    CategorySkipOption,
+    ChannelIDInfo,
+    ChannelIDStatus,
+    ContentContainer,
+    HashedValue,
+    Keybind,
+    ScheduledTime,
+    SegmentUUID,
+    SkipToTimeParams,
+    SponsorHideType,
+    SponsorSourceType,
+    SponsorTime,
+    StorageChangesObject,
+    ToggleSkippable,
+    VideoID,
+    VideoInfo,
+} from "./types";
 import Utils from "./utils";
-const utils = new Utils();
-
-import PreviewBar, {PreviewBarSegment} from "./js-components/previewBar";
+import PreviewBar, { PreviewBarSegment } from "./js-components/previewBar";
 import SkipNotice from "./render/SkipNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
 import SubmissionNotice from "./render/SubmissionNotice";
@@ -22,6 +37,8 @@ import { importTimes } from "./utils/exporter";
 import { ChapterVote } from "./render/ChapterVote";
 import { openWarningDialog } from "./utils/warnings";
 
+const utils = new Utils();
+
 // Hack to get the CSS loaded on permission-based sites (Invidious)
 utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
 
@@ -247,7 +264,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             let addedSegments = false;
             for (const segment of importedSegments) {
                 if (!sponsorTimesSubmitting.concat(sponsorTimes ?? []).some(
-                        (s) => Math.abs(s.segment[0] - segment.segment[0]) < 1 
+                        (s) => Math.abs(s.segment[0] - segment.segment[0]) < 1
                             && Math.abs(s.segment[1] - segment.segment[1]) < 1)
                         && (segment.category !== "chapter" || utils.getCategorySelection("chapter"))) {
                     sponsorTimesSubmitting.push(segment);
@@ -561,7 +578,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
     const videoID = sponsorVideoID;
     const skipBuffer = 0.003;
 
-    if (videoMuted && !inMuteSegment(currentTime, skipInfo.index !== -1 
+    if (videoMuted && !inMuteSegment(currentTime, skipInfo.index !== -1
             && timeUntilSponsor < skipBuffer && shouldAutoSkip(currentSkip))) {
         video.muted = false;
         videoMuted = false;
@@ -628,8 +645,8 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
                         });
                     }
                 }
-    
-                if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip 
+
+                if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip
                         || currentSkip.actionType === ActionType.Mute) {
                     forcedSkipTime = skipTime[0] + 0.001;
                 } else {
@@ -672,7 +689,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
             }, 1);
         } else {
             logDebug(`Starting timeout to skip ${video.currentTime} to skip at ${skipTime[0]}`);
-            
+
             // Schedule for right before to be more precise than normal timeout
             currentSkipSchedule = setTimeout(skippingFunction, Math.max(0, delayTime - 150));
         }
@@ -692,8 +709,8 @@ function getVirtualTime(): number {
 }
 
 function inMuteSegment(currentTime: number, includeOverlap: boolean): boolean {
-    const checkFunction = (segment) => segment.actionType === ActionType.Mute 
-        && segment.segment[0] <= currentTime 
+    const checkFunction = (segment) => segment.actionType === ActionType.Mute
+        && segment.segment[0] <= currentTime
         && (segment.segment[1] > currentTime || (includeOverlap && segment.segment[1] + 0.02 > currentTime));
     return sponsorTimes?.some(checkFunction) || sponsorTimesSubmitting.some(checkFunction);
 }
@@ -773,7 +790,7 @@ function setupVideoListeners() {
             // If it is not the first event, then the only way to get to 0 is if there is a seek event
             // This check makes sure that changing the video resolution doesn't cause the extension to think it
             // gone back to the begining
-            if (video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA 
+            if (video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA
                     && video.currentTime === 0) return;
 
             updateVirtualTime();
@@ -804,7 +821,7 @@ function setupVideoListeners() {
         video.addEventListener('playing', () => {
             updateVirtualTime();
             lastPausedAtZero = false;
-            
+
             if (startedWaiting) {
                 startedWaiting = false;
                 logDebug(`[SB] Playing event after buffering: ${Math.abs(lastCheckVideoTime - video.currentTime) > 0.3
@@ -1062,7 +1079,7 @@ function retryFetch(errorCode: number): void {
     sponsorDataFound = false;
 
     if (errorCode !== 404 && retryCount > 1) {
-        // Too many errors (50x), give up 
+        // Too many errors (50x), give up
         return;
     }
 
@@ -1070,7 +1087,7 @@ function retryFetch(errorCode: number): void {
 
     const delay = errorCode === 404 ? (10000 + Math.random() * 30000) : (2000 + Math.random() * 10000);
     setTimeout(() => {
-        if (sponsorVideoID && sponsorTimes?.length === 0 
+        if (sponsorVideoID && sponsorTimes?.length === 0
                 || sponsorTimes.every((segment) => segment.source !== SponsorSourceType.Server)) {
             sponsorsLookup();
         }
@@ -1334,7 +1351,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
     const minSponsorTimeIndexes = GenericUtils.indexesOf(sponsorStartTimes, Math.min(...sponsorStartTimesAfterCurrentTime));
     // Find auto skipping segments if possible, sort by duration otherwise
     const minSponsorTimeIndex = minSponsorTimeIndexes.sort(
-        (a, b) => ((autoSkipSorter(submittedArray[a]) - autoSkipSorter(submittedArray[b])) 
+        (a, b) => ((autoSkipSorter(submittedArray[a]) - autoSkipSorter(submittedArray[b]))
         || (submittedArray[a].segment[1] - submittedArray[a].segment[0]) - (submittedArray[b].segment[1] - submittedArray[b].segment[0])))[0] ?? -1;
     // Store extra indexes for the non-auto skipping segments if others occur at the exact same start time
     const extraIndexes = minSponsorTimeIndexes.filter((i) => i !== minSponsorTimeIndex && autoSkipSorter(submittedArray[i]) !== 0);
@@ -1448,7 +1465,7 @@ function getStartTimes(sponsorTimes: SponsorTime[], includeIntersectingSegments:
     for (let i = 0; i < possibleTimes.length; i++) {
         if ((minimum === undefined
                 || ((includeNonIntersectingSegments && possibleTimes[i].scheduledTime >= minimum)
-                    || (includeIntersectingSegments && possibleTimes[i].scheduledTime < minimum && possibleTimes[i].segment[1] > minimum))) 
+                    || (includeIntersectingSegments && possibleTimes[i].scheduledTime < minimum && possibleTimes[i].segment[1] > minimum)))
                 && (!hideHiddenSponsors || possibleTimes[i].hidden === SponsorHideType.Visible)
                 && possibleTimes[i].segment.length === 2
                 && possibleTimes[i].actionType !== ActionType.Poi) {
@@ -1576,13 +1593,13 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
 
 function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, unskipTime: number, startReskip: boolean) {
     for (const skipNotice of skipNotices) {
-        if (skippingSegments.length === skipNotice.segments.length 
+        if (skippingSegments.length === skipNotice.segments.length
                 && skippingSegments.every((segment) => skipNotice.segments.some((s) => s.UUID === segment.UUID))) {
             // Skip notice already exists
             return;
         }
     }
-    
+
     const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, unskipTime, startReskip);
     if (onMobileYouTube || Config.config.skipKeybind == null) newSkipNotice.setShowKeybindHint(false);
     skipNotices.push(newSkipNotice);
@@ -1596,7 +1613,7 @@ function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forc
         video.muted = false;
         videoMuted = false;
     }
-    
+
     if (forceSeek || segment.actionType === ActionType.Skip) {
         //add a tiny bit of time to make sure it is not skipped again
         video.currentTime = unskipTime ?? segment.segment[0] + 0.001;
@@ -1869,10 +1886,10 @@ function openInfoMenu() {
     //hide info button
     if (playerButtons.info) playerButtons.info.button.style.display = "none";
 
-    
+
     const popup = document.createElement("div");
     popup.id = "sponsorBlockPopupContainer";
-   
+
     const frame = document.createElement("iframe");
     frame.width = "374";
     frame.height = "500";
@@ -1891,7 +1908,7 @@ function openInfoMenu() {
         //old youtube theme
         parentNode = document.getElementById("watch7-sidebar-contents");
     }
-    
+
     parentNode.insertBefore(popup, parentNode.firstChild);
 }
 
@@ -2178,7 +2195,7 @@ function nextChapter(): void {
         .sort((a, b) => a.segment[1] - b.segment[1]);
     if (chapters.length <= 0) return;
 
-    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter 
+    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter
         && time.segment[1] > video.currentTime);
     if (nextChapter !== -1) {
         reskipSponsorTime(chapters[nextChapter], true);
@@ -2193,7 +2210,7 @@ function previousChapter(): void {
 
     // subtract 5 seconds to allow skipping back to the previous chapter if close to start of
     // the current one
-    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter 
+    const nextChapter = chapters.findIndex((time) => time.actionType === ActionType.Chapter
         && time.segment[0] > video.currentTime - Math.min(5, time.segment[1] - time.segment[0]));
     const previousChapter = nextChapter !== -1 ? (nextChapter - 1) : (chapters.length - 1);
     if (previousChapter !== -1) {
@@ -2320,7 +2337,7 @@ function showTimeWithoutSkips(skippedDuration: number): void {
 
         display.appendChild(duration);
     }
-    
+
     const durationAfterSkips = GenericUtils.getFormattedTime(video?.duration - skippedDuration);
 
     duration.innerText = (durationAfterSkips == null || skippedDuration <= 0) ? "" : " (" + durationAfterSkips + ")";
@@ -2343,6 +2360,7 @@ function checkForPreloadedSegment() {
                         UUID: GenericUtils.generateUserID() as SegmentUUID,
                         category: segment.category ? segment.category : Config.config.defaultCategory,
                         actionType: segment.actionType ? segment.actionType : ActionType.Skip,
+                        description: segment.description ?? "",
                         source: SponsorSourceType.Local
                     });
 
@@ -2362,7 +2380,7 @@ function checkForPreloadedSegment() {
 const navigationApiAvailable = "navigation" in window;
 if (navigationApiAvailable) {
     // TODO: Remove type cast once type declarations are updated
-    (window as unknown as { navigation: EventTarget }).navigation.addEventListener("navigate", (e) => 
+    (window as unknown as { navigation: EventTarget }).navigation.addEventListener("navigate", (e) =>
         videoIDChange(getYouTubeVideoID(document, (e as unknown as Record<string, Record<string, string>>).destination.url)));
 }
 

From bbea534781cc1b07d6c5a3ba6ffd6f60bbd8aee6 Mon Sep 17 00:00:00 2001
From: mini-bomba <55105495+mini-bomba@users.noreply.github.com>
Date: Thu, 1 Sep 2022 23:31:16 +0200
Subject: [PATCH 7/8] Add "Export segments as URL" option the unsubmitted
 videos section

---
 public/_locales/en/messages.json               |  3 +++
 .../options/UnsubmittedVideoListItem.tsx       | 18 ++++++++++++++++--
 src/utils/exporter.ts                          | 13 ++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index df50b436..e7cbfaa0 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -1205,5 +1205,8 @@
     "actions": {
         "message": "Actions",
         "description": "Header of the unsubmitted segments list"
+    },
+    "exportSegmentsAsURL": {
+        "message": "Export segments as URL"
     }
 }
diff --git a/src/components/options/UnsubmittedVideoListItem.tsx b/src/components/options/UnsubmittedVideoListItem.tsx
index c203f533..d670461d 100644
--- a/src/components/options/UnsubmittedVideoListItem.tsx
+++ b/src/components/options/UnsubmittedVideoListItem.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import Config from "../../config";
-import { exportTimes } from "../../utils/exporter";
+import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";
 
 export interface UnsubmittedVideosListItemProps {
     videoID: string;
@@ -47,6 +47,12 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
                             {chrome.i18n.getMessage("exportSegments")}
                         </div>
                         {" "}
+                        <div id={this.props.videoID + "ExportSegmentsAsURLAction"}
+                             className="option-button inline low-profile"
+                             onClick={this.exportSegmentsAsURL.bind(this)}>
+                            {chrome.i18n.getMessage("exportSegmentsAsURL")}
+                        </div>
+                        {" "}
                         <div id={this.props.videoID + "ClearSegmentsAction"}
                              className="option-button inline low-profile"
                              onClick={this.clearSegments.bind(this)}>
@@ -68,7 +74,15 @@ class UnsubmittedVideoListItem extends React.Component<UnsubmittedVideosListItem
     }
 
     exportSegments(): void {
-        navigator.clipboard.writeText(exportTimes(Config.config.unsubmittedSegments[this.props.videoID]))
+        this.copyToClipboard(exportTimes(Config.config.unsubmittedSegments[this.props.videoID]));
+    }
+
+    exportSegmentsAsURL(): void {
+        this.copyToClipboard(`https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(Config.config.unsubmittedSegments[this.props.videoID])}`)
+    }
+
+    copyToClipboard(text: string): void {
+        navigator.clipboard.writeText(text)
             .then(() => {
                 alert(chrome.i18n.getMessage("CopiedExclamation"));
             })
diff --git a/src/utils/exporter.ts b/src/utils/exporter.ts
index 089ef782..fe2b4f88 100644
--- a/src/utils/exporter.ts
+++ b/src/utils/exporter.ts
@@ -73,4 +73,15 @@ export function importTimes(data: string, videoDuration: number): SponsorTime[]
     }
 
     return result;
-}
\ No newline at end of file
+}
+
+export function exportTimesAsHashParam(segments: SponsorTime[]): string {
+    const hashparamSegments = segments.map(segment => ({
+        actionType: segment.actionType,
+        category: segment.category,
+        segment: segment.segment,
+        ...(segment.description ? {description: segment.description} : {})  // don't include the description param if empty
+    }));
+
+    return `#segments=${JSON.stringify(hashparamSegments)}`;
+}

From 9c7d153f150f890281b2566079e8487c264a9d5e Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 2 Sep 2022 00:15:05 -0400
Subject: [PATCH 8/8] Move segment export to backup page and improve margins

---
 public/_locales/en/messages.json                         | 2 +-
 public/options/options.html                              | 6 ++----
 src/components/options/UnsubmittedVideoListComponent.tsx | 3 ++-
 src/components/options/UnsubmittedVideosComponent.tsx    | 5 ++---
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index e7cbfaa0..20381761 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -1207,6 +1207,6 @@
         "description": "Header of the unsubmitted segments list"
     },
     "exportSegmentsAsURL": {
-        "message": "Export segments as URL"
+        "message": "Share as URL"
     }
 }
diff --git a/public/options/options.html b/public/options/options.html
index dbf9473f..fa23687a 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -362,6 +362,8 @@
 						</div>
 					</div>
 				</div>
+
+				<div data-type="react-UnsubmittedVideosComponent"></div>
 	
 				<div data-type="private-text-change" data-sync="*" data-confirm-message="exportOptionsWarning">
 					<h2>__MSG_exportOptions__</h2>
@@ -491,10 +493,6 @@
 					<div class="small-description">__MSG_copyDebugInformationOptions__</div>
 				</div>
 
-				<div data-type="react-UnsubmittedVideosComponent">
-
-				</div>
-
 				<div data-type="toggle" data-sync="testingServer" data-confirm-message="testingServerWarning" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
diff --git a/src/components/options/UnsubmittedVideoListComponent.tsx b/src/components/options/UnsubmittedVideoListComponent.tsx
index 2f3aa75a..e63feb99 100644
--- a/src/components/options/UnsubmittedVideoListComponent.tsx
+++ b/src/components/options/UnsubmittedVideoListComponent.tsx
@@ -29,7 +29,8 @@ class UnsubmittedVideoListComponent extends React.Component<UnsubmittedVideoList
 
         return (
             <table id="unsubmittedVideosList"
-                className="categoryChooserTable">
+                className="categoryChooserTable"
+                style={{marginTop: "10px"}} >
                 <tbody>
                     {/* Headers */}
                     <tr id="UnsubmittedVideosListHeader"
diff --git a/src/components/options/UnsubmittedVideosComponent.tsx b/src/components/options/UnsubmittedVideosComponent.tsx
index d01c8294..892c49be 100644
--- a/src/components/options/UnsubmittedVideosComponent.tsx
+++ b/src/components/options/UnsubmittedVideosComponent.tsx
@@ -15,7 +15,6 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
     constructor(props: UnsubmittedVideosProps) {
         super(props);
 
-        // Setup state
         this.state = {
             tableVisible: false,
         };
@@ -23,10 +22,10 @@ class UnsubmittedVideosComponent extends React.Component<UnsubmittedVideosProps,
 
     render(): React.ReactElement {
         const videoCount = Object.keys(Config.config.unsubmittedSegments).length;
-        const segmentCount = Object.values(Config.config.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc+vid.length, 0);
+        const segmentCount = Object.values(Config.config.unsubmittedSegments).reduce((acc: number, vid: Array<unknown>) => acc + vid.length, 0);
 
         return <>
-            <div>
+            <div style={{marginBottom: "10px"}}>
                 {segmentCount == 0 ?
                     chrome.i18n.getMessage("unsubmittedSegmentCountsZero") :
                     chrome.i18n.getMessage("unsubmittedSegmentCounts")