LabelTable can clear screen.

This commit is contained in:
Haifeng Luo 2022-05-08 19:40:17 +08:00
parent af7f9971f8
commit 532c6d6bb0
3 changed files with 11 additions and 1 deletions

View File

@ -72,6 +72,7 @@ class LabelTable extends React.Component {
return (
<Button type={"text"} style={{width: "50px"}} onClick={() => {
this.props.player.seek(record.timestamp);
this.props.screen.clear();
}} >
{index + 1}
</Button>

View File

@ -27,6 +27,8 @@ class Video extends React.Component {
this.setState({
screen: screen,
});
this.props.onCreateScreen(screen);
}
updateVideoSize(width, height) {
@ -116,6 +118,7 @@ class Video extends React.Component {
player.on('timeupdate', () => {this.onTimeUpdate(player)});
player.on('play', () => {this.onPlay()});
player.on('pause', () => {this.onPause()});
player.on('completeSeek', () => {this.state.screen.clear()});
}
render() {

View File

@ -15,6 +15,7 @@ class VideoEditPage extends React.Component {
videoName: props.match.params.videoName,
video: null,
player: null,
screen: null,
};
}
@ -71,7 +72,11 @@ class VideoEditPage extends React.Component {
<Affix offsetTop={100}>
<div style={{marginTop: "10px"}}>
<div className="screen" style={{position: "absolute", zIndex: 100, pointerEvents: "none", width: '440px', height: '472px', marginLeft: '200px', marginRight: '200px', backgroundColor: "rgba(255,0,0,0)" }}></div>
<Video task={task} labels={this.state.video.labels} onUpdateTime={(time) => {this.setState({currentTime: time})}} onCreatePlayer={(player) => {this.setState({player: player})}} />
<Video task={task} labels={this.state.video.labels}
onUpdateTime={(time) => {this.setState({currentTime: time})}}
onCreatePlayer={(player) => {this.setState({player: player})}}
onCreateScreen={(screen) => {this.setState({screen: screen})}}
/>
<div style={{fontSize: 20, marginTop: "10px"}}>
{i18next.t("video:Current time (second)")}: {" "}
{
@ -165,6 +170,7 @@ class VideoEditPage extends React.Component {
table={this.state.video.labels}
currentTime={this.state.currentTime}
player={this.state.player}
screen={this.state.screen}
onUpdateTable={(value) => {this.updateVideoField('labels', value)}}
/>
</Col>