Add currentTime.
This commit is contained in:
parent
aa4e75f40f
commit
817d73b00a
|
@ -9,8 +9,8 @@ import (
|
||||||
)
|
)
|
||||||
|
|
||||||
type Label struct {
|
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 {
|
type Video struct {
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import {DownOutlined, DeleteOutlined, UpOutlined} from '@ant-design/icons';
|
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 * as Setting from "./Setting";
|
||||||
import i18next from "i18next";
|
import i18next from "i18next";
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
class LabelTable extends React.Component {
|
class LabelTable extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -32,7 +31,7 @@ class LabelTable extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
addRow(table) {
|
addRow(table) {
|
||||||
let row = {timestamp: moment().format(), text: ""};
|
let row = {timestamp: this.props.currentTime, text: ""};
|
||||||
if (table === undefined) {
|
if (table === undefined) {
|
||||||
table = [];
|
table = [];
|
||||||
}
|
}
|
||||||
|
@ -61,20 +60,20 @@ class LabelTable extends React.Component {
|
||||||
title: i18next.t("general:No."),
|
title: i18next.t("general:No."),
|
||||||
dataIndex: 'no',
|
dataIndex: 'no',
|
||||||
key: 'no',
|
key: 'no',
|
||||||
width: '60px',
|
width: '80px',
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return (index + 1);
|
return (index + 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: i18next.t("video:Timestamp"),
|
title: i18next.t("video:Timestamp (second)"),
|
||||||
dataIndex: 'timestamp',
|
dataIndex: 'timestamp',
|
||||||
key: 'timestamp',
|
key: 'timestamp',
|
||||||
width: '300px',
|
width: '160px',
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return (
|
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);
|
||||||
}} />
|
}} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,10 @@ class Video extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateTime(time) {
|
||||||
|
this.props.onUpdateTime(time);
|
||||||
|
}
|
||||||
|
|
||||||
handleReady(player) {
|
handleReady(player) {
|
||||||
let videoWidth = player.tag.videoWidth;
|
let videoWidth = player.tag.videoWidth;
|
||||||
let videoHeight = player.tag.videoHeight;
|
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) {
|
initPlayer(player) {
|
||||||
player.on('ready', () => {this.handleReady(player)});
|
player.on('ready', () => {this.handleReady(player)});
|
||||||
|
player.on('timeupdate', () => {this.onTimeUpdate(player)});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -26,6 +26,7 @@ class VideoEditPage extends React.Component {
|
||||||
.then((video) => {
|
.then((video) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
video: video,
|
video: video,
|
||||||
|
currentTime: 0,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -75,7 +76,7 @@ class VideoEditPage extends React.Component {
|
||||||
this.state.video.name
|
this.state.video.name
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<Video task={task} />
|
<Video task={task} onUpdateTime={(time) => {this.setState({currentTime: time})}} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -155,6 +156,16 @@ class VideoEditPage extends React.Component {
|
||||||
}
|
}
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</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'}} >
|
<Row style={{marginTop: '20px'}} >
|
||||||
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
|
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
|
||||||
{i18next.t("video:Labels")}:
|
{i18next.t("video:Labels")}:
|
||||||
|
@ -163,7 +174,8 @@ class VideoEditPage extends React.Component {
|
||||||
<LabelTable
|
<LabelTable
|
||||||
title={i18next.t("video:Labels")}
|
title={i18next.t("video:Labels")}
|
||||||
table={this.state.video.labels}
|
table={this.state.video.labels}
|
||||||
onUpdateTable={(value) => { this.updateVideoField('labels', value)}}
|
currentTime={this.state.currentTime}
|
||||||
|
onUpdateTable={(value) => {this.updateVideoField('labels', value)}}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
|
@ -35,10 +35,11 @@
|
||||||
},
|
},
|
||||||
"video": {
|
"video": {
|
||||||
"Cover": "Cover",
|
"Cover": "Cover",
|
||||||
|
"Current time (second)": "Current time (second)",
|
||||||
"Edit Video": "Edit Video",
|
"Edit Video": "Edit Video",
|
||||||
"Labels": "Labels",
|
"Labels": "Labels",
|
||||||
"Text": "Text",
|
"Text": "Text",
|
||||||
"Timestamp": "Timestamp",
|
"Timestamp (second)": "Timestamp (second)",
|
||||||
"Video": "Video",
|
"Video": "Video",
|
||||||
"Video ID": "Video ID"
|
"Video ID": "Video ID"
|
||||||
},
|
},
|
||||||
|
|
|
@ -35,10 +35,11 @@
|
||||||
},
|
},
|
||||||
"video": {
|
"video": {
|
||||||
"Cover": "封面图片",
|
"Cover": "封面图片",
|
||||||
|
"Current time (second)": "当前时间(秒)",
|
||||||
"Edit Video": "编辑视频",
|
"Edit Video": "编辑视频",
|
||||||
"Labels": "标签",
|
"Labels": "标签",
|
||||||
"Text": "文本",
|
"Text": "文本",
|
||||||
"Timestamp": "时间戳",
|
"Timestamp (second)": "时间戳(秒)",
|
||||||
"Video": "视频",
|
"Video": "视频",
|
||||||
"Video ID": "视频ID"
|
"Video ID": "视频ID"
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue