added footer more dropdown

darylbg · Sep 2, 2023 · c3ba80e · c3ba80e
1 parent 2655709
commit c3ba80e
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 75 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "dropup"
+    ]
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -31,7 +31,9 @@ function App() {
   const [isWebcamVisible, setIsWebcamVisible] = useState(false);
   const [isVideoVisible, setIsVideoVisible] = useState(true);
 
-  const viewRef = useRef(null);
+  const [paneWidth, setPaneWidth] = useState(0);
+
+  const elementRef = useRef(null);
 
   const layoutCSS = {
     height: "100%",
@@ -40,14 +42,20 @@ function App() {
     justifyContent: "space-between",
   };
 
+  useEffect(() => {
+    setPaneWidth(elementRef.current.offsetWidth);
+  }, [sizes]);
+  console.log(`this is the pane width: ${paneWidth}`)
+
+
   useEffect(() => {
     setSizes([sidebarToggle, "auto"]);
   }, [sidebarToggle]);
 
   const handleSidebarToggle = (e) => {
     e.preventDefault();
     const elName = e.currentTarget.getAttribute("data-name");
-    console.log(elName);
+    // console.log(elName);
     if (elName === "chat") {
       setSidebarContent("chat");
     } else if (elName === "participants") {
@@ -71,6 +79,7 @@ function App() {
 
   const handleVideoViewRemove = (e) => {
     e.preventDefault();
+    setIsVideoVisible(false);
     setToggleVideoView(false);
   };
 
@@ -123,7 +132,7 @@ function App() {
         className="split-pane-section"
       >
         <Pane minSize={"50%"} maxSize={"95%"}>
-          <div style={{ ...layoutCSS }} ref={viewRef}>
+          <div style={{ ...layoutCSS }} ref={elementRef }>
             <div className={`video-view ${toggleVideoView ? "" : "d-none"}`}>
               <Dropdown className="view-menu-dropdown">
                 <Dropdown.Toggle variant="primary" id="dropdown-basic">
@@ -176,6 +185,7 @@ function App() {
             toggleWebcamVisible={toggleWebcamVisible}
             toggleWebcamHide={toggleWebcamHide}
             isWebcamVisible={isWebcamVisible}
+            paneWidth={paneWidth}
           />
         </Pane>
         <div style={{ ...layoutCSS, background: "#d5d7d9" }}>
@@ -206,6 +216,7 @@ function App() {
                 handleClearVideoNameInput={handleClearVideoNameInput}
                 setVideoNameValue={setVideoNameValue}
                 videoNameValue={videoNameValue}
+                toggleVideoView={toggleVideoView}
               />
             )}
           </div>

diff --git a/src/index.css b/src/index.css
@@ -7,6 +7,10 @@ body {
   /* background-color: #111111; */
 }
 
+input:focus-visible {
+  outline-offset: 0;
+}
+
 .split-pane-section {
   background-color: #111111;
 }
@@ -139,7 +143,7 @@ body {
 .name-change-form svg {
   height: 30px;
   width: 30px;
-  margin: 0 5px;
+  margin-left: 8px;
   color: white;
   padding: 4px;
 }
@@ -317,3 +321,13 @@ body {
 .leave-button:hover {
   background-color: red;
 }
+
+/* more button */
+
+.dropup-content {
+  position: absolute !important;
+  bottom: 55px;
+  right: 0;
+  flex-direction: column;
+}
+
diff --git a/src/sections/Chat.jsx b/src/sections/Chat.jsx
@@ -36,7 +36,7 @@ function Chat({ videoId }) {
 
     fetchAndSetComments();
   }, [videoId]);
-  console.log(comments)
+  // console.log(comments)
   if (comments.length === 0) {
     return <p>Video has no comments.</p>;
   } else {

diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import MicOnIcon from "../assets/icons/micOn.svg";
 import MicOffIcon from "../assets/icons/micOff.svg";
 import VideoOffIcon from "../assets/icons/videoOff.svg";
@@ -14,7 +14,35 @@ import WhiteboardsIcon from "../assets/icons/whiteboards.svg";
 import CarretIcon from "../assets/icons/carret.svg";
 import CarretGreenIcon from "../assets/icons/carretGreen.svg";
 
-function Footer({ handleSidebarToggle, toggleWebcamHide, toggleWebcamVisible, isWebcamVisible }) {
+function CollapsibleItem({ icon, text, onClick }) {
+  return (
+    <div className="collapsible" onClick={onClick}>
+      <div>
+        <img src={icon} alt="Icon" />
+      </div>
+      <p>{text}</p>
+    </div>
+  );
+}
+
+function Footer({
+  handleSidebarToggle,
+  toggleWebcamHide,
+  toggleWebcamVisible,
+  isWebcamVisible,
+  paneWidth,
+}) {
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
   return (
     <footer className="footer">
       <div className="footer-icons">
@@ -26,68 +54,87 @@ function Footer({ handleSidebarToggle, toggleWebcamHide, toggleWebcamVisible, is
           <img className="footer-micOff-carretIcon" src={CarretIcon}></img>
           <p>Unmute</p>
         </div>
-        <div className="cursor-pointer" onClick={isWebcamVisible ? toggleWebcamHide : toggleWebcamVisible}>
+        <div
+          className="cursor-pointer"
+          onClick={isWebcamVisible ? toggleWebcamHide : toggleWebcamVisible}
+        >
           <div>
             <img src={isWebcamVisible ? VideoOnIcon : VideoOffIcon}></img>
           </div>
           <p>Start Video</p>
         </div>
       </div>
       <div className="footer-icons">
-        <div>
-          <div>
-            <img src={SecurityIcon}></img>
-          </div>
-
-          <p>Security</p>
-        </div>
-        <div className="cursor-pointer" onClick={handleSidebarToggle} data-name="participants">
-          <div>
-            <img src={ParticipantsIcon}></img>
-          </div>
-          <p>Participants</p>
-        </div>
-        <div>
-          <div>
-            <img src={ShareScreenIcon}></img>
-          </div>
-          <img className="footer-micOff-carretIcon" src={CarretGreenIcon}></img>
-          <p style={{ color: "#28E567" }}>Share Screen</p>
-        </div>
-        <div className="cursor-pointer" onClick={handleSidebarToggle} data-name="chat">
-          <div>
-            <img src={ChatIcon}></img>
-          </div>
-          <img className="footer-micOff-carretIcon" src={CarretIcon}></img>
-          <p>Chat</p>
-        </div>
-        <div>
-          <div>
-            <img src={WhiteboardsIcon}></img>
-          </div>
-          <img className="footer-micOff-carretIcon" src={CarretIcon}></img>
-          <p>Whiteboards</p>
-        </div>
-        <div>
-          <div>
-            <img src={ReactionsIcon}></img>
-          </div>
-
-          <p>Reactions</p>
-        </div>
-        <div>
-          <div>
-            <img src={SettingsIcon}></img>
-          </div>
-
-          <p>Settings</p>
-        </div>
-        <div>
+      <CollapsibleItem
+          icon={SecurityIcon}
+          text="Security"
+        />
+        <CollapsibleItem
+          icon={ParticipantsIcon}
+          text="Participants"
+          onClick={() => handleSidebarToggle("participants")}
+        />
+        <CollapsibleItem
+          icon={ShareScreenIcon}
+          text="Share Screen"
+          onClick={() => handleSidebarToggle("chat")}
+        />
+        <CollapsibleItem
+          icon={ChatIcon}
+          text="Chat"
+        />
+        <CollapsibleItem
+          icon={WhiteboardsIcon}
+          text="Whiteboards"
+        />
+        <CollapsibleItem
+          icon={ReactionsIcon}
+          text="Reactions"
+        />
+        <CollapsibleItem
+          icon={SettingsIcon}
+          text="Settings"
+        />
+        <div className="dropup cursor-pointer" onClick={toggleMenu}>
           <div>
             <img src={MoreIcon}></img>
           </div>
 
           <p>More</p>
+          {isOpen && (
+            <div className="dropup-content" onClick={closeMenu}>
+              <CollapsibleItem
+          icon={SecurityIcon}
+          text="Security"
+        />
+        <CollapsibleItem
+          icon={ParticipantsIcon}
+          text="Participants"
+          onClick={() => handleSidebarToggle("participants")}
+        />
+        <CollapsibleItem
+          icon={ShareScreenIcon}
+          text="Share Screen"
+          onClick={() => handleSidebarToggle("chat")}
+        />
+        <CollapsibleItem
+          icon={ChatIcon}
+          text="Chat"
+        />
+        <CollapsibleItem
+          icon={WhiteboardsIcon}
+          text="Whiteboards"
+        />
+        <CollapsibleItem
+          icon={ReactionsIcon}
+          text="Reactions"
+        />
+        <CollapsibleItem
+          icon={SettingsIcon}
+          text="Settings"
+        />
+            </div>
+          )}
         </div>
       </div>
       <div className="footer-right-icons">

diff --git a/src/sections/Participants.jsx b/src/sections/Participants.jsx
@@ -13,6 +13,7 @@ function Participants({
   handleClearVideoNameInput,
   videoNameValue,
   setVideoNameValue,
+  toggleVideoView
 }) {
   const [searchResults, setSearchResults] = useState([]);
   const [inputValue, setInputValue] = useState("");
@@ -55,7 +56,7 @@ function Participants({
     <div className="participants-sidebar">
       <Accordion className="rename-accordion">
         <Accordion.Item eventKey="0">
-          <Accordion.Header>Update view titles</Accordion.Header>
+          <Accordion.Header>Update participant labels</Accordion.Header>
           <Accordion.Body>
             <form className="name-change-form">
               <label>Update my label</label>
@@ -74,28 +75,38 @@ function Participants({
                 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"
-              />
+              {toggleVideoView ? (
+                <>
+                  <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"
+                  />
+                </>
+              ) : null}
             </form>
           </Accordion.Body>
         </Accordion.Item>
       </Accordion>
       <div>
-        <form onSubmit={handleSearchInput} className="youtube-search-form">
+        <form
+          onSubmit={handleSearchInput}
+          className="youtube-search-form"
+          style={{ marginTop: "10px" }}
+        >
           <label>Search a Youtube video</label>
           <input
             type="search"