displaying node videos

src/components/node/NodeVideoBlock/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useMemo } from 'react';
+import { INode } from '~/redux/types';
+import * as styles from './styles.scss';
+import path from 'ramda/es/path';
+
+interface IProps {
+  node: INode;
+}
+
+const NodeVideoBlock: FC<IProps> = ({ node }) => {
+  const video = useMemo(() => {
+    const url: string = path(['blocks', 0, 'url'], node);
+    const match =
+      url &&
+      url.match(
+        /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/
+      );
+
+    return match && match[1];
+  }, [node]);
+
+  return (
+    <div className={styles.wrap}>
+      <iframe
+        width="560"
+        height="315"
+        src={`https://www.youtube.com/embed/${video}`}
+        frameBorder="0"
+        allowFullScreen
+        title="video"
+      />
+    </div>
+  );
+};
+
+export { NodeVideoBlock };

src/components/node/NodeVideoBlock/styles.scss

@@ -0,0 +1,12 @@
+.wrap {
+  padding-bottom: 56.25%;
+  position: relative;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}

src/constants/errors.ts

@@ -6,6 +6,7 @@ export const ERRORS = {
   FILES_REQUIRED: 'Files_Required',
   TEXT_REQUIRED: 'Text_Required',
   UNKNOWN_NODE_TYPE: 'Unknown_Node_Type',
+  URL_INVALID: 'Url_Invalid',
 };
 
 export const ERROR_LITERAL = {
@@ -16,4 +17,5 @@ export const ERROR_LITERAL = {
   [ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
   [ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
   [ERRORS.UNKNOWN_NODE_TYPE]: 'Неизвестный тип поста',
+  [ERRORS.URL_INVALID]: 'Неизвестный адрес',
 };

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 { NodeVideoBlock } from '~/components/node/NodeVideoBlock';
 import { ImageEditor } from '~/components/editors/ImageEditor';
 import { TextEditor } from '~/components/editors/TextEditor';
 import { VideoEditor } from '~/components/editors/VideoEditor';
@@ -66,6 +67,7 @@ type INodeComponents = Record<
 
 export const NODE_COMPONENTS: INodeComponents = {
   [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  [NODE_TYPES.VIDEO]: NodeVideoBlock,
 };
 
 export const NODE_INLINES: INodeComponents = {