bigger preview images & stickers preloader

src/components/misc.ts

@@ -221,7 +221,7 @@ export class LazyLoadQueue {
   }
 }
 
-export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader) {
+export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true) {
   //if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
   let size = appPhotosManager.setAttachmentSize(doc, container);
   //}
@@ -260,11 +260,11 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
       console.log('loaded doc:', doc, blob, container);
       
       let video = document.createElement('video');
-      video.loop = true;
-      video.autoplay = true;
+      video.loop = controls;
+      video.autoplay = controls;
       
       if(!justLoader) {
-        video.controls = true;
+        video.controls = controls;
       } else {
         video.volume = 0;
       }

src/lib/appManagers/appImManager.ts

@@ -477,6 +477,24 @@ export class AppImManager {
 
     this.chatInner.addEventListener('click', (e) => {
       let target = e.target as HTMLElement;
+      let bubble: HTMLDivElement = null;
+      try {
+        bubble = findUpClassName(e.target, 'bubble');
+      } catch(err) {}
+
+      if(target.tagName == 'VIDEO' && bubble && bubble.classList.contains('round')) {
+        let video = target as HTMLVideoElement;
+        video.currentTime = 0;
+        if(video.paused) {
+          video.play();
+          video.volume = 1;
+        } else {
+          video.pause();
+          video.volume = 0;
+        }
+        return;
+      }
+
       if(target.tagName == 'IMG' || target.tagName == 'VIDEO') {
         let messageID = +target.getAttribute('message-id');
         let message = appMessagesManager.getMessage(messageID);
@@ -488,8 +506,6 @@ export class AppImManager {
 
         appMediaViewer.openMedia(message, true);
       } else if(target.tagName == 'DIV') {
-        let bubble = findUpClassName(e.target, 'bubble');
-
         if(bubble) {
           if(bubble.classList.contains('is-reply')/*  || bubble.classList.contains('forwarded') */) {
             let originalMessageID = +bubble.getAttribute('data-original-mid');
@@ -686,7 +702,7 @@ export class AppImManager {
   }
 
   public async loadMediaQueueProcess(): Promise<void[]> {
-    if(this.loadMediaQueuePromise /* || 1 == 1 */) return this.loadMediaQueuePromise;
+    if(this.loadMediaQueuePromise/*  || 1 == 1 */) return this.loadMediaQueuePromise;
 
     let woo = this.loadMediaQueue.splice(-5, 5).reverse().map(f => f());
 
@@ -1324,7 +1340,8 @@ export class AppImManager {
               bubble.classList.add('sticker-animated');
             }
 
-            appPhotosManager.setAttachmentSize(doc, attachmentDiv);
+            appPhotosManager.setAttachmentSize(doc, attachmentDiv, undefined, undefined, true);
+            let preloader = new ProgressivePreloader(attachmentDiv, false);
             bubble.style.height = attachmentDiv.style.height;
             bubble.style.width = attachmentDiv.style.width;
             //appPhotosManager.setAttachmentSize(doc, bubble);
@@ -1335,11 +1352,11 @@ export class AppImManager {
               }
 
               return true;
-            }, null, 'chat', false, !!message.pending || !multipleRender)/* .then(() => {
-              
-              attachmentDiv.style.width = '';
-              attachmentDiv.style.height = '';
-            }) */;
+            }, null, 'chat', false, !!message.pending || !multipleRender).then(() => {
+              preloader.detach();
+              /* attachmentDiv.style.width = '';
+              attachmentDiv.style.height = ''; */
+            });
 
             this.loadMediaQueuePush(load);
 
@@ -1347,8 +1364,12 @@ export class AppImManager {
           } else if(doc.mime_type == 'video/mp4') {
             this.log('never get free 2', doc);
 
+            if(doc.type == 'round') {
+              bubble.classList.add('round');
+            }
+
             bubble.classList.add('video');
-            wrapVideo.call(this, doc, attachmentDiv, message);
+            wrapVideo.call(this, doc, attachmentDiv, message, doc.type != 'round', null, false);
 
             break;
           } else {
@@ -1378,9 +1399,9 @@ export class AppImManager {
     if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat
       let title = appPeersManager.getPeerTitle(message.fwdFromID || message.fromID);
 
-      let isHidden = message.fwd_from && !message.fwd_from.from_id;
+      let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id;
       if(isHidden) {
-        this.log('message render hidden', message);
+        this.log('message to render hidden', message);
         title = message.fwd_from.from_name;
         bubble.classList.add('hidden-profile');
       }
@@ -1413,7 +1434,7 @@ export class AppImManager {
           let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
           let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID) || '';
 
-          this.log('message to render one more time punks not dead', originalMessage, originalPeerTitle, bubble);
+          this.log('message to render reply', originalMessage, originalPeerTitle, bubble);
 
           let originalText = '';
           if(originalMessage.message) {

src/lib/appManagers/appMediaViewer.ts

@@ -133,7 +133,7 @@ export class AppMediaViewer {
   
   public openMedia(message: any, reverse = false) {
     this.log('openMedia doc:', message);
-    let media = message.media.photo || message.media.document || message.media.webpage.document;
+    let media = message.media.photo || message.media.document || message.media.webpage.photo || message.media.webpage.document;
     
     let isVideo = media.mime_type == 'video/mp4';
     

src/lib/appManagers/appPhotosManager.ts

@@ -153,13 +153,13 @@ export class AppPhotosManager {
       let image = new Image();
       image.src = URL.createObjectURL(blob);
       
-      // image.style.width = '100%';
-      // image.style.height = '100%';
+      image.style.width = '100%';
+      image.style.height = '100%';
       div.append(image);
     }
   }
   
-  public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 0/* 380 */) {
+  public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 380, isSticker = false) {
     let photo: /* MTDocument | MTPhoto */any = null;
 
     if(typeof(photoID) === 'string') {
@@ -174,7 +174,7 @@ export class AppPhotosManager {
     
     let sizes = photo.sizes || photo.thumbs;
     if(sizes && sizes[0].bytes) {
-      this.setAttachmentPreview(sizes[0].bytes, div);
+      this.setAttachmentPreview(sizes[0].bytes, div, isSticker);
     }
 
     if(photo._ == 'document' /* && photo.type != 'video' */ && photo.type != 'gif') {

src/scss/partials/_chat.scss

@@ -1,5 +1,5 @@
 .chat-container {
-  display: flex;
+	display: flex;
 	// padding: 200px;
 	width: 100%;
 	align-items: center;
@@ -43,64 +43,64 @@
 		z-index: 2;
 	} */
 	
-  #topbar {
-    width: 100%;
-    background-color: #fff;
-    box-sizing: border-box;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
+	#topbar {
+		width: 100%;
+		background-color: #fff;
+		box-sizing: border-box;
+		user-select: none;
+		display: flex;
+		align-items: center;
+		box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
 		padding: .5rem 1rem;
 		flex: 0 0 auto; /* Forces side columns to stay same width */
 		min-height: 60px;
 		max-height: 60px;
 		
-    & > * {
-      margin: 0 2px;
-    }
+		& > * {
+			margin: 0 2px;
+		}
 		
-    .chat-info {
-      flex-grow: 1;
-    }
+		.chat-info {
+			flex-grow: 1;
+		}
 		
-    .content {
+		.content {
 			padding-left: 1rem;
 			flex: 1;
-    }
+		}
 		
-    .person {
-      display: flex;
+		.person {
+			display: flex;
 			align-items: center;
 			cursor: pointer;
 			
-      &:hover {
-        background-color: transparent;
-      }
+			&:hover {
+				background-color: transparent;
+			}
 			
-      .user-avatar {
-        width: 44px;
+			.user-avatar {
+				width: 44px;
 				height: 44px;
 				line-height: 44px;
-      }
+			}
 			
-      .bottom {
-        font-size: 14px;
+			.bottom {
+				font-size: 14px;
 				line-height: 18px;
 				color: $placeholder-color;
 				
 				.online {
 					color: $darkblue;
 				}
-      }
+			}
 		}
-  }
+	}
 	
-  #bubbles {
+	#bubbles {
 		/* overflow-y: scroll;
 		scrollbar-width: none;
 		-ms-overflow-style: none; */
-    width: 100%;
+		width: 100%;
 		height: 100%;
 		max-height: 100%;
 		flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
@@ -109,7 +109,7 @@
 		
 		&:not(.scrolled-down) {
 			-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
-    	mask-image: linear-gradient(0deg, transparent 0, #000 20px);
+			mask-image: linear-gradient(0deg, transparent 0, #000 20px);
 		}
 		
 		.preloader {
@@ -167,7 +167,7 @@
 				width: min-content;
 				
 				.box.web {
-					width: max-content;
+					/* width: max-content; */ // commented 10.02.2020
 					/* width: min-content; */
 					max-width: 100%;
 				}
@@ -237,7 +237,7 @@
 				}
 			}
 			
-			&.sticker {
+			&.sticker, &.round {
 				cursor: pointer;
 				background: none!important;
 				box-shadow: none;
@@ -257,6 +257,13 @@
 				}
 			}
 
+			&.round {
+				.attachment {
+					max-width: 200px;
+					max-height: 200px;
+				}
+			}
+			
 			.message:not(.message-empty) + .attachment,
 			&.is-reply .attachment {
 				border-bottom-left-radius: 0;
@@ -307,6 +314,14 @@
 				}
 			}
 			
+			&.round.video {
+				.attachment {
+					//max-height: fit-content;
+					-webkit-clip-path: ellipse(100px 100px at center);
+					clip-path: ellipse(100px 100px at center);
+				}
+			}
+			
 			.box {
 				font-size: .95rem;
 				margin: .25rem;
@@ -317,7 +332,7 @@
 				
 				/* &:hover {
 					cursor: pointer;
-        } */
+				} */
 				
 				&.web {
 					margin-top: -5px;
@@ -326,8 +341,10 @@
 					overflow: hidden;
 					
 					.preview {
-						max-height: 100%;
-						max-width: 100%;
+						max-height: 300px;
+						max-width: 380px;
+						/* max-height: 100%;
+						max-width: 100%; */
 						border-radius: 4px;
 						margin-bottom: 6px;
 						overflow: hidden;
@@ -340,7 +357,7 @@
 							width: 100%;
 							height: 100%;
 						}
-          }
+					}
 					
 					.title {
 						line-height: 1.4;
@@ -387,6 +404,7 @@
 				overflow: hidden;
 				text-overflow: ellipsis;
 				max-width: 100%;
+				color: #000;
 				
 				* {
 					overflow: hidden;
@@ -418,20 +436,20 @@
 			
 			.time {
 				font-size: .8rem;
-        user-select: none;
-        float: right;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
+				user-select: none;
+				float: right;
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
 				height: 20px;
 				line-height: 20px;
 				
 				.inner {
 					position: absolute;
 					bottom: 0;
-          right: 0;
-          font-size: .75rem;
+					right: 0;
+					font-size: .75rem;
 				}
 			}
 			
@@ -484,7 +502,7 @@
 				padding-top: .2675rem;
 			}
 			
-			&:not(.sticker):not(.emoji-big):last-child:after {
+			&:not(.sticker):not(.emoji-big):not(.round):last-child:after {
 				position: absolute;
 				bottom: -1px;
 				width: 11px;
@@ -507,18 +525,18 @@
 		}
 		
 		.in {
-      align-items: flex-start;
+			align-items: flex-start;
 			
 			a {
 				color: $darkblue;
-      }
+			}
 			
 			.box:hover {
 				background-color: $light;
-      }
+			}
 			
 			.quote {
-        border-left: 2px $darkblue solid;
+				border-left: 2px $darkblue solid;
 				
 				.name {
 					color: $darkblue;
@@ -528,37 +546,37 @@
 					overflow: hidden;
 					text-overflow: ellipsis;
 				}
-      }
+			}
 			
 			.time {
 				color: rgba($darkgrey, 0.6);
-        width: 2rem;
+				width: 2rem;
 				
 				.inner {
 					line-height: 19px;
 					padding: 0 .35rem;
-        }
-      }
+				}
+			}
 			
 			.bubble {
 				background-color: #ffffff;
-        border-radius: 6px 12px 12px 6px;
+				border-radius: 6px 12px 12px 6px;
 				
-        &:first-child {
-          border-radius: 12px 12px 12px 6px;
-        }
+				&:first-child {
+					border-radius: 12px 12px 12px 6px;
+				}
 				
-        &:last-child {
+				&:last-child {
 					border-radius: 6px 12px 12px 0px;
 					
 					&:after {
 						left: -8.4px;
-    				background-image: url('../../assets/img/msg-tail-left.svg');
+						background-image: url('../../assets/img/msg-tail-left.svg');
 					}
-        }
+				}
 				
-        &:first-child:last-child {
-          border-radius: 12px 12px 12px 0px;
+				&:first-child:last-child {
+					border-radius: 12px 12px 12px 0px;
 				}
 				
 				&.forwarded .attachment,
@@ -574,37 +592,37 @@
 			
 			a {
 				color: $darkgreen;
-      }
+			}
 			
 			.box:hover {
 				background-color: rgba($green, 0.12);
-      }
+			}
 			
 			.quote {
-        border-left: 2px $darkgreen solid;
+				border-left: 2px $darkgreen solid;
 				
 				.name {
 					color: $darkgreen;
 				}
-      }
+			}
 			
 			.time {
 				color: $darkgreen;
 				width: 48px;
-        display: inline-block;
+				display: inline-block;
 				
 				.inner {
 					display: flex;
-          align-items: center;
+					align-items: center;
 					padding: 0 .25rem;
 				}
-      }
+			}
 			
 			.bubble {
 				.time .tgico:after {
 					font-size: 1.1rem;
-          vertical-align: middle;
-          margin-left: .1rem;
+					vertical-align: middle;
+					margin-left: .1rem;
 				}
 			}
 			
@@ -618,32 +636,32 @@
 				.time .tgico:after {
 					content: $tgico-checks;
 				}
-      }
+			}
 			
 			.bubble.sent {
 				.time .tgico:after {
 					content: $tgico-check;
 				}
-      }
+			}
 			
 			.bubble {
 				background-color: #eeffde;
-        border-radius: 12px 6px 6px 12px;
+				border-radius: 12px 6px 6px 12px;
 				
-        &:first-child {
-          border-radius: 12px 12px 6px 12px;
-        }
+				&:first-child {
+					border-radius: 12px 12px 6px 12px;
+				}
 				
-        &:last-child {
+				&:last-child {
 					border-radius: 12px 6px 0px 12px;
 					
 					&:after {
 						right: -8.4px;
-    				background-image: url('../../assets/img/msg-tail-right.svg');
+						background-image: url('../../assets/img/msg-tail-right.svg');
 					}
-        }
+				}
 				
-        &:first-child:last-child {
+				&:first-child:last-child {
 					border-radius: 12px 12px 0px 12px;
 				}
 				
@@ -814,7 +832,7 @@
 		align-items: center;
 		overflow: hidden;
 		box-sizing: border-box;
-		width: 150px;
+		width: 187px;
 		margin-right: 1rem;
 		max-height: 35px;
 		/* padding: .25rem; */
@@ -852,20 +870,21 @@
 		
 		&-subtitle {
 			white-space: nowrap;
+			color: #111;
 		}
 	}
 	
 	/* #chat-closed {
 		position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: inherit;
-    z-index: 3;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: inherit;
+		z-index: 3;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		flex-direction: column;
 		
 		
@@ -941,13 +960,13 @@
 	box-shadow: 0px 5px 10px 5px rgba(16, 35, 47, 0.14);
 	border-radius: 12px;
 	z-index: 2;
-/* 	display: none; */
+	/* 	display: none; */
 	display: flex;
 	overflow: hidden;
 	
 	transition: all 0.2s ease-out;
-  transform: scale(0);
-  transform-origin: 0 100%;
+	transform: scale(0);
+	transform-origin: 0 100%;
 	
 	&.active {
 		/* display: flex; */

src/scss/partials/_mediaViewer.scss

@@ -112,7 +112,8 @@
     video {
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      /* object-fit: cover; */
+      object-fit: contain;
     }
 
     .media-viewer-switcher-left, .media-viewer-switcher-right {

src/scss/partials/_sidebar.scss

@@ -69,6 +69,7 @@
     }
 
     p {
+      color: #000;
       margin: 0;
     }