Description entry1300

To test my entry, please enable Insecure origins treated as secure in chrome://flags and add http://entry1300-jsround2.usercontest.com there. demo 🖼
I did't know, that Chrome allows using Web Crypto API only on https and localhost.

As noted in the review for the first stage of contest, WebSockets are important in terms of performance. So, I decided to rewrite Data layer (messaging with Telegram server). The new implementation is based on GramJS , but uses TypeScript (parts which are used frequently, covered by types). In addition to GramJS implementation, I almost completely replicated Telethon client , cutted some huge dependencies and placed short versions of them in src/vendor. Fixed some bugs, for example sending batch requests, some performance issues, such as slow AES decryption. Added cancellable file downloading (primarily for media streaming ). Despite the fact that almost the entire Telethon client is implemented, there was not enough time to use all of its features in view.

View layer in the first stage was simple as possible (in terms of abstractions). In the second stage, it would be difficult to use it, because of app dynamics. So, I wrote simple abstraction around WebComponents for convinient updating view, based on properties passed to component and wrote a simple function for rendering keyed lists, such as dialog list, messages and shared media.

Fixed issues from first stage review

  1. Countries search; For demo purposes, I added aliases for three countries. Now you can find these countries with any value from righthand array demo 📹: 

    "Russia": ["russian federation"],
"United Kingdom": ["britain", "great britain", "u.k."],
"United States": ["usa", "u.s.a."],

    For other countries, it's enough to add aliases to src/login/components/Select/countries.ts

  2. Loading after registration was fixed.

  3. Scrolling performance was debugged. I deleted filter: drop-shadow(...), because it requires good GPU. Also, I use contain: content; for chat messages, which also increased scrolling performance.
  4. Added group avatars.
  5. Pinned and muted chats are highlighted now.
  6. Messages are aligned as they should be.
  7. Line breaks are fixed.
  8. Messages are no longer duplicated when you click twice on dialog.

Key details

Global

  1. I18n. Execute localStorage.setItem('lang', 'ru') (or any different language supported by Telegram Desktop) in console and reload the page. All texts, except file hover menu, are internationalized. ES 🖼, RU 🖼
  2. Performant slider. Mainly it was developed for media popup (but slider in popup isn't implemented). Anyway, it used in sidebars. It supports delayed deletion of DOM elements, for efficiently fast returning to the previous slide, and returning to the previous slide while current animation is playing. demo 📹,
  3. AES and factorization executing in WebWorker.
  4. Factorization. Firstly, I copied leemon implementation from prime-factorization-benchmark . Then I investigated, that it's possible to improve performance with different algorithm and native BigInt. [1 ] [2 ]. So I used Brent’s algorithm with BigInteger.js wrapper for fast factorization.
  5. Profile photos and small (< 500KB) files are cached in IndexedDB.
  6. Storybook with core components

Known Issues (specific issues described below each part)

  1. The most ridiculous oversight is 2 versions of Lottie.js in the bundle. It can easily lose 64 KB (gzipped) only by replacing: import lottie from 'lottie-web'; by import lottie from 'lottie-web/build/player/lottie_svg'; in src/login/components/Monkey/index.ts
    Visualization: before after
  2. There are some small features that I forgot to add to view, such as src/chat/utils/audioRecorder.ts

Dialog list

Service messages, highlighting entities demo 🖼, demo 2🖼
Typing info, updating unreaded count demo 📹
Reordering demo 📹

Known Issues

  1. Wrong date formatting (forgot to multiply date by 1000) demo 🖼
  2. When a new message is received, the dialog moves to top, not taking in account pinned dialogs demo 📹
  3. Wrong online indicator z-index demo 🖼;

Chat

Supported messages wrappers:

Reply demo 🖼
Forward demo 🖼
Plain demo 🖼

Supported messages types:

Plain text demo 🖼
Voice demo 🖼
Audio demo 🖼
Stickers demo 📹
Video demo 📹
Images demo 📹
Webpage demo 🖼
Polls demo 📹
Files with download cancelling demo 📹
Contacts demo 🖼
Buttons demo 📹
Servise messages demo 🖼
Emoji
Gifs (but without playing)

Additional notes:

  1. Stickers auto-pausing while they are not in viewport; demo 📹
  2. Audio and video downloading cancellation; audio demo 📹, video demo 📹
  3. Voice seeking highlighting; demo 📹

Known Issues

  1. Replies rerender with loaded data, only when receiving new messages or requesting new messages demo 📹
  2. Round message has the wrong layout demo 🖼
  3. Polls that already have votes and does't have your vote are rendered incorrectly demo 🖼
  4. Some message wrappers have wrong border-radius. I implemented media clipping as in design storybook. But then, I investigated, that it kills scroll performance on devices with slow GPU, due to clip-path GPU rendering and disabled it at the last moment. I think it's possible to use clipping and make it performant, but some investigation required.
  5. Gifs that are actually mp4 are not playing because of wrong routing in src/chat/components/Chat/MessageContainer.ts:230
  6. Video popup closing only with a close button.

New messages

Wysiwyg demo 📹
Emoji and stickers demo 📹
Images uploading (with DnD);
supports album uploading, but without
displaying as album in message list 		demo 📹
Video uloading without previewing
Files uploading (with DnD) demo 📹
Poll demo 📹

Known Issues

  1. emoji/stickers popover closing only after selecting something. demo 📹
  2. poll/file/image popup closing only on overlay clicking. demo 📹
  3. there are only animated stickers in new message menu
  4. there is no uploading progress

Shared media

demo 📹

Search for messages in chats

demo 📹

Media streaming / downloading on demand

My biggest tragedy of this stage 😭

I've wasted an unacceptable amount of time (about 4 days) on implementing audio/video streaming, which included in the final result partially (only with audio/mpeg, audio/mpeg3, audio/mp3) and with flag. By default media plays after full download.

Stream player mainly located in src/chat/MediaPlayer/StreamDownlaoder.ts and src/chat/MediaPlayer/GapController.ts

While developing, I was testing it on segmented mp4 file and I thought that DocumentAttributeVideo.supports_streaming: true, denotes that video is segmented. But then, I realized, that it's not true, and all videos that I found in public channels was unsegmented. So I disabled it because I had no time and skills to implement remuxing.

But, it's available with a flag, because after downgrading to src/chat/MediaPlayer/PlainDownloader.ts, it was necessary to implement the same interface and there was no time to test it in depth. So it's not very stable, sometimes it can be necessary to seek audio to trigger playing.

You can test it with executing localStorage.setItem('use_streaming', '1') in console and reloading the page.

Demo 📹 (⚠️video with sound, and it's a little bit noisy).

If maybe you have time and desire to test it on segmented video (as this ) without seeking, you can replace if (isMp3 && this.mediaStreamMime && use_streaming) { with if (true) { in src/chat/MediaPlayer/MediaPlayer.ts:133 and rebuild project with yarn install then yarn build. Demo 📹