WS-2638 - Enable in-situ video playback in Home and Topic Hierarchical Grid promos

[pvaliani]

Resolves JIRA:
https://bbc.atlassian.net/browse/WS-2638

Summary

• Allows eligible MAP videos to play directly within the leading Hierarchical Grid promo slot on Home and Topic pages.
• Uses inSituMedia supplied by the BFF to assist in rendering in-situ video
• Renders a normal image promo when media is unavailable or the page is AMP
• SMP receives the containing Home or Topic page identifier as its counter name, allowing reporting to distinguish in-situ playback from playback on the MAP article page
• Adds unit tests for in-situ playback

Screen.Recording.2026-06-03.at.15.40.05.mov

EDIT:

Also checked on Home page (arabic):

Code changes

• See files changed

Testing

Test link: http://localhost.bbc.com:7081/arabic/topics/cz9mm6r1q5et?renderer_env=live

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.

[pvaliani]

Thanks for the spike feedback @andrewscfc!

[Copilot]

Pull request overview

Enables eligible MAP videos to play in-situ within the leading Hierarchical Grid promo on Home and Topic pages by consuming inSituMedia from the BFF, while falling back to the existing image promo on AMP or when media is unavailable.

Changes:

• Add inSituMedia support to curation summary types and render MediaLoader in Hierarchical Grid when present (non-AMP).
• Update MediaLoader analytics tests to ensure SMP uses the containing page’s identifier as counterName for in-situ playback contexts.
• Add/extend unit tests and styling to cover the in-situ rendering and fallback behaviours.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/app/models/types/curationData.ts	Extends Summary to include optional inSituMedia media blocks from the BFF.
src/app/components/MediaLoader/index.test.tsx	Adds coverage to validate counterName uses the containing Home/Topic page identifier for in-situ blocks.
src/app/components/Curation/HierarchicalGrid/index.tsx	Renders MediaLoader for promos with inSituMedia (non-AMP), otherwise falls back to existing image promo rendering.
src/app/components/Curation/HierarchicalGrid/index.test.tsx	Adds tests for in-situ rendering, tracking, AMP fallback, and empty-media fallback.
src/app/components/Curation/HierarchicalGrid/index.styles.tsx	Adds Emotion styles to support in-situ media layout and link overlay behaviour.

[LilyL0u]

Looking good.

Do you think that playing portrait videos from the portrait video carousel -> pop up modal also gives us a counter name of home page? If so, if a portrait video is in the in-situ spot, we might not be able to tell the difference between a carousel/modal play and the in-situ play? I don't think it matters though as it will be so rare.

[pvaliani]

Looking good.

Do you think that playing portrait videos from the portrait video carousel -> pop up modal also gives us a counter name of home page? If so, if a portrait video is in the in-situ spot, we might not be able to tell the difference between a carousel/modal play and the in-situ play? I don't think it matters though as it will be so rare.

It's a good point and something that crossed my mind. The portrait video modal also uses the shared media player and inherits the Home page counter name. So the counter name tells us the video was played on Home, but not which component it was played from. If the same video appeared in both places, we couldn’t distinguish them using the counter name alone but as you say I think the chances of it happening are low and not very often. Product confirmed that page-level reporting is enough for now given the expected low volume. If that changes, we’d need a separate analytics marker for the player location. I will mention it to Product and see what thoughts are for this specific point!