Merge pull request #5336 from remotion-dev/recorder-free

Author: JonnyBurger

packages/docs/components/JumpToVideoLink.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const JumpToVideoLink: React.FC<{
+	readonly children: string;
+}> = ({children}) => {
+	return (
+		<a
+			style={{cursor: 'pointer'}}
+			onClick={(e) => {
+				const parts = children.split(':');
+				const time = parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
+
+				e.preventDefault();
+				// @ts-expect-error
+				window.global_seek_to(time);
+			}}
+		>
+			{children}
+		</a>
+	);
+};

packages/docs/docs/recorder/buy.mdx

@@ -7,18 +7,22 @@ crumb: Recorder
 
 import {NewMuxVideo} from '../../src/components/MuxVideo';
 
-Here is a walkthrough of how the Remotion Recorder is used.
+Here is a walkthrough of how the Remotion Recorder is used.  
+
+:::note
+The video was recorded when the Recorder was still a paid product - it is now a free template!
+:::
 
 Timestamps:
 
-00:08 - Setup  
-01:10 - Start the Recorder  
-01:26 - Make a recording  
-04:07 - Editing the video  
-05:34 - Editing captions  
-06:02 - Multiple scenes + advanced editing  
-07:20 - Endcards and other scenes  
-07:52 - Exporting for multiple platforms
+<JumpToVideoLink>00:08</JumpToVideoLink> - Setup  
+<JumpToVideoLink>01:10</JumpToVideoLink> - Start the Recorder  
+<JumpToVideoLink>01:26</JumpToVideoLink> - Make a recording  
+<JumpToVideoLink>04:07</JumpToVideoLink> - Editing the video  
+<JumpToVideoLink>05:34</JumpToVideoLink> - Editing captions  
+<JumpToVideoLink>06:02</JumpToVideoLink> - Multiple scenes + advanced editing  
+<JumpToVideoLink>07:20</JumpToVideoLink> - Endcards and other scenes  
+<JumpToVideoLink>07:52</JumpToVideoLink> - Exporting for multiple platforms
 
 <NewMuxVideo
 	muxId="pHlwqDZFUH00Aubo9M001ty3gZ6YW8z689XTd9R479ayE"

packages/docs/docs/recorder/demo.mdx

@@ -1,6 +1,6 @@
 ---
-image: /generated/articles-docs-recorder-before-you-buy.png
-title: Before you buy
+title: Is Remotion Recorder for me?
+sidebar_label: Is it for me?
 crumb: Recorder
 ---
 

packages/docs/docs/recorder/before-you-buy.mdx renamed to packages/docs/docs/recorder/is-it-for-me.mdx

@@ -4,8 +4,8 @@ title: Our Recorder
 crumb: Recorder
 ---
 
-When you buy the Remotion Recorder, you will also get access to [`remotion-dev/our-recorder`](https://github.com/remotion-dev/our-recorder).  
+The source code of our videos is available in [`remotion-dev/our-recorder`](https://github.com/remotion-dev/our-recorder).  
 This is the instance of the Recorder that is being used to create [Jonnys](https://twitter.com/JNYBGR) and [Remotion](https://twitter.com/remotion)'s videos.
 
-This repository may have more and newer features, but it is not guaranteed to be stable.  
+This repository may have more and newer features, but it is not guaranteed to be stable.
 Use it as a reference if you wonder how we made a specific video!

packages/docs/docs/recorder/our-recorder.mdx

@@ -4,12 +4,8 @@ title: Roadmap
 crumb: Recorder
 ---
 
-Buying the Recorder includes access to all future updates.
 
 Here is a list of things that we plan to add.  
-We actively develop the Recorder because we use it for our own videos, however we do not put dates on these features.
-
-We recommend that you only buy the Recorder if you find it useful in its current state or plan to develop the missing features yourself.
 
 ## ✅ SRT export
 

packages/docs/docs/recorder/roadmap.mdx

@@ -1,27 +1,23 @@
 ---
 image: /generated/articles-docs-recorder-setup.png
 title: Setup
+sidebar_label: Get started
 crumb: Recorder
 ---
 
 # Setup
 
-First, [purchase](/docs/recorder/buy) the Recorder to [get access to the repo](https://github.com/remotion-dev/recorder).
 
 ## 1. Fork and clone
 
 [Create a fork](https://github.com/remotion-dev/recorder/fork) of the `remotion-dev/recorder` repository.  
 Clone the repository using `git clone` and `cd` into the directory.
 
-:::note
-You need to keep your fork **private** to not leak the source code of the Remotion Recorder.
-:::
-
 Then, clone your fork to get the project locally.
 
 ## 2. Install Bun
 
-The Remotion Recorder requires [Bun](https://bun.sh/), with the minimum version being 1.1.11. To install it, run
+The Remotion Recorder requires [Bun](https://bun.sh/), with the minimum version being 1.2. To install it, run
 
 ```bash
 curl -fsSL https://bun.sh/install | bash

packages/docs/docs/recorder/setup.mdx

@@ -4,9 +4,6 @@ title: Get Help
 crumb: Recorder
 ---
 
-Have an issue with the Recorder or your purchase?  
-We are here to help.
-
 ## Chat server
 
 Talk to the Remotion team and other users in the `#recorder` channel in [Discord](https://remotion.dev/discord) to discuss with others using the Recorder.
@@ -16,6 +13,3 @@ Talk to the Remotion team and other users in the `#recorder` channel in [Discord
 For bugs with the Recorder, file an issue in the [Recorder repo](https://github.com/remotion-dev/recorder/issues).
 For issues with Remotion itself, see here how to [get help](/docs/get-help).
 
-## Billing issues
-
-Write to [email protected].

packages/docs/docs/recorder/support.mdx

@@ -1317,7 +1317,6 @@ module.exports = {
 			type: 'link',
 			href: '/docs/recorder',
 			label: 'Recorder',
-			className: 'pro-item',
 		},
 	],
 	recorderSidebar: [
@@ -1326,8 +1325,7 @@ module.exports = {
 			label: 'Recorder',
 			items: [
 				'recorder/index',
-				'recorder/before-you-buy',
-				'recorder/buy',
+				'recorder/is-it-for-me',
 				'recorder/demo',
 				'recorder/setup',
 				'recorder/create',

packages/docs/sidebars.js

@@ -96,6 +96,14 @@ export const VideoPlayerWithControls = forwardRef<
 			[onError],
 		);
 
+		useEffect(() => {
+			window.global_seek_to = (time: number) => {
+				if (videoRef.current) {
+					videoRef.current.currentTime = time;
+				}
+			};
+		}, []);
+
 		const onImageLoad = useCallback(
 			(event: SizedEvent) => {
 				const [w, h] = [event.target.width, event.target.height];

packages/docs/src/components/VideoPlayerWithControls.tsx

@@ -3,6 +3,7 @@ import MDXComponents from '@theme-original/MDXComponents';
 import {ExperimentalBadge} from '../../components/Experimental';
 import {InlineStep, Step, TitleStep} from '../../components/InlineStep';
 import {Installation} from '../../components/Installation';
+import {JumpToVideoLink} from '../../components/JumpToVideoLink';
 import {YouTube} from '../../components/YouTube';
 import {Demo} from '../../components/demos';
 import {
@@ -29,4 +30,5 @@ export default {
 	YouTube,
 	Installation,
 	TitleStep,
+	JumpToVideoLink,
 };

packages/docs/src/theme/MDXComponents.js

@@ -37,8 +37,7 @@ const videoApps = [
 		title: 'Remotion Recorder',
 		description:
 			'The Remotion Recorder is a video production tool built entirely in JavaScript. Create high-quality videos that feel native on each platform while only editing them once.',
-
-		link: 'https://www.remotion.pro/recorder',
+		link: 'https://www.remotion.dev/recorder',
 		videoWidth: 1080,
 		videoHeight: 1080,
 		muxId: 'pHlwqDZFUH00Aubo9M001ty3gZ6YW8z689XTd9R479ayE',
@@ -173,7 +172,11 @@ const VideoAppsShowcase: React.FC = () => {
 	return (
 		<div ref={containerRef}>
 			<SectionTitle>Use Cases</SectionTitle>
-			<div className={'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto'}>
+			<div
+				className={
+					'grid justify-center grid-flow-col grid-rows-1 gap-2.5 justify-self-center mb-4 w-[90vw] md:w-auto'
+				}
+			>
 				{tabs.map((tab, index) => (
 					<button
 						key={tab}