fix: AudioPlayerComposable - Prevent loop in firefox

[lhaggar]

Renamed branch, original PR: #929

closes #921

Currently the AudioPlayerComposable component has a problem with live streaming, where it infinitely loops the first second of audio if rendered in the Firefox browser. The component seems to work fine in Chrome. The reason it doesn't work in Firefox comes down to how the two browsers handle the onDurationChange event, or more specifically the value that is applied to duration for unbounded streams.

In Chrome the browser assigns duration the value of Infinity, which is in accordance with the HTML spec (see also MDN), but in Firefox (for reasons I haven't been able to discover) the duration property is a continuously updated float.

Since we tie this continuous update to our component's duration state and we have that same duration listed as a dependency in a useEffect, this means that the callback for the useEffect is being continuously updated for unbounded streams in Firefox. That same callback is used to initialise the component by setting the current time to 0.

  useEffect(() => {
    if (audioRef && audioRef.current && duration) {
      audioRef.current.currentTime = initialTime;
    }
    setCurrentTime(0);
    setDisplayDuration(0);
  }, [src, initialTime, duration]);

This results in the infinite loop we are seeing where the audio's current time is constantly being reset as new audio data arrives and the value of duration changes.

Since we only really appear to want to call this function initially or when the src of the audio changes, I am proposing that we resolve the issue by removing duration as a factor of the component's initial setup entirely.

⚠️ There is an additional issue for Firefox that this does not solve, which is that autoplay still doesn't work.

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

[pp-serviceaccount]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/audio-player-composable-loops-in-firefox
Storybook: http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/audio-player-composable-loops-in-firefox/storybook