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}>
+    <div className={styles.embed}>
-      <a href={link[0]} target="_blank">
+      <a href={link[0]} target="_blank" />
-        {link[0]}
+
-      </a>
+      <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;
+  }
 }

src/constants/comment.ts

@@ -10,7 +10,7 @@ export const COMMENT_BLOCK_TYPES = {
 export const COMMENT_BLOCK_DETECTORS = [
   {
     type: COMMENT_BLOCK_TYPES.EMBED,
-    test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
+    test: /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gim,
   },
   {
     type: COMMENT_BLOCK_TYPES.MARK,

src/sprites/Sprites.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC } from 'react';
 
 const Sprites: FC<{}> = () => (
   <svg width={0} height={0} viewBox="0 0 24 24">
@@ -191,6 +191,13 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z" />
     </g>
+
+    <g id="youtube" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <g transform="scale(0.1) translate(-30 -30)">
+        <path d="m 149.9375,79.222656 c 0,0 -63.218849,5.9e-5 -79.085938,4.123047 -8.495787,2.373802 -15.491408,9.3695 -17.865234,17.990237 -4.122953,15.8671 -4.123047,48.72656 -4.123047,48.72656 0,0 9.4e-5,32.9842 4.123047,48.60156 2.373826,8.62062 9.244506,15.49138 17.865234,17.86524 15.99203,4.24788 79.085938,4.24804 79.085938,4.24804 0,0 63.34418,-5e-5 79.21094,-4.12304 8.62079,-2.37381 15.49133,-9.11966 17.74023,-17.86524 4.24793,-15.74232 4.24805,-48.60156 4.24805,-48.60156 0,0 0.12484,-32.98446 -4.24805,-48.85156 -2.2489,-8.620737 -9.11944,-15.491334 -17.74023,-17.740237 -15.86676,-4.372847 -79.21094,-4.373047 -79.21094,-4.373047 z m -20.11523,40.480464 52.59961,30.35938 -52.59961,30.23438 0,-60.59376 z" />
+      </g>
+    </g>
   </svg>
 );
 

src/utils/dom.ts

@@ -78,7 +78,7 @@ export const formatText = (text: string): string =>
     ? ''
     : text
         .replace(
-          /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gim,
+          /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gim,
           '\n$1\n'
         )
         .replace(/\n{1,}/gim, '\n')