AbortError when playing video: "media was removed from the document"

[pproenca]

Expected Behaviour

Clicking the play button on a video tweet should play the video without console errors.

Current Behaviour

Console shows an AbortError when playing videos:

AbortError: The play() request was interrupted because the media was removed from the document.

The video still plays on retry, but this error is confusing for developers.

Steps to Reproduce

1. Embed a tweet containing a video: <Tweet id="2006254902629044564" />
2. Run the app in development mode (React Strict Mode enabled)
3. Click the play button on the video
4. Observe the console error

Environment: react-tweet 3.3.0, Next.js 16, React 19, Chrome

Proposed Solution

The issue is a race condition in TweetMediaVideo (tweet-media-video.js):

onClick: (e) => {
    const video = e.currentTarget.previousSibling;  // Gets DOM reference BEFORE re-render
    e.preventDefault();
    setPlayButton(false);  // Triggers React re-render
    video.load();
    video.play()...  // video reference may be stale after re-render
}

setPlayButton(false) triggers a re-render, but video.play() uses a reference obtained before the state update. In React Strict Mode (or any remount scenario), the video element is removed from DOM before play() resolves.

Fix: Use a useRef for stable video element reference:

const videoRef = useRef<HTMLVideoElement>(null);

// JSX
<video ref={videoRef} ... />

// Handler
onClick: (e) => {
    e.preventDefault();
    setPlayButton(false);

    const video = videoRef.current;  // Get reference AFTER deciding to play
    if (!video) return;

    video.load();
    video.play().then(() => {
        setIsPlaying(true);
        video.focus();
    }).catch((error) => {
        if (error.name === 'AbortError') return;  // Ignore - element was removed, not a real error
        console.error('Error playing video:', error);
        setPlayButton(true);
        setIsPlaying(false);
    });
}

Related: https://developer.chrome.com/blog/play-request-was-interrupted