videos work but with bugs

2022-12-12 18:37:59 -08:00
parent a8d7e6be50
commit 24a87f3deb
8 changed files with 172 additions and 97 deletions
@@ -37,50 +37,6 @@ const messages = defineMessages({
  }
 });

-// Additional processing of image data.
-function handleImageData(el, data, attr) {
-  if (!data) {
-    attr.src = 'img/broken_image.png';
-    attr.style = {
-      width: IMAGE_THUMBNAIL_DIM + 'px',
-      height: IMAGE_THUMBNAIL_DIM + 'px',
-    };
-    return el;
-  }
-
-  attr.className = 'inline-image';
-  const dim = fitImageSize(data.width, data.height,
-    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
-      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
-      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
-  attr.style = {
-    width: dim.dstWidth + 'px',
-    height: dim.dstHeight + 'px',
-    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
-    minWidth: dim.dstWidth + 'px',
-    minHeight: dim.dstHeight + 'px'
-  };
-  if (!Drafty.isProcessing(data)) {
-    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'image'));
-    attr.alt = data.name;
-    if (attr.src) {
-      if (Math.max(data.width || 0, data.height || 0) > IMAGE_THUMBNAIL_DIM) {
-        // Allow previews for large enough images.
-        attr.onClick = this.onImagePreview;
-        attr.className += ' image-clickable';
-      }
-      attr.loading = 'lazy';
-    } else {
-      attr.src = 'img/broken_image.png';
-    }
-  } else {
-    // Use custom element instead of <img>.
-    el = UploadingImage;
-  }
-
-  return el;
-}
-
 // The main Drafty formatter: converts Drafty elements into React classes. 'this' is set by the caller.
 // 'this' must contain:
 //    viewportWidth: this.props.viewportWidth;
@@ -175,6 +131,12 @@ export function fullFormatter(style, data, values, key, stack) {
        attr.duration = data.duration;
      }
      break;
+    case 'VD':
+      // Additional processing for videos.
+      el = handleVideoData.call(this, el, data, attr);
+      // Video element cannot have content.
+      values = null;
+      break;
    default:
      if (!el) {
        // Unknown element.
@@ -195,6 +157,92 @@ export function fullFormatter(style, data, values, key, stack) {
  return React.createElement(el, attr, values);
 }

+// Additional processing of image data.
+function handleImageData(el, data, attr) {
+  if (!data) {
+    attr.src = 'img/broken_image.png';
+    attr.style = {
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
+    };
+    return el;
+  }
+
+  attr.className = 'inline-image';
+  const dim = fitImageSize(data.width, data.height,
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+  attr.style = {
+    width: dim.dstWidth + 'px',
+    height: dim.dstHeight + 'px',
+    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+    minWidth: dim.dstWidth + 'px',
+    minHeight: dim.dstHeight + 'px'
+  };
+  if (!Drafty.isProcessing(data)) {
+    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'image'));
+    attr.alt = data.name;
+    if (attr.src) {
+      if (Math.max(data.width || 0, data.height || 0) > IMAGE_THUMBNAIL_DIM) {
+        // Allow previews for large enough images.
+        attr.onClick = this.onImagePreview;
+        attr.className += ' image-clickable';
+      }
+      attr.loading = 'lazy';
+    } else {
+      attr.src = 'img/broken_image.png';
+    }
+  } else {
+    // Use custom element instead of <img>.
+    el = UploadingImage;
+  }
+
+  return el;
+}
+
+// Additional processing of image data.
+function handleVideoData(el, data, attr) {
+  if (!data) {
+    attr.src = 'img/broken_video.png';
+    attr.style = {
+      width: IMAGE_THUMBNAIL_DIM + 'px',
+      height: IMAGE_THUMBNAIL_DIM + 'px',
+    };
+    return el;
+  }
+
+  attr.className = 'inline-image';
+  const dim = fitImageSize(data.width, data.height,
+    this.viewportWidth > 0 ? Math.min(this.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5) :
+      REM_SIZE * 34.5, REM_SIZE * 24, false) ||
+      {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+  attr.style = {
+    width: dim.dstWidth + 'px',
+    height: dim.dstHeight + 'px',
+    // Looks like a Chrome bug: broken image does not respect 'width' and 'height'.
+    minWidth: dim.dstWidth + 'px',
+    minHeight: dim.dstHeight + 'px'
+  };
+  if (!Drafty.isProcessing(data)) {
+    attr.src = this.authorizeURL(sanitizeUrlForMime(attr.src, 'video'));
+    attr.alt = data.name;
+    if (attr.src) {
+      attr.onClick = this.onImagePreview;
+      attr.className += ' image-clickable';
+      attr.loading = 'lazy';
+      attr.controls = 'controls';
+    } else {
+      attr.src = 'img/broken_video.png';
+    }
+  } else {
+    // Use custom element instead of <img>.
+    el = UploadingImage;
+  }
+
+  return el;
+}
+
 // Converts Drafty object into a one-line preview. 'this' is set by the caller.
 // 'this' must contain:
 //    formatMessage: this.props.intl.formatMessage
@@ -937,7 +937,6 @@ class MessagesView extends React.Component {
      MAX_INBAND_ATTACHMENT_SIZE) * 0.75 - 1024) | 0;

    if (videoBlob.size > maxInbandAttachmentSize) {
-      console.log("1");
      // Too large to send inband - uploading out of band and sending as a link.
      const uploader = this.props.tinode.getLargeFileHelper();
      if (!uploader) {
@@ -945,13 +944,11 @@ class MessagesView extends React.Component {
        return;
      }
      const uploadCompletionPromise = uploader.upload(videoBlob);
-      console.log("2");
      // Make small preview to show while uploading.
      imageScaled(previewBlob, IMAGE_PREVIEW_DIM, IMAGE_PREVIEW_DIM, -1, false)
        // Convert tiny image into base64 for serialization and previewing.
        .then(scaled => blobToBase64(scaled.blob))
        .then(b64 => {
-            console.log("3");
            let msg = Drafty.insertVideo(null, 0, {
              mime: mime,
              _tempPreview: b64.bits, // This preview will not be serialized.
@@ -962,21 +959,17 @@ class MessagesView extends React.Component {
              size: videoBlob.size,
              urlPromise: uploadCompletionPromise
            });
-            console.log("4");
            if (caption) {
              msg = Drafty.appendLineBreak(msg);
              msg = Drafty.append(msg, Drafty.parse(caption));
            }
            // Pass data and the uploader to the TinodeWeb.
            this.sendMessage(msg, uploadCompletionPromise, uploader);
-            console.log("5");
        })
        .catch(err => /* this.props.onError(err, 'err') */ console.log(err));
      return;
    }

-    console.log("6");
-
    // Send the video inband if it's small enough.
    blobToBase64(videoBlob)
      .then(b64 => {