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 3 contest.

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

Voting

Comments

Global notes:
1. The view layer is rewritten from the ground up one more time. Now it uses React-like components with hooks.
2. All auth keys (not only main DC, as before) stored in localStorage.
3. IndexedDB is used for caching parts of streaming media. Cache Storage is used for caching images.
4. Preloading next chunk of messages. For example, when user scrolls up, requested messages are loading, then next messages (with same options, but offsetId of first loaded message)
5. All expensive computation tasks moved to WebWorker (in addition to the previous stage, AES CTR and converting stripped photos to jpg)
Summing up previous points, app performance has increased significantly.
6. Auto Reconnecting (disabled by default, you can turn it on in Other settings), for example, after locking the phone.
7. Fixed layout to fit design mockups.
8. Fixed all bugs from previous stages, except Apple-emojis on other platforms.
Implemented all of Minimum Requirements and Reward Requirements:
1. Mobile Version.
2. Emoji, stickers and GIFs
3. Recording voice messages
4. Search for chats
5. Shared Media and Gallery
6. Audio and video streaming
7. Archive
8. Folders
9. Polls of all types.
10. Search for messages inside a particular chat.

Extra features:
Internationalization
Notes:
- Waiting for stop bounce scrolling on IOS before prepending new messages for correctly scroll to previous top message. Then scroll a little bit to indicate that messages are loaded.
- Correct width of messages, depending on media (image, video, web-page)
- Correctly opening new user from search, for example, Quiz Bot, and starting some quiz ("/start ID_OF_QUIZ")
- Buttons Layout to support starting of Quiz Bot.
- All types of service messages.
- All types of typing content. (typing, sending file, recording...)
- Pinning dialogs from context menu
- Archiving dialogs from context menu
- Preloading new messages in media viewer
- Correctly loading answers after time exceed in quiz mode.
- Scroll down chat view when a new message is received and scroll position near last message. Always scroll down after send message.
- initial scroll position of first unread message
- sending read acknowledge when message appears in viewport
- audio synchroniztion between chat view, header player and shared media
You have not added any comments yet...
by rating

Issues

Fair Mammoth Aug 18, 2020 at 06:14
Transferred size при первом старте: 698KB.
Transferred size после перезагрузки страницы для залогиненного аккаунта: 840KB.

В целом, скорость работы приложения средняя – приложение недостаточно оптимизировано для работы на менее производительных устройствах. Приложение практически полностью соответствует дизайну предоставленных макетов, но не все замечания по итогам предыдущих этапов приняты во внимание.
В ходе тестирования приложения было выявлено множество проблем, в том числе критических: как в первой части задания, так и во второй. Из-за них работа не может занять более высокое призовое место. 

1. Критические недоработки
– В Safari на iOS наблюдаются проблемы со входом, когда на первом экране происходит бесконечное обновление страницы;
– В чатах не отображаются закрепленные сообщения;
– Не поддержано корректное отображение альбомов и пересланных сообщений;
– Не отображаются некоторые стикеры и GIF;
– Голосовые сообщения, записанные с iPhone XS, не проигрываются на этом же устройстве;
– Попытка набрать текстовое сообщение и отправить его в момент записи голосового ломает кнопку отправки — отображается микрофон до момента обновления страницы;
– Двойное-тройное касание по кнопке микрофона и последующая попытка отправки ломают интерфейс – голосовое сообщение продолжает записываться, отображаясь во всех чатах. Отправить текст или другое голосовое сообщение уже невозможно до обновления страницы.

2. Прочие недоработки
– Видео возможно отправить только документом;
– В альбомном режиме в Safari на iOS не отображается поле ввода нового сообщения; 
– Контекстное меню на беседах в нижней части списка чатов открывается за пределами экрана на Android (Chrome);
– В результатах поиска сообщения из групп отображаются как сообщения из личных чатов;
– Если в поле ввода присутствуют только эмодзи, не появляется кнопка отправки;
– Не продумана работа в альбомной ориентации с панелью стикеров и GIF – невозможно перейти к самим файлам;
– Не реализован поиск по GIF.
Samsung Galaxy S9 (Android 10); iPhone XS (iOS 13.6); macOS 10.15.5; Chrome 84.0.4147 / Safari 13.1.2.
10
Fair Mammoth Aug 18, 2020 at 06:14
3. Недоработки второй части задания 
– При перезагрузке страницы смаргивает окно логина;
– В работе не реализован стриминг для мобильных устройств в Safari;
– Закрепление чата в архиве закрепляет его и в основном списке – при разархивировании чат будет закреплён в общем списке бесед;
– Некоторые медиа отображаются растянутыми при работе с приложением в альбомной ориентации;
– Отсутствует вкладка Recent в поиске;
– Не реализована прокрутка свайпом в галерее;
– При получении нового сообщения в архивированном чате он не вылетает в общий список;
– Редактирование папок возможно только из списка чатов;
– Объяснения в опросах не поддерживают разметку;
– Список проголосовавших в опросах обновляется с опозданием;
– Не реализован поиск по дате внутри чата.
Samsung Galaxy S9 (Android 10); iPhone XS (iOS 13.6); macOS 10.15.5; Chrome 84.0.4147 / Safari 13.1.2.
10
Fᴏʀᴅᴇɴ Jun 21, 2020 at 22:45
The corner of the message is white until loading the image.
Yandex Browser 20.6.1.148 / Windows 10
App doesn't load after entering code confirmation.
Mozilla Firefox, Ubuntu 18.04
Kooky Hawk Jun 22, 2020 at 20:16
I didn't test it in Firefox well because it didn't require Firefox support. App relies on VisualViewport API.
So if you'd like to test it in Firefox, please enable "dom.visualviewport.enabled" in "about:config".
And it'll work.

It can be fixed, by replacing:
if (window.visualViewport.height && (isIOS || isAndroid)) {
by
if (window.visualViewport && (isIOS || isAndroid)) {
in src/app/index.tsx:143
Pressing a letter-key('a','b'...) in the field for your phone number (when logging in) will empty the field for the country.
Desktop/Windows 10/Google Chrome 83.0.4103.106
Kooky Hawk Jun 22, 2020 at 14:25
Can't reproduce it. Phone input doesn't respond to non-numeric chars.
Expanding the list of countries (when logging in) will create a scroll-bar for the whole window (which was not there before, that is great) and thus changing aspects a little bit (causing an tiny yet still unpleasant glitch).
Nitpicky issues from the "attention to detail"-category...
Desktop/Windows 10/Google Chrome 83.0.4103.106
Kooky Hawk Jun 22, 2020 at 14:19
Thanks. I didn't test it properly. It can be fixed by deleting margin-bottom from .select__menu-position
山 | Bobby | 山 Jun 22, 2020 at 16:10
Firs of all I want to say thank you for adding my country in country list. but there is an Inaccuracy: the correct phone code is +7 940 (840 code is for
landline phones). Short name of country is "AB" or "ABH".
And I have a problem accessing the site from a mobile phone. The site is initially loaded, but then all the text is replaced with a solid white canvas. Using a site from phone is simply impossible. Thank you for your attention!
Xiaomi Redmi Note 5 Pro / Chrome 83.0.4103.106 / Android 9. 16.0-20190704-UNOFFICIAL-whyred. LineageOS.
Kooky Hawk Jun 22, 2020 at 18:24
Can't reproduce it. Tested it on old Android phone and lambdatest.com.
Try to reload the page, maybe there were some network troubles.
D
Deleted Account Jun 23, 2020 at 17:19
country is not determined automatically (login page)
layout does not match the mockups
no context menu in chat
no caching in dialogs ?
there are no animations at work, left-right sidebar, etc.
no media viewer animations
sidebar closes when switching between dialogs
messages where there are reply are long rendered in the chat
no emoji in chat/emoji panel/dialog list etc.
the list of folders cannot be scrolled with the mouse wheel
streaming audio works, but not quite correctly, every time you rewind, the progress is reset, and already downloaded is not displayed
also, when rewinding audio to different places, for some reason, the same place is always played
audio and voice messages do not switch to the next when playback is finished
when the audio ends it disappears from the topbar
the dialog with the saved messages in the list of pinned folders is not displayed
Chrome 83.0.4103.106, Win10 64bit, res 2560x1440
Kooky Hawk Jun 24, 2020 at 14:41
Videos are here: https://t.me/hawk1414_r
> no caching in dialogs ?
As I noticed some top-rated submission in previous round didn't have dialog caching too. So, I decided to remove caching, to simplify logic.

> sidebar closes when switching between dialogs
it's intentionally

> no emoji in chat/emoji panel/dialog list etc.
can't reproduce it (video in channel). There are no Apple emojis on Windows. But as I tested, they work.

> the list of folders cannot be scrolled with the mouse wheel
can't reproduce it (video in channel)

> also, when rewinding audio to different places, for some reason, the same place is always played
maybe rewinding occurs on similar fragments?

> when the audio ends it disappears from the topbar
it's intentionally
D
Deleted Account Jun 23, 2020 at 17:19
GIFs do not download automatically, photos, too, streaming GIFs do not work ?
video streaming does not work well when rewinding
if you hold down the mouse button 3 to scroll the chat, the scroll stops in one place and the history doesnt load
often the chat media just doesn’t load, it remains blurry, and the other one requires you to manually press the download button
in forwarded messages, just a nickname is displayed, which is not very clear
for some reason sometimes the media does not open when you click on the photo in the right sidebar
waveform progress slows down and goes jerky
work is not optimized, for 10 minutes tests >1.5GB. memory leak in different places, for example in the sticker panel (check the video)
with prolonged use of the application, the dialogue may open sluggishly and for more than 2 seconds the entire screen freezes during ripple animation
unread messages do not work correctly, and also not all messages are displayed
Chrome 83.0.4103.106, Win10 64bit, res 2560x1440
Kooky Hawk Aug 5, 2020 at 08:21
> if you hold down the mouse button 3 to scroll the chat, the scroll stops in one place and the history doesnt load
There is a problem with fast scroll in chat with short messages. It can be solved be replacing 500 by 0 in /src/app/components/MessagesList/useLoadMessages.ts:286

> in forwarded messages, just a nickname is displayed, which is not very clear
I don't understand

> work is not optimized, for 10 minutes tests >1.5GB. memory leak in different places...
Actually it's not a memory leaks. Sticker panel doesn't removed after hiding to improve performance on reopen. There is some place to improve memory consumption.
It's more accurately to check memory consumption in Chrome Devtools "Memory" tab
D
Deleted Account Jun 23, 2020 at 17:20
when you enter the dialog, you cannot type until you click on the input field
there is no sidebar caching, every time 2 loaders appear on it
recent search doesnt work
the search does not highlight the found word
sticker set search is not working properly (check the video)
search for stickers is buggy if you close and open the panel again, you cannot click on the input field (check the video)
some dialog avatars do not load, and also substitutes incorrect avatars if you enter the dialog. (check the video)
in chat half of the stickers just do not load
sticker animation doesn’t work const, works when hover
sticker popup doesnt open from chat
trending stickers open in the emoji panel instead of the right sidebar
from trending stickers you can’t open a popup with a set of stickers, they also don’t have animations

https://t.me/hawk1414 - videos/screens here
Chrome 83.0.4103.106, Win10 64bit, res 2560x1440
Kooky Hawk Jun 24, 2020 at 11:33
> recent search doesnt work
I don't understand (video in channel)

> sticker set search is not working properly
it's true. I show only results recieved from server without filtering trending stickers locally.

> search for stickers is buggy if you close and open the panel again, you cannot click on the input...
temporary it can be resolved by clicking on back button and opening search again

> some dialog avatars do not load, and also substitutes incorrect avatars if you enter the dialog.
If you are in Russia, do you use VPN? Maybe there is some problem with connection to DC where avatar is stored.

> in chat half of the stickers just do not load
Can't reproduce it. It may take some time to download it.

> trending stickers open in the emoji panel instead of the right sidebar
I couldn't find mockup with stickers on right sidebar. Does it exist? I Made it the same as in MacOS app by default.
D
Deleted Account Jun 24, 2020 at 12:11
> If you are in Russia, do you use VPN? Maybe there is some problem with connection to DC where avatar is stored.
no, I'm from Ukraine

> I couldn't find mockup with stickers on right sidebar. Does it exist? I Made it the same as in MacOS app by default.
JS_3 > Chat_SearchStickers_1.png , sidebar with header, this is definitely not an emoji panel

>> the list of folders cannot be scrolled with the mouse wheel
> can't reproduce it
Sorry, I meant the slider in the dialog list, he doesn't scroll

> I don't understand
In chat forwarded

> There are no Apple emojis on Windows. But as I tested, they work.
Yes, I mean apple by default

> maybe rewinding occurs on similar fragments?
No, i recorded a video with sound with 3 different bugs

Added to the channel https://t.me/hawk1414
Chrome 83.0.4103.106, Win10 64bit, res 2560x1440
Kooky Hawk Jun 24, 2020 at 14:12
> JS_3 > Chat_SearchStickers_1.png , sidebar with header, this is definitely not an emoji panel
I must have misunderstood. It's mobile layout. On mobile, it looks like this.

> Sorry, I meant the slider in the dialog list, he doesn't scroll
The scrollbar is hidden. But, as I remember, you can scroll with "Shift + Mouse Wheel" on Windows.

> No, i recorded a video with sound with 3 different bugs
Apparently, it happens on certain files. Added video to https://t.me/hawk1414_r . I don't have problem with wrong offset. I should have checked deeply.
Oleg Illarionov Jul 23, 2020 at 11:58
I clearly see second scrollbar
Xiaomi mi9t, default browser (same on iphone)
Kooky Hawk Jul 23, 2020 at 12:38
Most likely you toggled "Native Scroll" checkbox in Settings. Native Scroll(bar) is turned on by default on Android and iOS.
scroll works awful when mouse cursor is not on screen center. This problem is actual for "native scroll" and custom scroll.
mac os chrome 84.0.4147.89
no error on message sending fail
mac os chrome 84.0.4147.89
this button doesn't work
mac os chrome 84.0.4147.89
messages from users with whom you do not have a dialogue are not displayed
mac os chrome 84.0.4147.89
new group creation doesn't work
mac os chrome 84.0.4147.89
contacts are not working
mac os chrome 84.0.4147.89
archive tab doesn't work, archive chats are displayed in main dialog list
mac os chrome 84.0.4147.89
Kooky Hawk Aug 5, 2020 at 08:24
can't confirm
Polls doesn't work correct
mac os chrome 84.0.4147.89
Kooky Hawk Aug 5, 2020 at 16:21
please provide more details
counter doesn't work, if you have already read the message
mac os chrome 84.0.4147.89
you cant pick country and it's not autodecteting, so it's impossible to log in
Iphone 8 , 11.4.1, safari
Nobody added any issues yet...