7 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/src/translations/index.ts:
--------------------------------------------------------------------------------
1 | import i18next from "i18next"
2 |
3 | import common_es from "./es/common.json"
4 | import common_en from "./en/common.json"
5 | import editor_en from "./en/editor.json"
6 | import editor_es from "./es/editor.json"
7 |
8 | i18next.init({
9 | interpolation: { escapeValue: false },
10 | lng: "en",
11 | resources: {
12 | en: {
13 | common: common_en,
14 | editor: editor_en,
15 | },
16 | es: {
17 | common: common_es,
18 | editor: editor_es,
19 | },
20 | },
21 | })
22 |
--------------------------------------------------------------------------------
/src/components/Icons/Redo.tsx:
--------------------------------------------------------------------------------
1 | function Redo({ size }: { size: number }) {
2 | return (
3 |
9 | )
10 | }
11 |
12 | export default Redo
13 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/components/Footer/Graphic/Graphic.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { styled } from "baseui"
3 | import { Theme } from "baseui/theme"
4 | import Common from "./Common"
5 | import Scenes from "./Scenes"
6 |
7 | const Container = styled<"div", {}, Theme>("div", ({ $theme }) => ({
8 | background: $theme.colors.white,
9 | }))
10 |
11 | const Graphic = () => {
12 | return (
13 |
8 | {children}
9 |
10 |
4 |
10 |
11 |
12 | )
13 | }
14 |
15 | export default TextColor
16 |
--------------------------------------------------------------------------------
/src/components/Icons/VerticalLine.tsx:
--------------------------------------------------------------------------------
1 | function VerticalLine({ size }: { size: number }) {
2 | return (
3 |
17 | );
18 | }
19 |
20 | export default VerticalLine;
21 |
--------------------------------------------------------------------------------
/src/components/Icons/Uploads.tsx:
--------------------------------------------------------------------------------
1 | function Uploads({ size }: { size: number }) {
2 | return (
3 |
9 | )
10 | }
11 |
12 | export default Uploads
13 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/utils/scenes.ts:
--------------------------------------------------------------------------------
1 | import { IScene } from "@layerhub-io/types"
2 |
3 | export const findSceneIndexByTime = (scenes: IScene[], time: number) => {
4 | let currentIndex = 0
5 | let timeProgress = 0
6 | for (const scene of scenes) {
7 | if (scene.duration! > time - timeProgress) {
8 | return currentIndex
9 | }
10 | timeProgress += scene.duration!
11 | currentIndex += 1
12 | }
13 | return -1
14 | }
15 |
16 | export const getMaxTime = (scenes: IScene[]) => {
17 | const maxTime = scenes.reduce(function (previousVal, currentValue) {
18 | return previousVal + currentValue.duration!
19 | }, 0)
20 | return maxTime
21 | }
22 |
--------------------------------------------------------------------------------
/src/store/slices/fonts/actions.ts:
--------------------------------------------------------------------------------
1 | import { IFontFamily } from "~/interfaces/editor"
2 | import { createAsyncThunk, createAction } from "@reduxjs/toolkit"
3 | import api from "~/services/api"
4 |
5 | export const setFonts = createAction
13 |
20 |
15 |
19 |
13 |
20 |
15 |
19 |
14 |
21 |
16 |
20 |
11 | {displayPlayback &&
28 | )
29 | }
30 |
31 | export default Canvas
32 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/components/Preview/Graphic.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Block } from "baseui/block"
3 | import { useEditor } from "@layerhub-io/react"
4 |
5 | const Graphic = () => {
6 | const editor = useEditor()
7 | const [loading, setLoading] = React.useState(true)
8 | const [state, setState] = React.useState({
9 | image: "",
10 | })
11 |
12 | const makePreview = React.useCallback(async () => {
13 | if (editor) {
14 | const template = editor.scene.exportToJSON()
15 | const image = (await editor.renderer.render(template)) as string
16 | setState({ image })
17 | setLoading(false)
18 | }
19 | }, [editor])
20 |
21 | React.useEffect(() => {
22 | makePreview()
23 | }, [editor])
24 |
25 | return (
26 |
12 |
23 | {text && text}
24 |
25 | )
26 | }
27 |
28 | export default Loading
29 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/DesignEditor.tsx:
--------------------------------------------------------------------------------
1 | import useEditorType from "~/hooks/useEditorType"
2 | import SelectEditor from "./SelectEditor"
3 | import GraphicEditor from "./GraphicEditor"
4 | import PresentationEditor from "./PresentationEditor"
5 | import VideoEditor from "./VideoEditor"
6 | import useDesignEditorContext from "~/hooks/useDesignEditorContext"
7 | import Preview from "./components/Preview"
8 | import ContextMenu from "./components/ContextMenu"
9 |
10 | const DesignEditor = () => {
11 | const editorType = useEditorType()
12 | const { displayPreview, setDisplayPreview } = useDesignEditorContext()
13 |
14 | return (
15 | <>
16 | {displayPreview &&
49 |
71 |
50 | {pages.map((page, index) => {
51 | return (
52 |
68 |
69 |
70 |
63 | Page {index}
64 |
65 | )
66 | })}
67 | {label}
75 |
63 | {isDragging && (
64 |
83 | )
84 | }
85 |
86 | export default DropZone
87 |
--------------------------------------------------------------------------------
/src/Container.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react"
2 | import ResizeObserver from "resize-observer-polyfill"
3 | import useAppContext from "~/hooks/useAppContext"
4 | import Loading from "./components/Loading"
5 | import { editorFonts } from "./constants/fonts"
6 | import { getFonts } from "./store/slices/fonts/actions"
7 | import { getPixabayResources } from "./store/slices/resources/actions"
8 | import { getUploads } from "./store/slices/uploads/actions"
9 | import { useAppDispatch } from "./store/store"
10 |
11 | const Container = ({ children }: { children: React.ReactNode }) => {
12 | const containerRef = useRef
78 | Drop files here to upload...
79 |
80 | )}
81 | {children}
82 |
78 | {loaded ? <>{children} :
80 | )
81 | }
82 |
83 | export default Container
84 |
--------------------------------------------------------------------------------
/src/components/Resizable/resizer.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const rowSizeBase = {
4 | width: "100%",
5 | height: "10px",
6 | top: "0px",
7 | left: "0px",
8 | cursor: "row-resize",
9 | } as const;
10 |
11 | const colSizeBase = {
12 | width: "16px",
13 | height: "100%",
14 | top: "0px",
15 | left: "0px",
16 | cursor: "col-resize",
17 | } as const;
18 |
19 | const edgeBase = {
20 | width: "20px",
21 | height: "20px",
22 | position: "absolute",
23 | } as const;
24 |
25 | const styles: { [key: string]: React.CSSProperties } = {
26 | top: {
27 | ...rowSizeBase,
28 | top: "-5px",
29 | },
30 | right: {
31 | ...colSizeBase,
32 | left: undefined,
33 | right: "0px",
34 | },
35 | bottom: {
36 | ...rowSizeBase,
37 | top: undefined,
38 | bottom: "-5px",
39 | },
40 | left: {
41 | ...colSizeBase,
42 | left: "0px",
43 | },
44 | topRight: {
45 | ...edgeBase,
46 | right: "-10px",
47 | top: "-10px",
48 | cursor: "ne-resize",
49 | },
50 | bottomRight: {
51 | ...edgeBase,
52 | right: "-10px",
53 | bottom: "-10px",
54 | cursor: "se-resize",
55 | },
56 | bottomLeft: {
57 | ...edgeBase,
58 | left: "-10px",
59 | bottom: "-10px",
60 | cursor: "sw-resize",
61 | },
62 | topLeft: {
63 | ...edgeBase,
64 | left: "-10px",
65 | top: "-10px",
66 | cursor: "nw-resize",
67 | },
68 | } as const;
69 |
70 | export type Direction =
71 | | "top"
72 | | "right"
73 | | "bottom"
74 | | "left"
75 | | "topRight"
76 | | "bottomRight"
77 | | "bottomLeft"
78 | | "topLeft";
79 |
80 | export type OnStartCallback = (
81 | e: React.MouseEvent
115 | {this.props.children}
116 |
117 | );
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/components/Footer/Graphic/SceneItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { IScene } from "@layerhub-io/types"
3 | import { Block } from "baseui/block"
4 | import { useSortable } from "@dnd-kit/sortable"
5 | import { CSS } from "@dnd-kit/utilities"
6 | import useDesignEditorContext from "~/hooks/useDesignEditorContext"
7 | import useOnClickOutside from "~/hooks/useOnClickOutside"
8 |
9 | interface Props {
10 | isCurrentScene: boolean
11 | scene: IScene
12 | preview: string
13 | index: number
14 | changePage: (p: IScene) => void
15 | }
16 |
17 | const SceneItem = ({ isCurrentScene, scene, preview, index, changePage }: Props) => {
18 | const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: scene.id })
19 | const sceneRef = React.useRef
85 | 
95 |
96 | )
97 | }
98 |
99 | export default Elements
100 |
--------------------------------------------------------------------------------
/src/views/DesignEditor/components/Footer/Video/TimeMarker.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { useTimer } from "@layerhub-io/use-timer"
3 | import { Block } from "baseui/block"
4 | import { DesignEditorContext } from "~/contexts/DesignEditor"
5 |
6 | const SCALE_FACTOR = 1
7 |
8 | const TimeMarker = () => {
9 | const { time, setTime, pause } = useTimer()
10 |
11 | const [position, setPosition] = React.useState({
12 | x: 0,
13 | y: 0,
14 | })
15 | const { scenes, setDisplayPlayback, maxTime, setMaxTime } = React.useContext(DesignEditorContext)
16 |
17 | React.useEffect(() => {
18 | if (time * SCALE_FACTOR <= maxTime) {
19 | setPosition({ ...position, x: (time * SCALE_FACTOR) / 40, y: 0 })
20 | } else {
21 | pause()
22 | setDisplayPlayback(false)
23 | }
24 | }, [time])
25 |
26 | React.useEffect(() => {
27 | if (scenes) {
28 | const maxTime = scenes.reduce(function (previousVal, currentValue) {
29 | return previousVal + currentValue.duration!
30 | }, 0)
31 | setMaxTime(maxTime)
32 | }
33 | }, [scenes])
34 |
35 | const onStart = () => {
36 | const playHeadDomRef = document.getElementById("EditorPlayHead") as HTMLDivElement
37 | const initialX = playHeadDomRef.offsetLeft
38 | const panelsListRef = document.getElementById("EditorPanelList") as HTMLDivElement
39 | const panelItemRef = document.getElementById("EditorPanelItem") as HTMLDivElement
40 | const playControlRef = document.getElementById("EditorPlayControl") as HTMLDivElement
41 |
42 | const panelItemsWidth =
43 | panelsListRef.getBoundingClientRect().width +
44 | panelItemRef.getBoundingClientRect().width +
45 | playControlRef.getBoundingClientRect().width
46 |
47 | const onDrag = (ev: MouseEvent) => {
48 | let x = ev.clientX - initialX - panelItemsWidth
49 | let newX = initialX + x * 40
50 | if (newX + 2 <= 0 || newX >= maxTime) return
51 | setTime(newX)
52 | }
53 |
54 | const onStop = () => {
55 | window.removeEventListener("mousemove", onDrag)
56 | window.removeEventListener("mouseup", onStop)
57 | }
58 |
59 | window.addEventListener("mousemove", onDrag)
60 | window.addEventListener("mouseup", onStop)
61 | }
62 |
63 | return (
64 |
76 |
88 |
89 |