added participant title edit accordion

darylbg · Aug 31, 2023 · 2655709 · 2655709
1 parent 5c44f99
commit 2655709
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 38 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,11 +6,11 @@ import SplitPane, { Pane } from "split-pane-react";
 import Webcam from "react-webcam";
 import YoutubeEmbedVideo from "youtube-embed-video";
 import ViewMenu from "./components/ViewMenu";
-import MicOffComponent from "./components/MicOffComponent";
 import Dropdown from "react-bootstrap/Dropdown";
 import {
   MoreHorizontal,
   MicOff,
+  X
 } from "feather-icons-react/build/IconComponents";
 import "split-pane-react/esm/themes/default.css";
 import "./index.css";
@@ -19,12 +19,15 @@ function App() {
   const [sidebarToggle, setSidebarToggle] = useState("75%");
   const [sidebarContent, setSidebarContent] = useState("");
   const [sizes, setSizes] = useState([sidebarToggle, "auto"]);
+
   const [nameValue, setNameValue] = useState("me");
   const [myName, setMyName] = useState("me");
+
+  const [videoNameValue, setVideoNameValue] = useState('Guest');
   const [videoName, setVideoName] = useState("Guest");
+
   const [videoId, setVideoId] = useState("");
   const [toggleVideoView, setToggleVideoView] = useState(false);
-  const [viewWidth, setViewWidth] = useState(0);
   const [isWebcamVisible, setIsWebcamVisible] = useState(false);
   const [isVideoVisible, setIsVideoVisible] = useState(true);
 
@@ -101,6 +104,16 @@ function App() {
     setNameValue("");
   };
 
+  const handleVideoNameChange = (e) => {
+    e.preventDefault();
+    setVideoName(videoNameValue);
+  };
+
+  const handleClearVideoNameInput = (e) => {
+    e.preventDefault();
+    setVideoNameValue("");
+  };
+
   return (
     <div style={{ height: "100vh" }}>
       <SplitPane
@@ -138,7 +151,7 @@ function App() {
               {isVideoVisible ? (
                 <YoutubeEmbedVideo videoId={videoId} suggestions={false} />
               ) : (
-                <p>{videoName}</p>
+                <p className="view-title">{videoName}</p>
               )}
               <div className="view-mute-label">
                 <MicOff />
@@ -150,7 +163,7 @@ function App() {
               {isWebcamVisible ? (
                 <Webcam style={{ width: "100%" }} />
               ) : (
-                <p>{myName}</p>
+                <p className="view-title">{myName}</p>
               )}
               <div className="view-mute-label">
                 <MicOff />
@@ -178,7 +191,7 @@ function App() {
               onClick={handleSidebarToggleOff}
               className="close-sidebar-btn"
             >
-              x
+              <X />
             </button>
             {sidebarContent === "chat" ? (
               <Chat videoId={videoId} />
@@ -189,6 +202,10 @@ function App() {
                 nameValue={nameValue}
                 setNameValue={setNameValue}
                 handleClearNameInput={handleClearNameInput}
+                handleVideoNameChange={handleVideoNameChange}
+                handleClearVideoNameInput={handleClearVideoNameInput}
+                setVideoNameValue={setVideoNameValue}
+                videoNameValue={videoNameValue}
               />
             )}
           </div>

diff --git a/src/components/MicOffComponent.jsx b/src/components/MicOffComponent.jsx
diff --git a/src/index.css b/src/index.css
@@ -13,6 +13,15 @@ body {
 
 /* views */
 
+.view-title {
+  color: white;
+  font-weight: bold;
+  text-wrap: nowrap;
+  font-size: 5vw;
+  clear: right;
+  overflow: hidden;
+}
+
 .video-view,
 .right-view {
   flex: 1;
@@ -87,7 +96,7 @@ body {
 }
 
 .view-mute-label svg {
-  color: #FF5C5C;
+  color: #ff5c5c;
   height: 14px;
   -moz-transform: scale(-1, 1);
   -webkit-transform: scale(-1, 1);
@@ -102,14 +111,25 @@ body {
   margin: 0 5px 0 0;
 }
 
-/* chat */
+/* Participants */
+
+.rename-accordion .accordion-button:focus {
+  box-shadow: none;
+}
 
 .name-change-form,
 .youtube-search-form {
   display: flex;
+  flex-wrap: wrap;
   padding-bottom: 10px;
 }
 
+.name-change-form label,
+.youtube-search-form label {
+  flex: 0 0 100%;
+  font-size: 12px;
+}
+
 .name-change-form input,
 .youtube-search-form input {
   flex: 1;
@@ -121,6 +141,7 @@ body {
   width: 30px;
   margin: 0 5px;
   color: white;
+  padding: 4px;
 }
 
 .name-change-x {
@@ -132,7 +153,7 @@ body {
 }
 
 .youtube-search-form button {
-  margin: 0 5px;
+  margin-left: 5px;
   background-color: blue;
   color: white;
   border: none;
@@ -155,6 +176,10 @@ body {
   border: none;
 }
 
+.close-sidebar-btn svg {
+  height: 15px;
+}
+
 /* search results */
 
 .search-results {

diff --git a/src/sections/Participants.jsx b/src/sections/Participants.jsx
@@ -1,8 +1,19 @@
 import React, { useState, useEffect } from "react";
-import {X, Check} from "feather-icons-react/build/IconComponents";
+import { X, Check } from "feather-icons-react/build/IconComponents";
 import PlayButtonImg from "../assets/images/play-button-icon-png-18919.png";
+import { Accordion } from "react-bootstrap";
 
-function Participants({ handleSelectedVideo, handleMyNameChange, nameValue, setNameValue, handleClearNameInput }) {
+function Participants({
+  handleSelectedVideo,
+  handleMyNameChange,
+  nameValue,
+  setNameValue,
+  handleClearNameInput,
+  handleVideoNameChange,
+  handleClearVideoNameInput,
+  videoNameValue,
+  setVideoNameValue,
+}) {
   const [searchResults, setSearchResults] = useState([]);
   const [inputValue, setInputValue] = useState("");
   const [searchInput, setSearchInput] = useState("");
@@ -42,30 +53,61 @@ function Participants({ handleSelectedVideo, handleMyNameChange, nameValue, setN
 
   return (
     <div className="participants-sidebar">
-      <div>
-        <form className="name-change-form">
-          <input
-            type="text"
-            value={nameValue}
-            onChange={(e) => {
-              setNameValue(e.target.value);
-            }}
-          ></input>
-          <X onClick={handleClearNameInput} className='name-change-x cursor-pointer' />
-          <Check onClick={handleMyNameChange} className='name-change-update cursor-pointer' />
-        </form>
-      </div>
+      <Accordion className="rename-accordion">
+        <Accordion.Item eventKey="0">
+          <Accordion.Header>Update view titles</Accordion.Header>
+          <Accordion.Body>
+            <form className="name-change-form">
+              <label>Update my label</label>
+              <input
+                type="text"
+                value={nameValue}
+                onChange={(e) => {
+                  setNameValue(e.target.value);
+                }}
+              ></input>
+              <X
+                onClick={handleClearNameInput}
+                className="name-change-x cursor-pointer"
+              />
+              <Check
+                onClick={handleMyNameChange}
+                className="name-change-update cursor-pointer"
+              />
+              <label style={{marginTop: '10px'}}>Update video label</label>
+              <input
+                type="text"
+                value={videoNameValue}
+                onChange={(e) => {
+                  setVideoNameValue(e.target.value);
+                }}
+              ></input>
+              <X
+                onClick={handleClearVideoNameInput}
+                className="name-change-x cursor-pointer"
+              />
+              <Check
+                onClick={handleVideoNameChange}
+                className="name-change-update cursor-pointer"
+              />
+            </form>
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
       <div>
         <form onSubmit={handleSearchInput} className="youtube-search-form">
+          <label>Search a Youtube video</label>
           <input
             type="search"
             value={inputValue}
-            placeholder="Search YouTube"
+            placeholder="Search..."
             onChange={(e) => {
               setInputValue(e.target.value);
             }}
           ></input>
-          <button type="submit" className="video-search-btn">search</button>
+          <button type="submit" className="video-search-btn">
+            search
+          </button>
         </form>
       </div>
       <div>