aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/options/UnsubmittedVideoListItem.tsx
blob: bc8ca28cb048358365f9710eddba6b7f49d5fdaf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import * as React from "react";

import Config from "../../config";
import { exportTimes, exportTimesAsHashParam } from "../../utils/exporter";

export interface UnsubmittedVideosListItemProps {
    videoID: string;
    children?: React.ReactNode;
}

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.local.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 + "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)}>
                            {chrome.i18n.getMessage("clearTimes")}
                        </div>
                    </td>

                </tr>

            </>
        );
    }

    clearSegments(): void {
        if (confirm(chrome.i18n.getMessage("clearThis"))) {
            delete Config.local.unsubmittedSegments[this.props.videoID];
            Config.forceLocalUpdate("unsubmittedSegments");
        }
    }

    exportSegments(): void {
        this.copyToClipboard(exportTimes(Config.local.unsubmittedSegments[this.props.videoID]));
    }

    exportSegmentsAsURL(): void {
        this.copyToClipboard(`https://youtube.com/watch?v=${this.props.videoID}${exportTimesAsHashParam(Config.local.unsubmittedSegments[this.props.videoID])}`)
    }

    copyToClipboard(text: string): void {
        navigator.clipboard.writeText(text)
            .then(() => {
                alert(chrome.i18n.getMessage("CopiedExclamation"));
            })
            .catch(() => {
                alert(chrome.i18n.getMessage("copyDebugInformationFailed"));
            });
    }
}

export default UnsubmittedVideoListItem;