Add currentTime.

object/video.go

@@ -9,8 +9,8 @@ import (
 )
 
 type Label struct {
-	Timestamp string `xorm:"varchar(100)" json:"timestamp"`
+	Timestamp float64 `json:"timestamp"`
-	Text      string `xorm:"varchar(100)" json:"text"`
+	Text      string  `xorm:"varchar(100)" json:"text"`
 }
 
 type Video struct {

web/src/LabelTable.js

@@ -1,9 +1,8 @@
 import React from "react";
 import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
-import {Button, Col, Input, Row, Table, Tooltip} from 'antd';
+import {Button, Col, Input, InputNumber, 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) {
@@ -32,7 +31,7 @@ class LabelTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {timestamp: moment().format(), text: ""};
+    let row = {timestamp: this.props.currentTime, text: ""};
     if (table === undefined) {
       table = [];
     }
@@ -61,20 +60,20 @@ class LabelTable extends React.Component {
         title: i18next.t("general:No."),
         dataIndex: 'no',
         key: 'no',
-        width: '60px',
+        width: '80px',
         render: (text, record, index) => {
           return (index + 1);
         }
       },
       {
-        title: i18next.t("video:Timestamp"),
+        title: i18next.t("video:Timestamp (second)"),
         dataIndex: 'timestamp',
         key: 'timestamp',
-        width: '300px',
+        width: '160px',
         render: (text, record, index) => {
           return (
-            <Input value={text} onChange={e => {
+            <InputNumber style={{width: "100%"}} min={0} value={text} onChange={value => {
-              this.updateField(table, index, 'timestamp', e.target.value);
+              this.updateField(table, index, 'timestamp', value);
             }} />
           )
         }

web/src/Video.js

@@ -19,6 +19,10 @@ class Video extends React.Component {
     }
   }
 
+  updateTime(time) {
+    this.props.onUpdateTime(time);
+  }
+
   handleReady(player) {
     let videoWidth = player.tag.videoWidth;
     let videoHeight = player.tag.videoHeight;
@@ -42,8 +46,15 @@ class Video extends React.Component {
     });
   }
 
+  onTimeUpdate(player) {
+    const timestamp = parseFloat(parseFloat(player.getCurrentTime()).toFixed(3));
+
+    this.updateTime(timestamp);
+  }
+
   initPlayer(player) {
     player.on('ready', () => {this.handleReady(player)});
+    player.on('timeupdate', () => {this.onTimeUpdate(player)});
   }
 
   render() {

web/src/VideoEditPage.js

@@ -26,6 +26,7 @@ class VideoEditPage extends React.Component {
       .then((video) => {
         this.setState({
           video: video,
+          currentTime: 0,
         });
       });
   }
@@ -75,7 +76,7 @@ class VideoEditPage extends React.Component {
             this.state.video.name
           }
         </div>
-        <Video task={task} />
+        <Video task={task} onUpdateTime={(time) => {this.setState({currentTime: time})}} />
       </div>
     )
   }
@@ -155,6 +156,16 @@ class VideoEditPage extends React.Component {
             }
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
+            {i18next.t("video:Current time (second)")}:
+          </Col>
+          <Col span={22} style={(Setting.isMobile()) ? {maxWidth:'100%'} :{}}>
+            {
+              this.state.currentTime
+            }
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
             {i18next.t("video:Labels")}:
@@ -163,7 +174,8 @@ class VideoEditPage extends React.Component {
             <LabelTable
               title={i18next.t("video:Labels")}
               table={this.state.video.labels}
-              onUpdateTable={(value) => { this.updateVideoField('labels', value)}}
+              currentTime={this.state.currentTime}
+              onUpdateTable={(value) => {this.updateVideoField('labels', value)}}
             />
           </Col>
         </Row>

web/src/locales/en/data.json

@@ -35,10 +35,11 @@
   },
   "video": {
     "Cover": "Cover",
+    "Current time (second)": "Current time (second)",
     "Edit Video": "Edit Video",
     "Labels": "Labels",
     "Text": "Text",
-    "Timestamp": "Timestamp",
+    "Timestamp (second)": "Timestamp (second)",
     "Video": "Video",
     "Video ID": "Video ID"
   },

web/src/locales/zh/data.json

@@ -35,10 +35,11 @@
   },
   "video": {
     "Cover": "封面图片",
+    "Current time (second)": "当前时间（秒）",
     "Edit Video": "编辑视频",
     "Labels": "标签",
     "Text": "文本",
-    "Timestamp": "时间戳",
+    "Timestamp (second)": "时间戳（秒）",
     "Video": "视频",
     "Video ID": "视频ID"
   },