fix issues with video uploading and display

src/lib/utils.js

@@ -172,6 +172,7 @@ export function deliveryMarker(received) {
     case Tinode.MESSAGE_STATUS_SENDING:
       return { name: 'access_time' }; // watch face
     case Tinode.MESSAGE_STATUS_FAILED:
+    case Tinode.MESSAGE_STATUS_FATAL:
       return { name: 'warning', color: 'danger-color' }; // yellow icon /!\
     case Tinode.MESSAGE_STATUS_SENT:
       return { name: 'done' }; // checkmark

src/views/messages-view.jsx

@@ -457,24 +457,24 @@ class MessagesView extends React.Component {
           this.setState({topic: ctrl.topic});
         }
         this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
-        // If there are unsent messages (except video call messages),
+        // If there are unsent messages (except hard-failed and video call messages),
-        // try sending them now. Unsent video call messages will be dropped.
+        // try sending them now. Hard-failed and unsent video call messages will be dropped.
-        let calls = [];
+        let discard = [];
-        topic.queuedMessages((pub) => {
+        topic.queuedMessages(pub => {
           if (pub._sending) {
             return;
           }
-          if (pub.head && pub.head.webrtc) {
+          if (pub._fatal || (pub.head && pub.head.webrtc)) {
-            // Filter out unsent video call messages.
+            // Filter out unsent failed & video call messages.
-            calls.push(pub.seq);
+            discard.push(pub.seq);
             return;
           }
           if (topic.isSubscribed()) {
             this.retrySend(pub);
           }
         });
-        if (calls.length > 0) {
+        if (discard.length > 0) {
-          topic.delMessagesList(calls, true);
+          topic.delMessagesList(discard, true);
         }
       })
       .catch(err => {
@@ -1057,8 +1057,8 @@ class MessagesView extends React.Component {
     // Small preview to show while uploading.
     b64conv[2] = imageScaled(previewBlob, VIDEO_PREVIEW_DIM, VIDEO_PREVIEW_DIM, -1, false)
       .then(scaled => blobToBase64(scaled.blob));
+    // Convert tiny image into base64 for serialization and previewing.
     Promise.all(b64conv)
-      // Convert tiny image into base64 for serialization and previewing.
       .then(b64s => {
         const [video, img, preview] = b64s;
         let msg = Drafty.insertVideo(null, 0, {
@@ -1074,6 +1074,7 @@ class MessagesView extends React.Component {
           size: videoBlob.size,
           urlPromise: uploadCompletionPromise
         });
+
         if (caption) {
           msg = Drafty.appendLineBreak(msg);
           msg = Drafty.append(msg, Drafty.parse(caption));

src/widgets/chat-message.jsx

@@ -93,7 +93,7 @@ class BaseChatMessage extends React.PureComponent {
     if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
       menuItems.push('menu_item_send_retry');
     }
-    if (this.props.userIsWriter && this.props.received > Tinode.MESSAGE_STATUS_FAILED) {
+    if (this.props.userIsWriter && this.props.received > Tinode.MESSAGE_STATUS_FATAL) {
       menuItems.push('menu_item_reply');
       if (!this.props.response) {
         let immutable = false;

src/widgets/inline-video.jsx

@@ -31,7 +31,7 @@ export default class InlineVideo extends React.PureComponent {
         {this.props.onClick ?
           <i className="material-icons white bigger">play_arrow</i>
           :
-          <img src="img/broken_video.png" width="36" height="36" />}
+          <img src="img/broken_video.png" style={{filter: 'invert(100%)'}} width="36" height="36" />}
         </div>
         {duration ? <div className="duration">{duration}</div> : null}
       </div>

src/widgets/received-marker.jsx

@@ -30,7 +30,8 @@ class ReceivedMarker extends React.PureComponent {
     let timestamp;
     if (this.props.received <= Tinode.MESSAGE_STATUS_SENDING) {
       timestamp = formatMessage(messages.message_sending);
-    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
+    } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED ||
+        this.props.received == Tinode.MESSAGE_STATUS_FATAL) {
       timestamp = formatMessage(messages.message_sending_failed);
     } else {
       timestamp = this.props.timestamp.toLocaleTimeString(this.props.intl.locale, { timeStyle: 'short' });

umd/index.dev.js

@@ -2828,8 +2828,6 @@ function handleVideoData(el, data, attr) {
     if (data.ref || data.val) {
       attr.onClick = this.onVideoPreview;
       attr.loading = 'lazy';
-    } else {
-      attr.src = null;
     }
     el = _widgets_inline_video_jsx__WEBPACK_IMPORTED_MODULE_6__["default"];
   } else {
@@ -3522,6 +3520,7 @@ function deliveryMarker(received) {
         name: 'access_time'
       };
     case tinode_sdk__WEBPACK_IMPORTED_MODULE_0__.Tinode.MESSAGE_STATUS_FAILED:
+    case tinode_sdk__WEBPACK_IMPORTED_MODULE_0__.Tinode.MESSAGE_STATUS_FATAL:
       return {
         name: 'warning',
         color: 'danger-color'
@@ -5882,21 +5881,21 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         });
       }
       this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
-      let calls = [];
+      let discard = [];
       topic.queuedMessages(pub => {
         if (pub._sending) {
           return;
         }
-        if (pub.head && pub.head.webrtc) {
+        if (pub._fatal || pub.head && pub.head.webrtc) {
-          calls.push(pub.seq);
+          discard.push(pub.seq);
           return;
         }
         if (topic.isSubscribed()) {
           this.retrySend(pub);
         }
       });
-      if (calls.length > 0) {
+      if (discard.length > 0) {
-        topic.delMessagesList(calls, true);
+        topic.delMessagesList(discard, true);
       }
     }).catch(err => {
       console.error("Failed subscription to", this.state.topic, err);
@@ -11478,7 +11477,7 @@ class BaseChatMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pure
     if (this.props.received == tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FAILED) {
       menuItems.push('menu_item_send_retry');
     }
-    if (this.props.userIsWriter && this.props.received > tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FAILED) {
+    if (this.props.userIsWriter && this.props.received > tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FATAL) {
       menuItems.push('menu_item_reply');
       if (!this.props.response) {
         let immutable = false;
@@ -14032,11 +14031,18 @@ class InlineVideo extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
     const className = 'inline-video' + (this.props.onClick ? ' image-clickable' : '');
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: className
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement('img', this.props), this.props.onClick ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement('img', this.props), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "play-control"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
+    }, this.props.onClick ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons white bigger"
-    }, "play_arrow")) : null, duration ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }, "play_arrow") : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
+      src: "img/broken_video.png",
+      style: {
+        filter: 'invert(100%)'
+      },
+      width: "36",
+      height: "36"
+    })), duration ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "duration"
     }, duration) : null);
   }
@@ -15111,7 +15117,7 @@ class ReceivedMarker extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     let timestamp;
     if (this.props.received <= tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_SENDING) {
       timestamp = formatMessage(messages.message_sending);
-    } else if (this.props.received == tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FAILED) {
+    } else if (this.props.received == tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FAILED || this.props.received == tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Tinode.MESSAGE_STATUS_FATAL) {
       timestamp = formatMessage(messages.message_sending_failed);
     } else {
       timestamp = this.props.timestamp.toLocaleTimeString(this.props.intl.locale, {