Better voice message layout

src/components/audio.ts

@@ -26,7 +26,7 @@ import { joinElementsWith } from "../lib/langPack";
 import { MiddleEllipsisElement } from "./middleEllipsis";
 import htmlToSpan from "../helpers/dom/htmlToSpan";
 import { formatFullSentTime } from "../helpers/date";
-import { formatBytes } from "../helpers/number";
+import { clamp, formatBytes } from "../helpers/number";
 import throttleWithRaf from "../helpers/schedulers/throttleWithRaf";
 
 rootScope.addEventListener('messages_media_read', ({mids, peerId}) => {
@@ -90,7 +90,12 @@ function wrapVoiceMessage(audioEl: AudioElement) {
   const barMargin = 2;      //mediaSizes.isMobile ? 2 : 1;
   const barHeightMin = 4;   //mediaSizes.isMobile ? 3 : 2;
   const barHeightMax = mediaSizes.isMobile ? 16 : 23;
-  const availW = 150;       //mediaSizes.isMobile ? 152 : 190;
+  // const availW = 150;       //mediaSizes.isMobile ? 152 : 190;
+
+  const minW = mediaSizes.isMobile ? 152 : 190;
+  const maxW = mediaSizes.isMobile ? 190 : 256;
+  const duration = doc.duration;
+  const availW = clamp(duration / 60 * maxW, minW, maxW); // mediaSizes.isMobile ? 152 : 224;
 
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.classList.add('audio-waveform');

src/components/chat/bubbles.ts

@@ -2479,6 +2479,13 @@ export default class ChatBubbles {
     bubbleContainer.prepend(messageDiv);
     //bubble.prepend(timeSpan, messageDiv); // that's bad
 
+    if(message.views && !message.fwd_from?.saved_from_msg_id && this.chat.type !== 'pinned') {
+      const forward = document.createElement('div');
+      forward.classList.add('bubble-beside-button', 'forward', 'tgico-forward_filled');
+      bubbleContainer.prepend(forward);
+      bubble.classList.add('with-beside-button');
+    }
+
     if(message.views && !message.pFlags.is_outgoing && this.viewsObserver) {
       this.viewsObserver.observe(bubble);
     }

src/components/chat/messageRender.ts

@@ -28,13 +28,6 @@ export namespace MessageRender {
 
       bubble.classList.add('channel-post');
       time = '<span class="post-views">' + formatNumber(message.views, 1) + '</span> <i class="tgico-channelviews time-icon"></i> ' + (postAuthor ? RichTextProcessor.wrapEmojiText(postAuthor) + ', ' : '') + time;
-  
-      if(!message.fwd_from?.saved_from_msg_id && chat.type !== 'pinned') {
-        const forward = document.createElement('div');
-        forward.classList.add('bubble-beside-button', 'forward', 'tgico-forward_filled');
-        bubbleContainer.append(forward);
-        bubble.classList.add('with-beside-button');
-      }
     }
 
     if(message.edit_date && chat.type !== 'scheduled' && !message.pFlags.edit_hide) {

src/scss/partials/_chatBubble.scss

@@ -1183,6 +1183,12 @@ $bubble-beside-button-width: 38px;
     }
   }
 
+  .message.voice-message {
+    .document-message {
+      max-width: fit-content;
+    }
+  }
+
   .message.audio-message, 
   .message.voice-message {
     padding: 8px !important;