fix: Update Instagram story rendering (#8240)

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

@@ -114,10 +114,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    hasInstagramStory: {
-      type: Boolean,
-      default: true,
-    },
     messageType: {
       type: Number,
       default: 1,

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

@@ -1,6 +1,6 @@
 <template>
   <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="onImgError()" />
+    <img :src="url" @click="onClick" @error="$emit('error')" />
     <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
       <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
@@ -28,9 +28,6 @@ export default {
     onClick() {
       this.show = true;
     },
-    onImgError() {
-      this.$emit('error');
-    },
   },
 };
 </script>

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

@@ -4,13 +4,14 @@
       v-if="isImage && !isImageError"
       :src="attachment.data_url"
       @click="onClick"
-      @error="onImgError()"
+      @error="onImgError"
     />
     <video
       v-if="isVideo"
       :src="attachment.data_url"
       muted
       playsInline
+      @error="onImgError"
       @click="onClick"
     />
     <audio v-else-if="isAudio" controls class="skip-context-menu">
@@ -21,7 +22,7 @@
       :show.sync="show"
       :attachment="attachment"
       :all-attachments="filteredCurrentChatAttachments"
-      @error="onImgError()"
+      @error="onImgError"
       @close="onClose"
     />
   </div>

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

@@ -0,0 +1,51 @@
+<template>
+  <bubble-image
+    v-if="!hasImgStoryError"
+    :url="storyUrl"
+    @error="onImageLoadError"
+  />
+  <bubble-video
+    v-else-if="!hasVideoStoryError"
+    :url="storyUrl"
+    @error="onVideoLoadError"
+  />
+  <instagram-story-error-place-holder v-else />
+</template>
+<script>
+import BubbleImage from './Image.vue';
+import BubbleVideo from './Video.vue';
+import InstagramStoryErrorPlaceHolder from './InstagramStoryErrorPlaceHolder.vue';
+
+export default {
+  components: {
+    BubbleImage,
+    BubbleVideo,
+    InstagramStoryErrorPlaceHolder,
+  },
+  props: {
+    storyUrl: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImgStoryError: false,
+      hasVideoStoryError: false,
+    };
+  },
+  methods: {
+    onImageLoadError() {
+      this.hasImgStoryError = true;
+      this.emitError();
+    },
+    onVideoLoadError() {
+      this.hasVideoStoryError = true;
+      this.emitError();
+    },
+    emitError() {
+      this.$emit('error');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="flex items-center justify-center px-8 h-28 w-full bg-slate-100 text-slate-700 dark:bg-slate-500 dark:text-slate-75"
+  >
+    <fluent-icon icon="document-error" size="32" />
+    <p class="mb-0 text-slate-700 dark:text-slate-75">
+      {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+  <blockquote
+    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
+  >
+    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+    <instagram-story :story-url="storyUrl" class="mt-3 rounded-md" />
+  </blockquote>
+</template>
+<script>
+import InstagramStory from './InstagramStory.vue';
+
+export default {
+  components: { InstagramStory },
+  props: {
+    storyUrl: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImgStoryError: false,
+      hasVideoStoryError: false,
+    };
+  },
+  methods: {
+    onImageLoadError() {
+      this.hasImgStoryError = true;
+    },
+    onVideoLoadError() {
+      this.hasVideoStoryError = true;
+    },
+  },
+};
+</script>

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

@@ -1,12 +1,12 @@
 <template>
   <div class="video message-text__wrap">
-    <video :src="url" muted playsInline @click="onClick" />
+    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
     <woot-modal :show.sync="show" :on-close="onClose">
       <video
         :src="url"
         controls
         playsInline
-        class="modal-video skip-context-menu"
+        class="modal-video skip-context-menu mx-auto"
       />
     </woot-modal>
   </div>
@@ -25,6 +25,11 @@ export default {
       show: false,
     };
   },
+  mounted() {
+    this.$refs.videoElement.onerror = () => {
+      this.$emit('error');
+    };
+  },
   methods: {
     onClose() {
       this.show = false;