Refactoring/css perf

src/components/home.scss

@@ -29,7 +29,7 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.0);
-      transition: background-color var(--animation-sidebar);
+      transition: background-color $animation-sidebar;
 
       &.-opening {
         background-color: rgba(0, 0, 0, 0.3);
@@ -52,7 +52,7 @@
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.0);
-      transition: background-color var(--animation-sidebar);
+      transition: background-color $animation-sidebar;
 
       &.-opening {
         background-color: rgba(0, 0, 0, 0.3);

src/components/icons/menu_and_back/menu_and_back.scss

@@ -1,5 +1,3 @@
-// CSS API variables: --icon-size
-
 .menuAndBackIcon {
   display: inline-block;
   font-size: 24px;

src/components/login/forms/welcome.ts

@@ -58,9 +58,11 @@ export default function formWelcome() {
 
   const element = (
     form`.login__form`(
-      img`.login__logo`({ src: logo }),
-      h1`.login__title`(text('Sign in to Telegram')),
-      p`.login__description`(text('Please confirm your country and enter your phone number.')),
+      div`.login__about`(
+        img`.login__logo`({ src: logo }),
+        h1`.login__title`(text('Sign in to Telegram')),
+        p`.login__description`(text('Please confirm your country and enter your phone number.')),
+      ),
       div`.login__inputs`(
         inputCountry,
         inputPhone,

src/components/login/login.scss

@@ -1,3 +1,5 @@
+@import '~styles/variables.scss';
+
 .login {
   height: 100%;
   overflow-y: auto;
@@ -20,6 +22,19 @@
     justify-content: center;
     align-items: center;
     position: relative;
+    box-sizing: border-box;
+
+    @include respond-to(small) {
+      padding: 16px;
+      justify-content: space-around;
+      min-height: 100%;
+    }
+  }
+
+  &__about {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   &__subform {
@@ -34,6 +49,12 @@
     width: 162px;
     height: 162px;
     margin-bottom: 42px;
+
+    @include respond-to(small) {
+      width: 120px;
+      height: 120px;
+      margin-bottom: 30px;
+    }
   }
 
   &__title {
@@ -44,6 +65,10 @@
     margin-bottom: 9px;
     text-align: center;
 
+    @include respond-to(small) {
+      font-size: 20px;
+    }
+
     &_icon {
       display: inline-block;
       vertical-align: baseline;
@@ -66,6 +91,10 @@
     max-width: 16rem;
     margin-bottom: 48px;
     white-space: pre-wrap;
+
+    @include respond-to(small) {
+      margin-bottom: 26px;
+    }
   }
 
   &__inputs {
@@ -89,6 +118,10 @@
         margin-right: 32px;
       }
     }
+
+    @include respond-to(small) {
+      margin-bottom: 22px;
+    }
   }
 
   &__loader {

src/components/main/header/header.scss

@@ -3,7 +3,8 @@
 .header {
   background: #FFFFFF;
   height: 60px;
-  padding: 5px var(--content-padding) 5px var(--content-padding);
+  border-bottom: 1px solid #EDEEF0;
+  padding: 5px $content-padding 5px $content-padding;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -26,7 +27,7 @@
     & .avatar {
       width: 46px;
       height: 46px;
-      --initials-font-size: 16px;
+      font-size: 16px;
     }
   }
 

src/components/main/history.scss

@@ -28,7 +28,7 @@
   }
 
   @include respond-to(small-medium) {
-    transition: transform var(--animation-sidebar);
+    transition: transform $animation-sidebar;
     will-change: transform;
 
     &.-visible.-popping {

src/components/main/history.ts

@@ -1,17 +1,18 @@
 import binarySearch from 'binary-search';
+import { Peer } from 'mtproto-js';
 import { BehaviorSubject, combineLatest } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { button, div, text } from 'core/html';
 import { mount, unmount, animationFrameStart } from 'core/dom';
 import { useObservable } from 'core/hooks';
 import { message as service, dialog as dialogService } from 'services';
 import { Direction as MessageDirection } from 'services/message/types';
-import message from 'components/message/message';
+import message, { MessageSibling } from 'components/message/message';
 import { sectionSpinner, VirtualizedList } from 'components/ui';
 import * as icons from 'components/icons';
 import messageInput from 'components/message/input/input';
-import { Peer } from 'mtproto-js';
 import { compareSamePeerMessageIds, peerMessageToId, peerToId } from 'helpers/api';
+import { getDayOffset } from 'helpers/message';
 import { isiOS } from 'helpers/browser';
 import { messageCache, dialogCache, chatCache } from 'cache';
 import header from './header/header';
@@ -23,25 +24,60 @@ type Props = {
 };
 
 /**
- * Message Dates
+ * Message Helpers
  */
-const timezoneOffset = new Date().getTimezoneOffset() * 60;
 const messageDayMap = new Map<string, string>();
+const messageSiblingsMap = new Map<string, BehaviorSubject<[MessageSibling, MessageSibling]>>();
+let lastUnreadMessage: string | undefined;
 
 function prepareIdsList(peer: Peer, messageIds: Readonly<number[]>): string[] {
   const { length } = messageIds;
   const reversed = new Array(length);
+  const dialog = dialogCache.get(peerToId(peer));
+
+  let prevSibling: MessageSibling;
+  let unreadMessageToBeMarked: string | undefined;
 
   for (let i = 0; i < length; i += 1) {
     const id = peerMessageToId(peer, messageIds[i]);
     const msg = messageCache.get(id);
 
     if (msg && msg._ !== 'messageEmpty') {
-      messageDayMap.set(id, Math.ceil((msg.date - timezoneOffset) / (3600 * 24)).toString());
       reversed[length - i - 1] = id;
+
+      if (dialog && dialog._ === 'dialog' && !lastUnreadMessage) {
+        if (msg._ === 'message' && !msg.out && msg.id > dialog.read_inbox_max_id) {
+          unreadMessageToBeMarked = id;
+        }
+      }
+
+      const item = {
+        id,
+        day: getDayOffset(msg),
+        from: msg.from_id,
+      };
+
+      const siblings = messageSiblingsMap.get(id) || new BehaviorSubject([prevSibling, undefined]);
+      if ((siblings.value[0] ? siblings.value[0].id : undefined) !== (prevSibling ? prevSibling.id : undefined)) {
+        siblings.next([prevSibling, siblings.value[1]]);
+      }
+
+      messageSiblingsMap.set(id, siblings);
+      messageDayMap.set(id, getDayOffset(msg));
+
+      if (prevSibling) {
+        const prevSiblings = messageSiblingsMap.get(prevSibling.id);
+        if (prevSiblings && (prevSiblings.value[1] ? prevSiblings.value[1].id : undefined) !== item.id) {
+          prevSiblings.next([prevSiblings.value[0], item]);
+        }
+      }
+
+      prevSibling = item;
     }
   }
 
+  if (unreadMessageToBeMarked) lastUnreadMessage = unreadMessageToBeMarked;
+
   return reversed;
 }
 
@@ -113,7 +149,7 @@ export default function history({ onBackToContacts }: Props) {
     batch: 20, // navigator.userAgent.indexOf('Safari') > -1 ? 5 : 20,
     initialPaddingBottom: 10,
     forcePadding: isiOS ? 100000 : 0,
-    renderer: (id: string) => message(id, service.activePeer.value!), // , (mid: string) => scroll.pendingRecalculate.push(mid)),
+    renderer: (id: string) => message(id, messageSiblingsMap.get(id)!, id === lastUnreadMessage),
     selectGroup: (id: string) => messageDayMap.get(id) || '0',
     renderGroup: historyDay,
     groupPadding: 34,
@@ -160,6 +196,8 @@ export default function history({ onBackToContacts }: Props) {
   useObservable(container, service.activePeer, (next) => {
     if (next) {
       messageDayMap.clear();
+      messageSiblingsMap.clear();
+      lastUnreadMessage = undefined;
 
       if (welcome.parentElement) unmount(welcome);
       if (!headerEl.parentElement) mount(container, headerEl);

src/components/main/history_day/history_day.scss

@@ -13,20 +13,20 @@
 
     /* Disable sticky dates in Firefox due to rendering */
     @-moz-document url-prefix() {
-      & { position: static;}
+      & { position: static; }
     }
+  }
 
-    & span {
-      display: inline-block;
-      margin: 0 auto;
-      width: auto;
-      max-width: 70%;
-      color: #FFFFFF;
-      background: rgba(27, 25, 25, 0.2);
-      height: 26PX;
-      border-radius: 13PX;
-      line-height: 20px;
-      padding: 3PX 10PX;
-    }
+  &__text {
+    display: inline-block;
+    margin: 0 auto;
+    width: auto;
+    max-width: 70%;
+    color: #FFFFFF;
+    background: rgba(27, 25, 25, 0.2);
+    height: 26PX;
+    border-radius: 13PX;
+    line-height: 20px;
+    padding: 3PX 10PX;
   }
 }

src/components/main/history_day/history_day.ts

@@ -1,10 +1,10 @@
-import { div, text, span } from 'core/html';
+import { div, text } from 'core/html';
 import './history_day.scss';
 
 export default function historyDay(day: string) {
   const date = new Date(+day * 1000 * 3600 * 24);
 
   return div`.historyDay`(
-    div`.historyDay__label`(span(text(date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })))),
+    div`.historyDay__label`(div`.historyDay__text`(text(date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })))),
   );
 }

src/components/media/document/file.ts

@@ -21,7 +21,7 @@ const renderMeta = (document: Document.document, message: Message | undefined) =
   return nodes;
 };
 
-export default function documentFile(document: Document.document, message?: Message) {
+export default function documentFile(document: Document.document, message?: Message, className?: string) {
   const filenameAttributte = getAttributeFilename(document);
 
   let filename = '';
@@ -34,7 +34,7 @@ export default function documentFile(document: Document.document, message?: Mess
 
   const sizeEl = div`.document-file__size`(...renderMeta(document, message));
 
-  const container = div`.document-file`(
+  const container = div`.document-file${className}`(
     icon,
     div`.document-file__info`(
       div`.document-file__title`(text(filename)),

src/components/media/photo/photo.ts

@@ -24,7 +24,7 @@ export default function photoRenderer(photo: Photo.photo | Document.document, op
 
   const src = file(location, {});
   const image = img`.photo__content`({ src });
-  const container = div`.photo`(image);
+  const container = div`.photo${options.className}`(image);
 
   // apply classes
   if (options.fit) container.classList.add(options.fit);

src/components/media/sticker/sticker.ts

@@ -10,25 +10,28 @@ import { StickerMimeType } from 'const';
 import './sticker.scss';
 
 type StickerOptions = {
+  className?: string,
   size: string,
   autoplay: boolean,
   playOnHover?: boolean,
   onClick?: (sticker: Document) => void,
 };
 
 export default function stickerRenderer(sticker: Document.document,
-  { size = '200px', autoplay = true, playOnHover = false, onClick }: StickerOptions) {
+  { size = '200px', autoplay = true, playOnHover = false, onClick, className = '' }: StickerOptions) {
   let thumbnail: HTMLImageElement | undefined;
   let animated: ReturnType<typeof tgs> | undefined;
 
-  const container = div`.sticker`({ style: { width: size, height: size } });
+  const container = div`.sticker${className}`({ style: { width: size, height: size } });
 
   const location = getDocumentLocation(sticker, '');
   const src = file(location, { dc_id: sticker.dc_id, size: sticker.size, mime_type: sticker.mime_type });
 
+  const sizeInt = parseInt(size, 10);
+
   // diplay thumbnail
   if (sticker.mime_type === StickerMimeType.TGS && sticker.thumbs && sticker.thumbs.length > 0) {
-    const tsize = getSize(sticker.thumbs, 200, 200, 'cover');
+    const tsize = getSize(sticker.thumbs, sizeInt, sizeInt, 'cover');
 
     if (tsize) {
       const loc = getPhotoLocation(sticker, tsize.type);

src/components/media/video/preview.ts

@@ -9,7 +9,7 @@ import photoRenderer from '../photo/photo';
 import './preview.scss';
 
 export default function videoPreview(video: Document.document, photoOptions: PhotoOptions = {}, peer?: Peer, message?: Message.message) {
-  const thumbnail = photoRenderer(video, photoOptions);
+  const thumbnail = photoRenderer(video, { ...photoOptions, className: '' });
 
   const videoAttribute = getAttributeVideo(video);
   const gifAttribute = getAttributeAnimated(video);
@@ -18,7 +18,7 @@ export default function videoPreview(video: Document.document, photoOptions: Pho
   if (gifAttribute) duration = 'GIF';
   else if (videoAttribute) duration = getReadableDuration(videoAttribute.duration);
 
-  const container = div`.video-preview`(
+  const container = div`.video-preview${photoOptions.className || ''}`(
     div`.video-preview__duration`(text(duration)),
     div`.video-preview__playbtn`(),
     thumbnail,

src/components/media/video/stream.ts

@@ -13,7 +13,7 @@ export default function videoStreamRenderer(document: Document.document, options
   if (!videoAttribute) return nothing;
   if (!videoAttribute.supports_streaming) return videoRenderer(document, options, true);
 
-  const videoEl = video({ autoplay: true, loop: true, controls: true });
+  const videoEl = video`.video__player`({ autoplay: true, loop: true, controls: true });
   const container = div`.video`(videoEl);
 
   useVideoArrtibuteSize(container, videoAttribute, options);