Add LabelTable.

object/video.go

@@ -8,14 +8,20 @@ import (
 	"xorm.io/core"
 )
 
+type Label struct {
+	Timestamp string `xorm:"varchar(100)" json:"timestamp"`
+	Text      string `xorm:"varchar(100)" json:"text"`
+}
+
 type Video struct {
 	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 	DisplayName string `xorm:"varchar(500)" json:"displayName"`
 
-	VideoId  string `xorm:"varchar(100)" json:"videoId"`
-	CoverUrl string `xorm:"varchar(200)" json:"coverUrl"`
+	VideoId  string   `xorm:"varchar(100)" json:"videoId"`
+	CoverUrl string   `xorm:"varchar(200)" json:"coverUrl"`
+	Labels   []*Label `xorm:"mediumtext" json:"labels"`
 
 	PlayAuth string `xorm:"-" json:"playAuth"`
 }

web/src/LabelTable.js

@@ -0,0 +1,149 @@
+import React from "react";
+import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
+import {Button, Col, Input, Row, Table, Tooltip} from 'antd';
+import * as Setting from "./Setting";
+import i18next from "i18next";
+import moment from "moment";
+
+class LabelTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+    };
+  }
+
+  updateTable(table) {
+    this.props.onUpdateTable(table);
+  }
+
+  parseField(key, value) {
+    if ([].includes(key)) {
+      value = Setting.myParseInt(value);
+    }
+    return value;
+  }
+
+  updateField(table, index, key, value) {
+    value = this.parseField(key, value);
+
+    table[index][key] = value;
+    this.updateTable(table);
+  }
+
+  addRow(table) {
+    let row = {timestamp: moment().format(), text: ""};
+    if (table === undefined) {
+      table = [];
+    }
+    table = Setting.addRow(table, row);
+    this.updateTable(table);
+  }
+
+  deleteRow(table, i) {
+    table = Setting.deleteRow(table, i);
+    this.updateTable(table);
+  }
+
+  upRow(table, i) {
+    table = Setting.swapRow(table, i - 1, i);
+    this.updateTable(table);
+  }
+
+  downRow(table, i) {
+    table = Setting.swapRow(table, i, i + 1);
+    this.updateTable(table);
+  }
+
+  renderTable(table) {
+    const columns = [
+      {
+        title: i18next.t("general:No."),
+        dataIndex: 'no',
+        key: 'no',
+        width: '60px',
+        render: (text, record, index) => {
+          return (index + 1);
+        }
+      },
+      {
+        title: i18next.t("video:Timestamp"),
+        dataIndex: 'timestamp',
+        key: 'timestamp',
+        width: '300px',
+        render: (text, record, index) => {
+          return (
+            <Input value={text} onChange={e => {
+              this.updateField(table, index, 'timestamp', e.target.value);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("video:Text"),
+        dataIndex: 'text',
+        key: 'text',
+        // width: '200px',
+        render: (text, record, index) => {
+          return (
+            <Input value={text} onChange={e => {
+              this.updateField(table, index, 'text', e.target.value);
+            }} />
+          )
+        }
+      },
+      {
+        title: i18next.t("general:Action"),
+        key: 'action',
+        width: '100px',
+        render: (text, record, index) => {
+          return (
+            <div>
+              <Tooltip placement="bottomLeft" title={"Up"}>
+                <Button style={{marginRight: "5px"}} disabled={index === 0} icon={<UpOutlined />} size="small" onClick={() => this.upRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={"Down"}>
+                <Button style={{marginRight: "5px"}} disabled={index === table.length - 1} icon={<DownOutlined />} size="small" onClick={() => this.downRow(table, index)} />
+              </Tooltip>
+              <Tooltip placement="topLeft" title={"Delete"}>
+                <Button icon={<DeleteOutlined />} size="small" onClick={() => this.deleteRow(table, index)} />
+              </Tooltip>
+            </div>
+          );
+        }
+      },
+    ];
+
+    return (
+      <Table rowKey="index" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+             title={() => (
+               <div>
+                 {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>
+                   )
+                 }
+               </div>
+             )}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Row style={{marginTop: '20px'}} >
+          <Col span={24}>
+            {
+              this.renderTable(this.props.table)
+            }
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
+
+export default LabelTable;

web/src/VideoEditPage.js

@@ -5,6 +5,7 @@ import * as Setting from "./Setting";
 import i18next from "i18next";
 import {LinkOutlined} from "@ant-design/icons";
 import Video from "./Video";
+import LabelTable from "./LabelTable";
 
 class VideoEditPage extends React.Component {
   constructor(props) {
@@ -154,6 +155,18 @@ class VideoEditPage extends React.Component {
             }
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("video:Labels")}:
+          </Col>
+          <Col span={22} >
+            <LabelTable
+              title={i18next.t("video:Labels")}
+              table={this.state.video.labels}
+              onUpdateTable={(value) => { this.updateVideoField('labels', value)}}
+            />
+          </Col>
+        </Row>
       </Card>
     )
   }

web/src/VideoListPage.js

@@ -36,6 +36,7 @@ class VideoListPage extends React.Component {
       displayName: `Video ${this.state.videos.length}`,
       videoId: "",
       coverUrl: "",
+      labels: [],
       playAuth: "",
     }
   }

web/src/locales/en/data.json

@@ -36,6 +36,9 @@
   "video": {
     "Cover": "Cover",
     "Edit Video": "Edit Video",
+    "Labels": "Labels",
+    "Text": "Text",
+    "Timestamp": "Timestamp",
     "Video": "Video",
     "Video ID": "Video ID"
   },

web/src/locales/zh/data.json

@@ -36,6 +36,9 @@
   "video": {
     "Cover": "封面图片",
     "Edit Video": "编辑视频",
+    "Labels": "标签",
+    "Text": "文本",
+    "Timestamp": "时间戳",
     "Video": "视频",
     "Video ID": "视频ID"
   },