scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-03 12:37:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add video message viewer in agent widget bubble (#9691)

Browse Source 
Fixes https://linear.app/chatwoot/issue/CW-3384/video-message-display-issue
This commit is contained in:
Sivin Varghese
2024-06-29 01:21:27 +05:30
committed by GitHub
parent 97de283103
commit 2c94c89077
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/widget/components/AgentMessage.vue
View File

@@ -30,7 +30,7 @@
/> />
<div <div
v-if="hasAttachments" v-if="hasAttachments"
class="chat-bubble has-attachment agent" class="chat-bubble has-attachment space-y-2 agent"
:class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))" :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
> >
<div <div
@@ -44,6 +44,14 @@
:readable-time="readableTime" :readable-time="readableTime"
@error="onImageLoadError" @error="onImageLoadError"
/> />
<video-bubble
v-if="attachment.file_type === 'video' && !hasVideoError"
:url="attachment.data_url"
:readable-time="readableTime"
@error="onVideoLoadError"
/>
<audio v-else-if="attachment.file_type === 'audio'" controls> <audio v-else-if="attachment.file_type === 'audio'" controls>
<source :src="attachment.data_url" /> <source :src="attachment.data_url" />
</audio> </audio>
@@ -84,6 +92,7 @@ import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
import MessageReplyButton from 'widget/components/MessageReplyButton.vue'; import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
import timeMixin from 'dashboard/mixins/time'; import timeMixin from 'dashboard/mixins/time';
import ImageBubble from 'widget/components/ImageBubble.vue'; import ImageBubble from 'widget/components/ImageBubble.vue';
import VideoBubble from 'widget/components/VideoBubble.vue';
import FileBubble from 'widget/components/FileBubble.vue'; import FileBubble from 'widget/components/FileBubble.vue';
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import { MESSAGE_TYPE } from 'widget/helpers/constants'; import { MESSAGE_TYPE } from 'widget/helpers/constants';
@@ -100,6 +109,7 @@ export default {
components: { components: {
AgentMessageBubble, AgentMessageBubble,
ImageBubble, ImageBubble,
VideoBubble,
Thumbnail, Thumbnail,
UserMessage, UserMessage,
FileBubble, FileBubble,
@@ -120,6 +130,7 @@ export default {
data() { data() {
return { return {
hasImageError: false, hasImageError: false,
hasVideoError: false,
}; };
}, },
computed: { computed: {
@@ -215,15 +226,20 @@ export default {
watch: { watch: {
message() { message() {
this.hasImageError = false; this.hasImageError = false;
this.hasVideoError = false;
}, },
}, },
mounted() { mounted() {
this.hasImageError = false; this.hasImageError = false;
this.hasVideoError = false;
}, },
methods: { methods: {
onImageLoadError() { onImageLoadError() {
this.hasImageError = true; this.hasImageError = true;
}, },
onVideoLoadError() {
this.hasVideoError = true;
},
toggleReply() { toggleReply() {
emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message); emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
}, },