fixed youtube thumbs

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}>

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}")` }}>

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;
+};