better youtube embeds

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,6 +1,8 @@
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 import { ICommentBlock } from '~/constants/comment';
 import styles from './styles.scss';
+import { getYoutubeTitle } from '~/utils/dom';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
   block: ICommentBlock;
@@ -8,14 +10,28 @@ interface IProps {
 
 const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
   const link = block.content.match(
-    /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gi
+    /(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]);
+
   return (
-    <div className={styles.text}>
-      <a href={link[0]} target="_blank">
-        {link[0]}
-      </a>
+    <div className={styles.embed}>
+      <a href={link[0]} target="_blank" />
+
+      <div className={styles.preview}>
+        <div style={{ backgroundImage: `url("${preview}")` }}>
+          <div className={styles.backdrop}>{link[0]}</div>
+        </div>
+      </div>
     </div>
   );
 });

src/components/comment/CommentEmbedBlock/styles.scss

@@ -1,3 +1,66 @@
-.text {
+.embed {
   padding: 0 $gap;
+  height: $comment_height;
+  width: 100%;
+  box-sizing: border-box;
+  background: 50% 50% no-repeat/cover;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 0 $gap 0;
+
+  a {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 7;
+  }
+
+  svg {
+    fill: white;
+    position: relative;
+    z-index: 6;
+  }
+}
+
+.backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparentize(black, 0.5);
+  z-index: 15;
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @include can_backdrop {
+    background: transparentize(black, 0.3);
+    backdrop-filter: blur(5px);
+  }
+}
+
+.preview {
+  padding: 0 $gap $gap / 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  box-sizing: border-box;
+  z-index: 2;
+
+  & > div {
+    width: 100%;
+    border-radius: $radius;
+    position: relative;
+  }
 }