fix(featured-stream): keep the Twitch embed at its 400x300 minimum - #4696
Merged
Merged
Conversation
Twitch's documented embed minimum is 400x300, and below it autoplay is blocked (the "requirement not met" console message). The panel was under that: minimized was 360px wide (~203px tall at 16:9), and the expanded 16:9 player dropped below 300px tall on narrower viewports. Floor the width at 400px in both states and give the player mount a 300px min-height, so the embed stays >=400x300 wherever autoplay applies.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughFeaturedStream now requires a minimum 400px card width and 300px Twitch mount height, with inline comments updated to describe the embed requirement. ChangesFeatured stream sizing
Estimated code review effort: 1 (Trivial) | ~5 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
github-project-automation
Bot
moved this from Triage
to Complete
in OpenFront Release Management
evanpelle
pushed a commit
that referenced
this pull request
Jul 24, 2026
… lobby wait (#4698) Three related changes to the homepage featured-stream panel. ## 1. Exclude the embed off the open web (ToS) Never mount the Twitch embed on **CrazyGames** or the **desktop (Steam) shell**, and never load the Twitch SDK there. Matches how the app already suppresses its own promos off-web via `window.adsEnabled`: - **CrazyGames:** [only SDK-served ads are allowed](https://docs.crazygames.com/requirements/ads/) and no external cross-promotion; a Twitch embed serves Twitch's own ads and is third-party content. - **Steam:** Steam [does not support advertising models in games](https://partner.steamgames.com/doc/marketing/advertising); a live Twitch player carries Twitch ad breaks, and the desktop shell can't satisfy Twitch's `parent`-domain requirement. ## 2. Close button for ad-free users Ad-free users (any shop purchase makes a user `adfree` for life, which zeroes `window.adsEnabled`) get an `×` in the minimized bar. The close is remembered **for the current day** (the day is stored in `localStorage`), so the panel stays gone across reloads that day and resets for the next day's stream. Ad-supported users keep minimize only; their mobile flick stays session-only. The minimized state is scoped to the day the same way. ## 3. Keep the panel through the lobby wait The panel used to hide the moment you joined a lobby (`join-lobby`). Now it stays up through the **queue/lobby wait** and hides only once the game actually starts. `Main.ts` dispatches a new `game-starting` event at `prestart` (the real start moment); the panel hides on that instead of on `join-lobby`, and reappears on `leave-lobby`. > Heads-up for maintainers: (1) and (2) couple this OFM widget to OF's own ad/entitlement signals (`crazyGamesSDK.isOnCrazyGames()`, `isDesktopShell()`, `window.adsEnabled`); (3) adds a small shared `game-starting` document event in `Main.ts`. Flagging in case you'd rather gate/signal differently. ## Tests Verified locally: prettier, eslint, tsc, tests all green. Reuses the existing `common.close` i18n key (no locale-file changes). Follow-up to #4335 / #4673. Sizing (Twitch's 400×300 minimum) landed in #4696.
evanpelle
pushed a commit
that referenced
this pull request
Jul 25, 2026
…4696) ## What Keep the featured-stream Twitch embed at Twitch's documented **400×300** minimum in every state. ## Why Twitch's embed docs state a minimum player size of **400px wide × 300px tall**, and that *"minimum size requirements and visibility are necessary for autoplay to begin."* Below it, autoplay is blocked (this is the `requirement not met` console message some of us saw). The panel was under the minimum: - **Minimized** was `360px` wide → ~203px tall at 16:9. Under on both axes. - **Expanded** used a 16:9 player, which only reaches 300px tall at ~534px wide, so on narrower viewports it dropped below 300px tall. ## Fix - Floor the card width at **400px** in both minimized and expanded states. - Give the player mount a **`min-h-[300px]`**, so the 16:9 region never falls below 300px tall (it letterboxes between 400 and ~534px wide). Net: the embed is `≥400×300` wherever autoplay applies (desktop). `max-w-[92vw]` still guards against horizontal overflow on very narrow screens; Twitch disables autoplay on mobile regardless, so the size floor there is moot. ## Twitch ToS audit (while I was in here) Checked the embed against Twitch's full [embedding requirements](https://dev.twitch.tv/docs/embed/). Everything else already complies: | Requirement | Status | |---|---| | Min size 400×300 | **fixed here** | | Player not obscured/hidden while playing | ✅ (high z-index; paused + unmounted while in a game; only a transient muted `opacity-0` during liveness detection) | | Domain uses SSL | ✅ (HTTPS) | | `parent` parameter set | ✅ | | Only approved, unmodified player | ✅ (no overlay on the video) | | Autoplay is muted | ✅ (`muted: true`) | | Ads not blocked/obscured | ✅ (we only ever pause the whole player) | ## Tests No behavior change beyond sizing; existing FeaturedStream tests pass. Verified locally: prettier, eslint, tsc, tests all green. Follow-up to #4335.
evanpelle
pushed a commit
that referenced
this pull request
Jul 25, 2026
… lobby wait (#4698) Three related changes to the homepage featured-stream panel. ## 1. Exclude the embed off the open web (ToS) Never mount the Twitch embed on **CrazyGames** or the **desktop (Steam) shell**, and never load the Twitch SDK there. Matches how the app already suppresses its own promos off-web via `window.adsEnabled`: - **CrazyGames:** [only SDK-served ads are allowed](https://docs.crazygames.com/requirements/ads/) and no external cross-promotion; a Twitch embed serves Twitch's own ads and is third-party content. - **Steam:** Steam [does not support advertising models in games](https://partner.steamgames.com/doc/marketing/advertising); a live Twitch player carries Twitch ad breaks, and the desktop shell can't satisfy Twitch's `parent`-domain requirement. ## 2. Close button for ad-free users Ad-free users (any shop purchase makes a user `adfree` for life, which zeroes `window.adsEnabled`) get an `×` in the minimized bar. The close is remembered **for the current day** (the day is stored in `localStorage`), so the panel stays gone across reloads that day and resets for the next day's stream. Ad-supported users keep minimize only; their mobile flick stays session-only. The minimized state is scoped to the day the same way. ## 3. Keep the panel through the lobby wait The panel used to hide the moment you joined a lobby (`join-lobby`). Now it stays up through the **queue/lobby wait** and hides only once the game actually starts. `Main.ts` dispatches a new `game-starting` event at `prestart` (the real start moment); the panel hides on that instead of on `join-lobby`, and reappears on `leave-lobby`. > Heads-up for maintainers: (1) and (2) couple this OFM widget to OF's own ad/entitlement signals (`crazyGamesSDK.isOnCrazyGames()`, `isDesktopShell()`, `window.adsEnabled`); (3) adds a small shared `game-starting` document event in `Main.ts`. Flagging in case you'd rather gate/signal differently. ## Tests Verified locally: prettier, eslint, tsc, tests all green. Reuses the existing `common.close` i18n key (no locale-file changes). Follow-up to #4335 / #4673. Sizing (Twitch's 400×300 minimum) landed in #4696.
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Keep the featured-stream Twitch embed at Twitch's documented 400×300 minimum in every state.
Why
Twitch's embed docs state a minimum player size of 400px wide × 300px tall, and that "minimum size requirements and visibility are necessary for autoplay to begin." Below it, autoplay is blocked (this is the
requirement not metconsole message some of us saw).The panel was under the minimum:
360pxwide → ~203px tall at 16:9. Under on both axes.Fix
min-h-[300px], so the 16:9 region never falls below 300px tall (it letterboxes between 400 and ~534px wide).Net: the embed is
≥400×300wherever autoplay applies (desktop).max-w-[92vw]still guards against horizontal overflow on very narrow screens; Twitch disables autoplay on mobile regardless, so the size floor there is moot.Twitch ToS audit (while I was in here)
Checked the embed against Twitch's full embedding requirements. Everything else already complies:
opacity-0during liveness detection)parentparameter setmuted: true)Tests
No behavior change beyond sizing; existing FeaturedStream tests pass. Verified locally: prettier, eslint, tsc, tests all green.
Follow-up to #4335.