88 |
140 | );
141 | };
142 |
143 | export default InputRgba;
144 |
--------------------------------------------------------------------------------
/src/components/color-picker/color-panel/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState, useRef, useEffect, MutableRefObject } from "react";
2 | import Board from "./board";
3 | import Ribbon from "./ribbon";
4 | import Alpha from "./alpha";
5 |
6 | import TinyColor, { ITinyColor } from "../utils/color";
7 | import { TPropsMain } from "./types";
8 |
9 | const Panel: FC
89 |
90 |
91 | Hex
92 |
104 |
105 |
106 |
108 |
109 | onChangeHex(onlyLatins(e.target.value))}
113 | onBlur={onHandleSubmit}
114 | onKeyDown={(e) => {
115 | if (e.key === "Enter") {
116 | onHandleSubmit();
117 | }
118 | }}
119 | className="pl-[70px]"
120 | />
121 |
122 | Hex
107 |
123 | onChangeAlpha(onlyDigits(e.target.value))}
127 | onBlur={onHandleSubmit}
128 | onKeyDown={(e) => {
129 | if (e.key === "Enter") {
130 | onHandleSubmit();
131 | }
132 | }}
133 | className="pl-2 "
134 | />
135 |
139 |
136 | %
137 |
138 |
59 |
87 | );
88 | };
89 |
90 | export default Panel;
91 |
--------------------------------------------------------------------------------
/src/components/color-picker/color-panel/types.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction } from "react";
2 |
3 | import { ITinyColor } from "../utils/color";
4 |
5 | export type TPropsChange = {
6 | alpha: number;
7 | hex: string;
8 | };
9 |
10 | export type TPropsComp = {
11 | rootPrefixCls?: string;
12 | color: ITinyColor;
13 | alpha?: number;
14 | colorBoardHeight?: number;
15 | onChange: (color: ITinyColor) => void;
16 | setChange: Dispatch
60 |
86 |
68 |
85 |
69 |
76 |
77 |
84 |
37 |
38 |
39 | Solid
40 | Gradient
41 |
42 |
43 |
52 |
53 |
68 |
69 |
70 | );
71 | }
72 |
73 | return (
74 | <>
75 | {solid || gradient ? (
76 | <>
77 | {solid ? (
78 |
58 |
72 | );
73 | };
74 |
75 | export default ColorPickerSolid;
76 |
--------------------------------------------------------------------------------
/src/components/color-picker/tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as TabsPrimitive from "@radix-ui/react-tabs";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const Tabs = TabsPrimitive.Root;
7 |
8 | const TabsList = React.forwardRef<
9 | React.ElementRef
50 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/horizontal-gradient.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { useId } from "react";
3 |
4 | export const HorizontalGradient = ({
5 | className,
6 | ...props
7 | }: {
8 | className: string;
9 | [x: string]: any;
10 | }) => {
11 | const id = useId();
12 | return (
13 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/src/components/password.tsx:
--------------------------------------------------------------------------------
1 | import { EyeIcon, EyeOffIcon } from "lucide-react";
2 | import React from "react";
3 | import { useState } from "react";
4 |
5 | import { Control, Path } from "react-hook-form";
6 | import { FieldValues } from "react-hook-form";
7 |
8 | export interface CommonReactHookFormProps
22 |
29 |
44 | );
45 | }
46 |
47 | export default Password;
48 |
--------------------------------------------------------------------------------
/src/components/shared/draggable.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, cloneElement, ReactElement, useRef } from "react";
2 | import { createPortal } from "react-dom";
3 |
4 | interface DraggableProps {
5 | children: ReactElement;
6 | shouldDisplayPreview?: boolean;
7 | renderCustomPreview?: ReactElement;
8 | data?: Record
30 | {!show && (
31 | setShow(true)}
33 | className="text-gray-400 cursor-pointer h-4"
34 | />
35 | )}
36 | {show && (
37 | setShow(false)}
39 | className="text-gray-400 cursor-pointer h-4"
40 | />
41 | )}
42 |
43 |
71 | {renderCustomPreview}
72 |
,
73 | document.body
74 | )
75 | : null}
76 |
77 | );
78 | };
79 |
80 | export default Draggable;
81 |
--------------------------------------------------------------------------------
/src/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useState } from "react";
2 |
3 | type Theme = "dark" | "light" | "system";
4 |
5 | type ThemeProviderProps = {
6 | children: React.ReactNode;
7 | defaultTheme?: Theme;
8 | storageKey?: string;
9 | };
10 |
11 | type ThemeProviderState = {
12 | theme: Theme;
13 | setTheme: (theme: Theme) => void;
14 | };
15 |
16 | const initialState: ThemeProviderState = {
17 | theme: "system",
18 | setTheme: () => null,
19 | };
20 |
21 | const ThemeProviderContext = createContext
42 |
100 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/src/components/ui/animated-tooltip.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import {
3 | motion,
4 | useTransform,
5 | AnimatePresence,
6 | useMotionValue,
7 | useSpring
8 | } from "framer-motion";
9 |
10 | export const AnimatedTooltip = ({
11 | items
12 | }: {
13 | items: {
14 | id: number;
15 | name: string;
16 | designation: string;
17 | image: string;
18 | }[];
19 | }) => {
20 | const [hoveredIndex, setHoveredIndex] = useState setHoveredIndex(item.id)}
45 | onMouseLeave={() => setHoveredIndex(null)}
46 | >
47 |
48 | {hoveredIndex === item.id && (
49 |
69 |
70 |
71 |
76 | )}
77 |
78 | 
86 |
87 | ))}
88 |
89 | );
90 | };
91 |
--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const Avatar = React.forwardRef<
7 | React.ElementRef
72 | {item.name}
73 |
74 | {item.designation}
75 |
37 |
39 | )}
40 |
9 | {children}
10 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/auth/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./auth";
2 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/animations.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
2 |
3 | const Animations = () => {
4 | return (
5 |
11 |
34 |
12 |
29 | 18 | Join thousands of users already 19 |
20 |25 | With lots of AI applications around, Desigcombo stands out with 26 | its state of the art Shitposting capabilities. 27 |
28 |
6 |
20 | );
21 | };
22 |
23 | export default Animations;
24 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/basic-audio.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/components/ui/scroll-area";
2 | import { IAudio, ITrackItem } from "@designcombo/types";
3 | import Volume from "./common/volume";
4 | import Speed from "./common/speed";
5 | import { useState } from "react";
6 | import { EDIT_OBJECT, dispatch } from "@designcombo/events";
7 |
8 | const BasicAudio = ({ trackItem }: { trackItem: ITrackItem & IAudio }) => {
9 | const [properties, setProperties] = useState(trackItem);
10 |
11 | const handleChangeVolume = (v: number) => {
12 | dispatch(EDIT_OBJECT, {
13 | payload: {
14 | [trackItem.id]: {
15 | details: {
16 | volume: v
17 | }
18 | }
19 | }
20 | });
21 |
22 | setProperties((prev) => {
23 | return {
24 | ...prev,
25 | details: {
26 | ...prev.details,
27 | volume: v
28 | }
29 | };
30 | });
31 | };
32 |
33 | const handleChangeSpeed = (v: number) => {
34 | dispatch(EDIT_OBJECT, {
35 | payload: {
36 | [trackItem.id]: {
37 | playbackRate: v
38 | }
39 | }
40 | });
41 |
42 | setProperties((prev) => {
43 | return {
44 | ...prev,
45 | playbackRate: v
46 | };
47 | });
48 | };
49 |
50 | return (
51 |
7 | Animations
8 |
9 |
10 |
11 |
12 | In
13 | Out
14 |
15 |
18 |
19 |
52 |
56 |
67 |
68 | );
69 | };
70 |
71 | export default BasicAudio;
72 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/components/ui/label";
2 | import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
3 | import { useState } from "react";
4 |
5 | export default function AspectRatio() {
6 | const [value, setValue] = useState("locked");
7 | const onChangeAligment = (value: string) => {
8 | setValue(value);
9 | };
10 | return (
11 |
53 | Audio
54 |
55 |
57 | handleChangeVolume(v)}
59 | value={properties.details.volume!}
60 | />
61 |
66 |
12 |
15 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/blur.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 | import { Slider } from "@/components/ui/slider";
4 | import { useState, useEffect } from "react";
5 |
6 | const Blur = ({
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 |
16 |
24 |
25 | Locked
26 |
27 |
28 | Unlocked
29 |
30 |
31 |
32 |
23 |
26 |
63 | );
64 | };
65 |
66 | export default Blur;
67 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/brightness.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 | import { Slider } from "@/components/ui/slider";
4 | import { useState, useEffect } from "react";
5 |
6 | const Brightness = ({
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 |
33 | {
37 | setLocalValue(e[0]); // Update local state
38 | }}
39 | onValueCommit={() => {
40 | onChange(localValue); // Propagate value to parent when user commits change
41 | }}
42 | min={0}
43 | max={100}
44 | step={1}
45 | aria-label="Blur"
46 | />
47 | {
53 | const newValue = Number(e.target.value);
54 | if (newValue >= 0 && newValue <= 100) {
55 | setLocalValue(newValue); // Update local state
56 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
57 | }
58 | }}
59 | value={localValue} // Use local state for input value
60 | />
61 |
62 |
23 |
26 |
63 | );
64 | };
65 |
66 | export default Brightness;
67 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/flip.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/button";
2 | import { Label } from "@/components/ui/label";
3 | import { EDIT_OBJECT, dispatch } from "@designcombo/events";
4 | import { IImage, ITrackItem, IVideo } from "@designcombo/types";
5 | import { useState } from "react";
6 |
7 | export default function Flip({
8 | trackItem
9 | }: {
10 | trackItem: ITrackItem & (IImage | IVideo);
11 | }) {
12 | const [flip, setFlip] = useState({
13 | flipX: trackItem.details.flipX,
14 | flipY: trackItem.details.flipY
15 | });
16 |
17 | const handleFlip = (value: string) => {
18 | if (value === "x") {
19 | dispatch(EDIT_OBJECT, {
20 | payload: {
21 | [trackItem.id]: {
22 | details: {
23 | flipX: !flip.flipX
24 | }
25 | }
26 | }
27 | });
28 | setFlip({ ...flip, flipX: !flip.flipX });
29 | } else if (value === "y") {
30 | dispatch(EDIT_OBJECT, {
31 | payload: {
32 | [trackItem.id]: {
33 | details: {
34 | flipY: !flip.flipY
35 | }
36 | }
37 | }
38 | });
39 | setFlip({ ...flip, flipY: !flip.flipY });
40 | }
41 | };
42 | return (
43 |
33 | {
37 | setLocalValue(e[0]); // Update local state
38 | }}
39 | onValueCommit={() => {
40 | onChange(localValue); // Propagate value to parent when user commits change
41 | }}
42 | min={0}
43 | max={100}
44 | step={1}
45 | aria-label="Brightness"
46 | />
47 | {
53 | const newValue = Number(e.target.value);
54 | if (newValue >= 0 && newValue <= 100) {
55 | setLocalValue(newValue); // Update local state
56 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
57 | }
58 | }}
59 | value={localValue} // Use local state for input value
60 | />
61 |
62 |
44 |
47 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/opacity.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 | import { Slider } from "@/components/ui/slider";
4 | import { useState, useEffect } from "react";
5 |
6 | const Opacity = ({
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 |
48 |
51 |
54 |
55 |
23 |
26 |
63 | );
64 | };
65 |
66 | export default Opacity;
67 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/outline.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 | import { useEffect, useState } from "react";
4 | import {
5 | Popover,
6 | PopoverContent,
7 | PopoverTrigger
8 | } from "@/components/ui/popover";
9 | import ColorPicker from "@/components/color-picker";
10 | function Outline({
11 | label,
12 | onChageBorderWidth,
13 | onChangeBorderColor,
14 | valueBorderWidth,
15 | valueBorderColor
16 | }: {
17 | label: string;
18 | onChageBorderWidth: (v: number) => void;
19 | onChangeBorderColor: (v: string) => void;
20 | valueBorderWidth: number;
21 | valueBorderColor: string;
22 | }) {
23 | const [localValueBorderWidth, setLocalValueBorderWidth] = useState<
24 | string | number
25 | >(valueBorderWidth);
26 | const [localValueBorderColor, setLocalValueBorderColor] =
27 | useState
33 | {
37 | setLocalValue(e[0]); // Update local state
38 | }}
39 | onValueCommit={() => {
40 | onChange(localValue); // Propagate value to parent when user commits change
41 | }}
42 | min={0}
43 | max={100}
44 | step={1}
45 | aria-label="Opacity"
46 | />
47 | {
53 | const newValue = Number(e.target.value);
54 | if (newValue >= 0 && newValue <= 100) {
55 | setLocalValue(newValue); // Update local state
56 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
57 | }
58 | }}
59 | value={localValue} // Use local state for input value
60 | />
61 |
62 |
36 |
39 |
116 | );
117 | }
118 |
119 | export default Outline;
120 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/playback-rate.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/button";
2 | import { Label } from "@/components/ui/label";
3 | import { EDIT_OBJECT, dispatch } from "@designcombo/events";
4 | import { ITrackItem } from "@designcombo/types";
5 |
6 | export default function PlaybackRate({ trackItem }: { trackItem: ITrackItem }) {
7 | const handleChangePlaybackRate = (value: number) => {
8 | dispatch(EDIT_OBJECT, {
9 | payload: {
10 | [trackItem.id]: {
11 | playbackRate: value
12 | }
13 | }
14 | });
15 | };
16 | return (
17 |
40 |
115 |
41 |
42 |
43 |
49 |
50 |
51 | {
57 | setLocalValueBorderColor(v);
58 | onChangeBorderColor(v);
59 | }}
60 | allowAddGradientStops={true}
61 | />
62 |
63 |
64 |
65 |
85 |
66 | {
70 | const newValue = e.target.value;
71 | setLocalValueBorderColor(newValue); // Update local state
72 |
73 | // Only propagate if it's not empty
74 | if (newValue !== "") {
75 | onChangeBorderColor(newValue); // Propagate the value
76 | }
77 | }}
78 | value={localValueBorderColor} // Use local state for input value
79 | />
80 |
84 |
81 | hex
82 |
83 |
86 | {
91 | const newValue = e.target.value;
92 |
93 | // Allow empty string or validate as a number
94 | if (
95 | newValue === "" ||
96 | (!isNaN(Number(newValue)) &&
97 | Number(newValue) >= 0 &&
98 | Number(newValue) <= 100)
99 | ) {
100 | setLocalValueBorderWidth(newValue); // Update local state
101 |
102 | // Only propagate if it's a valid number and not empty
103 | if (newValue !== "") {
104 | onChageBorderWidth(Number(newValue)); // Propagate as a number
105 | }
106 | }
107 | }}
108 | value={localValueBorderWidth} // Use local state for input value
109 | />
110 |
114 |
111 | thickness
112 |
113 |
18 |
21 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/radius.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | import { Slider } from "@/components/ui/slider";
5 | import { useEffect, useState } from "react";
6 |
7 | const Rounded = ({
8 | value,
9 | onChange
10 | }: {
11 | value: number;
12 | onChange: (v: number) => void;
13 | }) => {
14 | // Create local state to manage opacity
15 | const [localValue, setLocalValue] = useState(value);
16 |
17 | // Update local state when prop value changes
18 | useEffect(() => {
19 | setLocalValue(value);
20 | }, [value]);
21 |
22 | return (
23 |
22 |
30 |
38 |
46 |
54 |
55 |
24 |
27 |
63 | );
64 | };
65 |
66 | export default Rounded;
67 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/speed.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | import { Slider } from "@/components/ui/slider";
5 | import { useEffect, useState } from "react";
6 |
7 | const Speed = ({
8 | value,
9 | onChange
10 | }: {
11 | value: number;
12 | onChange: (v: number) => void;
13 | }) => {
14 | // Create local state to manage opacity
15 | const [localValue, setLocalValue] = useState(value);
16 |
17 | // Update local state when prop value changes
18 | useEffect(() => {
19 | setLocalValue(value);
20 | }, [value]);
21 |
22 | return (
23 |
34 | {
38 | setLocalValue(e[0]); // Update local state
39 | }}
40 | onValueCommit={() => {
41 | onChange(localValue); // Propagate value to parent when user commits change
42 | }}
43 | min={0}
44 | max={50}
45 | step={1}
46 | aria-label="rounded"
47 | />
48 | {
53 | const newValue = Number(e.target.value);
54 | if (newValue >= 0 && newValue <= 100) {
55 | setLocalValue(newValue); // Update local state
56 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
57 | }
58 | }}
59 | value={localValue} // Use local state for input value
60 | />
61 |
62 |
24 |
27 |
64 | );
65 | };
66 |
67 | export default Speed;
68 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/transform.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Input } from "@/components/ui/input";
3 | import { Slider } from "@/components/ui/slider";
4 | import { RotateCw } from "lucide-react";
5 | import { useState } from "react";
6 |
7 | const Transform = () => {
8 | const [_, setValue] = useState([10]);
9 |
10 | return (
11 |
34 | {
38 | setLocalValue(e[0]); // Update local state
39 | }}
40 | onValueCommit={() => {
41 | onChange(localValue); // Propagate value to parent when user commits change
42 | }}
43 | min={0}
44 | max={4}
45 | step={0.1}
46 | aria-label="Opacity"
47 | />
48 | {
54 | const newValue = Number(e.target.value);
55 | if (newValue >= 0 && newValue <= 4) {
56 | setLocalValue(newValue); // Update local state
57 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
58 | }
59 | }}
60 | value={localValue} // Use local state for input value
61 | />
62 |
63 |
12 |
99 | );
100 | };
101 |
102 | export default Transform;
103 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/common/volume.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { Label } from "@/components/ui/label";
3 |
4 | import { Slider } from "@/components/ui/slider";
5 | import { useEffect, useState } from "react";
6 |
7 | const Volume = ({
8 | value,
9 | onChange
10 | }: {
11 | value: number;
12 | onChange: (v: number) => void;
13 | }) => {
14 | // Create local state to manage opacity
15 | const [localValue, setLocalValue] = useState(value);
16 |
17 | // Update local state when prop value changes
18 | useEffect(() => {
19 | setLocalValue(value);
20 | }, [value]);
21 |
22 | return (
23 | Transform
13 |
14 |
41 |
42 | Scale
15 |
22 |
40 |
31 |
38 |
39 |
43 |
75 |
76 | Position
44 |
51 |
74 |
52 |
53 |
57 |
54 | x
55 |
56 |
58 |
59 |
63 |
64 |
60 | y
61 |
62 |
65 |
72 |
73 |
77 |
98 | Rotate
78 |
85 |
86 |
87 |
97 |
88 |
95 |
96 |
24 |
27 |
62 | );
63 | };
64 |
65 | export default Volume;
66 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/control-item.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import useLayoutStore from "@/store/use-layout-store";
3 | import {
4 | IAudio,
5 | IImage,
6 | IText,
7 | ITrackItem,
8 | ITrackItemAndDetails,
9 | IVideo
10 | } from "@designcombo/types";
11 | import { useEffect, useState } from "react";
12 | import { Button } from "@/components/ui/button";
13 | import { X } from "lucide-react";
14 | import Presets from "./presets";
15 | import Animations from "./animations";
16 | import Smart from "./smart";
17 | import BasicText from "./basic-text";
18 | import BasicImage from "./basic-image";
19 | import BasicVideo from "./basic-video";
20 | import BasicAudio from "./basic-audio";
21 | import useStore from "@/store/store";
22 |
23 | const Container = ({ children }: { children: React.ReactNode }) => {
24 | const { activeToolboxItem, setActiveToolboxItem } = useLayoutStore();
25 | const { activeIds, trackItemsMap, trackItemDetailsMap } = useStore();
26 | const [trackItem, setTrackItem] = useState
34 | {
38 | setLocalValue(e[0]); // Update local state
39 | }}
40 | onValueCommit={() => {
41 | onChange(localValue); // Propagate value to parent when user commits change
42 | }}
43 | max={100}
44 | step={1}
45 | aria-label="Temperature"
46 | />
47 | {
52 | const newValue = Number(e.target.value);
53 | if (newValue >= 0 && newValue <= 100) {
54 | setLocalValue(newValue); // Update local state
55 | onChange(newValue); // Optionally propagate immediately, or adjust as needed
56 | }
57 | }}
58 | value={localValue} // Use local state for input value
59 | />
60 |
61 |
65 |
86 | );
87 | };
88 |
89 | const ActiveControlItem = ({
90 | trackItem,
91 | activeToolboxItem
92 | }: {
93 | trackItem?: ITrackItemAndDetails;
94 | activeToolboxItem?: string;
95 | }) => {
96 | if (!trackItem || !activeToolboxItem) {
97 | return null;
98 | }
99 | return (
100 | <>
101 | {
102 | {
103 | "basic-text": (
104 |
66 |
79 | {React.cloneElement(children as React.ReactElement, {
80 | trackItem,
81 | activeToolboxItem
82 | })}
83 |
84 |
85 |
4 |
8 | );
9 | };
10 |
11 | export default Presets;
12 |
--------------------------------------------------------------------------------
/src/pages/editor/control-item/smart.tsx:
--------------------------------------------------------------------------------
1 | const Smart = () => {
2 | return (
3 |
5 | Presets
6 |
7 |
4 |
8 | );
9 | };
10 |
11 | export default Smart;
12 |
--------------------------------------------------------------------------------
/src/pages/editor/editor.tsx:
--------------------------------------------------------------------------------
1 | import Timeline from "./timeline";
2 | import useStore from "../../store/store";
3 | import Navbar from "./navbar";
4 | import MenuList from "./menu-list";
5 | import { MenuItem } from "./menu-item";
6 | import useTimelineEvents from "@/hooks/use-timeline-events";
7 | import Scene from "./scene";
8 | import StateManager from "@designcombo/state";
9 | import { ControlItem } from "./control-item";
10 | import ControlList from "./control-list";
11 |
12 | const stateManager = new StateManager();
13 |
14 | function App() {
15 | const { playerRef } = useStore();
16 |
17 | useTimelineEvents();
18 |
19 | return (
20 |
5 | Ai things
6 |
7 |
21 |
41 | );
42 | }
43 |
44 | export default App;
45 |
--------------------------------------------------------------------------------
/src/pages/editor/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from "./editor";
2 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/audios.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/components/ui/scroll-area";
2 | import { AUDIOS } from "@/data/audio";
3 | import { ADD_AUDIO, dispatch } from "@designcombo/events";
4 | import { generateId } from "@designcombo/timeline";
5 | import { Music } from "lucide-react";
6 |
7 | export const Audios = () => {
8 | const handleAddAudio = () => {
9 | dispatch(ADD_AUDIO, {
10 | payload: {
11 | id: generateId(),
12 | details: {
13 | src: "https://ik.imagekit.io/snapmotion/timer-voice.mp3"
14 | }
15 | },
16 | options: {}
17 | });
18 | };
19 |
20 | return (
21 |
31 |
37 |
38 | {playerRef &&
40 |
22 |
26 |
38 |
39 | );
40 | };
41 |
42 | const AudioItem = ({
43 | audio,
44 | handleAddAudio
45 | }: {
46 | audio: any;
47 | handleAddAudio: (src: string) => void;
48 | }) => {
49 | return (
50 |
23 | Audios
24 |
25 |
27 | {AUDIOS.map((audio, index) => {
28 | return (
29 |
37 | handleAddAudio(audio.src)}
52 | style={{
53 | display: "grid",
54 | gridTemplateColumns: "48px 1fr"
55 | }}
56 | className="flex px-2 py-1 gap-4 text-sm hover:bg-zinc-800/70 cursor-pointer"
57 | >
58 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/captions.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import captionsData from "./combo.json";
3 | import { getCaptionLines, getCaptions } from "@/utils/captions";
4 | import { ADD_CAPTION, dispatch } from "@designcombo/events";
5 | import { loadFonts } from "../utils/fonts";
6 | // interface Job {
7 | // id: string;
8 | // projectId: string;
9 | // fileName: string;
10 | // url?: string;
11 | // output?: string;
12 | // }
13 | export const Captions = () => {
14 | // const { activeIds, trackItemDetailsMap } = useStore();
15 |
16 | const generateCaptions = async () => {
17 | // https://cdn.designcombo.dev/fonts/theboldfont.ttf
18 | await loadFonts([
19 | {
20 | name: "theboldfont",
21 | url: "https://cdn.designcombo.dev/fonts/theboldfont.ttf"
22 | }
23 | ]);
24 | const captionLines = getCaptionLines(captionsData, 64, "theboldfont", 800);
25 | // console.log({ captions: captionLines });
26 | const captions = getCaptions(captionLines);
27 | // console.log({ captions: captions.slice(8, 9) });
28 | dispatch(ADD_CAPTION, {
29 | payload: captions
30 | });
31 | // console.log({ data });
32 | // const [id] = activeIds;
33 | // const trackItem = trackItemDetailsMap[id];
34 | // const src = trackItem.details.src;
35 | // console.log(trackItem);
36 | // POST https://transcribe.designcombo.dev
37 | // {
38 | // "url": "https://dev-drawify-v3.s3.eu-west-3.amazonaws.com/images/video.mp4",
39 | // "projectId": "asdasdasfdsf"
40 | // }
41 | // const reso = await axios.post(
42 | // "https://transcribe.designcombo.dev",
43 | // {
44 | // url: "https://cdn.designcombo.dev/videos/a-real-code-red-at-becca-s-school.mp4",
45 | // projectId: "asdasdasfdsf"
46 | // // mode: "test"
47 | // },
48 | // {
49 | // headers: {
50 | // Authorization: `Bearer RMU2FsdGVkX1/lPghp6YisxRFm+W2KcVcwrx1SYVD5N3O/g5NkxD3eq2TidsPih5do2epq3yyZfdVxPT0z8LWN3J/W/xtSEze/6snUgLhq5ccevl6pCNuvCcOn62pNsuXJ`
51 | // }
52 | // }
53 | // );
54 | // console.log({ reso });
55 | // const res = await axios.get(
56 | // "https://transcribe.designcombo.dev/status/86",
57 | // {
58 | // headers: {
59 | // Authorization: `Bearer RMU2FsdGVkX1/lPghp6YisxRFm+W2KcVcwrx1SYVD5N3O/g5NkxD3eq2TidsPih5do2epq3yyZfdVxPT0z8LWN3J/W/xtSEze/6snUgLhq5ccevl6pCNuvCcOn62pNsuXJ`
60 | // }
61 | // }
62 | // );
63 | // console.log({ res });
64 | // RMU2FsdGVkX1/lPghp6YisxRFm+W2KcVcwrx1SYVD5N3O/g5NkxD3eq2TidsPih5do2epq3yyZfdVxPT0z8LWN3J/W/xtSEze/6snUgLhq5ccevl6pCNuvCcOn62pNsuXJ
65 | // response object
66 | // {
67 | // "projectId": "asdasdasfdsf",
68 | // "fileName": "15a72516-45a9-476c-b07b-5edd85b994ac/asdasdasfdsf/6E3kbpMCd91H.json",
69 | // "key": " ",
70 | // "url": "https://transcribe-snapmotion.s3.us-east-1.amazonaws.com/15a72516-45a9-476c-b07b-5edd85b994ac/asdasdasfdsf/6E3kbpMCd91H.json"
71 | // }
72 | // const transcribe = data.transcribe;
73 | // console.log(transcribe);
74 | // console.log({ job });
75 | };
76 |
77 | return (
78 |
59 |
61 |
62 |
65 | {audio.name}
63 | {audio.author}
64 |
79 |
92 | );
93 | };
94 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/elements.tsx:
--------------------------------------------------------------------------------
1 | export const Elements = () => {
2 | return (
3 |
80 | Captions
81 |
82 |
83 |
91 |
84 | Recognize speech in the selected video/audio and generate captions
85 | automatically.
86 |
87 |
90 |
4 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/images.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/components/ui/scroll-area";
2 | import { IMAGES } from "@/data/images";
3 | import { ADD_IMAGE, dispatch } from "@designcombo/events";
4 | import { generateId } from "@designcombo/timeline";
5 |
6 | export const Images = () => {
7 | const handleAddImage = (src: string) => {
8 | dispatch(ADD_IMAGE, {
9 | payload: {
10 | id: generateId(),
11 | details: {
12 | src: src
13 | }
14 | },
15 | options: {
16 | trackId: "main"
17 | }
18 | });
19 | };
20 |
21 | return (
22 |
5 | Shapes
6 |
7 |
23 |
27 |
45 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/index.tsx:
--------------------------------------------------------------------------------
1 | export { MenuItem } from './menu-item';
2 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/menu-item.tsx:
--------------------------------------------------------------------------------
1 | import useLayoutStore from "@/store/use-layout-store";
2 | import { Transitions } from "./transitions";
3 | import { Texts } from "./texts";
4 | import { Uploads } from "./uploads";
5 | import { Audios } from "./audios";
6 | import { Elements } from "./elements";
7 | import { Images } from "./images";
8 | import { Videos } from "./videos";
9 | import { X } from "lucide-react";
10 | import { Button } from "@/components/ui/button";
11 | import { Captions } from "./captions";
12 |
13 | const Container = ({ children }: { children: React.ReactNode }) => {
14 | const { showMenuItem, setShowMenuItem } = useLayoutStore();
15 | return (
16 |
24 | Photos
25 |
26 |
28 | {IMAGES.map((image, index) => {
29 | return (
30 |
44 | handleAddImage(image.src)}
32 | key={index}
33 | className="flex items-center justify-center w-full bg-background pb-2 overflow-hidden cursor-pointer"
34 | >
35 | 
40 |
41 | );
42 | })}
43 |
24 |
25 |
36 | );
37 | };
38 |
39 | const ActiveMenuItem = () => {
40 | const { activeMenuItem } = useLayoutStore();
41 | if (activeMenuItem === "transitions") {
42 | return
26 |
33 | {children}
34 |
35 |
40 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/transitions.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DRAG_END,
3 | DRAG_PREFIX,
4 | DRAG_START,
5 | filter,
6 | subject
7 | } from "@designcombo/events";
8 | import React, { useEffect, useState } from "react";
9 | import Draggable from "@/components/shared/draggable";
10 | import { ScrollArea } from "@/components/ui/scroll-area";
11 | import { TRANSITIONS } from "@/data/transitions";
12 |
13 | export const Transitions = () => {
14 | const [shouldDisplayPreview, setShouldDisplayPreview] = useState(true);
15 | // handle track and track item events - updates
16 | useEffect(() => {
17 | const dragEvents = subject.pipe(
18 | filter(({ key }) => key.startsWith(DRAG_PREFIX))
19 | );
20 |
21 | const dragEventsSubscription = dragEvents.subscribe((obj) => {
22 | if (obj.key === DRAG_START) {
23 | setShouldDisplayPreview(false);
24 | } else if (obj.key === DRAG_END) {
25 | setShouldDisplayPreview(true);
26 | }
27 | });
28 | return () => dragEventsSubscription.unsubscribe();
29 | }, []);
30 | return (
31 |
41 | Text
42 |
43 |
44 |
47 |
48 |
32 |
36 |
46 |
47 | );
48 | };
49 |
50 | const TransitionsMenuItem = ({
51 | transition,
52 | shouldDisplayPreview
53 | }: {
54 | transition: Partial
33 | Transitions
34 |
35 |
37 | {TRANSITIONS.map((transition, index) => (
38 |
45 |
74 |
85 |
86 | );
87 | };
88 |
89 | export default TransitionsMenuItem;
90 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/uploads.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3 | import { UploadIcon } from "lucide-react";
4 | import { useRef } from "react";
5 | import { ScrollArea } from "@/components/ui/scroll-area";
6 |
7 | export const Uploads = () => {
8 | const inputFileRef = useRef
75 |
80 |
81 |
82 | {transition.name || transition.type}
83 |
84 |
13 |
57 |
58 |
59 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/src/pages/editor/menu-item/videos.tsx:
--------------------------------------------------------------------------------
1 | import { ScrollArea } from "@/components/ui/scroll-area";
2 | import { VIDEOS } from "@/data/video";
3 | import { ADD_VIDEO, dispatch } from "@designcombo/events";
4 | import { generateId } from "@designcombo/timeline";
5 |
6 | export const Videos = () => {
7 | const handleAddVideo = (src: string) => {
8 | dispatch(ADD_VIDEO, {
9 | payload: {
10 | id: generateId(),
11 | details: {
12 | src: src
13 | },
14 | metadata: {
15 | resourceId: src
16 | }
17 | },
18 | options: {
19 | resourceId: "main"
20 | }
21 | });
22 | };
23 |
24 | return (
25 |
14 | Your media
15 |
16 |
23 |
24 |
56 |
25 |
26 |
27 | Project
28 | Workspace
29 |
30 |
31 |
40 |
41 |
42 |
43 |
52 |
53 |
54 |
55 |
26 |
30 |
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/src/pages/editor/player/composition.tsx:
--------------------------------------------------------------------------------
1 | import useStore from "@/store/store";
2 | import { SequenceItem } from "./sequence-item";
3 | import { IItem, ITrackItem } from "@designcombo/types";
4 |
5 | const Composition = () => {
6 | const { trackItemIds, trackItemsMap, fps, trackItemDetailsMap } = useStore();
7 | return (
8 | <>
9 | {trackItemIds.map((id) => {
10 | const item = trackItemsMap[id];
11 | const itemDetails = trackItemDetailsMap[id];
12 | if (!item || !itemDetails) return;
13 | const trackItem = {
14 | ...item,
15 | details: itemDetails.details
16 | } as ITrackItem & IItem;
17 | return SequenceItem[trackItem.type](trackItem, {
18 | fps
19 | });
20 | })}
21 |
22 | );
23 | };
24 |
25 | export default Composition;
26 |
--------------------------------------------------------------------------------
/src/pages/editor/player/editable-text.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | const TextLayer: React.FC<{
4 | id: string;
5 | content: string;
6 | onChange?: (id: string, content: string) => void;
7 | style?: React.CSSProperties;
8 | editable?: boolean;
9 | }> = ({ id, content, editable, style = {} }) => {
10 | const [data, setData] = useState(content);
11 | const divRef = useRef
27 | Videos
28 |
29 |
31 | {VIDEOS.map((image, index) => {
32 | return (
33 |
47 | handleAddVideo(image.src)}
35 | key={index}
36 | className="flex items-center justify-center w-full bg-background pb-2 overflow-hidden cursor-pointer"
37 | >
38 | 
43 |
44 | );
45 | })}
46 | handleMouseDown(e)}
70 | onTouchStart={(e) => handleMouseDown(e)}
71 | style={{
72 | position: "absolute",
73 | left: 40 + position,
74 | top: 80,
75 | width: 1,
76 | height: "calc(100% - 80px)",
77 | background: "#d4d4d8",
78 | zIndex: 10,
79 | cursor: "pointer"
80 | }}
81 | >
82 |
101 | );
102 | };
103 |
104 | export default Playhead;
105 |
--------------------------------------------------------------------------------
/src/pages/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/pages/editor/utils/target.ts:
--------------------------------------------------------------------------------
1 | export const getTargetControls = (targetType: string): string[] => {
2 | switch (targetType) {
3 | case "text":
4 | return ["e", "se"];
5 | case "image":
6 | return ["nw", "ne", "sw", "se"];
7 | case "svg":
8 | return ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
9 | case "group":
10 | return ["nw", "ne", "sw", "se"];
11 | default:
12 | return ["nw", "ne", "sw", "se"];
13 | }
14 | };
15 |
16 | interface ITargetAbles {
17 | rotatable: boolean;
18 | resizable: boolean;
19 | scalable: boolean;
20 | keepRatio: boolean;
21 | draggable: boolean;
22 | snappable: boolean;
23 | }
24 |
25 | export const getTargetAbles = (targetType: string): ITargetAbles => {
26 | switch (targetType) {
27 | case "text":
28 | return {
29 | rotatable: true,
30 | resizable: true,
31 | scalable: false,
32 | keepRatio: false,
33 | draggable: true,
34 | snappable: true
35 | };
36 | case "image":
37 | return {
38 | rotatable: true,
39 | resizable: false,
40 | scalable: true,
41 | keepRatio: true,
42 | draggable: true,
43 | snappable: true
44 | };
45 | case "group":
46 | return {
47 | rotatable: false,
48 | resizable: false,
49 | scalable: true,
50 | keepRatio: true,
51 | draggable: true,
52 | snappable: true
53 | };
54 | case "svg":
55 | return {
56 | rotatable: true,
57 | resizable: false,
58 | scalable: true,
59 | keepRatio: true,
60 |
61 | draggable: true,
62 | snappable: true
63 | };
64 | default:
65 | return {
66 | rotatable: true,
67 | resizable: false,
68 | scalable: true,
69 | keepRatio: true,
70 | draggable: true,
71 | snappable: true
72 | };
73 | }
74 | };
75 |
76 | export const getTypeFromClassName = (input: string): string | null => {
77 | const regex = /designcombo-scene-item-type-([^ ]+)/;
78 | const match = input.match(regex);
79 | return match ? match[1] : null;
80 | };
81 |
82 | export interface SelectionInfo {
83 | targets: HTMLElement[];
84 | layerType: string | null;
85 | ables: ITargetAbles;
86 | controls: string[];
87 | }
88 |
89 | export const emptySelection: SelectionInfo = {
90 | targets: [],
91 | layerType: null,
92 | ables: {
93 | rotatable: false,
94 | resizable: false,
95 | scalable: false,
96 | keepRatio: false,
97 | draggable: true,
98 | snappable: true
99 | },
100 | controls: []
101 | };
102 |
103 | export const getSelectionByIds = (ids: string[]): SelectionInfo => {
104 | if (!ids || ids.length === 0) return emptySelection;
105 |
106 | const targets = ids
107 | .map((id) => {
108 | if (!id) return null;
109 | const element = document.querySelector
83 |
84 |
85 |
86 |
100 |
92 |
98 |
99 |