[Bug]: possible CORS issue in embedded video

[JamesPHoughton]

What happened?

With embedded training video on prod (not on dev server)

Issue:

What browsers do you see the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

What operating system do you see the problem on?

• Windows
• Mac
• Linux

How did we discover the bug?

• Reported by participant
• Observed on Sentry
• Found in dev

Priority

Blocking all data collection

[JamesPHoughton]

[JamesPHoughton]

On local server:

[JamesPHoughton]

Github Copilot suggests adding some error logging:

export function TrainingVideo({ url }) {
  const timer = useStageTimer();
  const player = usePlayer();
  const [elapsedOnLoad, setElapsedOnLoad] = useState(null);
  const [playing, setPlaying] = useState(false);

  useEffect(() => {
    console.log(`Playing video from: ${url}`);

    // test if autoplay will work
    const testAudio = new Audio("1sec_silence.mp3");
    const promise = testAudio.play();
    if (promise !== undefined) {
      promise
        .then(() => {
          setPlaying(true);
        })
        .catch((error) => {
          console.error("Autoplay failed:", error);
        });
    }
  }, [url]);

  const handleError = (error) => {
    console.error("Error playing video:", error);
  };

  return (
    <div>
      <ReactPlayer
        url={url}
        playing={playing}
        onError={handleError}
        controls
      />
      <Button onClick={() => setPlaying(!playing)}>
        {playing ? "Pause" : "Play"}
      </Button>
    </div>
  );
}

We could probably also update reactPlayer