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

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

Resolves JIRA: WS-2916

Summary

Enables Toucan fake fullscreen support on iOS devices. This PR implements fake fullscreen functionality that works on iOS platforms, which don't support true fullscreen due to browser limitations. The changes include proper styling, z-index management, and player re-initialization handling to ensure the fake fullscreen experience is seamless for iOS users.

Code changes

Enable Toucan fake fullscreen handling on iOS
Fix iOS fake fullscreen closing immediately due to player reinitialising
Fix visual regression: give fake-fullscreen wrapper div proper layout sizing
Update integration snapshots for fake fullscreen wrapper div
Adjust z-index of different components and move fake fullscreen styling to shared location
Add opt-out option for fake fullscreen functionality
Rename fake fullscreen boolean for consistency

Testing

All of the below should be double checked:

Integration snapshots updated to reflect new fake fullscreen wrapper div
Tested on iOS devices to ensure fake fullscreen opens and closes correctly
Verified z-index layering doesn't interfere with other video components
Tested player re-initialization doesn't cause immediate closure of fake fullscreen

Useful Links

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

Copilot

Pull request overview

Copilot reviewed 68 out of 68 changed files in this pull request and generated no new comments.

Suppressed comments (3)

ws-nextjs-app/integration/pages/storyPage/mundo/snapshots/amp.test.ts.snap:212

These integration snapshots include machine/environment-specific values (e.g. LAN host http://192.168.1.106:7081). IntegrationTestEnvironment hardcodes http://localhost:7081 (ws-nextjs-app/integration/IntegrationTestEnvironment.ts:47), so committing a local IP will make snapshots fail for other developers/CI. The same snapshot set also switches ATI destination IDs from TEST to live (e.g. 598343 -> 598342), which per getExpectedAtiDestination corresponds to applicationEnv === 'live' (src/app/components/ATIAnalytics/helpers/getExpectedAtiDestination.ts:16-36). Please re-record snapshots in the standard test environment so host + analytics IDs are deterministic.
src/app/legacy/containers/ConsentBanner/Banner/index.canonical.jsx:23
Hiding the consent banner via z-index: -1 can leave it in the focus order / accessibility tree while fake fullscreen is active. Prefer removing it from rendering (e.g. display: none) so keyboard/screen-reader users can’t interact with it behind the fullscreen layer.

  body.${PLAYER_FULLSCREEN_CLASS} & {
    z-index: -1;
  }

src/app/components/Account/AccountSignInModal/index.styles.tsx:32

Using zIndex: -1 to “hide” the sign-in modal during fake fullscreen can leave it focusable / exposed to assistive tech. Prefer removing it from rendering (e.g. display: 'none') while body is in simorgh-player-fullscreen.

    [`body.${PLAYER_FULLSCREEN_CLASS} &`]: {
      zIndex: -1,
    },

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

HarveyPeachey requested a review from Copilot August 3, 2026 12:58

Copilot started reviewing on behalf of HarveyPeachey August 3, 2026 12:58 View session

Copilot AI reviewed Aug 3, 2026

View reviewed changes

renames fake fullscreen boolean

0914d7e

Navigation Menu

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 9 commits into
latestfrom
WS-2916-toucan-fake-fullscreen

HarveyPeachey commented Jul 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HarveyPeachey commented Jul 24, 2026 •

edited

Loading