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

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

Voting

78

Comments

This Telegram client is written from scratch in pure JavaScript (neither TDLib nor other clients' code was used).

If you're having trouble logging in using your phone (because of Telegram's logins limit), you can use this app in test mode by appending #test to the URL:
https://entry1075-jsround1.usercontent.dev/#test
(more details about test phone numbers: https://core.telegram.org/api/auth#test-phone-numbers)
Here's a list of features that are implemented now:

- MTProto 2.0 Layer 105 over Secure WebSockets (WSS)
-- Lazily connecting to multiple DCs and keeping connections
-- Correctly handling DC migration errors on low level
-- Fast encryption/decryption using (mostly) browser's Crypto API, with cryptographically strong PRNG
-- Fast PQ factorisation offloaded to a Web Worker to prevent UI freezing
-- Support for test mode via #test in URL
- Login/signup flow
-- Custom country selection component
-- UI is fully responsive even before all libraries are loaded and initial key generation is complete
-- Automatic country detection via help.getNearestDc method
-- Stage switching animations
-- Autofocusing text fields/autosubmitting 5-digit confirmation code
-- Loader on login button
-- Error reporting on each step
-- Provided in mockups Lottie animations
-- 2FA authorisation is supported (on layer 105)
-- Selecting, cropping and upload profile photo on signup
- Dialog list
-- Custom scroll (also used in message list and country field's autocomplete)
-- Infinite loading on scroll
-- Pinned chats separator/icon
-- Ripple effect on click (also used for all buttons)
-- Unread inbox message counter (in gray color when chat is muted, in green when it's not)
-- Unread outbox message ticks
-- All dialogs are updated on any change (photo update/title update/new message/top message edited/etc)
-- Dialogs are bumped up when a new message is posted, and unread counter is increased
-- Showing "typing…" on typing updates
-- Online indicator (green dot) for users
-- Special avatars for saved messages and deleted accounts
- Message list
-- Dialog title, photo, participants count and online count are all dynamically updated
-- Infinite loading (up) on scroll
-- Automatically focusing new message field, when it's available
-- Messages from the same user sent within short time period (e.g. 1 minute) are grouped together: less distance between them, individual border radii, "tail" is shown only for the last message in group
-- All service messages (user joined/group photo changed and so on) are supported
-- Date separators
-- Replies and forwarded messages are supported
-- All message entities (bold, italic, links and so on) are correctly rendered, links and phones are clickable
-- All messages are updated on any change (message edit, author's photo/name update/etc)
(cont.)
-- Single, double and triple emojis are enlarged and displayed as stickers
-- Photos/GIFs/videos/round videos are rendered as requested by design (clipped by message's contour)
-- Stickers and animated stickers are supported (animation plays on mouse hover)
-- Media previews are loaded sequentially, with loader animation
-- Documents, contacts, audio files and voice messages are properly rendered
-- When chat is opened, its history is marked as read
-- New messages are displayed with animation
-- Sending text messages is supported (with animation too)
-- Multiline messages are supported, sending messages with Ctrl-Enter (or Cmd-Enter)
-- Sending photos and documents is partly supported (messages are sent, but UI is not yet updating correctly)
-- Closing message list with Escape key
- Profile/chat info
-- Showing right panel on userpic/name click
-- Shows photo, name, (dynamically updated) status, bio, username and phone (when available)
-- Closing panel with «×» button

- Media viewer
-- Showing media viewer on photo click
-- Showing small preview before photo is loaded, with loader animation
-- Showing sender's name/photo/date
-- Showing photo's caption (when available)
- Misc
-- Animated menus (main menu at the left column, chat menu at the center, attach menu at the new message input, profile's menu at the right column)
-- Message list is showing thin line at the bottom when it's not scrolled fully to the end; same for the top of dialog list
-- Added "Log out" menu item to main menu to simplify testing
-- UI is somewhat adaptive and can be effectively used even on mobile screens
-- All icons are in SVG format, so they look sharp with any pixel density (and even when the whole page is zoomed in)
-- UI is made fully reactive without using Virtual DOM. Whenever a server update is received, it directly changes DOM elements that are affected by it.
You have not added any comments yet...
by rating

Issues

Fair Mammoth Jan 10 at 02:08
Собственная реализация протокола и использование вебсокетов приводят к высокой производительности приложения. Одно из самых быстрых приложений среди заявленных работ с полностью выполненным конкурсным заданием.
Работа соответствует дизайну предоставленных макетов. Transferred size: 250KB.
Отдельно отметим большое количество реализованных функций, не отмеченных в конкурсном задании, – чтение и отправка сообщений (включая медиа), просмотр видео, работа с прогресс-барами, анимации переходов между экранами, просмотрщик медиа.

Незначительный недочет в дизайне: положение кнопки 'Next' на стартовом экране неверное, в предложенных макетах она находится ниже ‘Keep me signed in’.

Хотим обратить внимание на небольшое количество недостатков, которые были выявлены в процессе тестирования работы:
- При повторном входе в приложение с другого аккаунта может происходит смаргивание чатов предыдущего аккаунта;
– На экране входа отсутствует поддержка флагов;
– Нет фильтрации в полях ввода страны и номера;
– Несовершенный поиск стран: получается искать только по первым символам первого слова. (Не найти UK по 'Kingdom', Корею по 'Korea', Германию по 'man');
– Нет автовыбора страны при наборе префикса;
– Нет форматирования номеров на экране логина.
Google Chrome 78.0.3904, macOS 10.15.2
20
Иннокентий Бест Nov 18, 2019 at 19:08
How to choose another country?
Opera 64
1
Hip Hyena Nov 18, 2019 at 19:16
Use Backspace (or Delete) key to delete the text entered into the text field.
Good work, but you need to disable form validation
Windows 7, Chrome
1
Illia Lukisha Nov 18, 2019 at 18:58
Viewport is much bigger than screen size.
iPhone XS / iOS 13.2 / Safari
Quirky Mammoth Nov 18, 2019 at 19:04
Can't login. What wrong?
Windows 10, Chrome Browser
Hip Hyena Nov 18, 2019 at 19:10
You probably logged into your account too many times today. Telegram currently has a limit of 5 logins per day, as stated here: https://core.telegram.org/api/auth#test-phone-numbers.

You can try out my submission in test mode by appending #test to the URL:
https://entry1075-jsround1.usercontent.dev/#test
Tactful Seal Nov 18, 2019 at 19:09
Doesn't select the country if you type phone code number in phone field.

Shows autocomplete(native browser one) of phone number for country field.
Hip Hyena Nov 18, 2019 at 19:19
There are countries sharing the same phone code prefix. As the selected country value is not used in login process, there's no real need to guess it.
Tactful Seal Nov 18, 2019 at 19:40
There're ways to check what country the number is from even if their codes are the same. Even for US/Canada where it's very complex, but possible. Works in my entry, btw. Spent many hours optimizing it.

Didn't want to open another issue, but don't see the way to reply to your comment, sorry.
Hip Hyena Nov 18, 2019 at 19:43
That’s a nice feature, but I decided not to overengineer this part.
why does your js bundle is obfuscated? according to rules you shouldn't
Hip Hyena Nov 19, 2019 at 03:28
JS and CSS bundles are minified to improve page loading speed.

According to rules, you could submit both compressed code in dest folder and original sources in src. That’s what I did.
Yaroslav Lyzlov Nov 19, 2019 at 06:21
Console errors and not load avatars (and all unloaded avatars without different colors and initials)
Yandex browser, OS X
Hip Hyena Nov 19, 2019 at 06:43
That's weird, something's broken on transport level. Server probably decided to split response into multiple websocket packets, and my work is not yet ready for that :)

As for unloaded avatars — nowhere in the design mockups it was specified that they should be differently colored. User names, however, are always colored blue (see the mockup below), so I figured that their userpics should have the same color.
There is no way you did this alone in 2 weeks, as you say you did it that way.
Hip Hyena Nov 21, 2019 at 18:46
That’s very flattering to hear, thank you! It was a lot of hard work, but I rather liked it.
Kingly Chicken Nov 23, 2019 at 20:21
Such a MASSIVE amount of work and very nice app!
Hip Hyena Nov 24, 2019 at 09:14
Thank you!
If we have saved the name with empty string, it will not display it correctly.
Not dependent
Why a service or support contact, display last recent online time?
Perhaps it's a bug, Because we cannot watch it in other official telegram clients.
Not dependent
Cannot display name and chat list of "Bot Support". (@BotSupport), Also It should display the service word instead of online.
Not dependent
Nobody added any issues yet...