fix display of broken videos

src/lib/formatters.js

@@ -236,8 +236,6 @@ function handleVideoData(el, data, attr) {
     if (data.ref || data.val) {
       attr.onClick = this.onVideoPreview;
       attr.loading = 'lazy';
-    } else {
-      attr.src = null;
     }
     el = InlineVideo;
   } else {

src/widgets/inline-video.jsx

@@ -27,11 +27,12 @@ export default class InlineVideo extends React.PureComponent {
     return (
       <div className={className}>
         {React.createElement('img', this.props)}
+        <div className="play-control">
         {this.props.onClick ?
-          <div className="play-control">
+          <i className="material-icons white bigger">play_arrow</i>
-            <i className="material-icons white bigger">play_arrow</i>
+          :
-          </div>
+          <img src="img/broken_video.png" width="36" height="36" />}
-          : null}
+        </div>
         {duration ? <div className="duration">{duration}</div> : null}
       </div>
     );

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 {
@@ -13586,11 +13584,15 @@ 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",
+      width: "36",
+      height: "36"
+    })), duration ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "duration"
     }, duration) : null);
   }

umd/tinode.dev.js

@@ -1697,19 +1697,20 @@ const DECORATORS = {
   VD: {
     open: data => {
       const tmpPreviewUrl = base64toDataUrl(data._tempPreview, data.mime);
-      const previewUrl = data.ref || base64toObjectUrl(data.preview, data.premime || 'image/json', Drafty.logger);
+      const previewUrl = data.ref || base64toObjectUrl(data.preview, data.premime || 'image/jpeg', Drafty.logger);
       return '<img src="' + (tmpPreviewUrl || previewUrl) + '"' + (data.width ? ' width="' + data.width + '"' : '') + (data.height ? ' height="' + data.height + '"' : '') + ' border="0" />';
     },
     close: _ => '',
     props: data => {
       if (!data) return null;
+      const poster = data.preref || base64toObjectUrl(data.preview, data.premime || 'image/jpeg', Drafty.logger);
       return {
-        src: data.preref || base64toObjectUrl(data.preview, data.premime || 'image/json', Drafty.logger),
+        src: poster,
         'data-src': data.ref || base64toObjectUrl(data.val, data.mime, Drafty.logger),
         'data-width': data.width,
         'data-height': data.height,
         'data-preload': data.ref ? 'metadata' : 'auto',
-        'data-preview': base64toObjectUrl(data.preview, data.premime || 'image/json', Drafty.logger),
+        'data-preview': poster,
         'data-duration': data.duration | 0,
         'data-name': data.name,
         'data-size': data.val ? data.val.length * 0.75 | 0 : data.size | 0,