JavaScript Contest 2024, Round 1

Part 1 (Live Streaming)

The Task is to implement Live Streaming into Telegram Web K. The final result should include the following Live Streaming features with the closest possible implementation of the provided mockups:

Resources

  • The archive containing all the mockups is here. For Figma, follow this link.
  • The source code of Telegram Web K is available on GitHub.

For additional references, such as scenarios not mentioned below or specific states, please see the native Telegram apps for Android and iOS.

Contest Requirements

  1. No third-party UI frameworks are allowed.
  2. Your app must maintain complete consistency with the codebase of Telegram Web K, ensuring it is ready-to-merge.
  3. The most preferred implementation for the task is a solution built by re-using parts of dash.js. However, you may opt for your own approach, as long as the final result is not inferior to the implementation present in Telegram's native apps.

It is mandatory for your app to work flawlessly on desktop Chrome (across Linux, macOS, Windows) and Safari on macOS. A proper support for other browsers and mobile environments (Android, iOS) will be considered a bonus.

1.1 User Perspective

The channel indicates when there is an ongoing Live Stream by displaying an icon in the chat list and presenting a 'Live Stream' bar inside the channel. This bar includes a viewers counter that updates in real-time. The 'JOIN' button should animate once every time the channel is reopened. For a reference on the animation, please see the native Telegram apps for Android and iOS.

Ongoing Live Stream

Once a user joins the Live Stream, the app should present them with a relevant layer on top of the screen. The 'LIVE' indicator remains grey until the video stream is fully loaded. The app should use the channel's profile picture as a placeholder, or the last video frame if the user rejoins the same Live Stream. For a reference on the animation, please see the native Telegram apps for Android and iOS.

Live Stream Loading

Active Live Stream

1.2 Admin Perspective

Channel admins can start a Live Stream by going to ⋮ in their channel and selecting 'Live Stream'.

Stream With

Live Stream Menu

Live Stream Failed

Further mandatory mockups for the admin perspective can be found in the Contest Resources.

Part 2 (Chromium Issue Workaround)

Certain videos that have been improperly encoded fail to play on Chromium-based browsers due to an obsolete issue in Chromium. The issue is severely widespread, affecting thousands of users daily.

You are expected to implement a workaround that will enable the direct playback of all such videos in Web K. For sample videos, refer to this channel.

Part 3 (Bonus)

Web K is currently experiencing scrolling issues when used on Chrome for Android. This issue causes noticeable lagging on devices with 120 FPS displays, particularly when scrolling through any entities containing numerous media elements – essentially, any channel with larger message bubbles and multiple media items.

You are expected to investigate the issue, provide a detailed explanation of it, and implement a fix that will address the issue.

Questions, concerns and more

For further clarifications and requests regarding the contest task refer to the official Telegram Contests group. Kindly include #js_2024 with any questions.