From 8f3234cf4bbab7c170e4cd8d0a8097e1709b2c9b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 27 Jun 2024 01:51:41 +0530
Subject: [PATCH] feat: Add video message viewing in to the user bubble in
 widget (#9642)

---
 .../widget/components/UserMessage.vue         | 16 +++++++++++
 .../widget/components/VideoBubble.vue         | 27 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 app/javascript/widget/components/VideoBubble.vue

diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 0631b2f90..5a97422db 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -39,6 +39,14 @@
                   :readable-time="readableTime"
                   @error="onImageLoadError"
                 />
+
+                <video-bubble
+                  v-if="attachment.file_type === 'video' && !hasVideoError"
+                  :url="attachment.data_url"
+                  :readable-time="readableTime"
+                  @error="onVideoLoadError"
+                />
+
                 <file-bubble
                   v-else
                   :url="attachment.data_url"
@@ -72,6 +80,7 @@
 import UserMessageBubble from 'widget/components/UserMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
 import ImageBubble from 'widget/components/ImageBubble.vue';
+import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import timeMixin from 'dashboard/mixins/time';
@@ -88,6 +97,7 @@ export default {
     UserMessageBubble,
     MessageReplyButton,
     ImageBubble,
+    VideoBubble,
     FileBubble,
     FluentIcon,
     ReplyToChip,
@@ -107,6 +117,7 @@ export default {
   data() {
     return {
       hasImageError: false,
+      hasVideoError: false,
     };
   },
   computed: {
@@ -143,10 +154,12 @@ export default {
   watch: {
     message() {
       this.hasImageError = false;
+      this.hasVideoError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
+    this.hasVideoError = false;
   },
   methods: {
     async retrySendMessage() {
@@ -158,6 +171,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    onVideoLoadError() {
+      this.hasVideoError = true;
+    },
     toggleReply() {
       this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
     },
diff --git a/app/javascript/widget/components/VideoBubble.vue b/app/javascript/widget/components/VideoBubble.vue
new file mode 100644
index 000000000..0ba72d363
--- /dev/null
+++ b/app/javascript/widget/components/VideoBubble.vue
@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+  url: { type: String, default: '' },
+  readableTime: { type: String, default: '' },
+});
+
+const emits = defineEmits(['error']);
+
+const onVideoError = () => {
+  emits('error');
+};
+</script>
+<template>
+  <div class="block relative max-w-full">
+    <video
+      class="w-full max-w-[250px] h-auto"
+      :src="url"
+      controls
+      @error="onVideoError"
+    />
+    <span
+      class="text-xs absolute text-white dark:text-white right-3 bottom-1 whitespace-nowrap"
+    >
+      {{ readableTime }}
+    </span>
+  </div>
+</template>