mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
creating youtube node
This commit is contained in:
parent
8612cc5ce7
commit
f7c2f0e90f
6 changed files with 22 additions and 6 deletions
|
@ -2,6 +2,7 @@ import React, { FC } from 'react';
|
||||||
import * as styles from './styles.scss';
|
import * as styles from './styles.scss';
|
||||||
import { INode } from '~/redux/types';
|
import { INode } from '~/redux/types';
|
||||||
import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
|
import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
|
||||||
|
import { NODE_UPLOAD_TYPES } from '~/redux/node/constants';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
data: INode;
|
data: INode;
|
||||||
|
@ -12,7 +13,9 @@ interface IProps {
|
||||||
|
|
||||||
const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => (
|
const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => (
|
||||||
<div className={styles.panel}>
|
<div className={styles.panel}>
|
||||||
|
{data.type && NODE_UPLOAD_TYPES[data.type] && (
|
||||||
<EditorUploadButton data={data} setData={setData} temp={temp} setTemp={setTemp} />
|
<EditorUploadButton data={data} setData={setData} temp={temp} setTemp={setTemp} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { INode } from '~/redux/types';
|
||||||
import * as styles from './styles.scss';
|
import * as styles from './styles.scss';
|
||||||
import path from 'ramda/es/path';
|
import path from 'ramda/es/path';
|
||||||
import { InputText } from '~/components/input/InputText';
|
import { InputText } from '~/components/input/InputText';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
data: INode;
|
data: INode;
|
||||||
|
@ -29,7 +30,7 @@ const VideoEditor: FC<IProps> = ({ data, setData }) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.preview} style={{ backgroundImage: preview && `url("${preview}")` }}>
|
<div className={styles.preview} style={{ backgroundImage: preview && `url("${preview}")` }}>
|
||||||
<div className={styles.input_wrap}>
|
<div className={styles.input_wrap}>
|
||||||
<div className={styles.input}>
|
<div className={classnames(styles.input, { active: !!preview })}>
|
||||||
<InputText value={url} handler={setUrl} placeholder="Адрес видео" />
|
<InputText value={url} handler={setUrl} placeholder="Адрес видео" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
.preview {
|
.preview {
|
||||||
padding-top: 56.25%;
|
padding-top: 56.25%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: $radius;
|
||||||
// background: darken($color: $content_bg, $amount: 2%);
|
// background: darken($color: $content_bg, $amount: 2%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,12 +20,16 @@
|
||||||
// @include outer_shadow();
|
// @include outer_shadow();
|
||||||
|
|
||||||
flex: 1 0 50%;
|
flex: 1 0 50%;
|
||||||
padding: $gap * 2 $gap $gap * 2 $gap;
|
padding: $gap * 2;
|
||||||
// border-radius: $radius;
|
border-radius: $radius;
|
||||||
background: $content_bg;
|
background: $content_bg;
|
||||||
// margin: 20px;
|
margin: 20px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:global(.active) {
|
||||||
|
background: $red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,7 @@ export const ERRORS = {
|
||||||
NO_COMMENTS: 'No_Comments',
|
NO_COMMENTS: 'No_Comments',
|
||||||
FILES_REQUIRED: 'Files_Required',
|
FILES_REQUIRED: 'Files_Required',
|
||||||
TEXT_REQUIRED: 'Text_Required',
|
TEXT_REQUIRED: 'Text_Required',
|
||||||
|
UNKNOWN_NODE_TYPE: 'Unknown_Node_Type',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ERROR_LITERAL = {
|
export const ERROR_LITERAL = {
|
||||||
|
@ -14,4 +15,5 @@ export const ERROR_LITERAL = {
|
||||||
[ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
|
[ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
|
||||||
[ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
|
[ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
|
||||||
[ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
|
[ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
|
||||||
|
[ERRORS.UNKNOWN_NODE_TYPE]: 'Неизвестный тип поста',
|
||||||
};
|
};
|
||||||
|
|
|
@ -133,7 +133,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
background: linear-gradient(transparentize($orange, 1), $red);
|
background: linear-gradient(transparentize($orange, 1), $red 90%);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { NodeTextBlock } from '~/components/node/NodeTextBlock';
|
||||||
import { ImageEditor } from '~/components/editors/ImageEditor';
|
import { ImageEditor } from '~/components/editors/ImageEditor';
|
||||||
import { TextEditor } from '~/components/editors/TextEditor';
|
import { TextEditor } from '~/components/editors/TextEditor';
|
||||||
import { VideoEditor } from '~/components/editors/VideoEditor';
|
import { VideoEditor } from '~/components/editors/VideoEditor';
|
||||||
|
import { UPLOAD_TYPES } from '../uploads/constants';
|
||||||
|
|
||||||
const prefix = 'NODE.';
|
const prefix = 'NODE.';
|
||||||
export const NODE_ACTIONS = {
|
export const NODE_ACTIONS = {
|
||||||
|
@ -86,6 +87,10 @@ export const NODE_EDITORS = {
|
||||||
[NODE_TYPES.VIDEO]: VideoEditor,
|
[NODE_TYPES.VIDEO]: VideoEditor,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const NODE_UPLOAD_TYPES = {
|
||||||
|
[NODE_TYPES.IMAGE]: [UPLOAD_TYPES.IMAGE],
|
||||||
|
};
|
||||||
|
|
||||||
export const NODE_EDITOR_DATA: Record<
|
export const NODE_EDITOR_DATA: Record<
|
||||||
typeof NODE_TYPES[keyof typeof NODE_TYPES],
|
typeof NODE_TYPES[keyof typeof NODE_TYPES],
|
||||||
Partial<INode>
|
Partial<INode>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue