"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[592],{4592:function(e,i,n){n.r(i);var s=n(1594),t=n.n(s),o=n(8181),r=n(5372),d=n(7256),a=n(4848);const p=(0,o.defineMessages)({unrecognized_video_format:{id:"unrecognized_video_format",defaultMessage:"Format of this video is not recognized",description:"Error message when uploaded video is invalid"}});class h extends t().PureComponent{constructor(e){super(e),this.videoRef=t().createRef(),this.handleSendVideo=this.handleSendVideo.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}componentDidMount(){document.addEventListener("keydown",this.handleKeyDown)}componentWillUnmount(){document.removeEventListener("keydown",this.handleKeyDown)}handleKeyDown(e){this.props.onSendMessage||(e.preventDefault(),"Escape"===e.key&&this.props.onClose())}handleSendVideo(e){this.props.onClose();const i={width:this.videoRef.current.videoWidth,height:this.videoRef.current.videoHeight,duration:1e3*this.videoRef.current.duration|0,mime:this.props.content.mime,name:this.props.content.filename};if(0==i.width||0==i.height)return void this.props.onError(this.props.intl.formatMessage(p.unrecognized_video_format),"err");const n=document.createElement("canvas");n.width=i.width,n.height=i.height;const s=n.getContext("2d");s.drawImage(this.videoRef.current,0,0,n.width,n.height),s.canvas.toBlob(n=>this.props.onSendMessage(e,this.props.content.blob,n,i),"image/jpeg",.75)}render(){if(!this.props.content)return null;const e=this.props.content.width||"-",i=this.props.content.height||"-",n=this.props.onSendMessage?"nodownload":"",s=!this.props.onSendMessage;return(0,a.jsxs)("div",{id:"image-preview",children:[(0,a.jsxs)("div",{id:"preview-caption-panel",children:[(0,a.jsx)("span",{children:this.props.content.filename}),(0,a.jsx)("a",{href:"#",onClick:e=>{e.preventDefault(),this.props.onClose()},children:(0,a.jsx)("i",{className:"material-icons gray",children:"close"})})]}),(0,a.jsx)("div",{id:"image-preview-container",children:(0,a.jsx)("video",{className:"image-preview",controls:!0,controlsList:n,disablePictureInPicture:!0,ref:this.videoRef,autoPlay:s,src:this.props.tinode.authorizeURL(this.props.content.url),poster:this.props.content.preview,alt:this.props.content.filename})}),this.props.onSendMessage?(0,a.jsx)(r.A,{messagePrompt:"add_image_caption",acceptBlank:!0,tinode:this.props.tinode,reply:this.props.reply,onCancelReply:this.props.onCancelReply,onSendMessage:this.handleSendVideo,onError:this.props.onError}):(0,a.jsxs)("div",{id:"image-preview-footer",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{children:(0,a.jsx)("b",{children:(0,a.jsx)(o.FormattedMessage,{id:"label_file_name",defaultMessage:"File name:",description:"Label for a file name"})})}),(0,a.jsx)("div",{children:(0,a.jsx)("span",{title:this.props.content.filename,children:this.props.content.filename})})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{children:(0,a.jsx)("b",{children:(0,a.jsx)(o.FormattedMessage,{id:"label_content_type",defaultMessage:"Content type:",description:"Label for file content type (mime)"})})}),(0,a.jsx)("div",{children:this.props.content.type})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{children:(0,a.jsx)("b",{children:(0,a.jsx)(o.FormattedMessage,{id:"label_size",defaultMessage:"Size:",description:"Label for file size"})})}),(0,a.jsxs)("div",{children:[e," × ",i," px; ",(0,d.lX)(this.props.content.size)]})]})]})]})}}i.default=(0,o.injectIntl)(h)}}]);
//# sourceMappingURL=592.prod.js.map