4 |
8 | );
9 | };
10 |
11 | export default Smart;
12 |
--------------------------------------------------------------------------------
/src/app/edit/[...id]/page.tsx:
--------------------------------------------------------------------------------
1 | import Editor from "@/features/editor";
2 |
3 | export default async function Page({
4 | params
5 | }: {
6 | params: Promise<{ id: string[] }>;
7 | }) {
8 | const { id } = await params;
9 | const [sceneId] = id; // Get the first ID from the array
10 |
11 | return
5 | Ai things
6 |
7 |
4 |
8 | );
9 | };
10 |
11 | export default Presets;
12 |
--------------------------------------------------------------------------------
/src/utils/id.ts:
--------------------------------------------------------------------------------
1 | export function generateId(length: number): string {
2 | const chars =
3 | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
4 | let result = "";
5 | for (let i = 0; i < length; i++) {
6 | result += chars.charAt(Math.floor(Math.random() * chars.length));
7 | }
8 | return result;
9 | }
10 |
--------------------------------------------------------------------------------
/src/features/editor/interfaces/captions.ts:
--------------------------------------------------------------------------------
1 | export interface Word {
2 | end: number;
3 | start: number;
4 | word: string;
5 | }
6 | export interface CaptionsSegment {
7 | start: number;
8 | end: number;
9 | text: string;
10 | words: Word[];
11 | }
12 | export interface CaptionsData {
13 | segments: CaptionsSegment[];
14 | }
15 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/items/helper.ts:
--------------------------------------------------------------------------------
1 | import { Helper as HelperBase, HelperProps } from "@designcombo/timeline";
2 |
3 | class Helper extends HelperBase {
4 | static type = "Helper";
5 |
6 | constructor(props: HelperProps) {
7 | props.activeGuideFill = "#ffffff";
8 | super(props);
9 | }
10 | }
11 |
12 | export default Helper;
13 |
--------------------------------------------------------------------------------
/src/store/use-scene-store.ts:
--------------------------------------------------------------------------------
1 | import { IDesign } from "@designcombo/types";
2 | import { create } from "zustand";
3 |
4 | interface ISceneStore {
5 | scene: IDesign | null;
6 | setScene: (scene: IDesign) => void;
7 | }
8 |
9 | export const useSceneStore = create
5 | Presets
6 |
7 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | export interface Upload {
2 | id: string;
3 | fileName: string;
4 | filePath: string;
5 | fileSize: number;
6 | contentType: string;
7 | metadata: any | null;
8 | folder: string | null;
9 | type: "VIDEO" | "IMAGE" | "AUDIO" | "DOCUMENT" | "OTHER";
10 | method: "USER" | "API" | "SYSTEM" | "OTHER";
11 | origin: "USER_CREATED" | "AI_GENERATED" | "UNKNOWN";
12 | status: "PENDING" | "COMPLETED" | "FAILED";
13 | userId: string;
14 | createdAt: Date;
15 | updatedAt: Date;
16 | isPreview: boolean;
17 | }
18 |
--------------------------------------------------------------------------------
/src/features/editor/constants/font.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_FONT = {
2 | id: "font_UwdNKSyVq2iiMiuHSRRsUIOu",
3 | family: "Roboto",
4 | fullName: "Roboto Bold",
5 | postScriptName: "Roboto-Bold",
6 | preview: "https://ik.imagekit.io/lh/fonts/v2/5zQgS86djScKA0ri67BBCqW7.png",
7 | style: "Roboto-Bold",
8 | url: "https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf",
9 | category: "sans-serif",
10 | createdAt: "2023-06-20T04:42:55.909Z",
11 | updatedAt: "2023-06-20T04:42:55.909Z",
12 | userId: null
13 | };
14 |
--------------------------------------------------------------------------------
/src/features/editor/player/items/hill-audio-bars.tsx:
--------------------------------------------------------------------------------
1 | import { IHillAudioBars } from "@designcombo/types";
2 | import { BaseSequence, SequenceItemOptions } from "../base-sequence";
3 | import { HillBars } from "./audio-bars/hill-audio-bars";
4 |
5 | export default function HillAudioBars({
6 | item,
7 | options
8 | }: {
9 | item: IHillAudioBars;
10 | options: SequenceItemOptions;
11 | }) {
12 | const children = (
13 | <>
14 | {message}
14 |
11 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/api/transcribe/[id]/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from "next/server";
2 |
3 | export async function GET(
4 | request: Request,
5 | { params }: { params: Promise<{ id: string }> }
6 | ) {
7 | try {
8 | const { id } = await params;
9 |
10 | if (!id) {
11 | return NextResponse.json(
12 | { message: "id parameter is required" },
13 | { status: 400 }
14 | );
15 | }
16 |
17 | const response = await fetch(`https://api.combo.sh/v1/transcribe/${id}`, {
18 | headers: {
19 | Authorization: "Bearer cb_bYQbTtE7Yb7R" // JWT Token from environment
20 | }
21 | });
22 |
23 | const statusData = await response.json();
24 | if (!response.ok) {
25 | const error = new Error(
26 | statusData?.message || "Failed status transcribe"
27 | );
28 | (error as any).status = response.status;
29 | throw error;
30 | }
31 |
32 | return NextResponse.json(statusData, { status: 200 });
33 | } catch (error: any) {
34 | console.error(error);
35 | return NextResponse.json(
36 | { message: "Internal server error" },
37 | { status: 500 }
38 | );
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-out/great-thinkers-out.tsx:
--------------------------------------------------------------------------------
1 | import { spring } from "remotion";
2 |
3 | const GreatThinkersAnimationOut = ({
4 | char,
5 | index,
6 | frame,
7 | fps,
8 | textLength,
9 | animationTextOutFrames,
10 | durationInFrames
11 | }: {
12 | char: string;
13 | index: number;
14 | frame: number;
15 | fps: number;
16 | textLength: number;
17 | animationTextOutFrames: number;
18 | durationInFrames: number;
19 | }) => {
20 | const exitStart = durationInFrames - animationTextOutFrames;
21 | const delayPerChar = animationTextOutFrames / textLength;
22 | const charExitStart = exitStart + index * delayPerChar;
23 | const progress = frame - charExitStart;
24 |
25 | const opacity = spring({
26 | frame: progress,
27 | fps,
28 | from: 1,
29 | to: 0,
30 | config: { stiffness: 60, damping: 10 }
31 | });
32 |
33 | return (
34 |
41 | {char === " " ? " " : char}
42 |
43 | );
44 | };
45 |
46 | export default GreatThinkersAnimationOut;
47 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-loop/glitch.tsx:
--------------------------------------------------------------------------------
1 | const GlitchText = ({ text, frame }: { text: string; frame: number }) => {
2 | const glitchIntensity = Math.sin(frame / 10) * 10;
3 | const rgbOffset = Math.sin(frame / 5) * 10;
4 |
5 | return (
6 |
13 |
12 | Lock Ratio
13 |
14 |
15 |
23 |
24 | Yes
25 |
26 |
27 | No
28 |
29 |
30 |
31 |
21 | {text}
22 |
23 |
31 | {text}
32 |
33 |
34 | {text}
35 |
36 |
37 | );
38 | };
39 |
40 | export default GlitchText;
41 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
3 | import { Check } from "lucide-react";
4 | import { cn } from "@/lib/utils";
5 |
6 | const Checkbox = React.forwardRef<
7 | React.ElementRef
30 |
38 | );
39 | };
40 |
41 | export default FontChange;
42 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-out/domino-dreams-out.tsx:
--------------------------------------------------------------------------------
1 | import { spring } from "remotion";
2 |
3 | const DominoDreamsAnimationOut = ({
4 | char,
5 | index,
6 | frame,
7 | fps,
8 | textLength,
9 | animationTextOutFrames,
10 | durationInFrames
11 | }: {
12 | char: string;
13 | index: number;
14 | frame: number;
15 | fps: number;
16 | textLength: number;
17 | animationTextOutFrames: number;
18 | durationInFrames: number;
19 | }) => {
20 | const exitDuration = animationTextOutFrames;
21 | const delayPerChar = exitDuration / textLength;
22 | const exitStart = durationInFrames - animationTextOutFrames;
23 | const charExitStart = exitStart + index * delayPerChar;
24 | const progress = frame - charExitStart;
25 |
26 | const rotateY = spring({
27 | frame: progress,
28 | fps,
29 | from: 0,
30 | to: 90,
31 | config: { mass: 1, damping: 12 }
32 | });
33 |
34 | return (
35 |
42 | {char === " " ? " " : char}
43 |
44 | );
45 | };
46 |
47 | export default DominoDreamsAnimationOut;
48 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/floating-controls/floating-control.tsx:
--------------------------------------------------------------------------------
1 | import useLayoutStore from "../../store/use-layout-store";
2 | import AnimationCaption from "./animation-caption";
3 | import AnimationPicker from "./animation-picker";
4 | import CaptionPresetPicker from "./caption-preset-picker";
5 | import FontFamilyPicker from "./font-family-picker";
6 | import TextPresetPicker from "./text-preset-picker";
7 |
8 | export default function FloatingControl() {
9 | const { floatingControl, trackItem } = useLayoutStore();
10 |
11 | if (!trackItem) return null;
12 |
13 | if (floatingControl === "font-family-picker") {
14 | return
35 | {text}
36 |
37 |
25 |
46 | );
47 | };
48 |
49 | export default Rotate3d;
50 |
--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SwitchPrimitive from "@radix-ui/react-switch";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | function Switch({
9 | className,
10 | ...props
11 | }: React.ComponentProps
32 | {text}
33 |
34 |
43 | {text}
44 |
45 |
12 |
13 |
14 |
32 | );
33 | };
34 |
35 | export default AnimationCaption;
36 |
--------------------------------------------------------------------------------
/src/features/editor/player/items/audio-bars/radial-audio-bars.tsx:
--------------------------------------------------------------------------------
1 | import { Audio } from "remotion";
2 | import { RadialBarsVisualization } from "./radial-bars-visualization";
3 | import { IRadialAudioBars } from "@designcombo/types";
4 | import { SequenceItemOptions } from "../../base-sequence";
5 | import { audioDataManager } from "../../lib/audio-data";
6 |
7 | export const RadialBars = ({
8 | item,
9 | options
10 | }: {
11 | item: IRadialAudioBars;
12 | options: SequenceItemOptions;
13 | }) => {
14 | const { fps, frame } = options;
15 | const { details } = item;
16 | const playbackRate = item.playbackRate || 1;
17 |
18 | audioDataManager.setAudioDataManager(fps);
19 |
20 | const nSamples = 512;
21 | const visualizationValues = audioDataManager.getAudioDataForFrame(frame || 0);
22 |
23 | const frequencyData = visualizationValues.slice(0, 0.7 * nSamples);
24 | return (
25 | <>
26 |
15 |
31 |
16 | Animation
17 |
18 |
19 |
29 |
30 |
35 | {Array.from({ length: layerCount }).map((_, i) => {
36 | const dx = i * 4;
37 | const dy = -i * 2;
38 | const opacity = 1 / (layerCount - i);
39 |
40 | return (
41 |
59 | );
60 | };
61 |
62 | export default Vintage;
63 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/common/playback-rate.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Label } from "@/components/ui/label";
3 | import { dispatch } from "@designcombo/events";
4 | import { EDIT_OBJECT } from "@designcombo/state";
5 | import { ITrackItem } from "@designcombo/types";
6 |
7 | export default function PlaybackRate({ trackItem }: { trackItem: ITrackItem }) {
8 | const handleChangePlaybackRate = (value: number) => {
9 | dispatch(EDIT_OBJECT, {
10 | payload: {
11 | [trackItem.id]: {
12 | playbackRate: value
13 | }
14 | }
15 | });
16 | };
17 | return (
18 |
54 | {text}
55 |
56 | );
57 | })}
58 |
19 |
20 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-in/type-writer-in.tsx:
--------------------------------------------------------------------------------
1 | import { ITextDetails } from "@designcombo/types";
2 | import { useMemo } from "react";
3 | import { interpolate } from "remotion";
4 |
5 | export default function TypeWriterIn({
6 | frame,
7 | durationInFrames,
8 | text,
9 | style
10 | }: {
11 | frame: number;
12 | durationInFrames: number;
13 | text: string;
14 | style: ITextDetails;
15 | }) {
16 | const visibleCharacters = Math.floor(
17 | interpolate(frame, [0, durationInFrames], [0, text.length], {
18 | extrapolateRight: "clamp"
19 | })
20 | );
21 |
22 | const visibleText = useMemo(() => {
23 | let count = 0;
24 | return text
25 | .split(" ")
26 | .map((word) => {
27 | if (count + word.length <= visibleCharacters) {
28 | count += word.length + 1;
29 | return word;
30 | }
31 | if (count < visibleCharacters) {
32 | const partialWord = word.slice(0, visibleCharacters - count);
33 | count = visibleCharacters;
34 | return partialWord;
35 | }
36 | return "";
37 | })
38 | .join(" ");
39 | }, [visibleCharacters]);
40 |
41 | return (
42 |
21 |
29 |
37 |
45 |
53 |
54 |
47 |
52 | {visibleText}
53 |
54 |
60 | |
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/items/hill-audio-bars.ts:
--------------------------------------------------------------------------------
1 | import { Resizable, ResizableProps } from "@designcombo/timeline";
2 |
3 | interface HillAudioBarsProps extends ResizableProps {
4 | src: string;
5 | }
6 |
7 | class HillAudioBars extends Resizable {
8 | static type = "HillAudioBars";
9 | declare src: string;
10 | public backgroundColorDiv: string = "#808080";
11 |
12 | public hasSrc = true;
13 | constructor(props: HillAudioBarsProps) {
14 | super(props);
15 | this.id = props.id;
16 | this.display = props.display;
17 | this.tScale = props.tScale;
18 | }
19 |
20 | public _render(ctx: CanvasRenderingContext2D) {
21 | super._render(ctx);
22 | this.updateSelected(ctx);
23 | }
24 |
25 | public updateSelected(ctx: CanvasRenderingContext2D) {
26 | const borderColor = this.isSelected
27 | ? "rgba(255, 255, 255,1.0)"
28 | : "rgba(255, 255, 255,0.1)";
29 | const borderWidth = 2;
30 | const innerRadius = 4;
31 |
32 | ctx.save();
33 | ctx.fillStyle = borderColor;
34 |
35 | // Create a path for the outer rectangle (no radius)
36 | ctx.beginPath();
37 | ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
38 |
39 | // Create a path for the inner rectangle with rounded corners (the hole)
40 | ctx.roundRect(
41 | -this.width / 2 + borderWidth,
42 | -this.height / 2 + borderWidth,
43 | this.width - borderWidth * 2,
44 | this.height - borderWidth * 2,
45 | innerRadius
46 | );
47 |
48 | // Use even-odd fill rule to create the border effect
49 | ctx.fill("evenodd");
50 | ctx.restore();
51 | }
52 | }
53 |
54 | export default HillAudioBars;
55 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/items/wave-audio-bars.ts:
--------------------------------------------------------------------------------
1 | import { Resizable, ResizableProps } from "@designcombo/timeline";
2 |
3 | interface WaveAudioBarsProps extends ResizableProps {
4 | src: string;
5 | }
6 |
7 | class WaveAudioBars extends Resizable {
8 | static type = "WaveAudioBars";
9 | declare src: string;
10 | public backgroundColorDiv: string = "#808080";
11 |
12 | public hasSrc = true;
13 | constructor(props: WaveAudioBarsProps) {
14 | super(props);
15 | this.id = props.id;
16 | this.display = props.display;
17 | this.tScale = props.tScale;
18 | }
19 |
20 | public _render(ctx: CanvasRenderingContext2D) {
21 | super._render(ctx);
22 | this.updateSelected(ctx);
23 | }
24 |
25 | public updateSelected(ctx: CanvasRenderingContext2D) {
26 | const borderColor = this.isSelected
27 | ? "rgba(255, 255, 255,1.0)"
28 | : "rgba(255, 255, 255,0.1)";
29 | const borderWidth = 2;
30 | const innerRadius = 4;
31 |
32 | ctx.save();
33 | ctx.fillStyle = borderColor;
34 |
35 | // Create a path for the outer rectangle (no radius)
36 | ctx.beginPath();
37 | ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
38 |
39 | // Create a path for the inner rectangle with rounded corners (the hole)
40 | ctx.roundRect(
41 | -this.width / 2 + borderWidth,
42 | -this.height / 2 + borderWidth,
43 | this.width - borderWidth * 2,
44 | this.height - borderWidth * 2,
45 | innerRadius
46 | );
47 |
48 | // Use even-odd fill rule to create the border effect
49 | ctx.fill("evenodd");
50 | ctx.restore();
51 | }
52 | }
53 |
54 | export default WaveAudioBars;
55 |
--------------------------------------------------------------------------------
/src/features/editor/menu-item/texts.tsx:
--------------------------------------------------------------------------------
1 | import { Button, buttonVariants } from "@/components/ui/button";
2 | import { ADD_AUDIO, ADD_IMAGE, ADD_TEXT } from "@designcombo/state";
3 | import { dispatch } from "@designcombo/events";
4 | import { useIsDraggingOverTimeline } from "../hooks/is-dragging-over-timeline";
5 | import Draggable from "@/components/shared/draggable";
6 | import { TEXT_ADD_PAYLOAD } from "../constants/payload";
7 | import { cn } from "@/lib/utils";
8 | import { nanoid } from "nanoid";
9 |
10 | export const Texts = () => {
11 | const isDraggingOverTimeline = useIsDraggingOverTimeline();
12 |
13 | const handleAddText = () => {
14 | dispatch(ADD_TEXT, {
15 | payload: { ...TEXT_ADD_PAYLOAD, id: nanoid() },
16 | options: {}
17 | });
18 | };
19 |
20 | return (
21 |
22 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/items/lineal-audio-bars.ts:
--------------------------------------------------------------------------------
1 | import { Resizable, ResizableProps } from "@designcombo/timeline";
2 |
3 | interface LinealAudioBarsProps extends ResizableProps {
4 | src: string;
5 | }
6 |
7 | class LinealAudioBars extends Resizable {
8 | static type = "LinealAudioBars";
9 | declare src: string;
10 | public backgroundColorDiv: string = "#808080";
11 |
12 | public hasSrc = true;
13 | constructor(props: LinealAudioBarsProps) {
14 | super(props);
15 | this.id = props.id;
16 | this.display = props.display;
17 | this.tScale = props.tScale;
18 | }
19 |
20 | public _render(ctx: CanvasRenderingContext2D) {
21 | super._render(ctx);
22 | this.updateSelected(ctx);
23 | }
24 |
25 | public updateSelected(ctx: CanvasRenderingContext2D) {
26 | const borderColor = this.isSelected
27 | ? "rgba(255, 255, 255,1.0)"
28 | : "rgba(255, 255, 255,0.1)";
29 | const borderWidth = 2;
30 | const innerRadius = 4;
31 |
32 | ctx.save();
33 | ctx.fillStyle = borderColor;
34 |
35 | // Create a path for the outer rectangle (no radius)
36 | ctx.beginPath();
37 | ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
38 |
39 | // Create a path for the inner rectangle with rounded corners (the hole)
40 | ctx.roundRect(
41 | -this.width / 2 + borderWidth,
42 | -this.height / 2 + borderWidth,
43 | this.width - borderWidth * 2,
44 | this.height - borderWidth * 2,
45 | innerRadius
46 | );
47 |
48 | // Use even-odd fill rule to create the border effect
49 | ctx.fill("evenodd");
50 | ctx.restore();
51 | }
52 | }
53 |
54 | export default LinealAudioBars;
55 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/items/radial-audio-bars.ts:
--------------------------------------------------------------------------------
1 | import { Resizable, ResizableProps } from "@designcombo/timeline";
2 |
3 | interface RadialAudioBarsProps extends ResizableProps {
4 | src: string;
5 | }
6 |
7 | class RadialAudioBars extends Resizable {
8 | static type = "RadialAudioBars";
9 | declare src: string;
10 | public backgroundColorDiv: string = "#808080";
11 |
12 | public hasSrc = true;
13 | constructor(props: RadialAudioBarsProps) {
14 | super(props);
15 | this.id = props.id;
16 | this.display = props.display;
17 | this.tScale = props.tScale;
18 | }
19 |
20 | public _render(ctx: CanvasRenderingContext2D) {
21 | super._render(ctx);
22 | this.updateSelected(ctx);
23 | }
24 |
25 | public updateSelected(ctx: CanvasRenderingContext2D) {
26 | const borderColor = this.isSelected
27 | ? "rgba(255, 255, 255,1.0)"
28 | : "rgba(255, 255, 255,0.1)";
29 | const borderWidth = 2;
30 | const innerRadius = 4;
31 |
32 | ctx.save();
33 | ctx.fillStyle = borderColor;
34 |
35 | // Create a path for the outer rectangle (no radius)
36 | ctx.beginPath();
37 | ctx.rect(-this.width / 2, -this.height / 2, this.width, this.height);
38 |
39 | // Create a path for the inner rectangle with rounded corners (the hole)
40 | ctx.roundRect(
41 | -this.width / 2 + borderWidth,
42 | -this.height / 2 + borderWidth,
43 | this.width - borderWidth * 2,
44 | this.height - borderWidth * 2,
45 | innerRadius
46 | );
47 |
48 | // Use even-odd fill rule to create the border effect
49 | ctx.fill("evenodd");
50 | ctx.restore();
51 | }
52 | }
53 |
54 | export default RadialAudioBars;
55 |
--------------------------------------------------------------------------------
/src/features/editor/utils/fonts.ts:
--------------------------------------------------------------------------------
1 | import { ICompactFont, IFont } from "../interfaces/editor";
2 | import { groupBy } from "lodash";
3 |
4 | export const loadFonts = (fonts: { name: string; url: string }[]) => {
5 | const promisesList = fonts.map((font) => {
6 | return new FontFace(font.name, `url(${font.url})`)
7 | .load()
8 | .catch((err) => err);
9 | });
10 | return new Promise((resolve, reject) => {
11 | Promise.all(promisesList)
12 | .then((res) => {
13 | res.forEach((uniqueFont) => {
14 | if (uniqueFont && uniqueFont.family) {
15 | document.fonts.add(uniqueFont);
16 | resolve(true);
17 | }
18 | });
19 | })
20 | .catch((err) => reject(err));
21 | });
22 | };
23 |
24 | const findDefaultFont = (fonts: IFont[]): IFont => {
25 | const regularFont = fonts.find((font) =>
26 | font.fullName.toLowerCase().includes("regular")
27 | );
28 |
29 | return regularFont ? regularFont : fonts[0];
30 | };
31 |
32 | export const getCompactFontData = (fonts: IFont[]): ICompactFont[] => {
33 | const compactFontsMap: { [key: string]: ICompactFont } = {};
34 | // lodash groupby
35 | const fontsGroupedByFamily = groupBy(fonts, (font) => font.family);
36 |
37 | Object.keys(fontsGroupedByFamily).forEach((family) => {
38 | const fontsInFamily = fontsGroupedByFamily[family];
39 | const defaultFont = findDefaultFont(fontsInFamily);
40 | const compactFont: ICompactFont = {
41 | family: family,
42 | styles: fontsInFamily,
43 | default: defaultFont
44 | };
45 | compactFontsMap[family] = compactFont;
46 | });
47 |
48 | return Object.values(compactFontsMap);
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/ui/border-beam.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | interface BorderBeamProps {
4 | className?: string;
5 | size?: number;
6 | duration?: number;
7 | borderWidth?: number;
8 | anchor?: number;
9 | colorFrom?: string;
10 | colorTo?: string;
11 | delay?: number;
12 | }
13 |
14 | export function BorderBeam({
15 | className,
16 | size = 200,
17 | duration = 15,
18 | anchor = 90,
19 | borderWidth = 1.5,
20 | colorFrom = "#ffaa40",
21 | colorTo = "#9c40ff",
22 | delay = 0
23 | }: BorderBeamProps) {
24 | return (
25 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/src/features/editor/utils/filmstrip.ts:
--------------------------------------------------------------------------------
1 | import { FilmstripBacklogOptions } from "../timeline/types";
2 |
3 | export const calculateThumbnailSegmentLayout = (
4 | thumbnailWidth: number
5 | ): FilmstripBacklogOptions => {
6 | // Calculate the maximum number of thumbnails based on the thumbnail width
7 | let maxThumbnails = Math.floor(1200 / thumbnailWidth);
8 |
9 | // Calculate the total width required for the thumbnails
10 | let segmentSize = maxThumbnails * thumbnailWidth;
11 |
12 | return {
13 | thumbnailsPerSegment: maxThumbnails,
14 | segmentSize
15 | };
16 | };
17 |
18 | // it calculates the number of segments that are offscreen
19 | export const calculateOffscreenSegments = (
20 | offscreenWidth: number,
21 | trimFromSize: number,
22 | segmentSize: number
23 | ) => {
24 | const offscreenSegments = Math.floor(
25 | (offscreenWidth + trimFromSize) / segmentSize
26 | );
27 | return offscreenSegments;
28 | };
29 |
30 | interface Thumbnail {
31 | ts: number;
32 | url: string;
33 | }
34 |
35 | interface Result {
36 | ts: number;
37 | url: string;
38 | }
39 |
40 | export function matchTimestampsToNearestThumbnails(
41 | timestamps: number[],
42 | thumbnailsList: Thumbnail[]
43 | ): Result[] {
44 | const results: Result[] = [];
45 |
46 | timestamps.forEach((ts) => {
47 | // Find the closest thumbnail
48 | const closestThumbnail = thumbnailsList.reduce((prev, curr) => {
49 | return Math.abs(curr.ts - ts) < Math.abs(prev.ts - ts) ? curr : prev;
50 | });
51 |
52 | // Push the result into the results array
53 | results.push({
54 | ts,
55 | url: closestThumbnail.url
56 | });
57 | });
58 |
59 | return results;
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { Geist_Mono, Geist } from "next/font/google";
2 | import { Toaster } from "@/components/ui/sonner";
3 | import { baseUrl, createMetadata } from "@/utils/metadata";
4 | import {
5 | StoreInitializer,
6 | BackgroundUploadRunner
7 | } from "@/components/store-initializer";
8 | import { QueryProvider } from "@/components/query-provider";
9 | import { Analytics } from "@vercel/analytics/react";
10 | import { Outfit } from "next/font/google";
11 |
12 | import "./globals.css";
13 |
14 | const geistMono = Geist_Mono({
15 | variable: "--font-geist-mono",
16 | subsets: ["latin"]
17 | });
18 |
19 | const geist = Geist({
20 | variable: "--font-geist",
21 | subsets: ["latin"],
22 | weight: ["300", "400", "500", "600", "700"]
23 | });
24 |
25 | const outfit = Outfit({
26 | variable: "--font-outfit",
27 | subsets: ["latin"],
28 | weight: ["300", "400", "500", "600", "700"]
29 | });
30 |
31 | export const metadata = createMetadata({
32 | title: {
33 | template: "%s | Combo",
34 | default: "Combo"
35 | },
36 | description: "AI Video generator for the next gen web.",
37 | metadataBase: baseUrl
38 | });
39 |
40 | export default async function RootLayout({
41 | children
42 | }: Readonly<{
43 | children: React.ReactNode;
44 | }>) {
45 | return (
46 |
47 |
50 |
23 | Text
24 |
25 |
26 |
30 | Add text
31 |
32 | }
33 | shouldDisplayPreview={!isDraggingOverTimeline}
34 | >
35 |
45 |
46 |
42 | Add text
43 |
44 |
45 |
46 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-in/reality-is-broken-in.tsx:
--------------------------------------------------------------------------------
1 | import { interpolate, spring } from "remotion";
2 |
3 | const RealityIsBrokenAnimationIn = ({
4 | char,
5 | index,
6 | frame,
7 | fps,
8 | textLength,
9 | animationTextInFrames
10 | }: {
11 | char: string;
12 | index: number;
13 | frame: number;
14 | fps: number;
15 | textLength: number;
16 | animationTextInFrames: number;
17 | }) => {
18 | const totalDuration = animationTextInFrames;
19 | const delayFactor = totalDuration / textLength;
20 | const delay = index * delayFactor;
21 |
22 | const translateY = spring({
23 | frame: frame - delay,
24 | fps,
25 | from: 1.1,
26 | to: 0,
27 | config: { damping: 10 }
28 | });
29 |
30 | const translateX = spring({
31 | frame: frame - delay,
32 | fps,
33 | from: 0.55,
34 | to: 0,
35 | config: { damping: 10 }
36 | });
37 |
38 | const rotateZ = spring({
39 | frame: frame - delay,
40 | fps,
41 | from: 180,
42 | to: 0,
43 | config: { damping: 10 }
44 | });
45 |
46 | const opacity = interpolate(
47 | frame,
48 | [delay, delay + 15], // Adjust for opacity ramp-up
49 | [0, 1],
50 | {
51 | extrapolateRight: "clamp",
52 | extrapolateLeft: "clamp"
53 | }
54 | );
55 |
56 | return (
57 |
66 | {char === " " ? " " : char}
67 |
68 | );
69 | };
70 |
71 | export default RealityIsBrokenAnimationIn;
72 |
--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TogglePrimitive from "@radix-ui/react-toggle";
5 | import { cva, type VariantProps } from "class-variance-authority";
6 |
7 | import { cn } from "@/lib/utils";
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | outline:
16 | "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
17 | },
18 | size: {
19 | default: "h-9 px-2 min-w-9",
20 | sm: "h-8 px-1.5 min-w-8",
21 | lg: "h-10 px-2.5 min-w-10"
22 | }
23 | },
24 | defaultVariants: {
25 | variant: "default",
26 | size: "default"
27 | }
28 | }
29 | );
30 |
31 | function Toggle({
32 | className,
33 | variant,
34 | size,
35 | ...props
36 | }: React.ComponentProps
47 |
50 |
53 |
54 |
2 |
3 | 
4 |
5 |
React Video Editor
7 | 8 |
9 |
10 | Video Editor application using React and TypeScript.
11 |
12 |
19 |
20 |
21 | [](https://github.com/designcombo/react-video-editor)
22 |
23 | ## ✨ Features
24 |
25 | - 🎬 Timeline Editing: Arrange and trim media on a visual timeline.
26 | - 🌟 Effects and Transitions: Apply visual effects, filters, and transitions.
27 | - 🔀 Multi-track Support: Edit multiple video and audio tracks simultaneously.
28 | - 📤 Export Options: Save videos in various resolutions and formats.
29 | - 👀 Real-time Preview: See immediate previews of edits.
30 |
31 | ## 🚀 See It in Action
32 |
33 | Check out the deployed version here: [React Video Editor Live Demo](https://video.designcombo.dev/)
34 |
35 | ## ⌨️ Development
36 |
37 | ### Environment Variables
38 |
39 | Create a `.env` file in the project root and add the following:
40 |
41 | ```env
42 | PEXELS_API_KEY=""
43 | ```
44 |
45 | Clone locally:
46 |
47 | ```bash
48 | git clone git@github.com:designcombo/react-video-editor.git
49 | cd react-video-editor
50 | pnpm install
51 | pnpm dev
52 | ```
53 |
54 | Open your browser and visit http://localhost:3000 , see more at [Development](https://github.com/designcombo/react-video-editor).
55 |
56 | ## 📝 License
57 |
58 | Copyright © 2025 [DesignCombo](https://designcombo.dev/).
59 |
--------------------------------------------------------------------------------
/src/features/editor/player/items/progress-bar.tsx:
--------------------------------------------------------------------------------
1 | import { IProgressBar } from "@designcombo/types";
2 | import { calculateFrames } from "../../utils/frames";
3 | import { BaseSequence, SequenceItemOptions } from "../base-sequence";
4 |
5 | export default function ProgressBar({
6 | item,
7 | options
8 | }: {
9 | item: IProgressBar;
10 | options: SequenceItemOptions;
11 | }) {
12 | const { fps, frame } = options;
13 | const { details } = item;
14 | const playbackRate = item.playbackRate || 1;
15 | const { from, durationInFrames } = calculateFrames(
16 | {
17 | from: item.display.from / playbackRate,
18 | to: item.display.to / playbackRate
19 | },
20 | fps
21 | );
22 | let progress: number;
23 | if (details.inverted) {
24 | const relativeFrame = Math.max((frame || 0) - from, 0);
25 | progress = 100 - Math.min((relativeFrame / durationInFrames) * 100, 100);
26 | } else {
27 | const relativeFrame = Math.max((frame || 0) - from, 0);
28 | progress = Math.min((relativeFrame / durationInFrames) * 100, 100);
29 | }
30 |
31 | const children = (
32 | <>
33 |
44 |
53 |
54 | );
55 |
56 | return BaseSequence({ item, options, children });
57 | }
58 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-out/reality-is-broken-out.tsx:
--------------------------------------------------------------------------------
1 | import { interpolate, spring } from "remotion";
2 |
3 | const RealityIsBrokenAnimationOut = ({
4 | char,
5 | index,
6 | frame,
7 | fps,
8 | textLength,
9 | animationTextOutFrames,
10 | durationInFrames
11 | }: {
12 | char: string;
13 | index: number;
14 | frame: number;
15 | fps: number;
16 | textLength: number;
17 | animationTextOutFrames: number;
18 | durationInFrames: number;
19 | }) => {
20 | const exitStart = durationInFrames - animationTextOutFrames;
21 | const delayPerChar = animationTextOutFrames / textLength;
22 | const charExitStart = exitStart + index * delayPerChar;
23 | const progress = frame - charExitStart;
24 |
25 | const translateY = spring({
26 | frame: progress,
27 | fps,
28 | from: 0,
29 | to: 1,
30 | config: { mass: 1, damping: 10 }
31 | });
32 |
33 | const translateX = spring({
34 | frame: progress,
35 | fps,
36 | from: 0,
37 | to: 0.55,
38 | config: { mass: 1, damping: 10 }
39 | });
40 |
41 | const rotateZ = spring({
42 | frame: progress,
43 | fps,
44 | from: 0,
45 | to: 180,
46 | config: { mass: 1, damping: 10 }
47 | });
48 |
49 | const opacity = interpolate(progress, [0, delayPerChar], [1, 0], {
50 | extrapolateLeft: "clamp",
51 | extrapolateRight: "clamp"
52 | });
53 |
54 | return (
55 |
64 | {char === " " ? "\u00A0" : char}
65 |
66 | );
67 | };
68 |
69 | export default RealityIsBrokenAnimationOut;
70 |
--------------------------------------------------------------------------------
/src/features/editor/player/items/illustration.tsx:
--------------------------------------------------------------------------------
1 | import { IIllustration } from "@designcombo/types";
2 | import { BaseSequence, SequenceItemOptions } from "../base-sequence";
3 | import { BoxAnim, ContentAnim, MaskAnim } from "@designcombo/animations";
4 | import { calculateContainerStyles } from "../styles";
5 | import { getAnimations } from "../../utils/get-animations";
6 | import { calculateFrames } from "../../utils/frames";
7 |
8 | export const Illustration = ({
9 | item,
10 | options
11 | }: {
12 | item: IIllustration;
13 | options: SequenceItemOptions;
14 | }) => {
15 | const { fps, frame } = options;
16 | const { details, animations } = item;
17 | const { animationIn, animationOut, animationTimed } = getAnimations(
18 | animations!,
19 | item,
20 | frame,
21 | fps
22 | );
23 | const { durationInFrames } = calculateFrames(item.display, fps);
24 | const currentFrame = (frame || 0) - (item.display.from * fps) / 1000;
25 | const children = (
26 |
63 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/src/features/editor/player/animated/text-animated-types/animations-out/type-writer-out.tsx:
--------------------------------------------------------------------------------
1 | import { ITextDetails } from "@designcombo/types";
2 | import { useMemo } from "react";
3 | import { interpolate } from "remotion";
4 |
5 | const TypeWriterOut = ({
6 | animationDuration,
7 | text,
8 | details,
9 | frame,
10 | durationInFrames
11 | }: {
12 | animationDuration: number;
13 | text: string;
14 | details: ITextDetails;
15 | frame: number;
16 | durationInFrames: number;
17 | }) => {
18 | const visibleCharacters = Math.floor(
19 | interpolate(
20 | frame,
21 | [durationInFrames - animationDuration, durationInFrames],
22 | [text.length, 0],
23 | { extrapolateRight: "clamp" }
24 | )
25 | );
26 |
27 | const visibleText = useMemo(() => {
28 | let count = 0;
29 | return text
30 | .split(" ")
31 | .map((word) => {
32 | if (count + word.length <= visibleCharacters) {
33 | count += word.length + 1; // Contamos el espacio
34 | return word;
35 | }
36 | if (count < visibleCharacters) {
37 | const partialWord = word.slice(0, visibleCharacters - count);
38 | count = visibleCharacters;
39 | return partialWord;
40 | }
41 | return "";
42 | })
43 | .join(" ");
44 | }, [visibleCharacters]);
45 |
46 | return (
47 |
52 |
57 | {visibleText}
58 |
59 |
65 | |
66 |
67 |
68 | );
69 | };
70 |
71 | export default TypeWriterOut;
72 |
--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | function ScrollArea({
9 | className,
10 | children,
11 | ...props
12 | }: React.ComponentProps
23 |
60 | );
61 | };
62 |
63 | export default Volume;
64 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/common/radius.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 |
3 | import { Slider } from "@/components/ui/slider";
4 | import { useEffect, useState } from "react";
5 |
6 | const Rounded = ({
7 | value,
8 | onChange
9 | }: {
10 | value: number;
11 | onChange: (v: number) => void;
12 | }) => {
13 | // Create local state to manage opacity
14 | const [localValue, setLocalValue] = useState(value);
15 |
16 | // Update local state when prop value changes
17 | useEffect(() => {
18 | setLocalValue(value);
19 | }, [value]);
20 |
21 | return (
22 |
24 | Volume
25 |
26 |
33 | {
37 | const newValue = Number(e.target.value);
38 | if (newValue >= 0 && newValue <= 100) {
39 | setLocalValue(newValue); // Update local state
40 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
41 | }
42 | }}
43 | value={localValue} // Use local state for input value
44 | />
45 | {
49 | setLocalValue(e[0]); // Update local state
50 | }}
51 | onValueCommit={() => {
52 | onChange(localValue); // Propagate value to parent when user commits change
53 | }}
54 | max={100}
55 | step={1}
56 | aria-label="Temperature"
57 | />
58 |
59 |
23 |
61 | );
62 | };
63 |
64 | export default Rounded;
65 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/common/blur.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Slider } from "@/components/ui/slider";
3 | import { useState, useEffect } from "react";
4 |
5 | const Blur = ({
6 | value,
7 | onChange
8 | }: {
9 | value: number;
10 | onChange: (v: number) => void;
11 | }) => {
12 | // Create local state to manage opacity
13 | const [localValue, setLocalValue] = useState(value);
14 |
15 | // Update local state when prop value changes
16 | useEffect(() => {
17 | setLocalValue(value);
18 | }, [value]);
19 |
20 | return (
21 |
24 | Round
25 |
26 |
33 | {
37 | const newValue = Number(e.target.value);
38 | if (newValue >= 0 && newValue <= 100) {
39 | setLocalValue(newValue); // Update local state
40 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
41 | }
42 | }}
43 | value={localValue} // Use local state for input value
44 | />
45 | {
49 | setLocalValue(e[0]); // Update local state
50 | }}
51 | onValueCommit={() => {
52 | onChange(localValue); // Propagate value to parent when user commits change
53 | }}
54 | min={0}
55 | max={50}
56 | step={1}
57 | aria-label="rounded"
58 | />
59 |
60 |
22 |
61 | );
62 | };
63 |
64 | export default Blur;
65 |
--------------------------------------------------------------------------------
/src/features/editor/player/sequence-item.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | IAudio,
4 | ICaption,
5 | IHillAudioBars,
6 | IIllustration,
7 | IImage,
8 | ITrackItem,
9 | ILinealAudioBars,
10 | IProgressBar,
11 | IProgressFrame,
12 | IRadialAudioBars,
13 | IShape,
14 | IText,
15 | IVideo,
16 | IWaveAudioBars
17 | } from "@designcombo/types";
18 | import {
19 | Audio,
20 | Caption,
21 | HillAudioBars,
22 | Illustration,
23 | Image,
24 | LinealAudioBars,
25 | ProgressBar,
26 | ProgressFrame,
27 | RadialAudioBars,
28 | Shape,
29 | Text,
30 | Video,
31 | WaveAudioBars
32 | } from "./items";
33 | import { SequenceItemOptions } from "./base-sequence";
34 |
35 | export const SequenceItem: Record<
36 | string,
37 | (item: ITrackItem, options: SequenceItemOptions) => React.JSX.Element
38 | > = {
39 | text: (item, options) => Text({ item: item as IText, options }),
40 | caption: (item, options) => Caption({ item: item as ICaption, options }),
41 | shape: (item, options) => Shape({ item: item as IShape, options }),
42 | video: (item, options) => Video({ item: item as IVideo, options }),
43 | audio: (item, options) => Audio({ item: item as IAudio, options }),
44 | image: (item, options) => Image({ item: item as IImage, options }),
45 | illustration: (item, options) =>
46 | Illustration({ item: item as IIllustration, options }),
47 | progressBar: (item, options) =>
48 | ProgressBar({ item: item as IProgressBar, options }),
49 | linealAudioBars: (item, options) =>
50 | LinealAudioBars({ item: item as ILinealAudioBars, options }),
51 | waveAudioBars: (item, options) =>
52 | WaveAudioBars({ item: item as IWaveAudioBars, options }),
53 | hillAudioBars: (item, options) =>
54 | HillAudioBars({ item: item as IHillAudioBars, options }),
55 | progressFrame: (item, options) =>
56 | ProgressFrame({ item: item as IProgressFrame, options }),
57 | radialAudioBars: (item, options) =>
58 | RadialAudioBars({ item: item as IRadialAudioBars, options })
59 | };
60 |
--------------------------------------------------------------------------------
/src/components/color-picker/constants.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_COLORS = [
2 | "#FF6900",
3 | "#FCB900",
4 | "#7BDCB5",
5 | "#00D084",
6 | "#8ED1FC",
7 | "#0693E3",
8 | "#ABB8C3",
9 | "#607d8b",
10 | "#EB144C",
11 | "#F78DA7",
12 | "#ba68c8",
13 | "#9900EF",
14 | "linear-gradient(0deg, rgb(255, 177, 153) 0%, rgb(255, 8, 68) 100%)",
15 | "linear-gradient(270deg, rgb(251, 171, 126) 8.00%, rgb(247, 206, 104) 92.00%)",
16 | "linear-gradient(315deg, rgb(150, 230, 161) 8.00%, rgb(212, 252, 121) 92.00%)",
17 | "linear-gradient(to left, rgb(249, 240, 71) 0%, rgb(15, 216, 80) 100%)",
18 | "linear-gradient(315deg, rgb(194, 233, 251) 8.00%, rgb(161, 196, 253) 92.00%)",
19 | "linear-gradient(0deg, rgb(0, 198, 251) 0%, rgb(0, 91, 234) 100%)",
20 | "linear-gradient(0deg, rgb(167, 166, 203) 0%, rgb(137, 137, 186) 51.00%, rgb(137, 137, 186) 100%)",
21 | "linear-gradient(0deg, rgb(80, 82, 133) 0%, rgb(88, 94, 146) 15.0%, rgb(101, 104, 159) 28.00%, rgb(116, 116, 176) 43.00%, rgb(126, 126, 187) 57.00%, rgb(131, 137, 199) 71.00%, rgb(151, 149, 212) 82.00%, rgb(162, 161, 220) 92.00%, rgb(181, 174, 228) 100%)",
22 | "linear-gradient(270deg, rgb(255, 126, 179) 0%, rgb(255, 117, 140) 100%)",
23 | "linear-gradient(90deg, rgb(120, 115, 245) 0%, rgb(236, 119, 171) 100%)",
24 | "linear-gradient(45deg, #2e266f 0.00%, #9664dd38 100.00%)",
25 | "radial-gradient(circle at center, yellow 0%, #009966 50%, purple 100%)"
26 | ];
27 |
28 | export const RADIALS_POS = [
29 | { pos: "tl", css: "circle at left top", active: false },
30 | { pos: "tm", css: "circle at center top", active: false },
31 | { pos: "tr", css: "circle at right top", active: false },
32 |
33 | { pos: "l", css: "circle at left", active: false },
34 | { pos: "m", css: "circle at center", active: true },
35 | { pos: "r", css: "circle at right", active: false },
36 |
37 | { pos: "bl", css: "circle at left bottom", active: false },
38 | { pos: "bm", css: "circle at center bottom", active: false },
39 | { pos: "br", css: "circle at right bottom", active: false }
40 | ];
41 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/common/opacity.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Slider } from "@/components/ui/slider";
3 | import { useState, useEffect } from "react";
4 |
5 | const Opacity = ({
6 | value,
7 | onChange
8 | }: {
9 | value: number;
10 | onChange: (v: number) => void;
11 | }) => {
12 | // Create local state to manage opacity
13 | const [localValue, setLocalValue] = useState(value);
14 |
15 | // Update local state when prop value changes
16 | useEffect(() => {
17 | setLocalValue(value);
18 | }, [value]);
19 |
20 | return (
21 |
23 | Blur
24 |
25 |
32 | {
37 | const newValue = Number(e.target.value);
38 | if (newValue >= 0 && newValue <= 100) {
39 | setLocalValue(newValue); // Update local state
40 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
41 | }
42 | }}
43 | value={localValue} // Use local state for input value
44 | />
45 | {
49 | setLocalValue(e[0]); // Update local state
50 | }}
51 | onValueCommit={() => {
52 | onChange(localValue); // Propagate value to parent when user commits change
53 | }}
54 | min={0}
55 | max={100}
56 | step={1}
57 | aria-label="Blur"
58 | />
59 |
60 |
22 |
61 | );
62 | };
63 |
64 | export default Opacity;
65 |
--------------------------------------------------------------------------------
/src/features/editor/timeline/types.ts:
--------------------------------------------------------------------------------
1 | export interface Filmstrip {
2 | segmentIndex?: number;
3 | offset: number;
4 | thumbnailsCount: number;
5 | startTime: number;
6 | widthOnScreen: number;
7 | }
8 |
9 | export interface FilmstripBacklogOptions {
10 | thumbnailsPerSegment: number; // Number of thumbnails preloaded for smooth scrolling
11 | segmentSize: number; // Total width required to display thumbnails side by side
12 | }
13 |
14 | export const calculateThumbnailSegmentLayout = (
15 | thumbnailHeight: number
16 | ): FilmstripBacklogOptions => {
17 | // Calculate the maximum number of thumbnails based on the thumbnail width
18 | let maxThumbnails = Math.floor(1200 / thumbnailHeight);
19 |
20 | // Calculate the total width required for the thumbnails
21 | let segmentSize = maxThumbnails * thumbnailHeight;
22 |
23 | return {
24 | thumbnailsPerSegment: maxThumbnails,
25 | segmentSize
26 | };
27 | };
28 |
29 | // it calculates the number of segments that are offscreen
30 | export const calculateOffscreenSegments = (
31 | offscreenHeight: number,
32 | trimFromSize: number,
33 | segmentSize: number
34 | ) => {
35 | const offscreenSegments = Math.floor(
36 | (offscreenHeight + trimFromSize) / segmentSize
37 | );
38 | return offscreenSegments;
39 | };
40 |
41 | interface Thumbnail {
42 | ts: number;
43 | url: string;
44 | }
45 |
46 | interface Result {
47 | ts: number;
48 | url: string;
49 | }
50 |
51 | export function matchTimestampsToNearestThumbnails(
52 | timestamps: number[],
53 | thumbnailsList: Thumbnail[]
54 | ): Result[] {
55 | const results: Result[] = [];
56 |
57 | timestamps.forEach((ts) => {
58 | // Find the closest thumbnail
59 | const closestThumbnail = thumbnailsList.reduce((prev, curr) => {
60 | return Math.abs(curr.ts - ts) < Math.abs(prev.ts - ts) ? curr : prev;
61 | });
62 |
63 | // Push the result into the results array
64 | results.push({
65 | ts,
66 | url: closestThumbnail.url
67 | });
68 | });
69 |
70 | return results;
71 | }
72 |
--------------------------------------------------------------------------------
/src/features/editor/control-item/common/brightness.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Slider } from "@/components/ui/slider";
3 | import { useState, useEffect } from "react";
4 |
5 | const Brightness = ({
6 | value,
7 | onChange
8 | }: {
9 | value: number;
10 | onChange: (v: number) => void;
11 | }) => {
12 | // Create local state to manage opacity
13 | const [localValue, setLocalValue] = useState(value);
14 |
15 | // Update local state when prop value changes
16 | useEffect(() => {
17 | setLocalValue(value);
18 | }, [value]);
19 |
20 | return (
21 |
23 | Opacity
24 |
25 |
32 | {
37 | const newValue = Number(e.target.value);
38 | if (newValue >= 0 && newValue <= 100) {
39 | setLocalValue(newValue); // Update local state
40 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
41 | }
42 | }}
43 | value={localValue} // Use local state for input value
44 | />
45 | {
49 | setLocalValue(e[0]); // Update local state
50 | }}
51 | onValueCommit={() => {
52 | onChange(localValue); // Propagate value to parent when user commits change
53 | }}
54 | min={0}
55 | max={100}
56 | step={1}
57 | aria-label="Opacity"
58 | />
59 |
60 |
22 |
61 | );
62 | };
63 |
64 | export default Brightness;
65 |
--------------------------------------------------------------------------------
/src/components/color-picker/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Slot } from "@radix-ui/react-slot";
3 | import { cva, type VariantProps } from "class-variance-authority";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline"
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10"
27 | }
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default"
32 | }
33 | }
34 | );
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes
23 | Brightness
24 |
25 |
32 | {
37 | const newValue = Number(e.target.value);
38 | if (newValue >= 0 && newValue <= 100) {
39 | setLocalValue(newValue); // Update local state
40 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
41 | }
42 | }}
43 | value={localValue} // Use local state for input value
44 | />
45 | {
49 | setLocalValue(e[0]); // Update local state
50 | }}
51 | onValueCommit={() => {
52 | onChange(localValue); // Propagate value to parent when user commits change
53 | }}
54 | min={0}
55 | max={100}
56 | step={1}
57 | aria-label="Brightness"
58 | />
59 |
60 |
36 |
68 | );
69 | };
70 |
71 | export default BackgroundIn;
72 |
--------------------------------------------------------------------------------
/src/features/editor/player/items/image.tsx:
--------------------------------------------------------------------------------
1 | import { IImage } from "@designcombo/types";
2 | import { BaseSequence, SequenceItemOptions } from "../base-sequence";
3 | import { BoxAnim, ContentAnim, MaskAnim } from "@designcombo/animations";
4 | import { calculateContainerStyles, calculateMediaStyles } from "../styles";
5 | import { getAnimations } from "../../utils/get-animations";
6 | import { calculateFrames } from "../../utils/frames";
7 | import { Img } from "remotion";
8 |
9 | export default function Image({
10 | item,
11 | options
12 | }: {
13 | item: IImage;
14 | options: SequenceItemOptions;
15 | }) {
16 | const { fps, frame } = options;
17 | const { details, animations } = item;
18 | const { animationIn, animationOut, animationTimed } = getAnimations(
19 | animations!,
20 | item,
21 | frame,
22 | fps
23 | );
24 | const crop = details?.crop || {
25 | x: 0,
26 | y: 0,
27 | width: details.width,
28 | height: details.height
29 | };
30 | const { durationInFrames } = calculateFrames(item.display, fps);
31 | const currentFrame = (frame || 0) - (item.display.from * fps) / 1000;
32 |
33 | const children = (
34 |
48 |
67 |
64 | {text}
65 |
66 |
57 | {/* image layer */}
58 | 
59 |
60 |
12 |
16 |
26 |
27 | );
28 | };
29 |
30 | const TransitionsMenuItem = ({
31 | transition,
32 | shouldDisplayPreview
33 | }: {
34 | transition: Partial
13 | Transitions
14 |
15 |
17 | {TRANSITIONS.map((transition, index) => (
18 |
25 |
54 |
61 |
62 | );
63 | };
64 |
65 | export default TransitionsMenuItem;
66 |
--------------------------------------------------------------------------------
/src/features/editor/hooks/use-zoom.tsx:
--------------------------------------------------------------------------------
1 | import { ISize } from "@designcombo/types";
2 | import { useCallback, useEffect, useRef, useState } from "react";
3 |
4 | function useZoom(containerRef: React.RefObject
55 |
56 |
57 |
58 | {transition.name || transition.type}
59 |
60 |