11 |
12 |
13 | Sparkles icon
14 |
15 |
16 | Upgrade to the Pro version of{" "}
17 |
22 | React Video Editor
23 | {" "}
24 | for advanced features and support!
25 |
26 |
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Video Editor (Open Source Edition)
2 |
3 | > **Important Notice:**
4 | > The active repository for this project has been moved to
5 | > 👉 **[reactvideoeditor/free-react-video-editor](https://github.com/reactvideoeditor/free-react-video-editor)** 👈
6 | > Please visit the new repository for the **latest updates**, **contributions**, and **issues**.
7 |
8 | ---
9 |
10 | A free, open-source basic video editor example that runs directly in your web browser. This project serves as a foundation for video editing capabilities and is a simplified version of the full-featured [React Video Editor](https://www.reactvideoeditor.com/).
11 |
12 | Built with:
13 | - [Next.js](https://nextjs.org/) - React framework for server-side rendering and static site generation
14 | - [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
15 | - [Remotion](https://www.remotion.dev/) - Framework for programmatically creating videos
16 | - [React](https://reactjs.org/) - JavaScript library for building user interfaces
17 |
18 | ## Demo
19 |
20 | Try out the live demo: [React Video Editor (Open Source Edition)](https://www.reactvideoeditor.com/open-source)
21 |
22 | ## About the Project
23 |
24 | This React Video Editor serves as a foundational tool for understanding and interacting with the core building blocks of Remotion. It offers a user-friendly, browser-based interface that allows users to compose videos by arranging clips and adding text overlays seamlessly. While the current version provides a smooth and interactive experience, it's designed to be a stepping stone toward building a fully-fledged video editor
25 |
26 | Key features include:
27 |
28 | - Arranging video clips on a timeline
29 | - Adding static text overlays to videos
30 | - Real-time preview of composition
31 |
32 | While this open-source version provides basic video composition functionality, it does not include advanced editing features. For a more comprehensive video editing solution, check out the [pro version](https://www.reactvideoeditor.com/) which offers additional capabilities and integration options for React applications.
33 |
34 | **Important Note:** This project uses the Remotion video player. If you intend to use this project, please be aware that you may need a Remotion license depending on your use case. Check out the [Remotion Licensing](https://www.remotion.dev/docs/licensing) page for more information and ensure you comply with their licensing terms.
35 |
36 | ## Getting Started
37 |
38 | To get started with this project, follow these steps:
39 |
40 | 1. Clone the repository to your local machine.
41 |
42 | 2. Install the dependencies:
43 |
44 | ```bash
45 | npm install
46 | ```
47 |
48 | 3. Run the development server:
49 |
50 | ```bash
51 | npm run dev
52 | ```
53 |
54 | 4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the video editor in action.
55 |
56 | You can start editing the project by modifying the files in the `app` directory. The page will auto-update as you make changes.
57 |
58 |
59 | ## License
60 |
61 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
62 |
--------------------------------------------------------------------------------
/components/react-video-editor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useRef, useCallback, useMemo, useEffect } from "react";
4 | import { Player, PlayerRef } from "@remotion/player";
5 | import { Sequence, Video, interpolate, useCurrentFrame } from "remotion";
6 | import { LetterText, Plus, Text } from "lucide-react";
7 |
8 | import { Clip, TextOverlay } from "@/types/types";
9 |
10 | /**
11 | * TimelineMarker Component
12 | * Renders a marker on the timeline to indicate the current frame position
13 | */
14 | const TimelineMarker: React.FC<{
15 | currentFrame: number;
16 | totalDuration: number;
17 | }> = React.memo(({ currentFrame, totalDuration }) => {
18 | const markerPosition = useMemo(() => {
19 | return `${(currentFrame / totalDuration) * 100}%`;
20 | }, [currentFrame, totalDuration]);
21 |
22 | return (
23 |