Add video progress milestone tracking hook

[SHession]

What does this change?

This change implements video progress milestone tracking using a React hook and updates both the SelfHosted and YouTube players to use it. It will send events to Ophan when the video has progressed 25/50/75 percent through the video. If a user skips forward, tracking events will be sent for all milestones they have surpassed.

Current YouTube Atom Player implementation:

dotcom-rendering/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx

Lines 252 to 311 in 20bd1ec

	const checkProgress = () => {
	const currentTime = player.getCurrentTime();
	const duration = player.getDuration();
	if (!duration || !currentTime) {
	return;
	}
	const percentPlayed = (currentTime / duration) * 100;
	if (!progressEvents.hasSent25Event && 25 < percentPlayed) {
	log('dotcom', {
	from: loggerFrom,
	videoId,
	msg: 'played 25%',
	event,
	});
	for (const eventEmitter of eventEmitters) {
	eventEmitter('25');
	}
	progressEvents.hasSent25Event = true;
	}
	if (!progressEvents.hasSent50Event && 50 < percentPlayed) {
	log('dotcom', {
	from: loggerFrom,
	videoId,
	msg: 'played 50%',
	event,
	});
	for (const eventEmitter of eventEmitters) {
	eventEmitter('50');
	}
	progressEvents.hasSent50Event = true;
	}
	if (!progressEvents.hasSent75Event && 75 < percentPlayed) {
	log('dotcom', {
	from: loggerFrom,
	videoId,
	msg: 'played 75%',
	event,
	});
	for (const eventEmitter of eventEmitters) {
	eventEmitter('75');
	}
	progressEvents.hasSent75Event = true;
	}
	const currentPlayerState = player.getPlayerState();
	if (currentPlayerState !== YT.PlayerState.ENDED) {
	/**
	* Set a timeout to check progress again in the future
	*/
	setTimeout(() => checkProgress(), 3000);
	}
	return null;
	};

Why?

Implementing this tracking for long-form video will help inform us how far through videos readers progressed.

[SHession]

I may have gotten a little carried away with the refactor here. I can split it out if needed.

[github-actions]

Deploy build 27169 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[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.

[github-actions]

Deploy build 1508 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 1508 of dotcom:ab-testing to CODE
• Deploy parts of build 1508 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[SHession]

This will currently only fire once per video. There is ongoing debate about whether this is desirable.

[abeddow91]

This is a really nice abstraction! Tested on CODE and looks good to me 👍

[gu-prout]

Seen on PROD (merged by @SHession 9 minutes and 21 seconds ago) Please check your changes!