Merge branch 'next' into drag-and-drop

src/widgets/call-incoming.jsx

@@ -37,7 +37,7 @@ export default class CallIncoming extends React.Component {
       return;
     }
 
-    this.resetDesc(topic, this.props);
+    this.resetDesc(topic);
     if (this.props.callState == CALL_STATE_INCOMING_RECEIVED) {
       // play() throws if the user did not click the app first: https://goo.gl/xX8pDD.
       RING_SOUND.play().catch(_ => {});
@@ -77,9 +77,7 @@ export default class CallIncoming extends React.Component {
     topic.onMetaDesc = this.previousMetaDesc;
   }
 
-  resetDesc(topic, props) {
-    const defacs = topic.getDefaultAccess() || {};
-    const acs = topic.getAccessMode();
+  resetDesc(topic) {
     const badges = [];
     if (topic.trusted) {
       for (const [key, val] of Object.entries(topic.trusted)) {
@@ -101,7 +99,7 @@ export default class CallIncoming extends React.Component {
     if (!topic) {
       return;
     }
-    this.resetDesc(topic, this.props);
+    this.resetDesc(topic);
 
     if (this.previousMetaDesc && this.previousMetaDesc != this.onMetaDesc) {
       this.previousMetaDesc(desc);

src/widgets/call-panel.jsx

@@ -421,14 +421,14 @@ class CallPanel extends React.PureComponent {
         <div id="video-container">
           <div id="video-container-panel">
             <div className="call-party self">
-              <video ref={this.localRef} autoPlay muted playsInline></video>
+              <video ref={this.localRef} autoPlay muted playsInline />
               <div className="caller-name inactive">
                 <FormattedMessage id="calls_you_label"
                   defaultMessage="You" description="Shown over the local video screen" />
               </div>
             </div>
             <div className="call-party peer">
-              <video ref={this.remoteRef} autoPlay playsInline></video>
+              <video ref={this.remoteRef} autoPlay playsInline />
               {remoteActive ?
                 <div className="caller-name inactive">{peerTitle}</div> :
                 <div className={`caller-card${pulseAnimation}`}>

src/widgets/image-preview.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import SendMessage from '../widgets/send-message.jsx';
+import SendMessage from './send-message.jsx';
 
 import { REM_SIZE } from '../config.js';
 import { fitImageSize } from '../lib/blob-helpers.js';

src/widgets/inline-video.jsx

@@ -0,0 +1,22 @@
+// Element which shows static video preview:
+// an image with duration and a play button in the middle.
+
+import React from 'react';
+
+export default class InlineVideo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="inline-image video">
+        {React.createElement('img', this.props)}
+        <div className="play-control">
+          <i class="material-icons white bigger">play_arrow</i>
+        </div>
+        <div className="duration">1:12:45</div>
+      </div>
+    );
+  }
+};

src/widgets/send-message.jsx

@@ -284,7 +284,7 @@ class SendMessage extends React.PureComponent {
               }
               <input type="file" ref={ref => {this.attachFile = ref}}
                 onChange={this.handleAttachFile} style={{display: 'none'}} />
-              <input type="file" ref={ref => {this.attachImage = ref}} accept="image/*"
+              <input type="file" ref={ref => {this.attachImage = ref}} accept="image/*, video/*"
                 onChange={this.handleAttachImage} style={{display: 'none'}} />
             </>
             :

src/widgets/uploading-image.jsx

@@ -1,6 +1,5 @@
 // Image view with progress bar and a cancel button.
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import FileProgress from './file-progress.jsx';
 

src/widgets/video-preview.jsx

@@ -0,0 +1,60 @@
+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>
+    );
+  }
+};