feat: Add video preview & player in conversation (#3201)

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -181,7 +181,8 @@ export default {
   }
 }
 
-.is-image {
+.is-image,
+.is-video {
   .message-text--metadata {
     .time {
       bottom: var(--space-smaller);
@@ -206,7 +207,8 @@ export default {
     }
   }
 
-  &.is-image {
+  &.is-image,
+  &.is-video {
     .time {
       position: inherit;
       padding-left: var(--space-one);

app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="video message-text__wrap">
+    <video :src="url" muted playsInline @click="onClick" />
+    <woot-modal :show.sync="show" :on-close="onClose">
+      <video :src="url" controls playsInline class="modal-video" />
+    </woot-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+    onClick() {
+      this.show = true;
+    },
+  },
+};
+</script>