muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

adding audio post and view it

Browse source
This commit is contained in:
Fedor Katurov 2019-10-21 17:58:51 +07:00
parent 645ea8e29e
commit 88333e36b7
3 changed files with 45 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/node/NodeAudioBlock/index.tsx Normal file
View file

@ -0,0 +1,26 @@
import React, { FC, useMemo } from 'react';
import { INode } from '~/redux/types';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import { AudioPlayer } from '~/components/media/AudioPlayer';
import * as styles from './styles.scss';
interface IProps {
node: INode;
}
const NodeAudioBlock: FC<IProps> = ({ node }) => {
const audios = useMemo(
() => node.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
[node.files]
);
return (
<div className={styles.wrap}>
{audios.map(file => (
<AudioPlayer key={file.id} file={file} />
))}
</div>
);
};
export { NodeAudioBlock };

17
src/components/node/NodeAudioBlock/styles.scss Normal file
View file

@ -0,0 +1,17 @@
.wrap {
background: $content_bg;
border-radius: $radius;
& > div {
@include outer_shadow();
&:first-child {
border-top-left-radius: $radius;
border-top-right-radius: $radius;
}
&:last-child {
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
}
}

2
src/redux/node/constants.ts
View file

@ -2,6 +2,7 @@ import { FC } from 'react';
import { INode, ValueOf, IComment } from '../types';
import { NodeImageSlideBlock } from '~/components/node/NodeImageSlideBlock';
import { NodeTextBlock } from '~/components/node/NodeTextBlock';
import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
import { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
import { ImageEditor } from '~/components/editors/ImageEditor';
import { TextEditor } from '~/components/editors/TextEditor';
@ -74,6 +75,7 @@ export const NODE_COMPONENTS: INodeComponents = {
export const NODE_INLINES: INodeComponents = {
[NODE_TYPES.TEXT]: NodeTextBlock,
[NODE_TYPES.AUDIO]: NodeAudioBlock,
};
export const EMPTY_COMMENT: IComment = {