[pull] main from remotion-dev:main

packages/browser-studio/package.json

@@ -31,7 +31,7 @@
 		"@remotion/studio-protocol": "workspace:*",
 		"@remotion/studio-shared": "workspace:*",
 		"@rspack/browser": "2.1.1",
-		"fflate": "0.8.2",
+		"fflate": "0.8.3",
 		"prettier": "catalog:",
 		"react-refresh": "0.18.0",
 		"remotion": "workspace:*"

packages/browser-studio/src/BrowserStudio.tsx

@@ -181,6 +181,18 @@ export const BrowserStudio: React.FC<BrowserStudioProps> = ({
 		[],
 	);
 
+	useEffect(() => {
+		const onBeforeUnload = (event: BeforeUnloadEvent) => {
+			event.preventDefault();
+			event.returnValue = true;
+		};
+
+		window.addEventListener('beforeunload', onBeforeUnload);
+		return () => {
+			window.removeEventListener('beforeunload', onBeforeUnload);
+		};
+	}, []);
+
 	useEffect(() => {
 		return () => publicFileManager.dispose();
 	}, [publicFileManager]);

packages/core/src/use-media-playback.ts

@@ -164,6 +164,14 @@ export const useMediaPlayback = ({
 	// and it is also in a useLayoutEffect.
 	useLayoutEffect(() => {
 		const playbackRateToSet = Math.max(0, playbackRate);
+		// Loading a resource resets playbackRate to defaultPlaybackRate.
+		if (
+			mediaRef.current &&
+			mediaRef.current.defaultPlaybackRate !== playbackRateToSet
+		) {
+			mediaRef.current.defaultPlaybackRate = playbackRateToSet;
+		}
+
 		if (
 			mediaRef.current &&
 			mediaRef.current.playbackRate !== playbackRateToSet

packages/media/src/test/html5-playback-rate.test.tsx

@@ -0,0 +1,46 @@
+import {Player} from '@remotion/player';
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {Html5Video} from 'remotion';
+import {expect, test} from 'vitest';
+
+test('preserves the Player media playback rate across source changes and reloads', async () => {
+	const container = document.createElement('div');
+	document.body.appendChild(container);
+	const root = createRoot(container);
+	const Composition: React.FC<{readonly src: string}> = ({src}) => (
+		<Html5Video src={src} playbackRate={0.6} />
+	);
+
+	try {
+		for (const [index, globalRate] of [1, 0.5].entries()) {
+			root.render(
+				<Player
+					acknowledgeRemotionLicense
+					component={Composition}
+					compositionHeight={720}
+					compositionWidth={1280}
+					durationInFrames={100}
+					fps={30}
+					initiallyMuted
+					playbackRate={globalRate}
+					inputProps={{src: `/bigbuckbunny.mp4?source=${index}`}}
+				/>,
+			);
+			await expect
+				.poll(() => container.querySelector('video')?.readyState)
+				.toBe(4);
+			const video = container.querySelector('video')!;
+			await expect.poll(() => video.playbackRate).toBe(0.6 * globalRate);
+
+			// Loading a new resource resets playbackRate to defaultPlaybackRate.
+			video.src = `/bigbuckbunny.mp4?reload=${index}`;
+			video.load();
+			await expect.poll(() => video.readyState).toBe(4);
+			expect(video.playbackRate).toBe(0.6 * globalRate);
+		}
+	} finally {
+		root.unmount();
+		container.remove();
+	}
+});

packages/studio/src/components/CompositionSelectorItem.tsx

@@ -15,6 +15,7 @@ import React, {
 	useState,
 } from 'react';
 import {type _InternalTypes} from 'remotion';
+import {getBrowserStudioOperations} from '../helpers/browser-studio-operations';
 import {StudioServerConnectionCtx} from '../helpers/client-id';
 import {
 	CURRENT_COLOR,
@@ -411,8 +412,12 @@ export const CompositionSelectorItem: React.FC<{
 			);
 
 			if (item.type === 'composition') {
+				const browserStudioOperations = getBrowserStudioOperations();
 				const compositionDragData = makeCompositionDragData({
-					compositionFile: resolvedLocation?.source ?? null,
+					compositionFile:
+						browserStudioOperations === null
+							? (resolvedLocation?.source ?? null)
+							: browserStudioOperations.getCompositionFile(item.composition.id),
 					compositionId: item.composition.id,
 					width: item.composition.width ?? null,
 					height: item.composition.height ?? null,

packages/studio/src/components/TimeValue.tsx

@@ -1,17 +1,24 @@
 import {PlayerInternals} from '@remotion/player';
 import React, {
 	useCallback,
+	useContext,
 	useEffect,
 	useImperativeHandle,
 	useRef,
 } from 'react';
 import {Internals, useCurrentFrame} from 'remotion';
-import {LIGHT_TEXT, WHITE} from '../helpers/colors';
+import {LIGHT_TEXT, TRANSPARENT, WHITE} from '../helpers/colors';
+import {
+	FOCUS_VISIBLE_ONLY_CLASS_NAME,
+	HOVERABLE_CLASS_NAME,
+	hoverableStyle,
+} from '../helpers/hoverable';
 import {useIsStill} from '../helpers/is-current-selected-still';
 import {useKeybinding} from '../helpers/use-keybinding';
 import {renderFrame} from '../state/render-frame';
 import {Flex, Spacing} from './layout';
 import {InputDragger} from './NewComposition/InputDragger';
+import {TimelineTickFormatContext} from './Timeline/TimelineTickFormatProvider';
 import {TimelineZoomControls} from './Timeline/TimelineZoomControls';
 
 const text: React.CSSProperties = {
@@ -25,7 +32,7 @@ const text: React.CSSProperties = {
 };
 
 const currentTimeTypography: React.CSSProperties = {
-	color: WHITE,
+	color: LIGHT_TEXT,
 	display: 'inline-block',
 	fontSize: 14,
 	fontVariantNumeric: 'tabular-nums',
@@ -36,16 +43,37 @@ const currentTimeTypography: React.CSSProperties = {
 
 const currentTimeInputStyle: React.CSSProperties = {
 	...currentTimeTypography,
-	padding: '4px 6px 4px 0',
+	padding: 0,
 };
 
-const currentTimeButtonStyle: React.CSSProperties = {
-	paddingLeft: 0,
+const currentTimeStack: React.CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'flex-start',
+	lineHeight: 1,
+	padding: '5px 7px 5px 1px',
 	transform: 'translateY(-1px)',
 };
 
+const currentTimeButtonStyle = {
+	display: 'block',
+	padding: 0,
+	border: 'none',
+	lineHeight: '21px',
+	'--remotion-cli-internals-blue-hovered': WHITE,
+} as React.CSSProperties;
+
 const currentTimeSubtitle: React.CSSProperties = {
-	color: LIGHT_TEXT,
+	...hoverableStyle({
+		idleBackground: TRANSPARENT,
+		hoverBackground: TRANSPARENT,
+		idleColor: LIGHT_TEXT,
+		hoverColor: WHITE,
+	}),
+	background: TRANSPARENT,
+	border: 'none',
+	padding: 0,
+	cursor: 'default',
 	display: 'block',
 	fontFamily: 'monospace',
 	fontSize: 10,
@@ -57,6 +85,10 @@ const currentTimeSubtitle: React.CSSProperties = {
 
 export const TimeValue: React.FC = () => {
 	const frame = useCurrentFrame();
+	const {showFrames, setShowFrames} = useContext(TimelineTickFormatContext);
+	const toggleTickFormat = useCallback(() => {
+		setShowFrames((previous) => !previous);
+	}, [setShowFrames]);
 	const config = Internals.useUnsafeVideoConfig();
 	const isStill = useIsStill();
 	const {seek, play, pause, toggle} = PlayerInternals.usePlayerMethods();
@@ -81,10 +113,6 @@ export const TimeValue: React.FC = () => {
 		},
 		[config],
 	);
-	const formatterSubtitle = useCallback(
-		(value: string | number) => String(value),
-		[],
-	);
 	useImperativeHandle(
 		Internals.timeValueRef,
 		() => ({
@@ -127,21 +155,36 @@ export const TimeValue: React.FC = () => {
 
 	return (
 		<div style={text}>
-			<InputDragger
-				ref={ref}
-				aria-label={String(frame)}
-				value={frame}
-				onTextChange={onTextChange}
-				onValueChange={onValueChange}
-				formatter={formatter}
-				formatterStyle={currentTimeTypography}
-				formatterSubtitle={formatterSubtitle}
-				formatterSubtitleStyle={currentTimeSubtitle}
-				buttonStyle={currentTimeButtonStyle}
-				rightAlign={false}
-				status="ok"
-				style={currentTimeInputStyle}
-			/>
+			<div style={currentTimeStack}>
+				<InputDragger
+					ref={ref}
+					aria-label={String(frame)}
+					value={frame}
+					onTextChange={onTextChange}
+					onValueChange={onValueChange}
+					formatter={formatter}
+					formatterStyle={currentTimeTypography}
+					buttonStyle={currentTimeButtonStyle}
+					rightAlign={false}
+					status="ok"
+					style={currentTimeInputStyle}
+				/>
+				<button
+					type="button"
+					className={`${HOVERABLE_CLASS_NAME} ${FOCUS_VISIBLE_ONLY_CLASS_NAME}`}
+					style={currentTimeSubtitle}
+					onClick={toggleTickFormat}
+					aria-label="Show timeline ticks as frames"
+					aria-pressed={showFrames}
+					title={
+						showFrames
+							? 'Show timeline ticks as timecode'
+							: 'Show timeline ticks as frames'
+					}
+				>
+					{frame}
+				</button>
+			</div>
 			<Spacing x={2} />
 			<Flex />
 			<TimelineZoomControls sliderMaxWidth={80} />