Add ability to link to youtube videos and show embedded video in chat

Author: C-Garza

streams-react/src/components/ChatContainer/ChatContainer.js

@@ -4,14 +4,16 @@ import {ChatContext} from "../../context/ChatContext";
 import styles from "./ChatContainer.module.css";
 
 const ChatContainer = () => {
-  const {isChatOpen, setIsChatOpen, setChatDimensions} = useContext(ChatContext);
+  const {isChatOpen, setIsChatOpen, chatDimensions, setChatDimensions} = useContext(ChatContext);
   const containerRef = useRef(null);
 
   useEffect(() => {
     const handleResize = () => {
       const width = containerRef.current.getBoundingClientRect()?.width;
 
-      setChatDimensions(dimensions => ({...dimensions, width}));
+      if(width !== chatDimensions.width) {
+        setChatDimensions(dimensions => ({...dimensions, width}));
+      }
     };
 
     window.addEventListener("resize", handleResize);
@@ -20,7 +22,19 @@ const ChatContainer = () => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [setChatDimensions]);
+  }, [chatDimensions, setChatDimensions]);
+
+  useEffect(() => {
+    if(!isChatOpen) handleVideosReset();
+  }, [isChatOpen]);
+
+  const handleVideosReset = () => {
+    let videos = document.querySelectorAll(".embedded__video");
+    if(!videos.length) return;
+    videos.forEach(video => {
+      video.contentWindow.postMessage(`{"event":"command","func":"stopVideo","args":""}`, "*");
+    });
+  };
 
   const handleClick = () => {
     setIsChatOpen(!isChatOpen);

streams-react/src/components/ChatMessages/ChatMessages.js

@@ -1,7 +1,6 @@
 import {useRef, useContext, useEffect} from "react";
 import ChatUser from "../ChatUser/ChatUser";
 import {ChatContext} from "../../context/ChatContext";
-import {v4 as uuidv4} from "uuid";
 import styles from "./ChatMessages.module.css";
 
 const ChatMessages = () => {
@@ -67,16 +66,19 @@ const ChatMessages = () => {
     let newMessages = [];
     let currentUser = messages[0];
     currentUser.message = [currentUser.message];
+    currentUser.id = [currentUser.id];
 
     for(let i = 1; i < messages.length; i++) {
       if(!Array.isArray(currentUser.message)) currentUser.message = [currentUser.message];
       if(messages[i].streamID === currentUser.streamID) {
         currentUser.message = [...currentUser.message, messages[i].message];
+        currentUser.id = [...currentUser.id, messages[i].id];
       }
       else {
         newMessages.push(currentUser);
         currentUser = messages[i];
         currentUser.message = [currentUser.message];
+        currentUser.id = [currentUser.id];
       }
     }
 
@@ -87,7 +89,7 @@ const ChatMessages = () => {
   const renderMessages = () => {
     const messages = combineMessages(messageList);
     return messages.map((msg)=> {
-      return <ChatUser key={uuidv4()} messageData={msg} />;
+      return <ChatUser key={msg.id[0]} messageData={msg} />;
     });
   };
 

streams-react/src/components/ChatMessages/ChatMessages.module.css

@@ -2,6 +2,7 @@
   flex: 1;
   width: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .header {
   display: flex;

streams-react/src/components/ChatUser/ChatUser.js

@@ -1,14 +1,13 @@
 import Identicon from "../Identicon/Identicon";
 import ChatUserHeader from "../ChatUserHeader/ChatUserHeader";
 import ChatUserMessage from "../ChatUserMessage/ChatUserMessage";
-import {v4 as uuidv4} from "uuid";
 import styles from "./ChatUser.module.css";
 
 const ChatUser = ({messageData}) => {
 
   const renderMessage = () => {
-    return messageData.message.map((message) => {
-      return <ChatUserMessage key={uuidv4()} message={message} />
+    return messageData.message.map((message, i) => {
+      return <ChatUserMessage key={messageData.id[i]} message={message} />
     });
   };
 

streams-react/src/components/ChatUserMessage/ChatUserMessage.js

@@ -1,9 +1,70 @@
+import {useState, useEffect} from "react";
 import styles from "./ChatUserMessage.module.css";
 
 const ChatUserMessage = ({message}) => {
+  const [hasURL, setHasURL] = useState(false);
+  const [srcURL, setSrcURL] = useState("");
+  const [messageURL, setMessageURL] = useState("");
+
+  useEffect(() => {
+    const checkMessagesForURL = () => {
+      let regExp = null;
+      let match = null;
+      // https://stackoverflow.com/questions/28735459/how-to-validate-youtube-url-in-client-side-in-text-box
+      if (message !== undefined || message !== "") { 
+        regExp = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+      }
+      let messages = message.replace(/\n/g, " ").split(" ");
+      for(const value of messages) {
+        match = value.match(regExp);
+        if(match && match[1].length === 11) {
+          setHasURL(true);
+          setMessageURL(match[0]);
+          setSrcURL(match[1]);
+          return;
+        }
+      }
+    };
+    
+    if(message.length) {
+      checkMessagesForURL();
+    }
+  }, [message]);
+
+  const handleStringToURL = () => {
+    if(!hasURL) return message;
+
+    let newMessage = message;
+    let startIndex = message.indexOf(messageURL);
+    let beginningString = newMessage.slice(0, startIndex);
+    let link = <a href={messageURL}>{messageURL}</a>;
+    let endString = newMessage.substring(startIndex + messageURL.length);
+    newMessage = beginningString + link + endString;
+    return (
+      <>
+        {beginningString}
+        <a href={messageURL} className={styles.link} target="_blank" rel="noopener noreferrer" >{messageURL}</a>
+        {endString}
+      </>
+    );
+  };
+
   return (
     <div className={styles.container}>
-      <p className={styles.message}>{message}</p>
+      <p className={styles.message}>{handleStringToURL()}</p>
+      {hasURL &&
+        <div className={styles.iframe__container}>
+          <iframe 
+            className={`embedded__video ${styles.iframe}`}
+            title="video"
+            type="text/html" 
+            frameBorder="0" 
+            height="200"
+            allowFullScreen 
+            src={`https://www.youtube.com/embed/${srcURL}?autoplay=1&enablejsapi=1&rel=0&version=3`}
+          ></iframe>
+        </div>
+      }
     </div>
   );
 };

streams-react/src/components/ChatUserMessage/ChatUserMessage.module.css

@@ -9,4 +9,21 @@
   padding: 5px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
+}
+.link {
+  color: #2962FF;
+  text-decoration: underline;
+}
+.link:hover {
+  color: #0091EA;
+}
+.iframe__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  width: 100%;
+}
+iframe {
+  width: 100%;
 }