Merge pull request #6164 from remotion-dev/web-render-modal-license

Author: JonnyBurger

packages/cli/src/config/index.ts

@@ -132,6 +132,7 @@ const {
 	enableCrossSiteIsolationOption,
 	imageSequencePatternOption,
 	darkModeOption,
+	publicLicenseKeyOption,
 } = BrowserSafeApis.options;
 
 declare global {
@@ -535,6 +536,12 @@ declare global {
 		 * @param pattern The pattern string, e.g. 'frame_[frame].[ext]'.
 		 */
 		readonly setImageSequencePattern: (pattern: string | null) => void;
+		/**
+		 * Set the public license key for your company license.
+		 * Obtain it from the "Usage" tab on https://remotion.pro
+		 * Pass "free-license" if you are eligible for the free license.
+		 */
+		readonly setPublicLicenseKey: (key: string | null) => void;
 	}
 }
 
@@ -715,6 +722,7 @@ export const Config: FlatConfig = {
 	setImageSequencePattern: imageSequencePatternOption.setConfig,
 	setHardwareAcceleration: hardwareAccelerationOption.setConfig,
 	setEnableCrossSiteIsolation: enableCrossSiteIsolationOption.setConfig,
+	setPublicLicenseKey: publicLicenseKeyOption.setConfig,
 };
 
 export const ConfigInternals = {

packages/cli/src/get-render-defaults.ts

@@ -31,6 +31,7 @@ const {
 	chromeModeOption,
 	mediaCacheSizeInBytesOption,
 	darkModeOption,
+	publicLicenseKeyOption,
 } = BrowserSafeApis.options;
 
 export const getRenderDefaults = (): RenderDefaults => {
@@ -116,6 +117,9 @@ export const getRenderDefaults = (): RenderDefaults => {
 	const mediaCacheSizeInBytes = mediaCacheSizeInBytesOption.getValue({
 		commandLine: parsedCli,
 	}).value;
+	const publicLicenseKey = publicLicenseKeyOption.getValue({
+		commandLine: parsedCli,
+	}).value;
 
 	const everyNthFrame = ConfigInternals.getEveryNthFrame();
 	const stillImageFormat = ConfigInternals.getUserPreferredStillImageFormat();
@@ -173,5 +177,6 @@ export const getRenderDefaults = (): RenderDefaults => {
 		hardwareAcceleration,
 		chromeMode,
 		mediaCacheSizeInBytes,
+		publicLicenseKey,
 	};
 };

packages/cli/src/parse-command-line.ts

@@ -34,6 +34,7 @@ const {
 	publicPathOption,
 	audioLatencyHintOption,
 	darkModeOption,
+	publicLicenseKeyOption,
 } = BrowserSafeApis.options;
 
 export type CommandLineOptions = {
@@ -115,6 +116,8 @@ export type CommandLineOptions = {
 	>;
 	repro: boolean;
 	'image-sequence-pattern': string;
+	'license-key': string;
+	[publicLicenseKeyOption.cliFlag]: string;
 };
 
 export const parseCommandLine = () => {
@@ -186,6 +189,17 @@ export const parseCommandLine = () => {
 		);
 	}
 
+	if (
+		parsedCli['license-key'] &&
+		parsedCli['license-key'].startsWith('rm_pub_')
+	) {
+		Config.setPublicLicenseKey(parsedCli['license-key']);
+	}
+
+	if (parsedCli['public-license-key']) {
+		Config.setPublicLicenseKey(parsedCli['public-license-key']);
+	}
+
 	if (typeof parsedCli.quality !== 'undefined') {
 		Log.warn(
 			{indent: false, logLevel: 'info'},

packages/docs/docs/cli/studio.mdx

@@ -106,3 +106,11 @@ npx remotion studio --ipv4
 ```sh
 npx remotion studio --enable-cross-site-isolation
 ```
+
+### `--public-license-key`<AvailableFrom v="4.0.398" />
+
+<Options id="public-license-key" />
+
+```sh
+npx remotion studio --public-license-key="your-license-key"
+```

packages/docs/docs/config.mdx

@@ -871,6 +871,20 @@ Using this feature is discouraged. Before using it, we want to make you aware of
 Before you use this hack, reach out to the Remotion team on [Discord](https://remotion.dev/discord) and ask us if we are open to implement the feature you need in a clean way - we often do implement new features quickly based on users feedback.
 :::
 
+## `setPublicLicenseKey()`<AvailableFrom v="4.0.398" />
+
+<Options id="public-license-key" />
+<br />
+<br />
+
+```ts twoslash title="remotion.config.ts"
+import {Config} from '@remotion/cli/config';
+// ---cut---
+Config.setPublicLicenseKey('your-license-key');
+```
+
+The [command line flag](/docs/cli/studio#--public-license-key) `--public-license-key` will take precedence over this option.
+
 ## ~~`setQuality()`~~
 
 Renamed to `setJpegQuality` in `v4.0.0`.

packages/renderer/src/options/index.tsx

@@ -35,6 +35,7 @@ import type {AnyRemotionOption} from './option';
 import {overwriteOption} from './overwrite';
 import {preferLosslessAudioOption} from './prefer-lossless';
 import {publicDirOption} from './public-dir';
+import {publicLicenseKeyOption} from './public-license-key';
 import {publicPathOption} from './public-path';
 import {reproOption} from './repro';
 import {scaleOption} from './scale';
@@ -95,6 +96,7 @@ export const allOptions = {
 	imageSequencePatternOption,
 	mediaCacheSizeInBytesOption,
 	darkModeOption,
+	publicLicenseKeyOption,
 };
 
 export type AvailableOptions = keyof typeof allOptions;

packages/renderer/src/options/public-license-key.tsx

@@ -0,0 +1,49 @@
+import type {AnyRemotionOption} from './option';
+
+const cliFlag = 'public-license-key' as const;
+
+let currentPublicLicenseKey: string | null = null;
+
+export const publicLicenseKeyOption = {
+	name: 'Public License Key',
+	cliFlag,
+	description: () => (
+		<>
+			The public license key for your company license, obtained from the "Usage"
+			tab on <a href="https://remotion.pro/dashboard">remotion.pro</a>. If you
+			are eligible for the free license, pass "free-license".
+		</>
+	),
+	ssrName: 'publicLicenseKey' as const,
+	docLink: 'https://www.remotion.dev/docs/licensing',
+	getValue: ({commandLine}) => {
+		if (commandLine[cliFlag] !== undefined) {
+			return {
+				source: 'cli',
+				value: commandLine[cliFlag] as string | null,
+			};
+		}
+
+		if (currentPublicLicenseKey !== null) {
+			return {
+				source: 'config',
+				value: currentPublicLicenseKey,
+			};
+		}
+
+		return {
+			source: 'default',
+			value: null,
+		};
+	},
+	setConfig: (value: string | null) => {
+		if (value && value !== 'free-license' && !value.startsWith('rm_pub_')) {
+			throw new Error(
+				'Invalid public license key. It must start with "rm_pub_" or be "free-license".',
+			);
+		}
+
+		currentPublicLicenseKey = value;
+	},
+	type: null as string | null,
+} satisfies AnyRemotionOption<string | null>;

packages/studio-shared/src/render-defaults.ts

@@ -55,6 +55,7 @@ export type RenderDefaults = {
 	metadata: Record<string, string> | null;
 	hardwareAcceleration: HardwareAccelerationOption;
 	chromeMode: ChromeMode;
+	publicLicenseKey: string | null;
 };
 
 declare global {

packages/studio/src/components/Checkbox.tsx

@@ -1,7 +1,8 @@
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo, useRef} from 'react';
 import {
 	INPUT_BACKGROUND,
 	INPUT_BORDER_COLOR_UNHOVERED,
+	LIGHT_TEXT,
 } from '../helpers/colors';
 import {Checkmark} from '../icons/Checkmark';
 
@@ -13,6 +14,13 @@ const background: React.CSSProperties = {
 	position: 'relative',
 };
 
+const bullet: React.CSSProperties = {
+	width: 10,
+	height: 10,
+	backgroundColor: LIGHT_TEXT,
+	borderRadius: '50%',
+};
+
 const box: React.CSSProperties = {
 	display: 'flex',
 	justifyContent: 'center',
@@ -30,8 +38,10 @@ export const Checkbox: React.FC<{
 	readonly checked: boolean;
 	readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
 	readonly name: string;
+	readonly rounded?: boolean;
 	readonly disabled?: boolean;
-}> = ({checked, onChange, disabled, name}) => {
+}> = ({checked, onChange, disabled, name, rounded}) => {
+	const ref = useRef<HTMLInputElement>(null);
 	const input: React.CSSProperties = useMemo(() => {
 		return {
 			appearance: 'none',
@@ -46,17 +56,30 @@ export const Checkbox: React.FC<{
 		};
 	}, [disabled]);
 
+	useEffect(() => {
+		if (ref.current) {
+			ref.current.style.setProperty(
+				'border-radius',
+				rounded ? '50%' : '0%',
+				'important',
+			);
+		}
+	}, [rounded]);
+
 	return (
 		<div style={background}>
 			<input
+				ref={ref}
 				style={input}
 				type={'checkbox'}
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
 				name={name}
 			/>
-			<div style={box}>{checked ? <Checkmark /> : null}</div>
+			<div style={box}>
+				{checked ? rounded ? <div style={bullet} /> : <Checkmark /> : null}
+			</div>
 		</div>
 	);
 };

packages/studio/src/components/Modals.tsx

@@ -48,6 +48,7 @@ export const Modals: React.FC<{
 					inFrameMark={modalContextType.inFrameMark}
 					outFrameMark={modalContextType.outFrameMark}
 					initialLogLevel={modalContextType.initialLogLevel}
+					initialLicenseKey={modalContextType.initialLicenseKey}
 				/>
 			)}
 			{modalContextType &&