pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix issues with video uploading and display

Browse Source
This commit is contained in:
or-else
2023-02-06 09:58:56 -08:00
parent 7b44913724
commit e1b1ae503f
9 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/utils.js
+1
View File
@@ -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
+11 -10
View File
@@ -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),
// try sending them now. Unsent video call messages will be dropped.
let calls = [];
topic.queuedMessages((pub) => {
// If there are unsent messages (except hard-failed and video call messages),
// try sending them now. Hard-failed and unsent video call messages will be dropped.
let discard = [];
topic.queuedMessages(pub => {
if (pub._sending) {
return;
}
if (pub.head && pub.head.webrtc) {
// Filter out unsent video call messages.
calls.push(pub.seq);
if (pub._fatal || (pub.head && pub.head.webrtc)) {
// Filter out unsent failed & video call messages.
discard.push(pub.seq);
return;
}
if (topic.isSubscribed()) {
this.retrySend(pub);
}
});
if (calls.length > 0) {
topic.delMessagesList(calls, true);
if (discard.length > 0) {
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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -1
View File
@@ -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
+18 -12
View File
@@ -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) {
calls.push(pub.seq);
if (pub._fatal || pub.head && pub.head.webrtc) {
discard.push(pub.seq);
return;
}
if (topic.isSubscribed()) {
this.retrySend(pub);
}
});
if (calls.length > 0) {
topic.delMessagesList(calls, true);
if (discard.length > 0) {
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, {
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long