Repository navigation
feat(LyricOverlay): fps and duration props, optional soundtrack, orientation-safe layout - #662
Merged
Merged
Conversation
…n-safe layout calculateMetadata reads fps (24/25/30/50/60, else 30) and durationSeconds (else 28 s); size stays with the composition default or --width/--height. Fade/underline/visibility constants are scaled from 30 fps frames, and a line's fade-out ends at the next line's in-time so back-to-back lines never stack. Layout scales from the frame's short side, the readability backdrop runs to the bottom edge (it ended in a hard line), explicit line breaks are kept, and the video is cover-fitted with optional trim and volume. An optional soundtrack reuses CinematicRenderer's Soundtrack, now exported unchanged. Behaviour change for existing props: objectFit cover, pre-line text, and the backdrop geometry. Defaults for fps and duration are unchanged (30 fps, 840 frames). Measured: stills at mid fade-in, mid fade-out and a contiguous boundary are PSNR inf for 30 vs 24 and 30 vs 60 fps (portrait and landscape; text present, 25.1 dB from an empty frame). 25 fps distinct-colour source at fps 25 -> 0 repeated frames in 90 (fps 30 control: 17). Soundtrack reaches the output. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> (cherry picked from commit 87c99c7c955f0b639471ba69042060c5120e0bbf)
calesthio
approved these changes
Nov 7, 2026
calesthio
left a comment
Collaborator
There was a problem hiding this comment.
Thanks for extending LyricOverlay with metadata-driven fps/duration, footage trimming and soundtrack reuse. Reviewed all three changed files against current main: defaults remain 30 fps/28 seconds, animation constants scale by fps, the composition registers calculateMetadata, and video/audio options pass through to the existing media components. The next-line clamp and portrait/landscape scaling are coherent. Static review only on this host: the Remotion node dependencies are absent, so I did not claim a TypeScript build or visual render. Please retain representative short/back-to-back lyric renders in the normal render validation.
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
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
LyricOverlayhardcoded its frame rate and its length, and had no way to play a soundtrack. That makes it hard to use for anything but the fixture it shipped with: a 25 fps song rendered at 30, and the composition's duration had to be edited in source.This adds
calculateLyricOverlayMetadataso fps and duration come from the props, an optional soundtrack, and a lyric band that holds up in portrait as well as landscape.Related issue
None.
Changes
calculateLyricOverlayMetadataderivesdurationInFramesandfpsfrom the props, so the composition no longer fixes either in source.Soundtrackis exported fromCinematicRendererso compositions share one implementation instead of each growing their own.Testing
tsc --noEmitclean on this branch againstremotion-composer's own tsconfig (strict: true).Checklist
make test-contracts/make test) where applicable. — those runpytest tests/, the Python side; this is TypeScript only, insideremotion-composer/, which those suites do not cover.