Skip to content

Add read-only live chat to livestream watch pages - #5850

Draft
joelcf001 wants to merge 1 commit into
iv-org:masterfrom
joelcf001:codex/live-chat-438
Draft

Add read-only live chat to livestream watch pages#5850
joelcf001 wants to merge 1 commit into
iv-org:masterfrom
joelcf001:codex/live-chat-438

Conversation

@joelcf001

Copy link
Copy Markdown

Add read-only live chat to livestream watch pages

Checklist

  • I have read the AI Policy and understand the disclosure requirements

AI Disclosure

  • AI was not used to create this pull request
  • AI was used to fully create this pull request
  • AI was used to partially create this pull request

Model(s) used (and thinking/reasoning level if relevant):
OpenAI gpt-5.6-sol (xhigh reasoning)

Tool(s) used:
OpenAI Codex desktop app

How was AI used?
Codex assisted with the Crystal implementation, browser-side code, styles, tests, and this pull request description. I directed the implementation, manually reviewed the complete diff, and functionally tested the change before submitting it.


Pull request description

Fixes: #438

I want to be awarded the bounty associated to the issue this PR is fixing.

This adds a native, read-only live chat panel to livestream watch pages. It supports both Top Chat and Live Chat, updates while the stream is active, appears beside the player on desktop, and moves below it on narrow screens. It does not support sending messages.

The implementation:

  • bootstraps the selected mode from YouTube's watch and initial chat responses, then retrieves and parses supported live-chat actions through a new /api/v1/live_chat/:id endpoint;
  • renders message text, emoji labels, author badges, engagement notices, and observed removal actions without injecting HTML;
  • bounds cached responses and displayed messages, coalesces identical requests, pauses polling in hidden tabs, and ignores stale mode-switch responses;
  • respects disable_abusable_api, including hiding the panel and rejecting the endpoint when disabled.

Verification completed:

  • bin/ameba: 145 files inspected, 0 failures
  • crystal spec: 169 examples, 0 failures
  • full application build and Crystal formatting check
  • JavaScript syntax and JSON validation

Human verification required before submission:

  • I reviewed the complete diff manually
  • I tested Top Chat and Live Chat against a real active livestream
  • I tested polling updates and responsive desktop/mobile layouts
  • I tested disable_abusable_api with both the watch page and API endpoint

Visual proof

@unixfox

unixfox commented Jul 31, 2026

Copy link
Copy Markdown
Member

Hello thanks for the PR but I don't see any visual proof.

@Prince527GitHub

Copy link
Copy Markdown

Hello thanks for the PR but I don't see any visual proof.

I'm not OP but I just tried this PR locally and it seems to work, I can see the chat updating as new messages are sent.

Screen-Capture-2026-08-01-15-19-03.mp4
Screen-Capture-2026-08-01-15-28-57.mp4

@unixfox
unixfox requested a review from Copilot August 1, 2026 18:47
@unixfox

unixfox commented Aug 1, 2026

Copy link
Copy Markdown
Member

The tests are failing

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a native, read-only live chat panel to livestream watch pages, backed by a new API endpoint that proxies and normalizes YouTube live chat responses for the frontend.

Changes:

  • Add /api/v1/live_chat/:id endpoint and backend live-chat fetch/parse layer with caching and polling continuation handling.
  • Update the watch page layout to render a live chat panel (desktop side-by-side; narrow screens stacked) and load new frontend polling code.
  • Add frontend JS/CSS for rendering chat messages and add fixtures/specs covering continuation extraction and action normalization.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/invidious/yt_backend/youtube_api.cr Adds a YoutubeAPI helper for the Innertube live chat endpoint.
src/invidious/views/watch.ecr Renders the live chat panel on active livestream pages and injects live-chat i18n strings + script.
src/invidious/routing.cr Registers the new /api/v1/live_chat/:id route.
src/invidious/routes/api/v1/videos.cr Implements the live_chat API handler with parameter validation and error handling.
src/invidious/live_chat.cr New live chat backend module: fetch initial/continuation responses, normalize actions, and cache responses.
src/invidious/helpers/handlers.cr Ensures disable_abusable_api also disables the new live chat endpoint.
spec/spec_helper.cr Loads new live chat/youtube API modules for specs.
spec/invidious/live_chat_spec.cr Adds unit tests for continuation extraction, normalization, and polling interval clamping.
spec/fixtures/live_chat/initial.json Fixture for initial continuation extraction.
spec/fixtures/live_chat/response.json Fixture for parsing actions + mode-switch continuation + polling data.
locales/en-US.json Adds English strings for the live chat UI.
config/config.example.yml Documents that /api/v1/live_chat is affected by disable_abusable_api.
assets/js/live_chat.js New frontend polling/rendering logic for read-only live chat.
assets/css/default.css Adds layout/styling for the live chat panel and responsive placement.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +131 to +136
live_item = items.try &.find do |item|
item["title"]?.try(&.as_s?) == "Live chat"
end

return continuation_from(live_item.try &.dig?("continuation", "reloadContinuationData"))
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Livechat on Livestreams

4 participants