Add currentTime.

This commit is contained in:
Haifeng Luo 2022-05-08 13:29:38 +08:00
parent aa4e75f40f
commit 817d73b00a
6 changed files with 38 additions and 14 deletions

View File

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

View File

@ -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 => {
this.updateField(table, index, 'timestamp', e.target.value);
<InputNumber style={{width: "100%"}} min={0} value={text} onChange={value => {
this.updateField(table, index, 'timestamp', value);
}} />
)
}

View File

@ -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() {

View File

@ -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,6 +174,7 @@ class VideoEditPage extends React.Component {
<LabelTable
title={i18next.t("video:Labels")}
table={this.state.video.labels}
currentTime={this.state.currentTime}
onUpdateTable={(value) => {this.updateVideoField('labels', value)}}
/>
</Col>

View File

@ -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"
},

View File

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