Fix stuck history when reaching top

Fix document layout in media attacher
Get audio duration on sending
Wrap audio as audio in media attacher

src/components/chat/input.ts

@@ -2079,7 +2079,7 @@ export default class ChatInput {
           ]).then(([webpage, canEmbedLinks]) => {
             if(this.getWebPagePromise === promise) this.getWebPagePromise = undefined;
             if(this.lastUrl !== url) return;
-            if(webpage._  === 'webPage' && canEmbedLinks) {
+            if(webpage?._  === 'webPage' && canEmbedLinks) {
               this.setTopInfo('webpage', () => {}, webpage.site_name || webpage.title || 'Webpage', webpage.description || webpage.url || '');
               delete this.noWebPage;
               this.willSendWebPage = webpage;

src/components/popups/newMedia.ts

@@ -36,7 +36,7 @@ import {AnimationItemGroup} from '../animationIntersector';
 import scaleMediaElement from '../../helpers/canvas/scaleMediaElement';
 import {doubleRaf} from '../../helpers/schedulers';
 import defineNotNumerableProperties from '../../helpers/object/defineNotNumerableProperties';
-import {Photo, PhotoSize} from '../../layer';
+import {DocumentAttribute, Photo, PhotoSize} from '../../layer';
 import {getPreviewBytesFromURL} from '../../helpers/bytes/getPreviewURLFromBytes';
 import {renderImageFromUrlPromise} from '../../helpers/dom/renderImageFromUrl';
 import ButtonMenuToggle from '../buttonMenuToggle';
@@ -740,8 +740,10 @@ export default class PopupNewMedia extends PopupElement {
       params.objectURL ||= await apiManagerProxy.invoke('createObjectURL', file);
     }
 
+    const attributes: DocumentAttribute[] = [];
+
     let img: HTMLImageElement;
-    if(isPhoto) {
+    if(isPhoto && params.objectURL) {
       img = new Image();
       await renderImageFromUrlPromise(img, params.objectURL);
       const scaled = await this.scaleImageForTelegram(img, params.file.type);
@@ -750,13 +752,40 @@ export default class PopupNewMedia extends PopupElement {
       }
     }
 
-    const doc = {
+    if(isAudio && params.objectURL) {
+      try {
+        // * get audio duration
+        const audio = new Audio();
+        audio.src = params.objectURL;
+        audio.muted = true;
+        audio.autoplay = true;
+        await onMediaLoad(audio);
+        params.duration = audio.duration;
+        attributes.push({
+          _: 'documentAttributeAudio',
+          duration: params.duration,
+          pFlags: {}
+        });
+      } catch(err) {
+        console.error('audio loading error', err);
+      }
+    }
+
+    const doc: MyDocument = {
       _: 'document',
-      file: file,
+      file,
       file_name: file.name || '',
       size: file.size,
-      type: isPhoto ? 'photo' : 'doc'
-    } as MyDocument;
+      type: isAudio ? 'audio' : (isPhoto ? 'photo' : undefined),
+      access_hash: 0,
+      attributes,
+      date: 0,
+      dc_id: 0,
+      file_reference: [],
+      id: 0,
+      pFlags: {},
+      duration: params.duration
+    };
 
     let cacheContext: ThumbCache;
     if(params.objectURL) {

src/lib/appManagers/appMessagesManager.ts

@@ -819,7 +819,7 @@ export class AppMessagesManager extends AppManager {
           voice: options.isVoiceMessage || undefined
         },
         waveform: options.waveform,
-        duration: options.duration || 0
+        duration: options.duration || undefined
       };
 
       attributes.push(attribute);
@@ -5908,7 +5908,7 @@ export class AppMessagesManager extends AppManager {
     const {offset_id_offset, messages} = historyResult as MessagesMessages.messagesMessagesSlice;
 
     const count = (historyResult as MessagesMessages.messagesMessagesSlice).count || messages.length;
-    const offsetIdOffset = offset_id_offset || 0;
+    const offsetIdOffset = offset_id_offset ?? count - 1;
 
     const topWasMeantToLoad = add_offset < 0 ? limit + add_offset : limit;
 

src/scss/partials/popups/_mediaAttacher.scss

@@ -235,16 +235,29 @@
     border-radius: 0;
   }
 
-  .document {
-    --padding: .25rem;
-    --icon-size: 4.5rem;
+  .document,
+  .audio {
     --icon-margin: .5rem;
-    max-width: 100%;
-    overflow: hidden;
-    cursor: default;
-    height: 5rem;
+    --icon-size: 3rem;
+    --padding: .25rem;
     margin: 0 .25rem;
     border-radius: $border-radius-medium;
+    cursor: default;
+    height: 3.5rem;
+
+    @include hover-background-effect() {
+      --message-background-color: var(--light-filled-secondary-text-color);
+    }
+  }
+
+  .document {
+    max-width: 100%;
+    overflow: hidden;
+
+    &.document-with-thumb {
+      --icon-size: 4.5rem;
+      height: 5rem;
+    }
 
     &-name {
       width: 100%;
@@ -263,8 +276,6 @@
       border-radius: #{math.div($border-radius-medium, 2)};
     }
 
-    @include hover-background-effect();
-
     /* &.photo {
       .document-ico {
         border-radius: $border-radius;