From 6917c465f3a3b51e2b37c4ace1f722fd22e11cf8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 19 Oct 2019 20:06:48 +0700
Subject: [PATCH] displaying node videos

---
 src/components/node/NodeVideoBlock/index.tsx  | 36 +++++++++++++++++++
 .../node/NodeVideoBlock/styles.scss           | 12 +++++++
 src/constants/errors.ts                       |  2 ++
 src/redux/node/constants.ts                   |  2 ++
 4 files changed, 52 insertions(+)
 create mode 100644 src/components/node/NodeVideoBlock/index.tsx
 create mode 100644 src/components/node/NodeVideoBlock/styles.scss

diff --git a/src/components/node/NodeVideoBlock/index.tsx b/src/components/node/NodeVideoBlock/index.tsx
new file mode 100644
index 00000000..0c250b4c
--- /dev/null
+++ b/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 };
diff --git a/src/components/node/NodeVideoBlock/styles.scss b/src/components/node/NodeVideoBlock/styles.scss
new file mode 100644
index 00000000..d6c742c6
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/constants/errors.ts b/src/constants/errors.ts
index 910b4dbb..70a8ee47 100644
--- a/src/constants/errors.ts
+++ b/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]: 'Неизвестный адрес',
 };
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 89034de1..44f85a85 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 { 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 = {