Embed youtube videos

2 files changed, 38 insertions, 15 deletions

diff --git a/src/App.css b/src/App.css
index 97fa329..708c502 100644
--- a/src/App.css
+++ b/src/App.css
@@ -52,22 +52,10 @@
   padding-bottom: 1em;
 }
 
-.yt {
-  border: 1px solid #ccc;
-  font-size: 12px;
-  display: inline-block;
-  line-height: 13px;
-  margin: 2px 0;
-  padding: 5px;
-  text-decoration: none;
-}
+.yt {}
 
 .yt .pvw {
-  width: 100px;
-  height: 60px;
-  overflow: hidden;
-  float: left;
-  margin-right: 5px;
+  display: none;
 }
 
 .ui.comments {
@@ -82,4 +70,9 @@
 .footer {
   margin-top: 3em !important;
   padding: 1em 0 !important;
+}
+
+.playerContainer {
+  max-width: 400px;
+  padding-bottom: 0.75em;
 }
\ No newline at end of file
diff --git a/src/Post.js b/src/Post.js
index db46106..be831a1 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -1,5 +1,13 @@
 import React from "react";
-import { Image, Icon, Modal, Comment, Flag } from "semantic-ui-react";
+import {
+  Image,
+  Icon,
+  Modal,
+  Comment,
+  Flag,
+  Embed,
+  Label
+} from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
 import { avatars } from "./Quotes";
@@ -71,6 +79,11 @@ const Post = ({ index, post, locked, threadId, currentBoard }) => {
   if (post.tripcode === " (★ ****-****)") {
     post.tripcode = "";
   }
+  //(?:https?:\/\/)?(?:www\.)?youtu(.be\/|be\.com\/watch\?v=)(\w{11})
+  const youtubeRe = RegExp(
+    /(?:https?:\/\/)?(?:www\.)?youtu(.be\/|be\.com\/watch\?v=)(\w{11})/g
+  );
+  const youtubeVideos = post.message.match(youtubeRe);
 
   return (
     <Comment>
@@ -122,6 +135,23 @@ const Post = ({ index, post, locked, threadId, currentBoard }) => {
               {filesize(post.file_size, { bits: true })}
             </div>
           ) : null}
+
+          {youtubeVideos !== null
+            ? youtubeVideos.map((url, i) => {
+                let id = url.split("?v=")[1];
+                return (
+                  <div className="playerContainer" key={i}>
+                    <Embed
+                      id={id}
+                      source="youtube"
+                      key={i}
+                      placeholder={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
+                    />
+                  </div>
+                );
+              })
+            : null}
+
           <div
             className={`postMessage ${
               currentBoard.dir === "zonavip" ? "vipFont" : null