diff --git a/object/video.go b/object/video.go index 26f75ba..a25cc1e 100644 --- a/object/video.go +++ b/object/video.go @@ -9,8 +9,8 @@ import ( ) type Label struct { - Timestamp string `xorm:"varchar(100)" json:"timestamp"` - Text string `xorm:"varchar(100)" json:"text"` + Timestamp float64 `json:"timestamp"` + Text string `xorm:"varchar(100)" json:"text"` } type Video struct { diff --git a/web/src/LabelTable.js b/web/src/LabelTable.js index 8a42432..8285ccb 100644 --- a/web/src/LabelTable.js +++ b/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 ( - { - this.updateField(table, index, 'timestamp', e.target.value); + { + this.updateField(table, index, 'timestamp', value); }} /> ) } diff --git a/web/src/Video.js b/web/src/Video.js index 25927ac..6dd6d85 100644 --- a/web/src/Video.js +++ b/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() { diff --git a/web/src/VideoEditPage.js b/web/src/VideoEditPage.js index d20f975..f8580bc 100644 --- a/web/src/VideoEditPage.js +++ b/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 } -