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..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 @@ -476,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 ( - ); @@ -501,7 +510,7 @@ 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 3c805961fde..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 @@ -386,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 ( - ); @@ -411,7 +420,7 @@ 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 e2062e6222e..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 @@ -344,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 ( - ); @@ -369,7 +378,7 @@ 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 4431cb3c56e..1aae3ad8366 100644 --- a/packages/example/e2e/captions-inspector.test.mts +++ b/packages/example/e2e/captions-inspector.test.mts @@ -12,21 +12,37 @@ const inlineCaptionsFile = path.join( 'CaptionsTester', 'InlineAnimatedCaptions.tsx', ); +const elementCaptionsFile = path.join( + exampleDir, + 'src', + 'moving-pill-captions.element.tsx', +); +const elementCallSiteFile = path.join( + exampleDir, + 'src', + 'MovingPillCaptionsComposition.tsx', +); test.describe('captions inspector', () => { - let sourceBefore: string; + let inlineSourceBefore: string; + let elementSourceBefore: string; + let elementCallSiteSourceBefore: string; test.beforeEach(async () => { - sourceBefore = fs.readFileSync(inlineCaptionsFile, 'utf-8'); + inlineSourceBefore = fs.readFileSync(inlineCaptionsFile, 'utf-8'); + elementSourceBefore = fs.readFileSync(elementCaptionsFile, 'utf-8'); + elementCallSiteSourceBefore = fs.readFileSync(elementCallSiteFile, 'utf-8'); await startStudio(); }); test.afterEach(async () => { await stopStudio(); - fs.writeFileSync(inlineCaptionsFile, sourceBefore); + fs.writeFileSync(inlineCaptionsFile, inlineSourceBefore); + fs.writeFileSync(elementCaptionsFile, elementSourceBefore); + fs.writeFileSync(elementCallSiteFile, elementCallSiteSourceBefore); }); - test('persists a forced page break to an inline caption', 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( @@ -64,5 +80,37 @@ 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(elementCaptionsFile, 'utf-8'), + ); + }) + .toBe(true); + expect(fs.readFileSync(elementCallSiteFile, 'utf-8')).toBe( + elementCallSiteSourceBefore, + ); }); }); diff --git a/packages/example/src/E2eTestRoot.tsx b/packages/example/src/E2eTestRoot.tsx index 1ce7d70c4e3..9a157a71ae6 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'; @@ -110,6 +111,14 @@ export const E2eTestRoot: React.FC = () => { width={1080} height={CAPTIONS_HEIGHT} /> + = ({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 ( - ); @@ -501,7 +510,7 @@ 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/CaptionTextEditor.tsx b/packages/studio/src/components/CaptionTextEditor.tsx index 346567b81ed..bd5a7187cbb 100644 --- a/packages/studio/src/components/CaptionTextEditor.tsx +++ b/packages/studio/src/components/CaptionTextEditor.tsx @@ -170,6 +170,7 @@ export const CaptionTextEditor: React.FC<{ {formatMilliseconds(caption.endMs)} ms {