61 lines
1.9 KiB
React
61 lines
1.9 KiB
React
import React from 'react';
|
|
import SendMessage from './send-message.jsx';
|
|
|
|
export default class VideoPreview extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.videoRef = React.createRef();
|
|
|
|
this.handleSendVideo = this.handleSendVideo.bind(this);
|
|
}
|
|
|
|
handleSendVideo(caption) {
|
|
this.props.onClose();
|
|
const params = {
|
|
width: this.videoRef.current.videoWidth,
|
|
height: this.videoRef.current.videoHeight,
|
|
duration: (this.videoRef.current.duration * 1000) | 0,
|
|
mime: this.props.content.mime,
|
|
name: this.props.content.name
|
|
}
|
|
|
|
// Capture screen from a video.
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = params.width;
|
|
canvas.height = params.height;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.drawImage(this.videoRef.current, 0, 0, canvas.width, canvas.height);
|
|
ctx.canvas.toBlob(
|
|
preview => this.props.onSendMessage(caption, this.props.content.blob, preview, params),
|
|
'image/jpeg', 0.75
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (!this.props.content) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div id="image-preview">
|
|
<div id="image-preview-caption-panel">
|
|
<span>{this.props.content.name}</span>
|
|
<a href="#" onClick={e => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
|
|
</div>
|
|
<div id="image-preview-container">
|
|
<video controls ref={this.videoRef} src={this.props.content.url} className="image-preview" alt={this.props.content.name} />
|
|
</div>
|
|
<SendMessage
|
|
messagePrompt="add_image_caption"
|
|
acceptBlank={true}
|
|
tinode={this.props.tinode}
|
|
reply={this.props.reply}
|
|
onCancelReply={this.props.onCancelReply}
|
|
onSendMessage={this.handleSendVideo}
|
|
onError={this.props.onError} />
|
|
</div>
|
|
);
|
|
}
|
|
};
|