Fix audio messages in channels

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;

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");

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>

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");