Fix VideoPlayer source reload under StrictMode#39
Merged
Conversation
React StrictMode replays mount effects in development: the first VideoPlayer source effect records the loaded stream signature and calls video.load(), then the cleanup effect strips the rendered source src attributes and calls video.load() to release the stream. On the second effect pass, lastLoadedSourceRef still matched the same stream signature, so the source effect returned early even though the real DOM source no longer had a src. The media element then reported no available source and never requested /api/stream/video/... despite the endpoint being reachable directly. Make the cached source signature agree with the DOM by tracking the rendered source element, validating its src and MIME type before skipping a reload, restoring missing or stale attributes imperatively when needed, and clearing lastLoadedSourceRef when cleanup strips the source. Add a StrictMode regression test that renders VideoPlayer, lets mount effects replay, and verifies the source src and type are still present. Keep the unknown direct-stream MIME behavior covered so unsupported formats still avoid a misleading type attribute.
This was referenced Jul 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes a
VideoPlayersource reload bug that appears under React StrictMode. The player cleanup removes rendered source URLs to release the media stream, but the next StrictMode effect pass could incorrectly skip reloading because the cached source signature still matched. This keeps the cached signature aligned with the actual DOM source attributes, restores missing source attributes when needed, and adds regression coverage.Linked issue
Closes #38
Type of change
AI usage
Testing done & evidence
Ran all the pre-existing tests and verified they are not broken after this.
Ran the new tests.
Manually first verified that the playback is broken on both Arch Linux hosted dev container and on a local Mac development environment. I used a very limited fresh setup with a single video file. Stream URL worked just fine so this is definitely not a file permission issue or caused by a corrupted file.
After the fix I verified that the playback is working on both setups.
Checklist