video node editor

src/components/editors/VideoEditor/index.tsx

@@ -0,0 +1,40 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import { INode } from '~/redux/types';
+import * as styles from './styles.scss';
+import path from 'ramda/es/path';
+import { InputText } from '~/components/input/InputText';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+}
+
+const VideoEditor: FC<IProps> = ({ data, setData }) => {
+  const setUrl = useCallback(
+    (url: string) => setData({ ...data, blocks: [{ type: 'video', url }] }),
+    [data, setData]
+  );
+
+  const url = (path(['blocks', 0, 'url'], data) as string) || '';
+  const preview = useMemo(() => {
+    const match =
+      url &&
+      url.match(
+        /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/
+      );
+
+    return match && match[1] ? `http://img.youtube.com/vi/${match[1]}/maxresdefault.jpg` : null;
+  }, [url]);
+
+  return (
+    <div className={styles.preview} style={{ backgroundImage: preview && `url("${preview}")` }}>
+      <div className={styles.input_wrap}>
+        <div className={styles.input}>
+          <InputText value={url} handler={setUrl} placeholder="Адрес видео" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { VideoEditor };

src/components/editors/VideoEditor/styles.scss

@@ -0,0 +1,30 @@
+.preview {
+  padding-top: 56.25%;
+  position: relative;
+  // background: darken($color: $content_bg, $amount: 2%);
+}
+
+.input_wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input {
+  // @include outer_shadow();
+
+  flex: 1 0 50%;
+  padding: $gap * 2 $gap $gap * 2 $gap;
+  // border-radius: $radius;
+  background: $content_bg;
+  // margin: 20px;
+
+  input {
+    text-align: center;
+  }
+}