From 8bdcf082b0cb3b61a281dea5e0b6533a6b44bc7d Mon Sep 17 00:00:00 2001 From: Igor Samokhovets Date: Mon, 31 Aug 2026 12:42:28 +0200 Subject: [PATCH 1/2] Fix editing default Element captions --- .../moving-pill-captions.tsx | 108 +++++++++--------- .../popping-word-captions.tsx | 108 +++++++++--------- .../word-highlight-captions.tsx | 108 +++++++++--------- .../example/e2e/captions-inspector.test.mts | 45 +++++++- packages/example/src/E2eTestRoot.tsx | 9 ++ .../src/moving-pill-captions.element.tsx | 108 +++++++++--------- .../src/components/CaptionTextEditor.tsx | 1 + .../src/components/InlineCaptionInspector.tsx | 59 ++++++++-- .../components/InspectorSequenceSection.tsx | 2 +- 9 files changed, 323 insertions(+), 225 deletions(-) diff --git a/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx b/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx index a80f5808fcb..05c64957625 100644 --- a/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx +++ b/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx @@ -51,10 +51,64 @@ const pillVerticalPadding = 12; const pillBorderRadius = 10; const pillMoveDurationInFrames = 5; const defaultCombineTokensWithinMilliseconds = 800; +const defaultCaptions: Caption[] = [ + { + text: 'Captions', + startMs: 0, + endMs: 800, + timestampMs: 400, + confidence: null, + }, + { + text: ' can', + startMs: 800, + endMs: 1500, + timestampMs: 1150, + confidence: null, + }, + { + text: ' move', + startMs: 1500, + endMs: 2300, + timestampMs: 1900, + confidence: null, + }, + { + text: ' with', + startMs: 2300, + endMs: 3100, + timestampMs: 2700, + confidence: null, + }, + { + text: ' every', + startMs: 3100, + endMs: 4000, + timestampMs: 3550, + confidence: null, + }, + { + text: ' spoken', + startMs: 4000, + endMs: 5100, + timestampMs: 4550, + confidence: null, + }, + { + text: ' word.', + startMs: 5100, + endMs: 6500, + timestampMs: 5800, + confidence: null, + }, +]; const movingPillCaptionsSchema = { ...Interactive.baseSchema, - ...Interactive.captionsSchema, + captions: { + ...Interactive.captionsSchema.captions, + default: defaultCaptions, + }, width: { type: 'number', min: 1, @@ -504,57 +558,7 @@ const MovingPillCaptionsWithControls: React.FC< { - let sourceBefore: string; + let inlineSourceBefore: string; + let defaultSourceBefore: string; test.beforeEach(async () => { - sourceBefore = fs.readFileSync(inlineCaptionsFile, 'utf-8'); + inlineSourceBefore = fs.readFileSync(inlineCaptionsFile, 'utf-8'); + defaultSourceBefore = fs.readFileSync(defaultCaptionsFile, 'utf-8'); await startStudio(); }); test.afterEach(async () => { await stopStudio(); - fs.writeFileSync(inlineCaptionsFile, sourceBefore); + fs.writeFileSync(inlineCaptionsFile, inlineSourceBefore); + fs.writeFileSync(defaultCaptionsFile, defaultSourceBefore); }); - test('persists a forced page break to an inline caption', async ({page}) => { + test('persists inline and default caption edits', async ({page}) => { await page.goto(`${STUDIO_URL}/captions-inspector-e2e`); await expect(page).toHaveURL(/captions-inspector-e2e/, {timeout: 15_000}); await page.waitForFunction( @@ -64,5 +72,34 @@ test.describe('captions inspector', () => { .includes('pageBreakAfter: true'); }) .toBe(true); + + await page.goto(`${STUDIO_URL}/default-captions-inspector-e2e`); + await expect(page).toHaveURL(/default-captions-inspector-e2e/, { + timeout: 15_000, + }); + await page.waitForFunction( + () => !document.body.innerText.includes('Loading...'), + {timeout: 30_000}, + ); + + const defaultCaptionsSequence = page + .getByTitle('Moving Pill Captions', {exact: true}) + .first(); + const defaultCaption = page.getByRole('textbox', {name: 'Caption 1'}); + await expect(async () => { + await defaultCaptionsSequence.click(); + await expect(defaultCaption).toBeVisible({timeout: 1_000}); + }).toPass({timeout: 30_000}); + await expect(defaultCaption).toBeEnabled(); + + await defaultCaption.fill('Editable captions'); + await defaultCaption.blur(); + await expect + .poll(() => { + return /text:\s*['"]Editable captions['"]/.test( + fs.readFileSync(defaultCaptionsFile, 'utf-8'), + ); + }) + .toBe(true); }); }); diff --git a/packages/example/src/E2eTestRoot.tsx b/packages/example/src/E2eTestRoot.tsx index 88f9ef52dd3..3ed1c623def 100644 --- a/packages/example/src/E2eTestRoot.tsx +++ b/packages/example/src/E2eTestRoot.tsx @@ -17,6 +17,7 @@ import {Issue8216} from './Issue8216/Issue8216'; import {LightLeakExample} from './LightLeak'; import {LostNodePathRepro} from './LostNodePathE2e/LostNodePathRepro'; import {MacCursorsExample} from './MacCursors'; +import {MovingPillCaptionsComposition} from './MovingPillCaptionsComposition'; import {NewVideoComp} from './NewVideo'; import {RotationKeyframeE2e} from './RotationKeyframeE2e'; import {SchemaTest, schemaTestSchema} from './SchemaTest'; @@ -109,6 +110,14 @@ export const E2eTestRoot: React.FC = () => { width={1080} height={CAPTIONS_HEIGHT} /> + { diff --git a/packages/studio/src/components/InlineCaptionInspector.tsx b/packages/studio/src/components/InlineCaptionInspector.tsx index 2591d1fc1ec..35cd528fb5b 100644 --- a/packages/studio/src/components/InlineCaptionInspector.tsx +++ b/packages/studio/src/components/InlineCaptionInspector.tsx @@ -15,7 +15,10 @@ import {Internals} from 'remotion'; import type {CodePosition} from '../error-overlay/react-overlay/utils/get-source-map'; import {StudioServerConnectionCtx} from '../helpers/client-id'; import {CaptionInspector} from './CaptionInspector'; -import {saveInlineCaptionPatches} from './Timeline/save-sequence-prop'; +import { + saveInlineCaptionPatches, + saveSequenceProps, +} from './Timeline/save-sequence-prop'; const serializeCaptions = (captions: Caption[]): string => { return JSON.stringify(captions); @@ -95,6 +98,8 @@ export const InlineCaptionInspector: React.FC<{ : null; const canSave = !readOnlyStudio && clientId !== null && captionStatus?.status === 'static'; + const captionsAreOmitted = + captionStatus?.status === 'static' && captionStatus.codeValue === undefined; const [draftCaptions, setDraftCaptions] = useState(captions); const savedCaptions = useRef(captions); const runtimeSignature = serializeCaptions(captions); @@ -147,21 +152,51 @@ export const InlineCaptionInspector: React.FC<{ } savedCaptions.current = nextCaptions; - saveInlineCaptionPatches({ - fileName: validatedLocation.source, - nodePath, - schema: controls.schema, - patches, - nextCaptions, - setPropStatuses, - clientId, - undoLabel: 'Update captions', - redoLabel: 'Update captions again', - }); + if (captionsAreOmitted) { + const defaultCaptions = + controls.schema.captions?.type === 'remotion-captions' + ? controls.schema.captions.default + : undefined; + saveSequenceProps({ + changes: [ + { + fileName: validatedLocation.source, + nodePath, + fieldKey: 'captions', + value: nextCaptions, + defaultValue: + defaultCaptions === undefined + ? null + : JSON.stringify(defaultCaptions), + schema: controls.schema, + }, + ], + addedKeyframes: null, + movedKeyframes: null, + setPropStatuses, + clientId, + undoLabel: 'Update captions', + redoLabel: 'Update captions again', + }); + } else { + saveInlineCaptionPatches({ + fileName: validatedLocation.source, + nodePath, + schema: controls.schema, + patches, + nextCaptions, + setPropStatuses, + clientId, + undoLabel: 'Update captions', + redoLabel: 'Update captions again', + }); + } + clearDragOverrides(nodePath); }, [ canSave, + captionsAreOmitted, clearDragOverrides, clientId, controls.schema, diff --git a/packages/studio/src/components/InspectorSequenceSection.tsx b/packages/studio/src/components/InspectorSequenceSection.tsx index 2c821bb69ba..3afb086e770 100644 --- a/packages/studio/src/components/InspectorSequenceSection.tsx +++ b/packages/studio/src/components/InspectorSequenceSection.tsx @@ -636,7 +636,7 @@ export const InspectorSequenceSection: React.FC<{ ); const inlineCaptionValue = schema.captions?.type === 'remotion-captions' - ? runtimeValues.captions + ? (runtimeValues.captions ?? schema.captions.default) : null; const inlineCaptions = Array.isArray(inlineCaptionValue) ? (inlineCaptionValue as Caption[]) From 8aeab060fcec4d34f950115026484d82f23749d7 Mon Sep 17 00:00:00 2001 From: Igor Samokhovets Date: Tue, 1 Sep 2026 16:00:35 +0200 Subject: [PATCH 2/2] Keep default Element captions inline --- .../moving-pill-captions.tsx | 138 +++++++++--------- .../popping-word-captions.tsx | 138 +++++++++--------- .../word-highlight-captions.tsx | 138 +++++++++--------- .../example/e2e/captions-inspector.test.mts | 23 ++- .../src/moving-pill-captions.element.tsx | 138 +++++++++--------- .../src/components/InlineCaptionInspector.tsx | 59 ++------ .../components/InspectorSequenceSection.tsx | 2 +- 7 files changed, 298 insertions(+), 338 deletions(-) diff --git a/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx b/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx index 05c64957625..fdc3f699815 100644 --- a/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx +++ b/packages/docs/elements/captions/moving-pill-captions/moving-pill-captions.tsx @@ -51,64 +51,10 @@ const pillVerticalPadding = 12; const pillBorderRadius = 10; const pillMoveDurationInFrames = 5; const defaultCombineTokensWithinMilliseconds = 800; -const defaultCaptions: Caption[] = [ - { - text: 'Captions', - startMs: 0, - endMs: 800, - timestampMs: 400, - confidence: null, - }, - { - text: ' can', - startMs: 800, - endMs: 1500, - timestampMs: 1150, - confidence: null, - }, - { - text: ' move', - startMs: 1500, - endMs: 2300, - timestampMs: 1900, - confidence: null, - }, - { - text: ' with', - startMs: 2300, - endMs: 3100, - timestampMs: 2700, - confidence: null, - }, - { - text: ' every', - startMs: 3100, - endMs: 4000, - timestampMs: 3550, - confidence: null, - }, - { - text: ' spoken', - startMs: 4000, - endMs: 5100, - timestampMs: 4550, - confidence: null, - }, - { - text: ' word.', - startMs: 5100, - endMs: 6500, - timestampMs: 5800, - confidence: null, - }, -]; const movingPillCaptionsSchema = { ...Interactive.baseSchema, - captions: { - ...Interactive.captionsSchema.captions, - default: defaultCaptions, - }, + ...Interactive.captionsSchema, width: { type: 'number', min: 1, @@ -530,16 +476,25 @@ const MovingPillCaptionsInner = forwardRef< }, ); -const MovingPillCaptionsWithControls: React.FC< - MovingPillCaptionsProps & {readonly controls: SequenceControls | undefined} -> = ({captions, controls, style, ...props}) => { +const MovingPillCaptionsLayer = Interactive.withSchema({ + Component: MovingPillCaptionsInner, + componentName: '', + componentIdentity: null, + schema: movingPillCaptionsSchema, + supportsEffects: false, +}) as React.FC; + +export const MovingPillCaptions: React.FC = ({ + captions, + style, + ...props +}) => { if (captions) { return ( - ); @@ -555,11 +510,60 @@ const MovingPillCaptionsWithControls: React.FC< width: 900, }} > - ); }; - -export const MovingPillCaptions = Interactive.withSchema({ - Component: MovingPillCaptionsWithControls, - componentName: '', - componentIdentity: null, - schema: movingPillCaptionsSchema, - supportsEffects: false, -}) as React.FC; diff --git a/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx b/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx index e27aca4ed80..2e1670b6b9f 100644 --- a/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx +++ b/packages/docs/elements/captions/popping-word-captions/popping-word-captions.tsx @@ -47,64 +47,10 @@ const textColor = '#ffffff'; const highlightColor = '#4da3ff'; const activeWordScale = 1.03; const defaultCombineTokensWithinMilliseconds = 800; -const defaultCaptions: Caption[] = [ - { - text: 'Captions', - startMs: 0, - endMs: 800, - timestampMs: 400, - confidence: null, - }, - { - text: ' can', - startMs: 800, - endMs: 1500, - timestampMs: 1150, - confidence: null, - }, - { - text: ' move', - startMs: 1500, - endMs: 2300, - timestampMs: 1900, - confidence: null, - }, - { - text: ' with', - startMs: 2300, - endMs: 3100, - timestampMs: 2700, - confidence: null, - }, - { - text: ' every', - startMs: 3100, - endMs: 4000, - timestampMs: 3550, - confidence: null, - }, - { - text: ' spoken', - startMs: 4000, - endMs: 5100, - timestampMs: 4550, - confidence: null, - }, - { - text: ' word.', - startMs: 5100, - endMs: 6500, - timestampMs: 5800, - confidence: null, - }, -]; const poppingWordCaptionsSchema = { ...Interactive.baseSchema, - captions: { - ...Interactive.captionsSchema.captions, - default: defaultCaptions, - }, + ...Interactive.captionsSchema, width: { type: 'number', min: 1, @@ -440,16 +386,25 @@ const PoppingWordCaptionsInner = forwardRef< }, ); -const PoppingWordCaptionsWithControls: React.FC< - PoppingWordCaptionsProps & {readonly controls: SequenceControls | undefined} -> = ({captions, controls, style, ...props}) => { +const PoppingWordCaptionsLayer = Interactive.withSchema({ + Component: PoppingWordCaptionsInner, + componentName: '', + componentIdentity: null, + schema: poppingWordCaptionsSchema, + supportsEffects: false, +}) as React.FC; + +export const PoppingWordCaptions: React.FC = ({ + captions, + style, + ...props +}) => { if (captions) { return ( - ); @@ -465,11 +420,60 @@ const PoppingWordCaptionsWithControls: React.FC< width: 900, }} > - ); }; - -export const PoppingWordCaptions = Interactive.withSchema({ - Component: PoppingWordCaptionsWithControls, - componentName: '', - componentIdentity: null, - schema: poppingWordCaptionsSchema, - supportsEffects: false, -}) as React.FC; diff --git a/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx b/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx index 3749f2e39de..afec7c408e5 100644 --- a/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx +++ b/packages/docs/elements/captions/word-highlight-captions/word-highlight-captions.tsx @@ -44,64 +44,10 @@ const fontWeight = '700'; const textColor = '#ffffff'; const highlightColor = '#4da3ff'; const defaultCombineTokensWithinMilliseconds = 800; -const defaultCaptions: Caption[] = [ - { - text: 'Captions', - startMs: 0, - endMs: 800, - timestampMs: 400, - confidence: null, - }, - { - text: ' can', - startMs: 800, - endMs: 1500, - timestampMs: 1150, - confidence: null, - }, - { - text: ' move', - startMs: 1500, - endMs: 2300, - timestampMs: 1900, - confidence: null, - }, - { - text: ' with', - startMs: 2300, - endMs: 3100, - timestampMs: 2700, - confidence: null, - }, - { - text: ' every', - startMs: 3100, - endMs: 4000, - timestampMs: 3550, - confidence: null, - }, - { - text: ' spoken', - startMs: 4000, - endMs: 5100, - timestampMs: 4550, - confidence: null, - }, - { - text: ' word.', - startMs: 5100, - endMs: 6500, - timestampMs: 5800, - confidence: null, - }, -]; const wordHighlightCaptionsSchema = { ...Interactive.baseSchema, - captions: { - ...Interactive.captionsSchema.captions, - default: defaultCaptions, - }, + ...Interactive.captionsSchema, width: { type: 'number', min: 1, @@ -398,16 +344,25 @@ const WordHighlightCaptionsInner = forwardRef< }, ); -const WordHighlightCaptionsWithControls: React.FC< - WordHighlightCaptionsProps & {readonly controls: SequenceControls | undefined} -> = ({captions, controls, style, ...props}) => { +const WordHighlightCaptionsLayer = Interactive.withSchema({ + Component: WordHighlightCaptionsInner, + componentName: '', + componentIdentity: null, + schema: wordHighlightCaptionsSchema, + supportsEffects: false, +}) as React.FC; + +export const WordHighlightCaptions: React.FC = ({ + captions, + style, + ...props +}) => { if (captions) { return ( - ); @@ -423,11 +378,60 @@ const WordHighlightCaptionsWithControls: React.FC< width: 900, }} > - ); }; - -export const WordHighlightCaptions = Interactive.withSchema({ - Component: WordHighlightCaptionsWithControls, - componentName: '', - componentIdentity: null, - schema: wordHighlightCaptionsSchema, - supportsEffects: false, -}) as React.FC; diff --git a/packages/example/e2e/captions-inspector.test.mts b/packages/example/e2e/captions-inspector.test.mts index e8c7d39d445..1aae3ad8366 100644 --- a/packages/example/e2e/captions-inspector.test.mts +++ b/packages/example/e2e/captions-inspector.test.mts @@ -12,7 +12,12 @@ const inlineCaptionsFile = path.join( 'CaptionsTester', 'InlineAnimatedCaptions.tsx', ); -const defaultCaptionsFile = path.join( +const elementCaptionsFile = path.join( + exampleDir, + 'src', + 'moving-pill-captions.element.tsx', +); +const elementCallSiteFile = path.join( exampleDir, 'src', 'MovingPillCaptionsComposition.tsx', @@ -20,21 +25,24 @@ const defaultCaptionsFile = path.join( test.describe('captions inspector', () => { let inlineSourceBefore: string; - let defaultSourceBefore: string; + let elementSourceBefore: string; + let elementCallSiteSourceBefore: string; test.beforeEach(async () => { inlineSourceBefore = fs.readFileSync(inlineCaptionsFile, 'utf-8'); - defaultSourceBefore = fs.readFileSync(defaultCaptionsFile, 'utf-8'); + elementSourceBefore = fs.readFileSync(elementCaptionsFile, 'utf-8'); + elementCallSiteSourceBefore = fs.readFileSync(elementCallSiteFile, 'utf-8'); await startStudio(); }); test.afterEach(async () => { await stopStudio(); fs.writeFileSync(inlineCaptionsFile, inlineSourceBefore); - fs.writeFileSync(defaultCaptionsFile, defaultSourceBefore); + fs.writeFileSync(elementCaptionsFile, elementSourceBefore); + fs.writeFileSync(elementCallSiteFile, elementCallSiteSourceBefore); }); - test('persists inline and default caption edits', async ({page}) => { + test('persists caption edits at their inline definitions', async ({page}) => { await page.goto(`${STUDIO_URL}/captions-inspector-e2e`); await expect(page).toHaveURL(/captions-inspector-e2e/, {timeout: 15_000}); await page.waitForFunction( @@ -97,9 +105,12 @@ test.describe('captions inspector', () => { await expect .poll(() => { return /text:\s*['"]Editable captions['"]/.test( - fs.readFileSync(defaultCaptionsFile, 'utf-8'), + fs.readFileSync(elementCaptionsFile, 'utf-8'), ); }) .toBe(true); + expect(fs.readFileSync(elementCallSiteFile, 'utf-8')).toBe( + elementCallSiteSourceBefore, + ); }); }); diff --git a/packages/example/src/moving-pill-captions.element.tsx b/packages/example/src/moving-pill-captions.element.tsx index 05c64957625..fdc3f699815 100644 --- a/packages/example/src/moving-pill-captions.element.tsx +++ b/packages/example/src/moving-pill-captions.element.tsx @@ -51,64 +51,10 @@ const pillVerticalPadding = 12; const pillBorderRadius = 10; const pillMoveDurationInFrames = 5; const defaultCombineTokensWithinMilliseconds = 800; -const defaultCaptions: Caption[] = [ - { - text: 'Captions', - startMs: 0, - endMs: 800, - timestampMs: 400, - confidence: null, - }, - { - text: ' can', - startMs: 800, - endMs: 1500, - timestampMs: 1150, - confidence: null, - }, - { - text: ' move', - startMs: 1500, - endMs: 2300, - timestampMs: 1900, - confidence: null, - }, - { - text: ' with', - startMs: 2300, - endMs: 3100, - timestampMs: 2700, - confidence: null, - }, - { - text: ' every', - startMs: 3100, - endMs: 4000, - timestampMs: 3550, - confidence: null, - }, - { - text: ' spoken', - startMs: 4000, - endMs: 5100, - timestampMs: 4550, - confidence: null, - }, - { - text: ' word.', - startMs: 5100, - endMs: 6500, - timestampMs: 5800, - confidence: null, - }, -]; const movingPillCaptionsSchema = { ...Interactive.baseSchema, - captions: { - ...Interactive.captionsSchema.captions, - default: defaultCaptions, - }, + ...Interactive.captionsSchema, width: { type: 'number', min: 1, @@ -530,16 +476,25 @@ const MovingPillCaptionsInner = forwardRef< }, ); -const MovingPillCaptionsWithControls: React.FC< - MovingPillCaptionsProps & {readonly controls: SequenceControls | undefined} -> = ({captions, controls, style, ...props}) => { +const MovingPillCaptionsLayer = Interactive.withSchema({ + Component: MovingPillCaptionsInner, + componentName: '', + componentIdentity: null, + schema: movingPillCaptionsSchema, + supportsEffects: false, +}) as React.FC; + +export const MovingPillCaptions: React.FC = ({ + captions, + style, + ...props +}) => { if (captions) { return ( - ); @@ -555,11 +510,60 @@ const MovingPillCaptionsWithControls: React.FC< width: 900, }} > - ); }; - -export const MovingPillCaptions = Interactive.withSchema({ - Component: MovingPillCaptionsWithControls, - componentName: '', - componentIdentity: null, - schema: movingPillCaptionsSchema, - supportsEffects: false, -}) as React.FC; diff --git a/packages/studio/src/components/InlineCaptionInspector.tsx b/packages/studio/src/components/InlineCaptionInspector.tsx index 35cd528fb5b..2591d1fc1ec 100644 --- a/packages/studio/src/components/InlineCaptionInspector.tsx +++ b/packages/studio/src/components/InlineCaptionInspector.tsx @@ -15,10 +15,7 @@ import {Internals} from 'remotion'; import type {CodePosition} from '../error-overlay/react-overlay/utils/get-source-map'; import {StudioServerConnectionCtx} from '../helpers/client-id'; import {CaptionInspector} from './CaptionInspector'; -import { - saveInlineCaptionPatches, - saveSequenceProps, -} from './Timeline/save-sequence-prop'; +import {saveInlineCaptionPatches} from './Timeline/save-sequence-prop'; const serializeCaptions = (captions: Caption[]): string => { return JSON.stringify(captions); @@ -98,8 +95,6 @@ export const InlineCaptionInspector: React.FC<{ : null; const canSave = !readOnlyStudio && clientId !== null && captionStatus?.status === 'static'; - const captionsAreOmitted = - captionStatus?.status === 'static' && captionStatus.codeValue === undefined; const [draftCaptions, setDraftCaptions] = useState(captions); const savedCaptions = useRef(captions); const runtimeSignature = serializeCaptions(captions); @@ -152,51 +147,21 @@ export const InlineCaptionInspector: React.FC<{ } savedCaptions.current = nextCaptions; - if (captionsAreOmitted) { - const defaultCaptions = - controls.schema.captions?.type === 'remotion-captions' - ? controls.schema.captions.default - : undefined; - saveSequenceProps({ - changes: [ - { - fileName: validatedLocation.source, - nodePath, - fieldKey: 'captions', - value: nextCaptions, - defaultValue: - defaultCaptions === undefined - ? null - : JSON.stringify(defaultCaptions), - schema: controls.schema, - }, - ], - addedKeyframes: null, - movedKeyframes: null, - setPropStatuses, - clientId, - undoLabel: 'Update captions', - redoLabel: 'Update captions again', - }); - } else { - saveInlineCaptionPatches({ - fileName: validatedLocation.source, - nodePath, - schema: controls.schema, - patches, - nextCaptions, - setPropStatuses, - clientId, - undoLabel: 'Update captions', - redoLabel: 'Update captions again', - }); - } - + saveInlineCaptionPatches({ + fileName: validatedLocation.source, + nodePath, + schema: controls.schema, + patches, + nextCaptions, + setPropStatuses, + clientId, + undoLabel: 'Update captions', + redoLabel: 'Update captions again', + }); clearDragOverrides(nodePath); }, [ canSave, - captionsAreOmitted, clearDragOverrides, clientId, controls.schema, diff --git a/packages/studio/src/components/InspectorSequenceSection.tsx b/packages/studio/src/components/InspectorSequenceSection.tsx index 3afb086e770..2c821bb69ba 100644 --- a/packages/studio/src/components/InspectorSequenceSection.tsx +++ b/packages/studio/src/components/InspectorSequenceSection.tsx @@ -636,7 +636,7 @@ export const InspectorSequenceSection: React.FC<{ ); const inlineCaptionValue = schema.captions?.type === 'remotion-captions' - ? (runtimeValues.captions ?? schema.captions.default) + ? runtimeValues.captions : null; const inlineCaptions = Array.isArray(inlineCaptionValue) ? (inlineCaptionValue as Caption[])