@remotion/studio: When duplicating composition, jump to new one

packages/studio/src/components/InitialCompositionLoader.tsx

@@ -91,11 +91,29 @@ export const InitialCompositionLoader: React.FC = () => {
 	const staticFiles = useStaticFiles();
 
 	useEffect(() => {
+		const canvasContentFromUrl = deriveCanvasContentFromUrl();
+
 		if (canvasContent) {
+			// If the URL points to a different composition than the one currently
+			// displayed, switch to it. This handles the case where the URL is
+			// updated externally (e.g. after duplicating a composition).
+			if (
+				canvasContentFromUrl &&
+				canvasContentFromUrl.type === 'composition' &&
+				canvasContent.type === 'composition' &&
+				canvasContentFromUrl.compositionId !== canvasContent.compositionId
+			) {
+				const exists = compositions.find(
+					(c) => c.id === canvasContentFromUrl.compositionId,
+				);
+				if (exists) {
+					selectComposition(exists, false);
+				}
+			}
+
 			return;
 		}
 
-		const canvasContentFromUrl = deriveCanvasContentFromUrl();
 		if (canvasContentFromUrl && canvasContentFromUrl.type === 'composition') {
 			const exists = compositions.find(
 				(c) => c.id === canvasContentFromUrl.compositionId,

packages/studio/src/components/NewComposition/CodemodFooter.tsx

@@ -18,6 +18,7 @@ export const CodemodFooter: React.FC<{
 	readonly errorNotification: string;
 	readonly genericSubmitLabel: string;
 	readonly submitLabel: (options: {relativeRootPath: string}) => string;
+	readonly onSuccess: (() => void) | null;
 }> = ({
 	codemod,
 	valid,
@@ -26,6 +27,7 @@ export const CodemodFooter: React.FC<{
 	errorNotification,
 	genericSubmitLabel,
 	submitLabel,
+	onSuccess,
 }) => {
 	const [submitting, setSubmitting] = useState(false);
 	const {setSelectedModal} = useContext(ModalsContext);
@@ -66,6 +68,7 @@ export const CodemodFooter: React.FC<{
 		})
 			.then(() => {
 				notification.replaceContent(successNotification, 2000);
+				onSuccess?.();
 			})
 			.catch((err) => {
 				notification.replaceContent(
@@ -77,6 +80,7 @@ export const CodemodFooter: React.FC<{
 		codemod,
 		errorNotification,
 		loadingNotification,
+		onSuccess,
 		setSelectedModal,
 		successNotification,
 	]);

packages/studio/src/components/NewComposition/DeleteComposition.tsx

@@ -65,6 +65,7 @@ const DeleteCompositionLoaded: React.FC<{
 						}
 						codemod={codemod}
 						valid
+						onSuccess={null}
 					/>
 				</ModalFooterContainer>
 			</form>

packages/studio/src/components/NewComposition/DuplicateComposition.tsx

@@ -2,6 +2,7 @@ import type {RecastCodemod} from '@remotion/studio-shared';
 import type {ChangeEventHandler} from 'react';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {Internals} from 'remotion';
+import {pushUrl} from '../../helpers/url-state';
 import {
 	validateCompositionDimension,
 	validateCompositionName,
@@ -210,6 +211,10 @@ const DuplicateCompositionLoaded: React.FC<{
 		type,
 	]);
 
+	const onDuplicateSuccess = useCallback(() => {
+		pushUrl(`/${newId}`);
+	}, [newId]);
+
 	const onSubmit: React.FormEventHandler<HTMLFormElement> = useCallback((e) => {
 		e.preventDefault();
 	}, []);
@@ -363,6 +368,7 @@ const DuplicateCompositionLoaded: React.FC<{
 						submitLabel={({relativeRootPath}) => `Add to ${relativeRootPath}`}
 						codemod={codemod}
 						valid={valid}
+						onSuccess={onDuplicateSuccess}
 					/>
 				</ModalFooterContainer>
 			</form>

packages/studio/src/components/NewComposition/RenameComposition.tsx

@@ -104,6 +104,7 @@ const RenameCompositionLoaded: React.FC<{}> = () => {
 						submitLabel={({relativeRootPath}) => `Modify ${relativeRootPath}`}
 						codemod={codemod}
 						valid={valid}
+						onSuccess={null}
 					/>
 				</ModalFooterContainer>
 			</form>