From a98947eda5da0d5bdbeaae34ffe20492d89cf8c3 Mon Sep 17 00:00:00 2001
From: Haifeng Luo <bnulhf@126.com>
Date: Sun, 8 May 2022 19:58:57 +0800
Subject: [PATCH] Can download labels.

---
 web/src/LabelTable.js        | 25 +++++++++++++++++++++----
 web/src/Setting.js           |  2 +-
 web/src/VideoEditPage.js     |  1 +
 web/src/VideoListPage.js     |  9 +++++++++
 web/src/locales/en/data.json |  3 ++-
 web/src/locales/zh/data.json |  3 ++-
 6 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/web/src/LabelTable.js b/web/src/LabelTable.js
index 0ff5f5a..632bfb3 100644
--- a/web/src/LabelTable.js
+++ b/web/src/LabelTable.js
@@ -3,6 +3,8 @@ import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
 import {Button, Col, Input, InputNumber, Row, Table, Tooltip} from 'antd';
 import * as Setting from "./Setting";
 import i18next from "i18next";
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
 
 class LabelTable extends React.Component {
   constructor(props) {
@@ -61,6 +63,22 @@ class LabelTable extends React.Component {
     this.updateTable(table);
   }
 
+  downloadLabels() {
+    let data = [];
+    this.props.table.forEach((label, i) => {
+      let row = {};
+
+      row[0] = label.timestamp;
+      row[1] = label.text;
+      data.push(row);
+    });
+
+    let sheet = XLSX.utils.json_to_sheet(data, {skipHeader: true});
+    const blob = Setting.sheet2blob(sheet, "labels");
+    const fileName = `labels-${this.props.video.name}-${this.props.table.length}.xlsx`;
+    FileSaver.saveAs(blob, fileName);
+  }
+
   renderTable(table) {
     const columns = [
       {
@@ -78,11 +96,10 @@ class LabelTable extends React.Component {
               {index + 1}
             </Button>
           )
-          return (index + 1);
         }
       },
       {
-        title: i18next.t("video:Timestamp (second)"),
+        title: i18next.t("video:Timestamp (s)"),
         dataIndex: 'timestamp',
         key: 'timestamp',
         width: '120px',
@@ -147,8 +164,8 @@ class LabelTable extends React.Component {
                  {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
                  <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
                  {
-                   this.props.wordset === undefined ? null : (
-                     <Button style={{marginLeft: "5px", marginRight: "5px"}} size="small" onClick={() => Setting.downloadXlsx(this.props.wordset)}>{i18next.t("general:Download")}</Button>
+                   this.props.table.length === 0 ? null : (
+                     <Button style={{marginLeft: "5px", marginRight: "5px"}} size="small" onClick={() => this.downloadLabels()}>{i18next.t("general:Download")}</Button>
                    )
                  }
                </div>
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 15e8653..1680ec2 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -264,7 +264,7 @@ export function getLabelTags(labels) {
     res.push(
       <Tooltip placement="top" title={getShortText(JSON.stringify(label.text), 500)}>
         <Tag color={"processing"}>
-          {`${label.timestamp}: ${label.text}`}
+          {`${label.timestamp}: ${label.text !== "" ? label.text : "(Empty)"}`}
         </Tag>
       </Tooltip>
     );
diff --git a/web/src/VideoEditPage.js b/web/src/VideoEditPage.js
index 2a3b272..67f1fb0 100644
--- a/web/src/VideoEditPage.js
+++ b/web/src/VideoEditPage.js
@@ -171,6 +171,7 @@ class VideoEditPage extends React.Component {
               title={i18next.t("video:Labels")}
               table={this.state.video.labels}
               currentTime={this.state.currentTime}
+              video={this.state.video}
               player={this.state.player}
               screen={this.state.screen}
               videoObj={this.state.videoObj}
diff --git a/web/src/VideoListPage.js b/web/src/VideoListPage.js
index 0c964d5..8e826fe 100644
--- a/web/src/VideoListPage.js
+++ b/web/src/VideoListPage.js
@@ -123,6 +123,15 @@ class VideoListPage extends React.Component {
           return Setting.getLabelTags(text);
         }
       },
+      {
+        title: i18next.t("video:Label count"),
+        dataIndex: 'labelCount',
+        key: 'labelCount',
+        width: '110px',
+        render: (text, record, index) => {
+          return record.labels.length;
+        }
+      },
       {
         title: i18next.t("general:Action"),
         dataIndex: 'action',
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
index 4856bf8..2142f27 100644
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@@ -37,9 +37,10 @@
     "Cover": "Cover",
     "Current time (second)": "Current time (second)",
     "Edit Video": "Edit Video",
+    "Label count": "Label count",
     "Labels": "Labels",
     "Text": "Text",
-    "Timestamp (second)": "Timestamp (s)",
+    "Timestamp (s)": "Timestamp (s)",
     "Video": "Video",
     "Video ID": "Video ID"
   },
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
index 7c74684..dc6af41 100644
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -37,9 +37,10 @@
     "Cover": "封面图片",
     "Current time (second)": "当前时间（秒）",
     "Edit Video": "编辑视频",
+    "Label count": "标签数量",
     "Labels": "标签",
     "Text": "文本",
-    "Timestamp (second)": "时间戳（秒）",
+    "Timestamp (s)": "时间戳（秒）",
     "Video": "视频",
     "Video ID": "视频ID"
   },