Expand self-hosted video milestone tracking

[SHession]

What does this change?

Continues the work of #15916 and uses the hook for tracking PLAY and END (new for the self-hosted player) milestone events. Furthermore it allows PLAY and other milestones to be called multiple times for a single atom by introducing a resetMilestones function. When this is called milestones tracking events will be triggered again when reached.

Using the hook to store the hasSentX reduces boilerplate and makes the consuming code cleaner as it has fewer concerns. It should also provide stronger guarantees of consistent tracking behaviour between the YouTube and SelfHosted videos.

Testing

I have tested across the major browsers, Chrome, Safari and Firefox. I noticed some issues on Firefox with END event requests seemingly not firing inconsistently. I'm not sure if this was an issue with the developer tools or the implementation. I would value a second opinion.

[github-actions]

Deploy build 27228 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 27228 of dotcom:rendering-all to CODE
• Deploy parts of build 27228 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[Copilot]

Pull request overview

This PR extends the existing video milestone tracking hook so it can also track play and end events (in addition to 25/50/75%), and introduces a reset mechanism so milestones can be emitted again for the same video atom (e.g. replay). It updates both the YouTube and self-hosted players to use the hook-driven state rather than local booleans.

Changes:

• Expand useVideoMilestoneTracking to handle play/end and provide a resetMilestones function.
• Update YoutubeAtomPlayer to use the hook for play/end/milestones and remove bespoke progress event refs.
• Update the self-hosted player to fire ended events, integrate the hook, and support milestone resets.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
dotcom-rendering/src/lib/useVideoMilestoneTracking.ts	Extends the hook API to support started/ended events and milestone reset.
dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx	Replaces local progress tracking with the hook and adds reset on end.
dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx	Adds an ENDED state and wires an onEnded handler through to the <video> element.
dotcom-rendering/src/components/SelfHostedVideo.island.tsx	Switches play/end/milestone tracking to the hook and introduces milestone reset logic.

Comments suppressed due to low confidence (3)

dotcom-rendering/src/lib/useVideoMilestoneTracking.ts:98

• resetMilestones is recreated on every render, which makes it an unstable dependency for consumers (e.g. it’s included in YoutubeAtomPlayer’s useEffect deps). Consider wrapping resetMilestones (and clearMilestones) in useCallback (or storing clearMilestones in a ref) so callers can treat it as stable and avoid unnecessary effect re-runs.

	const resetMilestones = () => {
		if (milestones.current.hasSentEnd) {
			milestones.current = clearMilestones();
		}
	};

dotcom-rendering/src/components/SelfHostedVideo.island.tsx:940

• The comment says this tracks the first successful play, but onPlaying can fire multiple times (initial play, resume after pause, possibly after seeking). If the intent is “track play/resume milestones via the hook”, please update the comment to avoid implying it only runs once.

	/**
	 * Track the first successful video play in Ophan.
	 */
	const handlePlaying = () => {
		trackMilestones({ started: true });

dotcom-rendering/src/components/SelfHostedVideo.island.tsx:1094

• With loop/cinemagraph styles (videoStyle !== 'Default'), percentage milestones are disabled but the hook still emits end once percent >= 99. Combined with resetting milestones when currentTime < 1, looping videos are likely to emit end + play repeatedly on every loop iteration, which can flood Ophan with events. Consider gating end/reset behavior behind videoStyleSettings.loop === false, or disabling play/end milestone tracking for looping styles.

			if (video.currentTime < 1) {
				resetMilestones();
			}

---

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

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.