settings modal

src/Components/NameChanger/NameChanger.jsx

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+import TextInput from "../TextInput/TextInput";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { NameChangerContext } from "../../Contexts";
+
+import './NameChanger.scss'
+
+function NameChanger({inputProps, icon}) {
+  const { setWillBeRenamed, changeName } = useContext(NameChangerContext);
+
+  return (
+    <div className="row">
+      <div className="col-10">
+        <TextInput
+        {...inputProps}
+        valueSetter={setWillBeRenamed}
+        />
+      </div>
+      <div className="col-2 icon">
+        <FontAwesomeIcon icon={icon} onClick={changeName} />
+      </div>
+    </div>
+  );
+}
+
+export default NameChanger;

src/Components/NameChanger/NameChanger.scss

@@ -0,0 +1,6 @@
+@import "../../styles/variables.scss";
+
+.icon{
+  padding: 10px 0;
+  cursor: pointer;
+}

src/Components/SendMessageInput/SendMessageInput.jsx

@@ -2,12 +2,12 @@ import { React, useContext } from "react";
 import TextInput from "../TextInput/TextInput";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
-import { Context } from "../../Contexts/SendMessageInputContext";
+import { SendMessageInputContext } from "../../Contexts";
 
 import './SendMessageInput.scss'
 
 function SendMessageInput () {
-  const { setText, click, press } = useContext(Context);
+  const { setText, click, press } = useContext(SendMessageInputContext);
   let input = null
 
   const refSetter = (ref) => {

src/Components/SettingsModal/Room/RoomContainer.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Setting from '../Setting/Setting'
+import { faPen } from '@fortawesome/free-solid-svg-icons'
+
+import './RoomContainer.scss';
+
+const props = {
+  inputProps: {
+    placeholder: "Cental Perk"
+  },
+  icon: faPen,
+}
+
+const components = {
+  nameChanger: "nameChanger",
+  // permission: PermissionManager,
+};
+
+function RoomContainer() {
+  return (
+    <div className="user-container">
+      <Setting settingType={components.nameChanger} title="Room Name" 
+        info="Name of the room." {...props}
+      />
+    </div>
+  )
+}
+
+export default RoomContainer;

src/Components/SettingsModal/Setting/Setting.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import NameChanger from "../../NameChanger/NameChanger";
+
+import './Setting.scss'
+const components = {
+  nameChanger: NameChanger,
+  // permission: PermissionManager,
+  // deleteRoomButton: deleteRoomButton,
+};
+
+function Setting({ settingType, title, info, ...props }) {
+  const SpecificSetting = components[settingType];
+  return (
+    <div className='setting'>
+      <div className='title'><h5>{title}</h5></div>
+      <div className='container-body'>
+        <div className='info'>
+          <p>{info}</p>
+        </div>
+        <div className='setting'>
+            <SpecificSetting {...props}/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Setting.defaultProps = {
+  settingType: components.nameChanger,
+  title: "Setting",
+  info: "This is setting",
+  props: {}
+}
+
+export default Setting;

src/Components/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import Room from './Room/RoomContainer';
+import User from './User/UserContainer';
+import { RENAMES } from '../../Constants';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmarkCircle, faGears, faHome, faUser } from '@fortawesome/free-solid-svg-icons'
+
+import './SettingsModal.scss';
+
+function SettingsModal({ closeModal, selected }) {
+  const [selectedContent, setSelectedContent] = useState(RENAMES.ROOM);
+  return (
+    <div className="modal-background">
+      <div className="modal-container">
+        <div className='close-button'>
+          <FontAwesomeIcon icon={faXmarkCircle} onClick={() => closeModal(false)} />
+        </div>
+        <div className='row'>
+          <div className='col-md-2'>
+            <div className="room-user-container">
+              <div className='settings'><FontAwesomeIcon icon={faGears} /></div>
+              <div className={selectedContent === RENAMES.ROOM ? 'selected' : 'not-selected'}><FontAwesomeIcon icon={faHome} onClick={() => {
+                setSelectedContent(RENAMES.ROOM);
+                selected(RENAMES.ROOM);
+              }} /></div>
+              <div className={selectedContent === RENAMES.USER ? 'selected' : 'not-selected'}><FontAwesomeIcon icon={faUser} onClick={() => {
+                setSelectedContent(RENAMES.USER);
+                selected(RENAMES.USER);
+                }} /></div>
+            </div>
+          </div>
+          <div className='col-md-10'>
+            {
+              selectedContent === RENAMES.ROOM ? <Room /> : <User />
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsModal;

src/Components/SettingsModal/SettingsModal.scss

@@ -0,0 +1,65 @@
+@import "../../styles/variables.scss";
+
+.modal-background {
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(3px);
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+
+  .modal-container {
+    width: 500px;
+    height: 500px;
+    border-radius: 12px;
+    background-color: $blacksea;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    display: flex;
+    flex-direction: column;
+    padding: 25px;
+
+    .close-button {
+      display: flex;
+      justify-content: flex-end;
+      cursor: pointer;
+    }
+
+    .room-user-container {
+      div {
+        margin: 0 0 10px 0;
+        padding: 0 0 10px 20px;
+      }
+
+      .selected {
+        border-left: 3px solid $beyza;
+      }
+
+      .not-selected {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: $alihan; 
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: $navy; 
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: $light-navy; 
+  }
+

src/Components/SettingsModal/User/UserContainer.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Setting from '../Setting/Setting'
+import { faPen } from '@fortawesome/free-solid-svg-icons'
+
+import './UserContainer.scss';
+
+
+const props = {
+  inputProps: {
+    placeholder: "Regina Phalange"
+  },
+  icon: faPen,
+}
+
+const components = {
+  nameChanger: "nameChanger",
+  // permission: PermissionManager,
+};
+
+function UserContainer() {
+  return (
+    <div className="user-container">
+      <Setting settingType={components.nameChanger} title="Username" 
+        info="Your user name will be visible in the viewers list and the chat." {...props}  
+      />
+    </div>
+  )
+}
+
+export default UserContainer;

src/Components/SettingsModal/User/UserContainer.scss

@@ -0,0 +1,11 @@
+@import "../../../styles/variables.scss";
+
+.user-container {
+    margin: 0 10px 0 0;
+
+    .container-body {
+        background-color: $alihan;
+        padding: 20px;
+        border-radius: 5px;
+    }
+}

src/Constants/Renames.js

@@ -0,0 +1,7 @@
+const RENAMES = {
+    ROOM: 'room',
+    USER: 'user',
+  }
+
+  export default RENAMES;
+

src/Constants/SocketEvents.js

@@ -17,6 +17,8 @@ const SOCKET_EVENTS = {
   VIDEO_DURATION_CHANGED: 'video-duration-changed',
   SKIP_VIDEO: 'skip-video',
   VIDEO_SKIPPED: 'video-skipped',
+  CHANGE_NAME: 'change-name',
+  NAME_CHANGED: 'name-changed',
 };
 
 export default SOCKET_EVENTS;

src/Constants/index.js

@@ -1,9 +1,11 @@
 import SOCKET_EVENTS from './SocketEvents';
 import PLAYLIST_STATUS from './PlaylistStatus';
 import VIDEO_STATUS from './VideoStatus';
+import RENAMES from './Renames';
 
 export {
   SOCKET_EVENTS,
   PLAYLIST_STATUS,
   VIDEO_STATUS,
+  RENAMES,
 };

src/Contexts/NameChangerContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const NameChangerContext = createContext();
+
+export default NameChangerContext;

src/Contexts/SendMessageInputContext.js

@@ -1,3 +1,5 @@
 import { createContext } from "react";
 
-export const Context = createContext();
+const SendMessageInputContext = createContext();
+
+export default SendMessageInputContext;

src/Contexts/index.js

@@ -0,0 +1,7 @@
+import NameChangerContext from './NameChangerContext';
+import SendMessageInputContext from './SendMessageInputContext';
+
+export {
+    NameChangerContext,
+    SendMessageInputContext,
+};