Stickers preview in reply

src/components/chat/replyContainer.ts

@@ -1,7 +1,9 @@
+import appImManager, { CHAT_ANIMATION_GROUP } from "../../lib/appManagers/appImManager";
 import appPhotosManager from "../../lib/appManagers/appPhotosManager";
 import { RichTextProcessor } from "../../lib/richtextprocessor";
 import DivAndCaption from "../divAndCaption";
 import { renderImageFromUrl } from "../misc";
+import { wrapSticker } from "../wrappers";
 
 export default class ReplyContainer extends DivAndCaption<(title: string, subtitle: string, message?: any) => void> {
   private mediaEl: HTMLElement;
@@ -29,25 +31,37 @@ export default class ReplyContainer extends DivAndCaption<(title: string, subtit
     
         //console.log('wrap reply', media);
         
-        if(media.photo || (media.document && ['video'].indexOf(media.document.type) !== -1)) {
+        if(media.photo || (media.document && ['video', 'sticker'].indexOf(media.document.type) !== -1)) {
           const replyMedia = document.createElement('div');
           replyMedia.classList.add(this.className + '-media');
 
-          const photo = media.photo || media.document;
+          if(media.document?.type == 'sticker') {
+            wrapSticker({
+              doc: media.document,
+              div: replyMedia,
+              lazyLoadQueue: appImManager.lazyLoadQueue,
+              group: CHAT_ANIMATION_GROUP,
+              onlyThumb: media.document.sticker == 2,
+              width: 32,
+              height: 32
+            });
+          } else {
+            const photo = media.photo || media.document;
 
-          if(photo._ == 'document' || !photo.downloaded) {
+            if(photo._ == 'document' || !photo.downloaded) {
-            const sizes = photo.sizes || photo.thumbs;
+              const sizes = photo.sizes || photo.thumbs;
-            if(sizes && sizes[0].bytes) {
+              if(sizes && sizes[0].bytes) {
-              appPhotosManager.setAttachmentPreview(sizes[0].bytes, replyMedia, false, true);
+                appPhotosManager.setAttachmentPreview(sizes[0].bytes, replyMedia, false, true);
+              }
             }
+
+            const size = appPhotosManager.choosePhotoSize(photo, 32, 32/* mediaSizes.active.regular.width, mediaSizes.active.regular.height */);
+            appPhotosManager.preloadPhoto(photo, size)
+            .then(() => {
+              renderImageFromUrl(replyMedia, photo._ == 'photo' ? photo.url : appPhotosManager.getDocumentCachedThumb(photo.id).url);
+            });
           }
 
-          const size = appPhotosManager.choosePhotoSize(photo, 32, 32/* mediaSizes.active.regular.width, mediaSizes.active.regular.height */);
-          appPhotosManager.preloadPhoto(photo, size)
-          .then(() => {
-            renderImageFromUrl(replyMedia, photo._ == 'photo' ? photo.url : appPhotosManager.getDocumentCachedThumb(photo.id).url);
-          });
-          
           this.content.prepend(this.mediaEl = replyMedia);
           this.container.classList.add('is-media');
         }

src/lib/appManagers/appImManager.ts

@@ -59,7 +59,7 @@ const TEST_SCROLL = false;
 
 const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
-const ANIMATION_GROUP = 'chat';
+export const CHAT_ANIMATION_GROUP = 'chat';
 
 export class AppImManager {
   public columnEl = document.getElementById('column-center') as HTMLDivElement;
@@ -1185,7 +1185,7 @@ export class AppImManager {
 
     //console.timeEnd('appImManager setPeer pre promise');
     
-    animationIntersector.lockGroup(ANIMATION_GROUP);
+    animationIntersector.lockGroup(CHAT_ANIMATION_GROUP);
     this.setPeerPromise = Promise.all([
       promise.then(() => {
         ////this.log('setPeer removing preloader');
@@ -1204,8 +1204,8 @@ export class AppImManager {
         }
 
         this.scrollable.container.append(this.chatInner);
-        animationIntersector.unlockGroup(ANIMATION_GROUP);
+        animationIntersector.unlockGroup(CHAT_ANIMATION_GROUP);
-        animationIntersector.checkAnimations(false, ANIMATION_GROUP/* , true */);
+        animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP/* , true */);
         //this.scrollable.attachSentinels();
         //this.scrollable.container.insertBefore(this.chatInner, this.scrollable.container.lastElementChild);
 
@@ -1387,7 +1387,7 @@ export class AppImManager {
       //bubble.remove();
     });
     
-    animationIntersector.checkAnimations(false, ANIMATION_GROUP);
+    animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP);
     this.deleteEmptyDateGroups();
   }
   
@@ -1905,7 +1905,7 @@ export class AppImManager {
                   isOut: isOut,
                   lazyLoadQueue: this.lazyLoadQueue,
                   middleware: null,
-                  group: ANIMATION_GROUP
+                  group: CHAT_ANIMATION_GROUP
                 });
 
                 preloader.attach(attachmentDiv, false);
@@ -2017,7 +2017,7 @@ export class AppImManager {
                 lazyLoadQueue: this.lazyLoadQueue,
                 middleware: this.getMiddleware(),
                 isOut,
-                group: ANIMATION_GROUP
+                group: CHAT_ANIMATION_GROUP
               });
               //}
             } else {
@@ -2103,7 +2103,7 @@ export class AppImManager {
               div: attachmentDiv,
               middleware: this.getMiddleware(),
               lazyLoadQueue: this.lazyLoadQueue,
-              group: ANIMATION_GROUP,
+              group: CHAT_ANIMATION_GROUP,
               //play: !!message.pending || !multipleRender,
               play: true,
               loop: true,
@@ -2139,7 +2139,7 @@ export class AppImManager {
                 isOut: isOut,
                 lazyLoadQueue: this.lazyLoadQueue,
                 middleware: this.getMiddleware(),
-                group: ANIMATION_GROUP
+                group: CHAT_ANIMATION_GROUP
               });
             }
             

src/scss/partials/_button.scss

@@ -0,0 +1,244 @@
+.btn-icon {
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 50% !important;
+  transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
+  color: $color-gray;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: .5rem;
+  position: relative;
+  overflow: hidden;
+  
+  /* kostil */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.active {
+    color: $color-blue;
+  }
+  
+  html.no-touch &:hover {
+    background-color: var(--color-gray-hover);
+  }
+
+  &:disabled {
+    color: #cacaca;
+    pointer-events: none !important;
+    opacity: .25;
+  }
+}
+
+.btn-corner {
+  --translateY: calc(100% + 20px);
+  position: absolute !important;
+  bottom: 20px;
+  right: 20px;
+  //transition: .2s ease;
+  transition: var(--btn-corner-transition) !important;
+  transform: translate3d(0, var(--translateY), 0);
+  z-index: 3;
+  user-select: none;
+
+  &.is-visible {
+    --translateY: 0;
+  }
+
+  body.animation-level-0 & {
+		transition: none !important;
+	}
+}
+
+.btn-menu {
+  visibility: hidden;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
+  z-index: 3;
+  top: 100%;
+  margin-top: 8px;
+  padding: 9px 0;
+  border-radius: $border-radius-medium;
+  opacity: 0;
+  transform: scale(.8);
+  transition-property: opacity,transform,visibility;
+  transition-duration: .2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 16px;
+
+  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
+  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
+
+  &.active {
+    visibility: visible;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.bottom-left {
+    right: 0;
+    top: 100%;
+    transform-origin: top right;
+  }
+
+  &.bottom-right {
+    left: 0;
+    top: 100%;
+    transform-origin: top left;
+  }
+
+  &.top-left {
+    top: initial;
+    right: 0;
+    bottom: 100%;
+    transform-origin: bottom right;
+  }
+
+  &.top-right {
+    top: initial;
+    left: 0;
+    bottom: 100%;
+    transform-origin: bottom left;
+  }
+
+  &-item {
+    display: flex;
+    position: relative;
+    padding: 0 40px 0 20px;
+    height: 56px;
+    cursor: pointer !important;
+    pointer-events: all !important;
+    background-position: 16px center;
+    background-size: 24px 24px;
+    background-repeat: no-repeat;
+    color: #000;
+    text-transform: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: center;
+
+    html.no-touch &:hover {
+      background-color: rgba(112, 117, 121, 0.06);
+    }
+
+    &:before {
+      color: $color-gray;
+      font-size: 1.5rem;
+      margin-right: 32px;
+    }
+
+    @include respond-to(handhelds) {
+      padding: 0 30px 0 16px;
+      height: 50px;
+    }
+  }
+}
+
+.btn-primary {
+  background-color: $color-blue;
+  color: #fff;
+  border-radius: $border-radius-medium;
+  width: 100%;
+  text-align: center;
+  height: 54px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  padding: 0; // new
+  transition: .2s opacity;
+ 
+  html.no-touch &:hover {
+    transition: .2s background-color, .2s opacity;
+    background: darken($color-blue, 8%);
+  }
+  
+  svg, use {
+    height: calc(100% - 20px);
+    right: 15px;
+    left: auto;
+  }
+
+  &:disabled {
+    pointer-events: none !important;
+    opacity: .25;
+  }
+}
+
+// ! example: multiselect input
+.btn-transparent {
+  color: #000;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: 0 .875rem;
+  //width: auto;
+
+  html.no-touch &:hover {
+    background-color:	var(--color-gray-hover);
+  }
+
+  // * tgico
+  &:before {
+    color: #707579;
+    font-size: 1.5rem;
+    margin-right: 1rem;
+  }
+}
+
+.btn-primary.btn-circle {
+  .preloader-circular {
+    height: calc(100% - 20px);
+    right: auto;
+    left: auto;
+    margin: 0;
+    top: 10px;
+    
+    .preloader-path {
+      stroke: #fff;
+    }
+  }
+}
+
+.btn-menu-toggle {
+  position: relative;
+  overflow: visible !important;
+  font-weight: normal !important;
+  cursor: pointer !important;
+  pointer-events: all !important;
+
+  &:not(.btn-primary).menu-open {
+    background-color: var(--color-gray-hover);
+  }
+}
+
+.btn-circle {
+  border-radius: 50%;
+  height: 54px;
+  width: 54px;
+  line-height: 54px;
+  
+  @include respond-to(handhelds) {
+    height: 46px;
+    width: 46px;
+  }
+  
+  path {
+    fill: white;
+  }
+}
+
+.btn-disabled {
+  pointer-events: none !important;
+  cursor: default !important;
+  color: #707579 !important;
+
+  &:before {
+    color: #707579 !important;
+  }
+}

src/scss/partials/_chat.scss

@@ -792,6 +792,22 @@ $chat-helper-size: 39px;
 			background-repeat: no-repeat;
 			background-size: cover;
 			background-position: center center;
+
+			/* > img, > video {
+
+			} */
+
+			// sticker
+			/* > img {
+				object-fit: contain !important;
+				max-width: 100%;
+				max-height: 100%;
+			} */
+			> img {
+				object-fit: cover;
+				width: 100%;
+				height: 100%;
+			}
 		}
 
 		i {
@@ -1216,6 +1232,7 @@ $chat-helper-size: 39px;
 			//display: flex; // for end
 			//flex-direction: unset;
 			display: block;
+			//transform: none;
 	
 			/* display: flex;
 			flex-direction: column;
@@ -1385,9 +1402,8 @@ $chat-helper-size: 39px;
 	bottom: 17.5px;
 	cursor: default;
 	opacity: 0;
-	user-select: none;
 	z-index: 2;
-	transition: var(--btn-corner-transition), opacity .2s;
+	transition: var(--btn-corner-transition), opacity .2s !important;
 	overflow: hidden;
 
   @include respond-to(handhelds) {
@@ -1401,7 +1417,7 @@ $chat-helper-size: 39px;
 	}
 
 	@include respond-to(medium-screens) {
-		transition: transform var(--layer-transition), opacity .2s;
+		transition: transform var(--layer-transition), opacity .2s !important;
 
 		body.is-right-column-shown & {
 			transform: translate3d(calc(var(--right-column-width) * -.5), var(--translateY), 0);

src/scss/style.scss

@@ -101,6 +101,7 @@ $messages-container-width: 728px;
 }
 
 @import "partials/ico";
+@import "partials/button";
 @import "partials/checkbox";
 @import "partials/chatlist";
 @import "partials/chat";
@@ -300,152 +301,10 @@ input, textarea {
   line-height: 1.35;
 }
 
-.btn-icon {
-  text-align: center;
-  font-size: 1.5rem;
-  line-height: 1.5rem;
-  border-radius: 50%;
-  transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
-  color: $color-gray;
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  padding: .5rem;
-  position: relative;
-  overflow: hidden;
-  
-  /* kostil */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.active {
-    color: $color-blue;
-  }
-  
-  html.no-touch &:hover {
-    background-color: var(--color-gray-hover);
-  }
-
-  &:disabled {
-    pointer-events: none !important;
-    opacity: .25;
-  }
-}
-
-.btn-icon:disabled {
-  color: #cacaca;
-}
-
-.btn-corner {
-  --translateY: calc(100% + 20px);
-  position: absolute !important;
-  bottom: 20px;
-  right: 20px;
-  //transition: .2s ease;
-  transition: var(--btn-corner-transition) !important;
-  transform: translate3d(0, var(--translateY), 0);
-  z-index: 3;
-
-  &.is-visible {
-    --translateY: 0;
-  }
-
-  body.animation-level-0 & {
-		transition: none !important;
-	}
-}
-
 .danger, .danger:before {
   color: $color-error!important;
 }
 
-.btn-menu {
-  visibility: hidden;
-  position: absolute;
-  background: #fff;
-  box-shadow: 0 5px 8px 1px rgba(0,0,0,.24);
-  z-index: 3;
-  top: 100%;
-  margin-top: 8px;
-  padding: 9px 0;
-  border-radius: $border-radius-medium;
-  opacity: 0;
-  transform: scale(.8);
-  transition-property: opacity,transform,visibility;
-  transition-duration: .2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 16px;
-
-  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
-  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
-
-  &.active {
-    visibility: visible;
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  &.bottom-left {
-    right: 0;
-    top: 100%;
-    transform-origin: top right;
-  }
-
-  &.bottom-right {
-    left: 0;
-    top: 100%;
-    transform-origin: top left;
-  }
-
-  &.top-left {
-    top: initial;
-    right: 0;
-    bottom: 100%;
-    transform-origin: bottom right;
-  }
-
-  &.top-right {
-    top: initial;
-    left: 0;
-    bottom: 100%;
-    transform-origin: bottom left;
-  }
-
-  &-item {
-    display: flex;
-    position: relative;
-    padding: 0 40px 0 20px;
-    height: 56px;
-    cursor: pointer !important;
-    pointer-events: all !important;
-    background-position: 16px center;
-    background-size: 24px 24px;
-    background-repeat: no-repeat;
-    color: #000;
-    text-transform: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    align-items: center;
-
-    html.no-touch &:hover {
-      background-color: rgba(112, 117, 121, 0.06);
-    }
-
-    &:before {
-      color: $color-gray;
-      font-size: 1.5rem;
-      margin-right: 32px;
-    }
-
-    @include respond-to(handhelds) {
-      padding: 0 30px 0 16px;
-      height: 50px;
-    }
-  }
-}
-
 #bubble-contextmenu, #dialogs-contextmenu {
 	position: fixed;
 	right: auto;
@@ -827,85 +686,6 @@ input:focus, button:focus {
   }
 }
 
-.btn-primary {
-  background-color: $color-blue;
-  color: #fff;
-  border-radius: $border-radius-medium;
-  width: 100%;
-  text-align: center;
-  height: 54px;
-  border: none;
-  font-weight: 500;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  padding: 0; // new
-  transition: .2s opacity;
- 
-  html.no-touch &:hover {
-    transition: .2s background-color, .2s opacity;
-    background: darken($color-blue, 8%);
-  }
-  
-  svg, use {
-    height: calc(100% - 20px);
-    right: 15px;
-    left: auto;
-  }
-
-  &:disabled {
-    pointer-events: none !important;
-    opacity: .25;
-  }
-}
-
-// ! example: multiselect input
-.btn-transparent {
-  color: #000;
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  padding: 0 .875rem;
-  //width: auto;
-
-  html.no-touch &:hover {
-    background-color:	var(--color-gray-hover);
-  }
-
-  // * tgico
-  &:before {
-    color: #707579;
-    font-size: 1.5rem;
-    margin-right: 1rem;
-  }
-}
-
-.btn-primary.btn-circle {
-  .preloader-circular {
-    height: calc(100% - 20px);
-    right: auto;
-    left: auto;
-    margin: 0;
-    top: 10px;
-    
-    .preloader-path {
-      stroke: #fff;
-    }
-  }
-}
-
-.btn-menu-toggle {
-  position: relative;
-  overflow: visible !important;
-  font-weight: normal !important;
-  cursor: pointer !important;
-  pointer-events: all !important;
-
-  &:not(.btn-primary).menu-open {
-    background-color: var(--color-gray-hover);
-  }
-}
-
 span.emoji {
   display: inline !important;
   vertical-align: unset !important;
@@ -928,22 +708,6 @@ img.emoji {
   vertical-align: middle;
 }
 
-.btn-circle {
-  border-radius: 50%;
-  height: 54px;
-  width: 54px;
-  line-height: 54px;
-  
-  @include respond-to(handhelds) {
-    height: 46px;
-    width: 46px;
-  }
-  
-  path {
-    fill: white;
-  }
-}
-
 .overlay::selection {
   background: transparent;
 }
@@ -1084,16 +848,6 @@ img.emoji {
 // 	}
 // }
 
-.btn-disabled {
-  pointer-events: none !important;
-  cursor: default !important;
-  color: #707579 !important;
-
-  &:before {
-    color: #707579 !important;
-  }
-}
-
 .content-empty {
   color: #707579;
 }