replies to video recordings work

README.md

@@ -58,7 +58,9 @@ More translations are welcome. See [instructions](https://github.com/tinode/chat
 * End-to-End encryption.
 * Emoji support is weak.
 * Mentions, hashtags.
-* Previews not generated for videos, links or docs.
+* Previews not generated for links and docs.
+* Location and contact sharing.
+* Recording video messages.
 
 ## Other
 

css/base.css

@@ -1990,7 +1990,6 @@ video {
 
 /* Inline and preview image styles */
 .inline-image, .image-preview {
-  display: flex;
   position: relative;
   overflow: hidden;
   border-radius: 0.1rem;

src/config.js

@@ -81,6 +81,8 @@ export const VIDEO_PREVIEW_DIM = 96;
 
 // Linear dimensions of image thumbnail: shrink image under this size for thumbnails in reply quote previews.
 export const IMAGE_THUMBNAIL_DIM = 36;
+// Width of video thumbnail: allow it to be wider, but not taller. Use IMAGE_THUMBNAIL_DIM for height.
+export const VIDEO_THUMBNAIL_WIDTH = 48;
 
 // Maximum number of online users to be shown in a topic title bar. Others will be
 // hidden under "+X more"

src/lib/formatters.js

@@ -10,7 +10,7 @@ import InlineVideo from '../widgets/inline-video.jsx';
 import LazyImage from '../widgets/lazy-image.jsx'
 import UploadingImage from '../widgets/uploading-image.jsx'
 
-import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
+import { BROKEN_IMAGE_SIZE, IMAGE_THUMBNAIL_DIM, REM_SIZE, VIDEO_THUMBNAIL_WIDTH } from '../config.js';
 import { base64ToBlob, blobToBase64, fitImageSize, imageScaled } from './blob-helpers.js';
 import { idToColorClass, secondsToTime, shortenFileName } from './strformat.js';
 import { cancelablePromise, sanitizeUrlForMime } from './utils.js';
@@ -363,12 +363,21 @@ function inlineImageAttr(attr, data) {
 
 // Converts Drafty object into a quoted reply; 'this' is set by the caller.
 function inlineVideoAttr(attr, data) {
-  inlineImageAttr.call(this, attr, data);
+  const dim = fitImageSize(data.width, data.height, VIDEO_THUMBNAIL_WIDTH, IMAGE_THUMBNAIL_DIM);
+  attr.style = {
+    width: dim.width + 'px',
+    height: dim.height + 'px',
+    maxWidth: VIDEO_THUMBNAIL_WIDTH + 'px',
+    maxHeight: IMAGE_THUMBNAIL_DIM + 'px',
+  }
   attr.alt = this.formatMessage(messages.drafty_video);
+  attr.className = 'inline-image';
   attr.title = attr.alt;
   if (!data) {
     attr.src = 'img/broken_video.png';
   }
+  // React requires this parameter to be lowercase and string.
+  attr.isvideo = 'T';
   return attr;
 }
 
@@ -379,7 +388,7 @@ function inlineVideoAttr(attr, data) {
 //    authorizeURL: this.props.tinode.authorizeURL
 //    onQuoteClick: this.handleQuoteClick (optional)
 function quoteFormatter(style, data, values, key) {
-  if (['BR', 'EX', 'IM', 'MN'].includes(style)) {
+  if (['BR', 'EX', 'IM', 'MN', 'VD'].includes(style)) {
     let el = Drafty.tagName(style);
     let attr = Drafty.attrValue(style, data) || {};
     attr.key = key;
@@ -431,17 +440,27 @@ function quoteFormatter(style, data, values, key) {
 }
 
 // Create image thumbnail suitable for inclusion in a quote.
-function quoteImage(data) {
+function quoteImageOrVideo(data, isVideo) {
   let promise;
+  let bits, ref, mime;
+  if (isVideo) {
+    bits = data.preview;
+    mime = data.premime || 'image/jpeg';
+    ref = data.preref;
+  } else {
+    bits = data.val;
+    mime = data.mime;
+    ref = data.ref;
+  }
   // Get the blob from the image data.
-  if (data.val) {
+  if (bits) {
-    const blob = base64ToBlob(data.val, data.mime);
+    const blob = base64ToBlob(bits, mime);
     if (!blob) {
       throw new Error("Invalid image");
     }
     promise = Promise.resolve(blob);
-  } else if (data.ref) {
+  } else if (ref) {
-    promise = fetch(this.authorizeURL(sanitizeUrlForMime(data.ref, 'image')))
+    promise = fetch(this.authorizeURL(sanitizeUrlForMime(ref, 'image')))
       .then(evt => {
         if (evt.ok) {
           return evt.blob();
@@ -456,23 +475,34 @@ function quoteImage(data) {
   // Scale the blob.
   return promise
     .then(blob => {
-      // Cut the square from the center of the image and shrink it.
+      // If it's an image, cut the square from the center of the image and shrink it.
-      return imageScaled(blob, IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, true)
+      // If it's a video, allow it to be rectantular.
+      return imageScaled(blob, isVideo ? VIDEO_THUMBNAIL_WIDTH : IMAGE_THUMBNAIL_DIM, IMAGE_THUMBNAIL_DIM, -1, !isVideo)
     }).then(scaled => {
-      data.mime = scaled.mime;
+      if (isVideo) {
+        data.premime = scaled.mime;
+      } else {
+        data.mime = scaled.mime;
+      }
       data.size = scaled.blob.size;
       data.width = scaled.width;
       data.height = scaled.height;
       delete data.ref;
+      delete data.preref;
       // Keeping the original file name, if provided: ex.data.name;
 
       data.src = URL.createObjectURL(scaled.blob);
       return blobToBase64(scaled.blob);
     }).then(b64 => {
-      data.val = b64.bits;
+      if (isVideo) {
+        data.preview = b64.bits;
+      } else {
+        data.val = b64.bits;
+      }
       return data;
     }).catch(err => {
       delete data.val;
+      delete data.preview;
       delete data.src;
       data.width = IMAGE_THUMBNAIL_DIM;
       data.height = IMAGE_THUMBNAIL_DIM;
@@ -484,13 +514,15 @@ function quoteImage(data) {
 // Create a preview of a reply.
 export function replyFormatter(style, data, values, key, stack) {
   if (style == 'IM' || style == 'VD') {
-    const attr = style == 'IM' ? inlineImageAttr.call(this, {key: key}, data) :
+    const isImage = style == 'IM';
+    const attr = isImage ? inlineImageAttr.call(this, {key: key}, data) :
       inlineVideoAttr.call(this, {key: key}, data);
+
     let loadedPromise;
     try {
-      loadedPromise = cancelablePromise(quoteImage.call(this, data));
+      loadedPromise = cancelablePromise(quoteImageOrVideo.call(this, data, style == 'VD'));
     } catch (error) {
-      console.error("Failed to quote image", error);
+      console.warn("Failed to quote image:", error.message);
       loadedPromise = cancelablePromise(error);
     }
     attr.whenDone = loadedPromise;

src/widgets/lazy-image.jsx

@@ -6,7 +6,7 @@ export default class LazyImage extends React.PureComponent {
     super(props);
 
     this.state = {
-      src: 'img/placeholder.png',
+      src: this.props.isvideo ? 'img/blankvid.png' : 'img/blankimg.png',
       style: Object.assign({padding: '4px'}, this.props.style),
       className: this.props.className,
       alt: this.props.alt,
@@ -19,7 +19,7 @@ export default class LazyImage extends React.PureComponent {
     this.props.whenDone
       .promise
       .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
-      .catch(_ => this.setState({src: 'img/broken_image.png'}));
+      .catch(_ => this.setState({src: this.props.isvideo ? 'img/broken_video.png' : 'img/broken_image.png'}));
   }
 
   componentWillUnmount() {
@@ -28,11 +28,11 @@ export default class LazyImage extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (prevProps.whenDone != this.props.whenDone) {
-      this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});
+      this.setState({src: this.props.isvideo ? 'img/blankvid.png' : 'img/blankimg.png', style: {...this.state.style, padding: '4px'}});
       this.props.whenDone
         .promise
         .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
-        .catch(_ => this.setState({src: 'img/broken_image.png'}));
+        .catch(_ => this.setState({src: this.props.isvideo ? 'img/broken_video.png' : 'img/broken_image.png'}));
     }
   }
 

umd/index.dev.js

@@ -2193,7 +2193,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "QUOTED_REPLY_LENGTH": () => (/* binding */ QUOTED_REPLY_LENGTH),
 /* harmony export */   "READ_DELAY": () => (/* binding */ READ_DELAY),
 /* harmony export */   "REM_SIZE": () => (/* binding */ REM_SIZE),
-/* harmony export */   "VIDEO_PREVIEW_DIM": () => (/* binding */ VIDEO_PREVIEW_DIM)
+/* harmony export */   "VIDEO_PREVIEW_DIM": () => (/* binding */ VIDEO_PREVIEW_DIM),
+/* harmony export */   "VIDEO_THUMBNAIL_WIDTH": () => (/* binding */ VIDEO_THUMBNAIL_WIDTH)
 /* harmony export */ });
 /* harmony import */ var _version_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./version.js */ "./src/version.js");
 
@@ -2226,6 +2227,7 @@ const MAX_IMAGE_DIM = 1024;
 const IMAGE_PREVIEW_DIM = 64;
 const VIDEO_PREVIEW_DIM = 96;
 const IMAGE_THUMBNAIL_DIM = 36;
+const VIDEO_THUMBNAIL_WIDTH = 48;
 const MAX_ONLINE_IN_TOPIC = 4;
 const MAX_TITLE_LENGTH = 60;
 const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
@@ -2912,16 +2914,24 @@ function inlineImageAttr(attr, data) {
   return attr;
 }
 function inlineVideoAttr(attr, data) {
-  inlineImageAttr.call(this, attr, data);
+  const dim = (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.fitImageSize)(data.width, data.height, _config_js__WEBPACK_IMPORTED_MODULE_9__.VIDEO_THUMBNAIL_WIDTH, _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM);
+  attr.style = {
+    width: dim.width + 'px',
+    height: dim.height + 'px',
+    maxWidth: _config_js__WEBPACK_IMPORTED_MODULE_9__.VIDEO_THUMBNAIL_WIDTH + 'px',
+    maxHeight: _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM + 'px'
+  };
   attr.alt = this.formatMessage(messages.drafty_video);
+  attr.className = 'inline-image';
   attr.title = attr.alt;
   if (!data) {
     attr.src = 'img/broken_video.png';
   }
+  attr.isvideo = 'T';
   return attr;
 }
 function quoteFormatter(style, data, values, key) {
-  if (['BR', 'EX', 'IM', 'MN'].includes(style)) {
+  if (['BR', 'EX', 'IM', 'MN', 'VD'].includes(style)) {
     let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style);
     let attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attrValue(style, data) || {};
     attr.key = key;
@@ -2973,16 +2983,26 @@ function quoteFormatter(style, data, values, key) {
   }
   return previewFormatter.call(this, style, data, values, key);
 }
-function quoteImage(data) {
+function quoteImageOrVideo(data, isVideo) {
   let promise;
-  if (data.val) {
+  let bits, ref, mime;
-    const blob = (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.base64ToBlob)(data.val, data.mime);
+  if (isVideo) {
+    bits = data.preview;
+    mime = data.premime || 'image/jpeg';
+    ref = data.preref;
+  } else {
+    bits = data.val;
+    mime = data.mime;
+    ref = data.ref;
+  }
+  if (bits) {
+    const blob = (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.base64ToBlob)(bits, mime);
     if (!blob) {
       throw new Error("Invalid image");
     }
     promise = Promise.resolve(blob);
-  } else if (data.ref) {
+  } else if (ref) {
-    promise = fetch(this.authorizeURL((0,_utils_js__WEBPACK_IMPORTED_MODULE_12__.sanitizeUrlForMime)(data.ref, 'image'))).then(evt => {
+    promise = fetch(this.authorizeURL((0,_utils_js__WEBPACK_IMPORTED_MODULE_12__.sanitizeUrlForMime)(ref, 'image'))).then(evt => {
       if (evt.ok) {
         return evt.blob();
       } else {
@@ -2993,20 +3013,30 @@ function quoteImage(data) {
     throw new Error("Missing image data");
   }
   return promise.then(blob => {
-    return (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.imageScaled)(blob, _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM, _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM, -1, true);
+    return (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.imageScaled)(blob, isVideo ? _config_js__WEBPACK_IMPORTED_MODULE_9__.VIDEO_THUMBNAIL_WIDTH : _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM, _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM, -1, !isVideo);
   }).then(scaled => {
-    data.mime = scaled.mime;
+    if (isVideo) {
+      data.premime = scaled.mime;
+    } else {
+      data.mime = scaled.mime;
+    }
     data.size = scaled.blob.size;
     data.width = scaled.width;
     data.height = scaled.height;
     delete data.ref;
+    delete data.preref;
     data.src = URL.createObjectURL(scaled.blob);
     return (0,_blob_helpers_js__WEBPACK_IMPORTED_MODULE_10__.blobToBase64)(scaled.blob);
   }).then(b64 => {
-    data.val = b64.bits;
+    if (isVideo) {
+      data.preview = b64.bits;
+    } else {
+      data.val = b64.bits;
+    }
     return data;
   }).catch(err => {
     delete data.val;
+    delete data.preview;
     delete data.src;
     data.width = _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM;
     data.height = _config_js__WEBPACK_IMPORTED_MODULE_9__.IMAGE_THUMBNAIL_DIM;
@@ -3015,16 +3045,17 @@ function quoteImage(data) {
 }
 function replyFormatter(style, data, values, key, stack) {
   if (style == 'IM' || style == 'VD') {
-    const attr = style == 'IM' ? inlineImageAttr.call(this, {
+    const isImage = style == 'IM';
+    const attr = isImage ? inlineImageAttr.call(this, {
       key: key
     }, data) : inlineVideoAttr.call(this, {
       key: key
     }, data);
     let loadedPromise;
     try {
-      loadedPromise = (0,_utils_js__WEBPACK_IMPORTED_MODULE_12__.cancelablePromise)(quoteImage.call(this, data));
+      loadedPromise = (0,_utils_js__WEBPACK_IMPORTED_MODULE_12__.cancelablePromise)(quoteImageOrVideo.call(this, data, style == 'VD'));
     } catch (error) {
-      console.error("Failed to quote image", error);
+      console.warn("Failed to quote image:", error.message);
       loadedPromise = (0,_utils_js__WEBPACK_IMPORTED_MODULE_12__.cancelablePromise)(error);
     }
     attr.whenDone = loadedPromise;
@@ -13839,7 +13870,7 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
   constructor(props) {
     super(props);
     this.state = {
-      src: 'img/placeholder.png',
+      src: this.props.isvideo ? 'img/blankvid.png' : 'img/blankimg.png',
       style: Object.assign({
         padding: '4px'
       }, this.props.style),
@@ -13856,7 +13887,7 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
         padding: 0
       }
     })).catch(_ => this.setState({
-      src: 'img/broken_image.png'
+      src: this.props.isvideo ? 'img/broken_video.png' : 'img/broken_image.png'
     }));
   }
   componentWillUnmount() {
@@ -13865,7 +13896,7 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
   componentDidUpdate(prevProps) {
     if (prevProps.whenDone != this.props.whenDone) {
       this.setState({
-        src: 'img/placeholder.png',
+        src: this.props.isvideo ? 'img/blankvid.png' : 'img/blankimg.png',
         style: {
           ...this.state.style,
           padding: '4px'
@@ -13878,7 +13909,7 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
           padding: 0
         }
       })).catch(_ => this.setState({
-        src: 'img/broken_image.png'
+        src: this.props.isvideo ? 'img/broken_video.png' : 'img/broken_image.png'
       }));
     }
   }