Info

Open Website
WARNING! Clicking "Open Website" will launch a third-party app, use at your own risk. We do not recommend logging in with your main account.

Testing and Issues

You can test this app and submit issues during the testing period of the JavaScript Contest, Stage 2 contest.

Entries with serious issues will not be able to win the contest, but even minor issues might be important for overall results.

Voting

31
by rating

Issues

Fair Quokka Mar 31 at 13:01
Transferred size: 248KB. Оптмизирован первый запуск и скорость отображения чатов после перезагрузки страницы.

В работе учтены многие замечания по итогам первого этапа. Конкурсное задание выполнено практически полностью, лишь отдельные элементы приложения не соответствуют предложенному дизайну.

Скорость приложения оказалась средней, в ходе тестирования были выявлены следующие недостатки в производительности:
– Задержка при переходе на экран чатов после введенного пароля двухэтапной аутентификации, задержка появления списка чатов;
– Третья колонка в чатах с большим количеством сообщений открывается рывками;
– Приложение серьёзно теряет в производительности при открытии предпросмотра анимированных стикеров;
– Кроме того, заметно серьёзное снижение производительности при последовательном переходе в несколько разных бесед подряд.

Прочие недостатки:
– Приложение иногда может терять сеть – независимо от стабильности подключения появляется плашка 'Waiting for network';
– В некоторых случаях медиа могут не прогружаться;
– Отсутствует навигация по медиа;
– Бесконечная загрузка в третьей колонке при отсутствии медиа;
– Не у всех сообщений есть индикатор прочитанности;
– Набранное и неотправленное сообщение в поле ввода отображается во всех чатах;
– Сущности с длинными названиями ломают вёрстку в их шапках и профилях;
– Ползунок прокрутки прыгает в середину экрана сверху.

UPD.

Transferred size при первом старте:221KB
Transferred size после перезагрузки страницы для залогиненного аккаунта: 248KB
macOS 10.15.3, Chrome 80.0.3987.
20
Large Crab Feb 18 at 11:59
nda nu i hueta
Tactful Seal Feb 18 at 13:48
+ Nice and smooth animations and transitions everywhere.
+ Fast and responsive. Web worker is must have, you are right. Though probably file download speed may be improved, but I believe it was your choice to limit it to keep other parts responsive.
+ Previews for files with media mime types.
+ Reactions for messages are visible. Cool.
+ Navigation by replies is working. Great.
+ 'Scroll to most recent' button.
+ Links section in right sidebar.
+ 'Connecting...' div when there's internet issues.
+ It really does removes messages when they are removed from other session. Awesome.
Giant Parrot Feb 19 at 03:01
Since there is no ability to comment, I write here. Part 1/5.

The animations and the UX are inspired by the macOS native app.

Updated feature list:
- The MTProto implementation is improved. 2x reduced code size with boosted performance. Also, it uses the brand new fastest ever hashing solution for KDF: https://github.com/js-cryptography/sha256 (made by us too);
- Time and transfer size required for the application to become interactive is significantly reduced. The code is split into parts that are loaded when required;
- Virtualized scroll lists for every component: dialogs, message history, search results, emoji and sticker panel. Reorders and removals are animated;
- Handling updates for dialogs and history (creation, message updates); typing events; user and unread message statuses;
- History can be opened at any given message with an animation, including clicking from: search result, message reply or pinned message;
Tactful Seal Feb 18 at 13:48
- Avatars from I believe diffferent dc are not loaded on the start. They are here after page reload.
- No navigation and extra buttons other than close 'x' in media browser (full view). 'Today' in current day date is a good catch though.
- No recent emoji. Stickers category navigation is not fully implemented (doesn't scroll on x, no previews for most packs)
- There is no way to add/remove stickers pack. Though sticker popup is fast and smooth.
- File upload is smooth, progress bar there, but there's no upload media functionality.
- Downloading the same file again doesn't work. Also, it doesn't display downloading status when there's same file in right sidebar and in chat messages list.
Giant Parrot Feb 19 at 03:02
Since there is no ability to comment, I write here. Part 2/5.

- Any dialog opens from the last read message. Messages will be marked as read during the scroll;
- All app data is cached in RAM and reusable. This cache is going to be transferred to the persistent storage later to support offline mode in future;
- Works in all modern desktop browser;

Usage notes:
- Search results are animated. Try to search “help” and then “help me” at Telegram Contests chat;
- Photo full screen popups animate from any preview shape (both for squares at shared media and rects at chat);
- Drag and Drop files for uploading;
- Nice hover fold animation for documents;
- You can connect to the Telegram test servers: https://entry1301-jsround2.usercontent.dev/?test
- Enable MTProto debug messages in browser console: https://entry1301-jsround2.usercontent.dev/?debug (?test&debug works too);
Tactful Seal Feb 18 at 13:48
- Sometimes it takes too much time to initialize 'Media' section in sidebar and I see heavy CPU load and see many 'FLOOD_WAIT_' in console. May be because it loads too much messages to find some media? But it also displays loading animation forever when there's no messages for current peer at all, may be related.
- Date formats are different from design for file elements.
- Videos and round videos are not implemented.
- New message textarea should probably allow new lines on enter when in full-height mode.


-+ Looks that previews are cached and load faster after page reload, but it takes relatively much time to do this, probably there're ways to improve.
-+ I know it's design flaws, not yours, but I'd let it be responsive up to at least 1920x screen. Doesn't look very good in full screen browser with narrow white areas near left and right edges.
Giant Parrot Feb 19 at 03:02
Since there is no ability to comment, I write here. Part 3/5.

- History loading time depends on the amount of messages to load per request and is configurable. At the moment we load 35 messages per request (first chat open or reaching to scroll end). Loading chunks for 20 messages will lead to ~1.5-2x performance for the first opening, but 35 is better for history scrolling. At the first stage we loaded 100 messages per request which led to long loading time for chat opening;

Known issues:
- Outcoming unread messages have a single tick, but this tick is white. It is a little CSS problem;
- Shared media is not available by clicking a chat avatar. You need to click on the dots button at the top left corner;
- If you click on found messages too fast or browse lots of sticker packs, you can get a flood wait error. Please close the page for a dozen seconds and open it again. We will add a requests queue later. If you have a newly created account you can get a permanent ban;
Quirky Mammoth Feb 18 at 16:12
I really like this work.

+Good smooth animations
+Support many file types
+Download files

Couple of comments:
-No send media
-No support send gifs
-Not all stickers loaded properly
-With first login there is error (see screenshot)
Google Chrome, Windows
Giant Parrot Feb 19 at 03:03
Since there is no ability to comment, I write here. Part 4/5.

- The application is not designed to work offline or after a long offline. Nevertheless, it supports reconnection and fetching updates for a short period of offline time;
- Safari will take some time to make a handshake with a server for the first loading. Just wait for ~30 seconds;
- If you encounter a long loading after an authorization or submitting a phone, please reload the page;
- An animated sticker can be invisible or paused when it’s seen for the second and next time. This is due to a little mistake in the code responsible for turning on/off a sticker;
- The application is not designed to work in multiple tabs of one browser at the same time because it leads to seq_no race of messages;
- We haven’t adapted the message scroll for iOS and for using mousewheel click-n-drag yet due to lack of time;
- The search input autofocus is broken (click manually to focus);
Captain Awesome Feb 18 at 16:20
No global search in left sidebar
Real nicknames and avatars do not match the color of the regular version of the client
No new emojies
Bugs with chat layout (replies and common messages, screen below)
No media players, videos doesnt work
Audio doesnt work
Cannot enter text until you click a text field with a mouse.
Scrolling and content bug if you press mouse3 and try to scroll chat history
No message popups with edit, copy, etc.
No upload media popup. Cant copy media too.
Sticker sets cannot load
The application freezes once.
When sending a message - there is not mark that it was sent
In many places layout does not match mockups
When an image is uploaded, it is not displayed. But there is a upload loader.
When sending, the image in the chat does not display correctly, does not open as media
If there is no media in the dialogue, then loader bug
If audio forward - no forward, no audio, but i can download
Chrome, Win10
Giant Parrot Feb 19 at 02:08
- The global search wasn’t required by the task.
- The “no avatar” colors aren’t defined by the Telegram API so it’s up to client to decide what colors to display.
- The user on your screenshot has a blank name. The user is displayed the same way in the official clients.
Captain Awesome Feb 18 at 16:31
+Deleted messages
+Send message with enter.
+Chat virtualization
+Caching

No dates in chat :( why?
Chrome, Win10
Giant Parrot Feb 22 at 03:16
Since there is no ability to comment, I write here. Part 5/5.

- Static stickers aren’t displayed in Safari because Safari doesn’t support Webp. We are making our own JS wepb2png solution at this moment;
- We’ve noticed that scrolling messages after using competitors' solutions becomes choppy sometimes. Please restart the browser before checking our solution.

The source code will be available after the contest end at:
- https://github.com/spalt08/telegram-js (application)
- https://github.com/spalt08/mtproto-js (MTProto library)
Nobody added any issues yet...