Add an Export Segments button to the unsubmitted segments list

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>