Info
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
Everything from 3rd stage requirements implemented:
- Mobile layout. It was mobile ready on the 2nd round, but I added many improvements and optimized safari support. Swipe gestures for dialogs<>chat<>rightbar and in the media browser.
- Stickers dialog with Stickers search and Trending sticker sets. Tricky memory optimizations for tgs stickers. GIFs section working through streaming to omptimize first time display time. WEBP converter lazy loaded in safari for static stickers.
- Recording voice message via lazy loading ogg recorder.
- Left sidebar search. Term highlighting(rude algo to guess word form if needed implemented) + global search. Added button to subscribe to channels.
- Shared media. Media/Files/Audio/Links tabs. Save/Forward buttons in the media browser. Navigation to the message on the top bar audio player click.
- Mobile layout. It was mobile ready on the 2nd round, but I added many improvements and optimized safari support. Swipe gestures for dialogs<>chat<>rightbar and in the media browser.
- Stickers dialog with Stickers search and Trending sticker sets. Tricky memory optimizations for tgs stickers. GIFs section working through streaming to omptimize first time display time. WEBP converter lazy loaded in safari for static stickers.
- Recording voice message via lazy loading ogg recorder.
- Left sidebar search. Term highlighting(rude algo to guess word form if needed implemented) + global search. Added button to subscribe to channels.
- Shared media. Media/Files/Audio/Links tabs. Save/Forward buttons in the media browser. Navigation to the message on the top bar audio player click.
- Streaming. GIFs/Audio/Voice/mp4 work via it. Some optimizations compared to what I had on the 2nd round, works in Safari now and you can navigate player jumping to not loaded sections. I tried to optimize it enough to view not-cached 1080p videos with no lags. Works ok, there're few parameters in config file and in code, it would be cool to change them based on connection speed and ping in real time.
- Archive/Folders. Pins, moving dialogs to/from archive, creating/removing/managing folders with filters.
- Polls. Added some bot buttons support, enough to use quiz bot, pause/start/share/startingroup. Votes results sections/different types/timers/explanations are there.
- Switched in-chat search to inline layout with navigation and search term highlighting.
- Archive/Folders. Pins, moving dialogs to/from archive, creating/removing/managing folders with filters.
- Polls. Added some bot buttons support, enough to use quiz bot, pause/start/share/startingroup. Votes results sections/different types/timers/explanations are there.
- Switched in-chat search to inline layout with navigation and search term highlighting.
On 2nd round improvements
- On missed functionality implemented albums. Both sending(with reordering) and displaying. Positioning based on TG native apps algorithm, so looks the same as in native apps. Support for mixed albums (photos+videos).
- Previews/info string/last seen timestamps/service messages updated
- Media captions/downloading files fixed
- Chat/user names and avatars updates handling in real-time.
- Check/Double check marks on sent messages
- Forward messages and media items (with peers filtering/search)
- Various speed optimization both for loading and dom updates
- Many small fixes like channel posts view counts, mute/unmute, go to replied etc.
Doing final touches and readme files and will publish it here: https://github.com/jeka-kiselyov/lovegram
- On missed functionality implemented albums. Both sending(with reordering) and displaying. Positioning based on TG native apps algorithm, so looks the same as in native apps. Support for mixed albums (photos+videos).
- Previews/info string/last seen timestamps/service messages updated
- Media captions/downloading files fixed
- Chat/user names and avatars updates handling in real-time.
- Check/Double check marks on sent messages
- Forward messages and media items (with peers filtering/search)
- Various speed optimization both for loading and dom updates
- Many small fixes like channel posts view counts, mute/unmute, go to replied etc.
Doing final touches and readme files and will publish it here: https://github.com/jeka-kiselyov/lovegram
Notes for judges:
- Audio initialization optimization is little different on Right Sidebar and in-chat audio player. Please be sure to check out both. Both places work via streaming though.
- It looks that there're issues in many places when working in browser incognito mode, be sure you are not in it if UI stuck in something.
- Things like icons, folder management tgs are cached in memory. Loads faster on refresh. I don't expect my entry to be the best in bundle size this time, I didn't have much time to optimize this, but I also would not want this to be treated as a cheat, so be sure your bundle size calculations cover this.
- There's a logout button in the top left menu, but I noticed after deploying that sometimes it doesn't remove everything. Be sure to clean out indexeddb and localstorage if you want to take a fresh look.
- Thank you for your time, you are great :)
- Audio initialization optimization is little different on Right Sidebar and in-chat audio player. Please be sure to check out both. Both places work via streaming though.
- It looks that there're issues in many places when working in browser incognito mode, be sure you are not in it if UI stuck in something.
- Things like icons, folder management tgs are cached in memory. Loads faster on refresh. I don't expect my entry to be the best in bundle size this time, I didn't have much time to optimize this, but I also would not want this to be treated as a cheat, so be sure your bundle size calculations cover this.
- There's a logout button in the top left menu, but I noticed after deploying that sometimes it doesn't remove everything. Be sure to clean out indexeddb and localstorage if you want to take a fresh look.
- Thank you for your time, you are great :)
You have not added any comments yet...
by rating
Issues
Transferred size on startup: 308KB
Transferred size after logging in: 344KB
Unfortunately, the speed of the app you submitted is significantly below our expectations. Not all of the earlier identified issues were fixed.
1. Critical issues:
– 2-3 taps on the microphone button cause the app to crash on Android (Chrome);
– The app allows sending broken empty voice messages with a single tap, listening to such voice messages causes a crash;
– Some channels have no input field;
– Refreshing the page can open a random channel opened each time instead of the chats list;
– Swiping down on the screen when the gallery is opened causes the nav bar to overlap the input field until the page is reloaded;
– The app does not run smoothly on iOS (Safari);
– Words get cut off on Android (Chrome) and iOS (Safari);
– Some GIFs are blurred and don't load at all in chats;
– GIFs search is missing;
– The context menu doesn't work on iOS;
– When you open a chat on iOS, you have to scroll up to the top to see its header;
– Sometimes the app doesn't load a chat's history at all;
– Global Search results are discarded when you return from an opened chat;
– Chats can be missing in Archived Chats;
– The iOS version doesn't display all the folders;
– Quizzes are broken on iOS;
– Scrolling is unavailable in the Trending stickers tab;
– Streaming is laggy when scrolling videos.
2. Medium to minor issues identified during testing:
– Stickers in the Stickers tab are distorted when viewed in landscape;
– The app does not prevent swipes while the Stickers tab is opened, e.g. swiping causes the Shared Media column to appear;
– Sending sticker closes the Stickers tab;
– The animated monkey overlaps with the code field in landscape mode;
– Typing statuses are missing on iOS;
– Voice message layout is broken;
– The Trending Stickers section contains only five packs.
3. Task II issues:
– Certain folders show no chats displaying a progress bar instead;
– Search by date is missing;
– Entities belonging to an album are blurred on Android (Chrome);
– Video and audio can be played simultaneously;
– Video previews are blurred in chats and show “0:00” instead of the actual duration;
– Pinning a chat in the archive makes it pinned in the main list when unarchived;
– Numerous layout issues in polls, percentage is loaded each time from zero when chat is opened;
– Unread counters in tabs are incorrect.
Transferred size after logging in: 344KB
Unfortunately, the speed of the app you submitted is significantly below our expectations. Not all of the earlier identified issues were fixed.
1. Critical issues:
– 2-3 taps on the microphone button cause the app to crash on Android (Chrome);
– The app allows sending broken empty voice messages with a single tap, listening to such voice messages causes a crash;
– Some channels have no input field;
– Refreshing the page can open a random channel opened each time instead of the chats list;
– Swiping down on the screen when the gallery is opened causes the nav bar to overlap the input field until the page is reloaded;
– The app does not run smoothly on iOS (Safari);
– Words get cut off on Android (Chrome) and iOS (Safari);
– Some GIFs are blurred and don't load at all in chats;
– GIFs search is missing;
– The context menu doesn't work on iOS;
– When you open a chat on iOS, you have to scroll up to the top to see its header;
– Sometimes the app doesn't load a chat's history at all;
– Global Search results are discarded when you return from an opened chat;
– Chats can be missing in Archived Chats;
– The iOS version doesn't display all the folders;
– Quizzes are broken on iOS;
– Scrolling is unavailable in the Trending stickers tab;
– Streaming is laggy when scrolling videos.
2. Medium to minor issues identified during testing:
– Stickers in the Stickers tab are distorted when viewed in landscape;
– The app does not prevent swipes while the Stickers tab is opened, e.g. swiping causes the Shared Media column to appear;
– Sending sticker closes the Stickers tab;
– The animated monkey overlaps with the code field in landscape mode;
– Typing statuses are missing on iOS;
– Voice message layout is broken;
– The Trending Stickers section contains only five packs.
3. Task II issues:
– Certain folders show no chats displaying a progress bar instead;
– Search by date is missing;
– Entities belonging to an album are blurred on Android (Chrome);
– Video and audio can be played simultaneously;
– Video previews are blurred in chats and show “0:00” instead of the actual duration;
– Pinning a chat in the archive makes it pinned in the main list when unarchived;
– Numerous layout issues in polls, percentage is loaded each time from zero when chat is opened;
– Unread counters in tabs are incorrect.
Samsung Galaxy S9 (Android 10); iPhone XS (iOS 13.6); macOS 10.15.5; Chrome 84.0.4147 / Safari 13.1.2.
Invalid phone number error event though I entered a valid phone number.
Mozilla Firefox, Ubuntu 18.04
it's very hard to use voce recorder on desktop, because you must hold voice button during recording. it's not suitable for mouse experience
mac os chrome 84.0.4147.89
Nobody added any issues yet...