feat(brand): brand-driven hook music + local whoosh SFX - #68
Merged
Conversation
- Add brandId prop to Composition and ShortFormClip components
- Resolve brandId to brands/{brandId}/brand.json path with brandSrc fallback
- Create public/brands/ragtech/brand.json with complete Brand schema
- Update Root.tsx to use brandId: 'ragtech' for short-form clips
- Preserve backward compatibility with existing brandSrc parameter
- All tests pass and build succeeds
- Fix next/image mock to avoid document.createElement usage - Replace DOM manipulation with jest.fn() factory function - Resolves Jest test failures in pre-commit hook
hook-music.mp3 is intentionally absent (user-supplied per README). The file name was hardcoded as the default hookMusicSrc prop, causing getAudioDurationInSeconds to eagerly fetch it and produce a 404 on every ShortFormClip preview. Remove the default from both components and the Root.tsx defaultProps so the guard (if props.hookMusicSrc) correctly skips the fetch when no file is provided. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add hookMusic?: string to Brand.audio. calculateMetadata and calculateShortMetadata now fetch the brand JSON when no explicit hookMusicSrc prop is provided and read brand.audio.hookMusic as the fallback. The resolved path is written back into overrideProps so the component renders the <Audio> tag correctly. Set ragtech hookMusic to /sounds/jazz-cafe-music.mp3 in brand.json. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@remotion/sfx exports whoosh as https://remotion.media/whoosh.wav, which the browser blocks with a CORS error in dev. Downloaded the file to public/sounds/whoosh.wav and replaced the import with staticFile(). Also extend the ESLint Remotion override from remotion/*.tsx to remotion/**/*.tsx so components in subdirectories are not linted under Next.js rules (no-img-element does not apply in Remotion's render context). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…version - Restructure .babelrc so next/babel only applies in development/production; test env uses explicit preset-env with modules:commonjs, preset-react, preset-typescript. next/babel's internal preset-env was overriding modules:commonjs, leaving import statements untransformed and causing SyntaxError in jest-runtime. - Downgrade babel-jest from ^30.2.0 to 29.7.0 to match jest@^29.7.0 in use. - Expand Composition and ShortFormClip tests to cover brand audio resolution paths. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
B1: add hookMusic? to Brand.audio spec in PRODUCTION_REFACTOR_PLAN.md B2: fix brand.json backgroundMusic path (background-music.mp3 → jazz-cafe-music.mp3) W1: remove vacuous eslint-disable-next-line; type next/image mock explicitly W2: add Saloni to brand.json hosts array with correct role and colour W3: fix team imgSrc extensions to .PNG to match actual files on disk Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
natashaannn
force-pushed
the
refactor/s1-brand-loader
branch
from
May 13, 2026 09:26
7bfb09a to
a9e9bf5
Compare
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
1 participant
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
brand.audio.hookMusicto the Brand type andbrands/ragtech/brand.jsonsoeach brand owns its hook music path;
calculateMetadataandcalculateShortMetadatanow fetch brand config and resolve
hookMusicSrcautomatically when it is not passedas an explicit prop — eliminating the hardcoded
hook-music.mp3default that causeda 404 on every ShortFormClip preview.
@remotion/sfx's external CDNwhoosh.wavURL with a local copy atpublic/sounds/whoosh.wav, fixing a CORS block that prevented the transitionsound from loading in Remotion Studio dev mode.
.babelrcsonext/babelonlyapplies in
development/production; thetestenv now uses an explicit@babel/preset-envwithmodules: "commonjs", resolving theSyntaxError: Cannot use import statement outside a modulethat blocked allReact-project tests. Align
babel-jestto29.7.0to matchjest@^29.7.0.How to review
remotion/types/brand.ts— new optionalhookMusic?field onBrand.audioremotion/Composition.tsx+remotion/ShortFormClip.tsx—calculateMetadata/calculateShortMetadata: look for the brand-fetch block that runs only whenhookMusicSrcis not explicitly passed; explicit prop always takes priorityremotion/Root.tsx—hookMusicSrcremoved fromShortFormClipdefaultProps;brand resolution handles it
remotion/components/Transition.tsx—import { whoosh } from '@remotion/sfx'replaced with
staticFile('sounds/whoosh.wav')public/brands/ragtech/brand.json—audio.hookMusicset tosounds/jazz-cafe-music.mp3.babelrc— verifynext/babelis absent from thetestenv; only the threeexplicit presets +
babel-plugin-transform-import-metaare active thereremotion/Composition.test.tsx,remotion/ShortFormClip.test.tsx,remotion/components/Transition.test.tsx— real tests replacing trivially-passingstubs; cover brand resolution, explicit override priority, and local SFX path
Test plan
npm testpasses (246 node tests, 0 failures)npm run test:reactpasses (13 react tests, 0 failures)Manual verification completed:
brand.audio.hookMusic, no 404 in consoleno CORS error
Issues
Closes #14