From 88333e36b7ce3076dd94584fe1f84db85657fcbc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 21 Oct 2019 17:58:51 +0700
Subject: [PATCH] adding audio post and view it

---
 src/components/node/NodeAudioBlock/index.tsx  | 26 +++++++++++++++++++
 .../node/NodeAudioBlock/styles.scss           | 17 ++++++++++++
 src/redux/node/constants.ts                   |  2 ++
 3 files changed, 45 insertions(+)
 create mode 100644 src/components/node/NodeAudioBlock/index.tsx
 create mode 100644 src/components/node/NodeAudioBlock/styles.scss

diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx
new file mode 100644
index 00000000..7a4bde45
--- /dev/null
+++ b/src/components/node/NodeAudioBlock/index.tsx
@@ -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 };
diff --git a/src/components/node/NodeAudioBlock/styles.scss b/src/components/node/NodeAudioBlock/styles.scss
new file mode 100644
index 00000000..5df8c201
--- /dev/null
+++ b/src/components/node/NodeAudioBlock/styles.scss
@@ -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;
+    }
+  }
+}
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index b3b8b56d..6c9f5655 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -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 = {