Fix video play button

Photo as file thumb
Fix topbar layout

src/components/chat/input.ts

@@ -277,17 +277,36 @@ export class ChatInput {
           }
   
           case 'document': {
+            const isPhoto = file.type.indexOf('image/') !== -1;
+            params.objectURL = URL.createObjectURL(file);
             let docDiv = wrapDocument({
               file: file,
               file_name: file.name || '',
               size: file.size,
-              type: file.type.indexOf('image/') !== -1 ? 'photo' : 'doc'
+              type: isPhoto ? 'photo' : 'doc',
+              url: params.objectURL
             } as any, false, true);
 
-            params.objectURL = URL.createObjectURL(file);
+            const finish = () => {
+              itemDiv.append(docDiv);
+              resolve(itemDiv);
+            };
+
+            if(isPhoto) {
+              let img = new Image();
+              img.src = params.objectURL;
+              img.onload = () => {
+                params.width = img.naturalWidth;
+                params.height = img.naturalHeight;
+  
+                finish();
+              };
+
+              img.onerror = finish;
+            } else {
+              finish();
+            }
 
-            itemDiv.append(docDiv);
-            resolve(itemDiv);
             break;
           }
         }

src/components/wrappers.ts

@@ -292,13 +292,26 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
 
   let docDiv = document.createElement('div');
   docDiv.classList.add('document', `ext-${ext}`);
-  
-  let ext2 = ext;
+
+  const icoDiv = document.createElement('div');
+  icoDiv.classList.add('document-ico');
+
   if(doc.type == 'photo') {
     docDiv.classList.add('photo');
-    ext2 = `<img src="${URL.createObjectURL(doc.file)}">`;
+
+    if(uploading) {
+      icoDiv.innerHTML = `<img src="${doc.url}">`;
+    } else {
+      wrapPhoto(doc, null, icoDiv, 54, 54, false, null, null, null);
+      icoDiv.style.width = icoDiv.style.height = '';
+    }
+
+    const img = icoDiv.querySelector('img');
+    if(img) img.classList.add('document-thumb');
+  } else {
+    icoDiv.innerText = ext;
   }
-  
+
   let fileName = doc.file_name || 'Unknown.file';
   let size = formatBytes(doc.size);
   
@@ -307,12 +320,13 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
   }
   
   docDiv.innerHTML = `
-  <div class="document-ico">${ext2}</div>
   ${!uploading ? `<div class="document-download"><div class="tgico-download"></div></div>` : ''}
   <div class="document-name">${fileName}</div>
   <div class="document-size">${size}</div>
   `;
-  
+
+  docDiv.prepend(icoDiv);
+
   if(!uploading) {
     let downloadDiv = docDiv.querySelector('.document-download') as HTMLDivElement;
     let preloader: ProgressivePreloader;
@@ -441,7 +455,7 @@ export function wrapPhoto(photo: MyPhoto | MyDocument, message: any, container:
   const cacheContext = appPhotosManager.getCacheContext(photo);
 
   let preloader: ProgressivePreloader;
-  if(message.media.preloader) { // means upload
+  if(message?.media?.preloader) { // means upload
     message.media.preloader.attach(container);
   } else if(!cacheContext.downloaded) {
     preloader = new ProgressivePreloader(container, false);

src/lib/appManagers/appDocsManager.ts

@@ -9,6 +9,8 @@ import { InputFileLocation, Document, PhotoSize } from '../../layer';
 
 export type MyDocument = Document.document;
 
+// TODO: если залить картинку файлом, а потом перезайти в диалог - превьюшка заново скачается
+
 class AppDocsManager {
   private docs: {[docID: string]: MyDocument} = {};
 
@@ -97,6 +99,7 @@ class AppDocsManager {
           break;
 
         case 'documentAttributeImageSize':
+          doc.type = 'photo';
           doc.w = attribute.w;
           doc.h = attribute.h;
           break;

src/lib/appManagers/appImManager.ts

@@ -420,14 +420,14 @@ export class AppImManager {
       }
 
       //this.log('chatInner click:', target);
-      if(target.tagName == 'SPAN') {
-        let video = (target.parentElement.querySelector('video') as HTMLElement);
+      const isVideoComponentElement = target.tagName == 'SPAN';
+      /* if(isVideoComponentElement) {
+        const video = target.parentElement.querySelector('video') as HTMLElement;
         if(video) {
           video.click(); // hot-fix for time and play button
+          return;
         }
-        
-        return;
-      }
+      } */
 
       if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
         const messageID = +bubble.dataset.mid;
@@ -442,8 +442,9 @@ export class AppImManager {
         return;
       }
 
-      if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT") 
+      if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb')) 
         || target.classList.contains('album-item')
+        || isVideoComponentElement
         || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
         let messageID = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
         let message = appMessagesManager.getMessage(messageID);
@@ -486,10 +487,16 @@ export class AppImManager {
 
         this.log('open mediaViewer single with ids:', ids, idx, targets);
 
+        if(!targets[idx]) {
+          this.log('no target for media viewer!', target);
+          return;
+        }
+
         appMediaViewer.openMedia(message, targets[idx].element, true, 
           this.scroll.parentElement, targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
         
         //appMediaViewer.openMedia(message, target as HTMLImageElement);
+        return;
       }
       
       if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');

src/lib/appManagers/appMessagesManager.ts

@@ -6,7 +6,7 @@ import { RichTextProcessor } from "../richtextprocessor";
 import { nextRandomInt, bigint } from "../bin_utils";
 import { telegramMeWebService } from "../mtproto/mtproto";
 import apiUpdatesManager from "./apiUpdatesManager";
-import appPhotosManager from "./appPhotosManager";
+import appPhotosManager, { MyPhoto } from "./appPhotosManager";
 
 import AppStorage from '../storage';
 import appPeersManager from "./appPeersManager";
@@ -903,7 +903,9 @@ export class AppMessagesManager {
       caption = RichTextProcessor.parseMarkdown(caption, entities);
     }
 
-    const attributes: any[] = [];
+    const attributes: DocumentAttribute[] = [];
+
+    const isPhoto = ['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0;
 
     let actionName = '';
     if(!options.isMedia) {
@@ -913,26 +915,27 @@ export class AppMessagesManager {
     } else if(isDocument) { // maybe it's a sticker or gif
       attachType = 'document';
       apiFileName = '';
-    } else if(['image/jpeg', 'image/png', 'image/bmp'].indexOf(fileType) >= 0) {
+    } else if(isPhoto) {
       attachType = 'photo';
       apiFileName = 'photo.' + fileType.split('/')[1];
       actionName = 'sendMessageUploadPhotoAction';
 
-      let photo: any = {
+      let photo: MyPhoto = {
         _: 'photo',
         id: '' + messageID,
         sizes: [{
           _: 'photoSize',
           w: options.width,
           h: options.height,
-          type: 'm',
+          type: 'full',
+          location: null,
           size: file.size
-        } as PhotoSize],
+        }],
         w: options.width,
         h: options.height,
         downloaded: file.size,
         url: options.objectURL || ''
-      };
+      } as any;
       
       appPhotosManager.savePhoto(photo);
     } else if(fileType.indexOf('audio/') === 0 || ['video/ogg'].indexOf(fileType) >= 0) {
@@ -947,14 +950,13 @@ export class AppMessagesManager {
         attachType = 'voice';
       }
 
-      let attribute = {
+      let attribute: DocumentAttribute.documentAttributeAudio = {
         _: 'documentAttributeAudio',
         flags: flags,
         pFlags: { // that's only for client, not going to telegram
-          voice: options.isVoiceMessage
+          voice: options.isVoiceMessage || undefined
         },
         waveform: options.waveform,
-        voice: options.isVoiceMessage,
         duration: options.duration || 0
       };
 
@@ -966,15 +968,13 @@ export class AppMessagesManager {
 
       let flags = 1;
       if(options.isRoundMessage) flags |= 2;
-      let videoAttribute = {
+      let videoAttribute: DocumentAttribute.documentAttributeVideo = {
         _: 'documentAttributeVideo',
         flags: flags,
         pFlags: { // that's only for client, not going to telegram
           supports_streaming: true,
-          round_message: options.isRoundMessage
+          round_message: options.isRoundMessage || undefined
         }, 
-        round_message: options.isRoundMessage,
-        supports_streaming: true,
         duration: options.duration,
         w: options.width,
         h: options.height
@@ -990,19 +990,38 @@ export class AppMessagesManager {
     attributes.push({_: 'documentAttributeFilename', file_name: fileName || apiFileName});
 
     if(['document', 'video', 'audio', 'voice'].indexOf(attachType) !== -1 && !isDocument) {
-      let doc: MyDocument = {
+      const thumbs: PhotoSize[] = [];
+      const doc: MyDocument = {
         _: 'document',
         id: '' + messageID,
         duration: options.duration,
-        attributes: attributes,
+        attributes,
         w: options.width,
         h: options.height,
         downloaded: file.size,
-        thumbs: [],
+        thumbs,
         mime_type: fileType,
         url: options.objectURL || '',
         size: file.size
       } as any;
+
+      if(isPhoto) {
+        attributes.push({
+          _: 'documentAttributeImageSize',
+          w: options.width,
+          h: options.height
+        });
+
+        thumbs.push({
+          _: 'photoSize',
+          w: options.width,
+          h: options.height,
+          type: 'full',
+          location: null,
+          size: file.size,
+          url: options.objectURL
+        });
+      }
       
       appDocsManager.saveDoc(doc);
     }

src/scss/partials/_chat.scss

@@ -77,12 +77,13 @@ $beside-button-margin: 2.875rem;
 	}
 	
 	.chat-info {
-		flex-grow: 1;
+		flex: 1 1 auto;
+		overflow: hidden;
 	}
 
 	.chat-join {
 		width: auto;
-		padding: 0 22.185px;
+		width: 117px;
 		height: 36px;
 		font-weight: 400;
 		font-size: 0.875rem;
@@ -94,11 +95,10 @@ $beside-button-margin: 2.875rem;
 	}
 	
 	.content {
-		flex: 1;
-		// padding-left: 17px;
-		// line-height: 1.6;
+		flex: 1 1 auto;
 		padding-left: 10px;
-		//line-height: 1.3;
+		max-width: 100%;
+		overflow: hidden;
 
     @include respond-to(handhelds) {
 			max-width: 208px;
@@ -132,6 +132,7 @@ $beside-button-margin: 2.875rem;
 		line-height: 40px;
 		//font-size: 16px;
 		font-size: 16px;
+		flex: 0 0 auto;
 
 		&:before {
 			font-size: 20px;
@@ -324,13 +325,17 @@ $beside-button-margin: 2.875rem;
 #im-title {
 	cursor: pointer;
 	font-size: 18px;
-  line-height: 24px;
+	line-height: 24px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: calc(100% - 1.5rem);
+	overflow: hidden;
 
-	@include respond-to(handhelds) {
+	/* @include respond-to(handhelds) {
 		text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-	}
+	} */
 
 	span.emoji {
 		vertical-align: inherit;
@@ -637,6 +642,8 @@ $beside-button-margin: 2.875rem;
 	}
 
 	.pinned-container {
+		flex: 0 0 auto;
+
 		@include respond-to(handhelds) {
 			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
 

src/scss/style.scss

@@ -628,10 +628,20 @@ avatar-element {
       background: #000;
       border-radius: $border-radius;
 
+      .document-thumb {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+
       &:after {
         display: none;
       }
     }
+
+    .document-download {
+      background-color: rgba(0, 0, 0, .15);
+    }
   }
   
   &-name {