Fix disconnect button being off center in mobile and chat messages breaking when having malformed og meta data

Author: C-Garza

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

@@ -1,22 +1,13 @@
 import { useContext } from "react";
-import { ChatContext } from "../../context/ChatContext";
 import { SocketContext } from "../../context/SocketContext";
 import styles from "./ChatHeader.module.css";
 
 const ChatHeader = () => {
   const {users, roomName} = useContext(SocketContext);
-  const {setIsChatOpen} = useContext(ChatContext);
   const totalOnline = Object.keys(users).length;
 
-  const handleClick = () => {
-    setIsChatOpen(prev => !prev);
-  };
-
   return(
     <div className={styles.container}>
-      <button className={styles.close__button} onClick={handleClick}>
-        <i className={`fas fa-times ${styles.close__icon}`}></i>
-      </button>
       <h2 className={styles.chat__header}>{roomName}</h2>
       <p className={styles.chat__online}>Currently Online: {totalOnline}</p>
     </div>

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

@@ -29,18 +29,4 @@
 }
 .chat__online {
   align-self: flex-start;
-}
-.close__button {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  color: #EEEEEE;
-  cursor: pointer;
-  transition: all 0.1s ease-out;
-}
-.close__button:hover, .close__button:focus {
-  color: white;
-}
-.close__icon {
-  font-size: 2em;
 }

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

@@ -76,8 +76,8 @@ const ChatUserMessage = ({message, ogMeta}) => {
       {!hasURL && ogMeta.success && 
         <div className={styles.ogCard__container}>
           <a href={ogMeta.requestUrl} className={styles.ogCard__link} target="_blank" rel="noopener noreferrer">
-            <div className={styles.ogCard__image__container}>
-              <img src={ogMeta.ogImage.url} alt={ogMeta.ogTitle} className={styles.ogCard__image} />
+            <div className={`${styles.ogCard__image__container} ${ogMeta.ogImage ? "" : styles.hidden}`}>
+              <img src={ogMeta.ogImage?.url} alt={ogMeta.ogTitle} className={styles.ogCard__image} />
             </div>
             <div className={styles.ogCard__description__container}>
               <p className={styles.ogCard__description}>{ogMeta.ogTitle}</p>

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

@@ -78,4 +78,7 @@ iframe {
   height: 100%;
   width: 100%;
   overflow: hidden;
+}
+.hidden {
+  display: none;
 }

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

@@ -181,6 +181,7 @@ const VideoControls = ({stream, hasWebcam, displayName, gainStreams, handleMuted
               <VideoControlsButton
                 type="button" 
                 buttonClass={`${styles.disconnect__button} ${styles.disconnect__button__padding}`}
+                spanClass={`${styles.disconnect__inner}`}
                 title="Disconnect from call"
                 iconClass={`fas fa-phone-slash ${styles.controls__icon} ${styles.disconnect__icon}`}
                 handleClick={handleDisconnectClick}

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

@@ -86,21 +86,24 @@ div[data-video-stream="video-stream"]:hover + .video__tray .controls__tray {
   pointer-events: none;
 }
 .disconnect__button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   background-color: #DA3E52;
   border-radius: 100%;
   border: 2px solid #212121;
   min-width: auto;
-  height: 0;
+  height: 0px;
   width: var(--disconnect__width);
   pointer-events: all;
 }
 .disconnect__button.disconnect__button__padding {
   padding-top: calc((var(--disconnect__width) / 2) - 2px);
   padding-bottom: calc((var(--disconnect__width) / 2) - 2px);
 }
+.disconnect__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
 .button--stop {
   color: #DA3E52;
 }

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

@@ -1,6 +1,6 @@
 import styles from "./VideoControlsButton.module.css";
 
-const VideoControlsButton = ({buttonClass, title, iconClass, handleClick, handleFocus}) => {
+const VideoControlsButton = ({buttonClass, spanClass, title, iconClass, handleClick, handleFocus}) => {
   return(
     <button 
       type="button" 
@@ -10,7 +10,7 @@ const VideoControlsButton = ({buttonClass, title, iconClass, handleClick, handle
       onFocus={handleFocus}
       onBlur={handleFocus}
     >
-      <i className={iconClass}></i>
+      <span className={`${spanClass}`}><i className={iconClass}></i></span>
     </button>
   );
 };