From 45f7c70f8323bb1f1cf3f3b4d20b88b780951f32 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 27 Nov 2019 10:46:33 +0700
Subject: [PATCH] fixed youtube thumbs

---
 src/components/comment/CommentEmbedBlock/index.tsx | 12 ++----------
 src/components/editors/VideoEditor/index.tsx       | 11 ++---------
 src/utils/dom.ts                                   | 10 +++++++++-
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/components/comment/CommentEmbedBlock/index.tsx b/src/components/comment/CommentEmbedBlock/index.tsx
index b2744889..dd4e8e98 100644
--- a/src/components/comment/CommentEmbedBlock/index.tsx
+++ b/src/components/comment/CommentEmbedBlock/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, memo, useMemo } from 'react';
 import { ICommentBlock } from '~/constants/comment';
 import styles from './styles.scss';
-import { getYoutubeTitle } from '~/utils/dom';
+import { getYoutubeTitle, getYoutubeThumb } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 
 interface IProps {
@@ -13,15 +13,7 @@ const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
     /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gi
   );
 
-  const preview = useMemo(() => {
-    const match =
-      block.content &&
-      block.content.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;
-  }, [block.content]);
+  const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
   return (
     <div className={styles.embed}>
diff --git a/src/components/editors/VideoEditor/index.tsx b/src/components/editors/VideoEditor/index.tsx
index 282e53c1..5d2ac72a 100644
--- a/src/components/editors/VideoEditor/index.tsx
+++ b/src/components/editors/VideoEditor/index.tsx
@@ -4,6 +4,7 @@ import * as styles from './styles.scss';
 import path from 'ramda/es/path';
 import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
+import { getYoutubeThumb } from '~/utils/dom';
 
 interface IProps {
   data: INode;
@@ -17,15 +18,7 @@ const VideoEditor: FC<IProps> = ({ 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]);
+  const preview = useMemo(() => getYoutubeThumb(url), [url]);
 
   return (
     <div className={styles.preview} style={{ backgroundImage: preview && `url("${preview}")` }}>
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 6d320283..2405122c 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -139,4 +139,12 @@ export const getYoutubeTitle = async (id: string) => {
   Axios.get(`http://youtube.com/get_video_info?video_id=${id}`).then(console.log);
 };
 
-(<any>window).getYoutubeTitle = getYoutubeTitle;
+export const getYoutubeThumb = (url: string) => {
+  const match =
+    url &&
+    url.match(
+      /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/
+    );
+
+  return match && match[1] ? `https://i.ytimg.com/vi/${match[1]}/hq720.jpg` : null;
+};