From 35b2dc60d7af29504720013b5d5573224b94cdef Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 17 Oct 2024 16:39:12 +0200
Subject: [PATCH] Fix audio messages in channels

---
 src/assets/css/channel.scss                       | 5 +++--
 src/components/messages/MessageIncomingThread.vue | 7 ++++++-
 src/components/messages/MessageOutgoingAudio.vue  | 2 +-
 src/components/messages/MessageOutgoingThread.vue | 7 ++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss
index 48644fb..6538043 100644
--- a/src/assets/css/channel.scss
+++ b/src/assets/css/channel.scss
@@ -82,7 +82,7 @@
       border-radius: 0 !important;
       padding: 0 15px 0 15px;
     }
-    .bubble.image-bubble {
+    .bubble.image-bubble, .bubble.audio-bubble {
         /* full bleed */
         padding: 0 0 0 0;
         border-radius: 0 !important;
@@ -115,6 +115,7 @@
 
   .audio-player {
     color: #1c1c31 !important;
+    padding: 0 8px;
     .currentColor {
       background-color: #000000 !important;
     }
@@ -152,7 +153,7 @@
     padding: 15px 40px 15px 60px;
     align-items: start;
     position: relative;
-    svg {
+    svg, .v-icon {
       position: absolute;
       top: 12px;
       left: 12px;
diff --git a/src/components/messages/MessageIncomingThread.vue b/src/components/messages/MessageIncomingThread.vue
index 62e15c0..0f4545d 100644
--- a/src/components/messages/MessageIncomingThread.vue
+++ b/src/components/messages/MessageIncomingThread.vue
@@ -1,5 +1,5 @@
 <template>
-  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
+  <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || forceMultiview">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -64,6 +64,11 @@ export default {
   beforeDestroy() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
+  computed: {
+    forceMultiview() {
+      return this.room.displayType == ROOM_TYPE_CHANNEL && this.items.length == 1 && util.isFileTypePDF(this.items[0].event);
+    }
+  },
   methods: {
     onRelationsCreated() {
       this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), util.threadMessageType(), "m.room.message");
diff --git a/src/components/messages/MessageOutgoingAudio.vue b/src/components/messages/MessageOutgoingAudio.vue
index b589b6d..70db51d 100644
--- a/src/components/messages/MessageOutgoingAudio.vue
+++ b/src/components/messages/MessageOutgoingAudio.vue
@@ -1,6 +1,6 @@
 <template>
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
-    <div class="audio-bubble">
+    <div class="bubble audio-bubble">
       <audio-player :event="event" :timelineSet="timelineSet">{{ $t('fallbacks.audio_file')}}</audio-player>
     </div>
   </message-outgoing>
diff --git a/src/components/messages/MessageOutgoingThread.vue b/src/components/messages/MessageOutgoingThread.vue
index 2736f5a..0785d94 100644
--- a/src/components/messages/MessageOutgoingThread.vue
+++ b/src/components/messages/MessageOutgoingThread.vue
@@ -1,5 +1,5 @@
 <template>
-  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || room.displayType == ROOM_TYPE_CHANNEL">
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners" v-if="items.length > 1 || event.isRedacted() || forceMultiview">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">{{ inReplyToSender }}</div>
@@ -65,6 +65,11 @@ export default {
   beforeDestroy() {
     this.event.off("Event.relationsCreated", this.onRelationsCreated);
   },
+  computed: {
+    forceMultiview() {
+      return this.room.displayType == ROOM_TYPE_CHANNEL && this.items.length == 1 && util.isFileTypePDF(this.items[0].event);
+    }
+  },
   methods: {
     onRelationsCreated() {
       this.thread = this.timelineSet.relations.getChildEventsForEvent(this.event.getId(), util.threadMessageType(), "m.room.message");