WS-2916: Enable Toucan fake fullscreen support on iOS by HarveyPeachey · Pull Request #14260 · bbc/simorgh

HarveyPeachey · 2026-07-24T11:44:56Z

Resolves JIRA:

Summary

Code changes

Testing

Useful Links

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

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

… [copilot] The inner div wrapping the player content needs flex/height properties so it fills the figure's aspect-ratio constraint for both portrait and landscape orientations. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

…ilot] buildConfig() was called directly in MediaLoader's render body, producing a new playerConfig object identity on every render. Entering/exiting fake fullscreen updates isFakeFullscreenActive state, re-rendering MediaLoader, which caused MediaContainer's effect to see a changed playerConfig reference and tear down/recreate the Bump player mid-playback - immediately closing the freshly-entered iOS fake fullscreen. Memoise config via useMemo keyed on its real inputs so its identity is stable across re-renders that don't actually change the player configuration. Moved the memoised computation ahead of the isLite early return to keep hook ordering valid. Added a regression test that exercises real React state (rather than the mocked no-op setState used elsewhere in this file) to confirm requirejs/ Bump.player/load are only invoked once even after a fake fullscreen state change. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

…-fullscreen

Copilot

Pull request overview

Enables “fake fullscreen” handling for Bump/Toucan video playback on iOS by making MediaLoader manage fullscreen enter/exit events, applying global page classes/styles, and avoiding player re-initialisation during fullscreen state changes.

Changes:

Added fake-fullscreen support to MediaLoader (event bindings, page class toggling, fullscreen wrapper/layer, and memoised config to prevent mid-playback teardown).
Removed Curation’s fake-fullscreen consent-banner z-index callbacks (previously injected via eventMapping).
Updated/regen’d unit tests and many integration snapshots to reflect new markup and analytics/url expectations.

Reviewed changes

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

Show a summary per file

File	Description
src/app/components/MediaLoader/index.tsx	Implements fake fullscreen support (styles + event handling) and memoises player config to avoid reinit during fullscreen toggles.
src/app/components/MediaLoader/index.test.tsx	Adds unit tests covering fake fullscreen class toggling, event composition, audio exclusions, and “no reinitialise on fullscreen state change”.
src/app/components/MediaLoader/index.styles.ts	Adds a wrapper style used to isolate the player layer during fake fullscreen.
src/app/components/Curation/index.tsx	Removes consent-banner z-index hack callbacks previously wired into `MediaLoader` via `eventMapping`.
ws-nextjs-app/integration/pages/topicPage/pidgin/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/mundo/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/mundo/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/kyrgyz/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/kyrgyz/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/hausa/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/storyPage/hausa/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/podcastPage/portugueseEpisode/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/podcastPage/portugueseBrand/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/photoGalleryPage/thai/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/photoGalleryPage/thai/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/photoGalleryPage/mundo/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/photoGalleryPage/mundo/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/onDemandTVPage/pashtoBrand/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/onDemandTVPage/pashto.expired/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/onDemandTVPage/hausa/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/onDemandAudioPage/pashtoBrand/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/onDemandAudioPage/pashto/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/onDemandAudioPage/pashto.expired/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/onDemandAudioPage/indonesia/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/onDemandAudioPage/indonesia.expired/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/onDemandAudioPage/gahuza.expired/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mostReadPage/pidgin/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaAssetPage/pidgin/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaAssetPage/pidgin/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaAssetPage/persian/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaAssetPage/persian/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaAssetPage/arabicTC2/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaArticlePage/pidgin/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/mediaArticlePage/pidgin/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (Chartbeat domain + localhost/IP URLs).
ws-nextjs-app/integration/pages/liveRadio/kyrgyz/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/liveRadio/korean/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/liveRadio/gahuza/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/live/serbian/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/live/pidgin/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer.
ws-nextjs-app/integration/pages/homePage/serbianLat/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/homePage/serbianCyr/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/homePage/kyrgyz/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/homePage/hindi/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/homePage/arabic/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/av-embeds/russian/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer.
ws-nextjs-app/integration/pages/articles/scotland/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/scotland/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/portuguese/snapshots/amp.test.ts.snap	Updates AMP snapshot URLs (localhost/IP).
ws-nextjs-app/integration/pages/articles/pidginEmbedImages/snapshots/canonical.test.ts.snap	Updates embedded image URL expectation.
ws-nextjs-app/integration/pages/articles/pidginEmbedImages/snapshots/amp.test.ts.snap	Updates AMP embedded image URL expectation.
ws-nextjs-app/integration/pages/articles/pidginEmbedHtml/snapshots/amp.test.ts.snap	Updates AMP embed HTML snapshot (aria-label + localhost/IP URL).
ws-nextjs-app/integration/pages/articles/persianMediaPlayer/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer plus analytics/url expectations.
ws-nextjs-app/integration/pages/articles/persianMediaPlayer/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/persian/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/persian/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/news/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/news/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/hausa/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/hausa/snapshots/amp.test.ts.snap	Updates AMP integration snapshot expectations (localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/gahuzaLiteSite/snapshots/lite.test.ts.snap	Updates lite snapshot URL (localhost/IP).
ws-nextjs-app/integration/pages/articles/gahuza/snapshots/canonical.test.ts.snap	Updates integration snapshot expectations (analytics + localhost/IP URLs).
ws-nextjs-app/integration/pages/articles/afrique/snapshots/canonical.test.ts.snap	Updates snapshot markup for media loader wrapper/layer.

+            {shouldHandleFakeFullscreen && (
+              <Helmet>
+                <style type="text/css">{fakeFullscreenStyles}</style>
+              </Helmet>


+  const setFakeFullscreenPageState = (isActive: boolean) => {
+    if (!onClient()) return;
+
+    document.documentElement.classList.toggle(
+      PLAYER_FULLSCREEN_CLASS,
+      isActive,
+    );
+    document.body.classList.toggle(PLAYER_FULLSCREEN_CLASS, isActive);
+    hasActivatedFakeFullscreenRef.current = isActive;
+    setIsFakeFullscreenActive(isActive);
+  };


  {
-    "s": "598343",
+    "s": "598342",
  },


 {
  "sizes": null,
-  "url": "http://localhost:7081/mundo/images/icons/icon-192x192.png",
+  "url": "http://192.168.1.106:7081/mundo/images/icons/icon-192x192.png",
 }
 `;


    "authors": "Redacción  ",
    "contentType": "STY",
-    "domain": "test.bbc.co.uk",
+    "domain": "mundo.bbc.co.uk",
    "sections": "Mundo, Mundo - STY",
    "title": "Brexit: qué cambiará para visitar, trabajar y estudiar en Reino Unido tras la salida del país de la Unión Europea",


…nents

HarveyPeachey and others added 3 commits July 24, 2026 12:44

Enable Toucan fake fullscreen handling on iOS [copilot]

8ce2e37

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

HarveyPeachey self-assigned this Jul 27, 2026

HarveyPeachey and others added 2 commits July 28, 2026 09:34

Update integration snapshots for fake fullscreen wrapper div [copilot]

3614117

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Merge remote-tracking branch 'origin/latest' into WS-2916-toucan-fake…

766abd0

…-fullscreen

Copilot AI review requested due to automatic review settings July 28, 2026 08:34

Copilot started reviewing on behalf of HarveyPeachey July 28, 2026 08:35 View session

Copilot AI reviewed Jul 28, 2026

View reviewed changes

HarveyPeachey added 3 commits July 30, 2026 11:21

moves fake full screen styling and adjusts z-index of different compo…

e72997f

…nents

uses global fullscreen class to disable z-index

bc3da9d

adds an opt out option for fake fullscreen

d4cdd4f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

WS-2916: Enable Toucan fake fullscreen support on iOS - #14260

WS-2916: Enable Toucan fake fullscreen support on iOS#14260
HarveyPeachey wants to merge 8 commits into
latestfrom
WS-2916-toucan-fake-fullscreen

HarveyPeachey commented Jul 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

HarveyPeachey commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Code changes

Testing

Useful Links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HarveyPeachey commented Jul 24, 2026 •

edited

Loading