Oliver/video-accessibility
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(captions): remove duplicate native track display, fix position to bottom

Browse source 
- Remove `default` from <track> element so browser doesn't render native
  captions on top of the custom overlay (was causing double display)
- Remove positionTop logic — always render overlay at bottom-14 (above controls)
  regardless of VTT line hints; applies to both VideoWithCaptions and VideoReviewPlayer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-01 16:33:33 +01:00
parent df7fec701d
commit 9733700874
2 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/VideoReview/VideoReviewPlayer.tsx
View file

@ -305,9 +305,9 @@ export function VideoReviewPlayer({ job, downloads }: VideoReviewPlayerProps) {
</div>
)}
{/* Caption Overlay — respects VTT line:0% positioning to avoid obscuring on-screen text */}
{/* Caption Overlay — always at the bottom, above native controls */}
{showCaptions && currentCaption && (
<div className={`absolute ${currentCaption.positionTop ? 'top-4' : 'bottom-16'} left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]`}>
<div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]">
<div className="text-center whitespace-pre-wrap">
{currentCaption.text}
</div>

5
frontend/src/components/VideoWithCaptions.tsx
View file

@ -257,15 +257,14 @@ export function VideoWithCaptions({
kind="captions"
src={captionsBlobUrl}
label={currentTrack?.label || selectedLanguage}
default
/>
)}
Your browser does not support the video tag.
</video>
{/* Caption Overlay — respects VTT line:0% positioning to avoid obscuring on-screen text */}
{/* Caption Overlay — always at the bottom, above native controls */}
{showCaptions && currentCaption && (
<div className={`absolute ${currentCaption.positionTop ? 'top-4' : 'bottom-16'} left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]`}>
<div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-4 py-2 rounded max-w-[90%]">
<div className="text-center whitespace-pre-wrap">
{currentCaption.text}
</div>