diff --git a/src/components/bars/SubmitBar/index.tsx b/src/components/bars/SubmitBar/index.tsx index d9ae30f1..6ed41060 100644 --- a/src/components/bars/SubmitBar/index.tsx +++ b/src/components/bars/SubmitBar/index.tsx @@ -19,6 +19,7 @@ const SubmitBarUnconnected: FC = ({ nodeCreate }) => { const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]); const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]); const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]); + const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]); return (
@@ -34,6 +35,10 @@ const SubmitBarUnconnected: FC = ({ nodeCreate }) => {
+ +
+ +
diff --git a/src/components/editors/AudioEditor/index.tsx b/src/components/editors/AudioEditor/index.tsx new file mode 100644 index 00000000..b3ef026f --- /dev/null +++ b/src/components/editors/AudioEditor/index.tsx @@ -0,0 +1,14 @@ +import React, { FC, useCallback } from 'react'; +import { INode } from '~/redux/types'; +import path from 'ramda/es/path'; + +interface IProps { + data: INode; + setData: (val: INode) => void; +} + +const AudioEditor: FC = ({ data, setData }) => { + return
something!
; +}; + +export { AudioEditor }; diff --git a/src/components/editors/EditorAudioUploadButton/index.tsx b/src/components/editors/EditorAudioUploadButton/index.tsx new file mode 100644 index 00000000..3f35eb7e --- /dev/null +++ b/src/components/editors/EditorAudioUploadButton/index.tsx @@ -0,0 +1,25 @@ +import React, { FC } from 'react'; +import { EditorUploadButton } from '~/components/editors/EditorUploadButton'; +import { INode } from '~/redux/types'; +import { UPLOAD_TYPES } from '~/redux/uploads/constants'; + +interface IProps { + data: INode; + setData: (val: INode) => void; + temp: string[]; + setTemp: (val: string[]) => void; +} + +const EditorAudioUploadButton: FC = ({ data, setData, temp, setTemp }) => ( + +); + +export { EditorAudioUploadButton }; diff --git a/src/components/editors/EditorImageUploadButton/index.tsx b/src/components/editors/EditorImageUploadButton/index.tsx index 410667f4..3ca8006d 100644 --- a/src/components/editors/EditorImageUploadButton/index.tsx +++ b/src/components/editors/EditorImageUploadButton/index.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { EditorUploadButton } from '~/components/editors/EditorUploadButton'; import { INode } from '~/redux/types'; +import { UPLOAD_TYPES } from '~/redux/uploads/constants'; interface IProps { data: INode; @@ -17,6 +18,7 @@ const EditorImageUploadButton: FC = ({ data, setData, temp, setTemp }) = setTemp={setTemp} accept="image/*" icon="image" + type={UPLOAD_TYPES.IMAGE} /> ); diff --git a/src/components/editors/EditorPanel/styles.scss b/src/components/editors/EditorPanel/styles.scss index 36902205..0c3178d2 100644 --- a/src/components/editors/EditorPanel/styles.scss +++ b/src/components/editors/EditorPanel/styles.scss @@ -7,4 +7,17 @@ box-sizing: border-box; padding: $gap; z-index: 10; -} \ No newline at end of file + display: flex; + flex-direction: row; + + & > * { + margin: 0 $gap; + + &:first-child { + margin-left: 0; + } + &:last-child { + margin-right: 0; + } + } +} diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx index a4b2aee1..c69dc3cf 100644 --- a/src/components/editors/EditorUploadButton/index.tsx +++ b/src/components/editors/EditorUploadButton/index.tsx @@ -30,6 +30,7 @@ type IProps = ReturnType & accept?: string; icon?: string; + type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES]; }; const EditorUploadButtonUnconnected: FC = ({ @@ -42,6 +43,7 @@ const EditorUploadButtonUnconnected: FC = ({ uploadUploadFiles, accept = 'image/*', icon = 'plus', + type = UPLOAD_TYPES.IMAGE, }) => { const eventPreventer = useCallback(event => event.preventDefault(), []); @@ -52,13 +54,15 @@ const EditorUploadButtonUnconnected: FC = ({ if (current >= NODE_SETTINGS.MAX_FILES) return; + console.log({ type }); + const items: IFileWithUUID[] = Array.from(uploads).map( (file: File): IFileWithUUID => ({ file, temp_id: uuid(), subject: UPLOAD_SUBJECTS.EDITOR, target: UPLOAD_TARGETS.NODES, - type: UPLOAD_TYPES.IMAGE, + type, }) ); @@ -67,7 +71,7 @@ const EditorUploadButtonUnconnected: FC = ({ setTemp([...temp, ...temps]); uploadUploadFiles(items); }, - [setTemp, uploadUploadFiles, temp, data] + [setTemp, uploadUploadFiles, temp, data, type] ); const onFileAdd = useCallback( diff --git a/src/containers/editors/EditorDialogAudio/index.tsx b/src/containers/editors/EditorDialogAudio/index.tsx new file mode 100644 index 00000000..27b306f9 --- /dev/null +++ b/src/containers/editors/EditorDialogAudio/index.tsx @@ -0,0 +1,10 @@ +import React, { FC } from 'react'; +import { EditorDialog } from '~/containers/dialogs/EditorDialog'; +import { IDialogProps } from '~/redux/types'; +import { NODE_TYPES } from '~/redux/node/constants'; + +type IProps = IDialogProps & {}; + +const EditorDialogAudio: FC = props => ; + +export { EditorDialogAudio }; diff --git a/src/redux/modal/constants.ts b/src/redux/modal/constants.ts index fa3b53c5..8426320d 100644 --- a/src/redux/modal/constants.ts +++ b/src/redux/modal/constants.ts @@ -3,6 +3,7 @@ import { LoginDialog } from '~/containers/dialogs/LoginDialog'; import { EditorDialogImage } from '~/containers/editors/EditorDialogImage'; import { EditorDialogText } from '~/containers/editors/EditorDialogText'; import { EditorDialogVideo } from '~/containers/editors/EditorDialogVideo'; +import { EditorDialogAudio } from '~/containers/editors/EditorDialogAudio'; import { NODE_TYPES } from '../node/constants'; export const MODAL_ACTIONS = { @@ -15,6 +16,7 @@ export const DIALOGS = { EDITOR_IMAGE: 'EDITOR_IMAGE', EDITOR_TEXT: 'EDITOR_TEXT', EDITOR_VIDEO: 'EDITOR_VIDEO', + EDITOR_AUDIO: 'EDITOR_AUDIO', LOGIN: 'LOGIN', }; @@ -22,6 +24,7 @@ export const DIALOG_CONTENT = { [DIALOGS.EDITOR_IMAGE]: EditorDialogImage, [DIALOGS.EDITOR_TEXT]: EditorDialogText, [DIALOGS.EDITOR_VIDEO]: EditorDialogVideo, + [DIALOGS.EDITOR_AUDIO]: EditorDialogAudio, [DIALOGS.LOGIN]: LoginDialog, }; @@ -29,6 +32,7 @@ export const NODE_EDITOR_DIALOGS = { [NODE_TYPES.IMAGE]: DIALOGS.EDITOR_IMAGE, [NODE_TYPES.TEXT]: DIALOGS.EDITOR_TEXT, [NODE_TYPES.VIDEO]: DIALOGS.EDITOR_VIDEO, + [NODE_TYPES.AUDIO]: DIALOGS.EDITOR_AUDIO, }; export interface IDialogProps { diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts index 8ec40fd8..b3b8b56d 100644 --- a/src/redux/node/constants.ts +++ b/src/redux/node/constants.ts @@ -6,8 +6,9 @@ import { NodeVideoBlock } from '~/components/node/NodeVideoBlock'; import { ImageEditor } from '~/components/editors/ImageEditor'; import { TextEditor } from '~/components/editors/TextEditor'; import { VideoEditor } from '~/components/editors/VideoEditor'; -import { UPLOAD_TYPES } from '../uploads/constants'; +import { AudioEditor } from '~/components/editors/AudioEditor'; import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadButton'; +import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadButton'; const prefix = 'NODE.'; export const NODE_ACTIONS = { @@ -88,10 +89,12 @@ export const NODE_EDITORS = { [NODE_TYPES.IMAGE]: ImageEditor, [NODE_TYPES.TEXT]: TextEditor, [NODE_TYPES.VIDEO]: VideoEditor, + [NODE_TYPES.AUDIO]: AudioEditor, }; export const NODE_PANEL_COMPONENTS = { [NODE_TYPES.IMAGE]: [EditorImageUploadButton], + [NODE_TYPES.AUDIO]: [EditorAudioUploadButton, EditorImageUploadButton], }; export const NODE_EDITOR_DATA: Record< diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 6c97ebdd..c4631a4f 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -108,9 +108,12 @@ const Sprites: FC<{}> = () => ( + + + + + ); export { Sprites }; - -//