"use strict";(self.webpackChunktinode_webapp=self.webpackChunktinode_webapp||[]).push([[371],{6371:function(e,i,n){n.r(i);var o=n(1594),t=n.n(o),s=n(8181),d=n(1725),r=n(8589),a=n(5446);const p=(0,s.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 o=n.getContext("2d");o.drawImage(this.videoRef.current,0,0,n.width,n.height),o.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":"",o=!this.props.onSendMessage;return(0,a.jsxDEV)("div",{id:"image-preview",children:[(0,a.jsxDEV)("div",{id:"preview-caption-panel",children:[(0,a.jsxDEV)("span",{children:this.props.content.filename},void 0,!1),(0,a.jsxDEV)("a",{href:"#",onClick:e=>{e.preventDefault(),this.props.onClose()},children:(0,a.jsxDEV)("i",{className:"material-icons gray",children:"close"},void 0,!1)},void 0,!1)]},void 0,!0),(0,a.jsxDEV)("div",{id:"image-preview-container",children:(0,a.jsxDEV)("video",{className:"image-preview",controls:!0,controlsList:n,disablePictureInPicture:!0,ref:this.videoRef,autoPlay:o,src:this.props.tinode.authorizeURL(this.props.content.url),poster:this.props.content.preview,alt:this.props.content.filename},void 0,!1)},void 0,!1),this.props.onSendMessage?(0,a.jsxDEV)(d.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},void 0,!1):(0,a.jsxDEV)("div",{id:"image-preview-footer",children:[(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)("div",{children:(0,a.jsxDEV)("b",{children:(0,a.jsxDEV)(s.FormattedMessage,{id:"label_file_name",defaultMessage:"File name:",description:"Label for a file name"},void 0,!1)},void 0,!1)},void 0,!1),(0,a.jsxDEV)("div",{children:(0,a.jsxDEV)("span",{title:this.props.content.filename,children:this.props.content.filename},void 0,!1)},void 0,!1)]},void 0,!0),(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)("div",{children:(0,a.jsxDEV)("b",{children:(0,a.jsxDEV)(s.FormattedMessage,{id:"label_content_type",defaultMessage:"Content type:",description:"Label for file content type (mime)"},void 0,!1)},void 0,!1)},void 0,!1),(0,a.jsxDEV)("div",{children:this.props.content.type},void 0,!1)]},void 0,!0),(0,a.jsxDEV)("div",{children:[(0,a.jsxDEV)("div",{children:(0,a.jsxDEV)("b",{children:(0,a.jsxDEV)(s.FormattedMessage,{id:"label_size",defaultMessage:"Size:",description:"Label for file size"},void 0,!1)},void 0,!1)},void 0,!1),(0,a.jsxDEV)("div",{children:[e," × ",i," px; ",(0,r.lX)(this.props.content.size)]},void 0,!0)]},void 0,!0)]},void 0,!0)]},void 0,!0)}}i.default=(0,s.injectIntl)(h)}}]);
//# sourceMappingURL=371.prod.js.map