Move new react components to components/options/, following latest changes

src/components/options/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;

src/components/options/UnsubmittedVideoListItem.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+
+import Config from "../../config";
+import { exportTimes } from "../../utils/exporter";
+
+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 + "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)}>
+                            {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");
+        }
+    }
+
+    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;

src/components/options/UnsubmittedVideosComponent.tsx

@@ -0,0 +1,56 @@
+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>
+                {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})}>
+                {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;