l-min-components 1.0.445 → 1.0.449

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.445",
+  "version": "1.0.449",
   "type": "module",
   "files": [
     "src/assets",
@@ -37,7 +37,6 @@
     "react-input-emoji": "^5.3.1",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
-    "react-player": "2.12.0",
     "react-router-dom": "^6.8.2",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.10.1",

package/src/components/messageAddon/messages/message-modals/deleteChat-modal.jsx

@@ -8,7 +8,7 @@ import {
 } from "./index.styled";
 import { IoMdClose } from "react-icons/io";
 import Modal from "react-modal";
-import { ButtonComponent } from "l-min-components/src/components";
+import ButtonComponent from "../../../button";
 import { WarningIcon } from "../../assets/svg/warning";
 import useMessaging from "../../hooks/useMessaging";
 

package/src/components/messageAddon/messages/message-modals/report-modal.jsx

@@ -9,7 +9,7 @@ import {
 } from "./index.styled";
 import { IoMdClose } from "react-icons/io";
 import Modal from "react-modal";
-import { ButtonComponent } from "l-min-components/src/components";
+import ButtonComponent from "../../../button";
 import { WarningIcon } from "../../assets/svg/warning";
 import useMessaging from "../../hooks/useMessaging";
 import { toast } from "react-toastify";

package/src/components/messageAddon/messages/messagebox/messageBubble.jsx

@@ -3,7 +3,8 @@ import moment from "moment";
 import { CheckCircleIcon } from "../../assets/svg/check_circle";
 import { MessageBox } from "../index.styled";
 import { getCookie } from "../../utils/helpers";
-import { Loader, OutletContext } from "l-min-components/src/components";
+import Loader from "../../../loader";
+import { OutletContext } from "../../../AppMainLayout";
 import WaveSurferPlayer from "./waveSurferPlayer";
 import { SendingStatusIcon } from "../../assets/svg/sending_status";
 

package/src/components/messageAddon/messages/messages.jsx

@@ -23,11 +23,11 @@ import ChatHeader from "./chatheader";
 import { getCookie } from "../utils/helpers";
 import useRooms from "../hooks/useRooms";
 import { NoMessage } from "../assets/svg/noMessage";
-import { Loader, OutletContext } from "l-min-components/src/components";
+import Loader from "../../loader";
+import { OutletContext } from "../../AppMainLayout";
 import { toast } from "react-toastify";
 import DeleteChatModal from "./message-modals/deleteChat-modal";
 import MessagesContext, { useMessagesContext } from "../hooks/messagesContext";
-import { ButtonComponent } from "l-min-components/src/components";
 import { BsFunnel } from "react-icons/bs";
 import { BsChevronDown } from "react-icons/bs";
 import { MdOutlineClose } from "react-icons/md";
@@ -59,7 +59,7 @@ const Messages = ({ close }) => {
   // } = useContext(MessagesContext);
   const { generalData, setRightLayout } = useContext(OutletContext);
   const [socketUrl, setSocketUrl] = useState(
-    "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
+    "dev-117782726-api.learngual.com/notify/v1/ws/connect/",
   );
   const [roomID, setRoomID] = useState("");
   const [userID, setUserID] = useState("");
@@ -159,7 +159,7 @@ const Messages = ({ close }) => {
 
   console.log("account_id", account_id);
   const websocket = new WebSocket(
-    `wss://${socketUrl}?account=${account_id}&authorization=${token}`
+    `wss://${socketUrl}?account=${account_id}&authorization=${token}`,
   );
 
   useEffect(() => {
@@ -211,7 +211,7 @@ const Messages = ({ close }) => {
     const sortedList = chatListCopy?.sort(
       (chatA, chatB) =>
         new Date(chatA.last_message.created_at).getTime() -
-        new Date(chatB.last_message.created_at).getTime()
+        new Date(chatB.last_message.created_at).getTime(),
     );
 
     setUserChatList(sortedList);
@@ -336,24 +336,23 @@ const Messages = ({ close }) => {
                 )}
               </MessageBody>
               <div className="input">
-              <InputSection
-                setShowEmoji={setShowEmoji}
-                userID={userID}
-                setPreviewModalIsOpen={setPreviewModalIsOpen}
-                mediaForm={mediaForm}
-                setMediaForm={setMediaForm}
-                setAllMessages={setAllMessages}
-                allMessages={allMessages}
-                newMessages={newMessages}
-                setNewMessages={setNewMessages}
-                setIsMessageSending={setIsMessageSending}
-                lastMessage={lastMessage}
-                setLastMessage={setLastMessage}
-                handleRoomMessage={handleRoomMessage}
-                roomID={roomID}
-              />
+                <InputSection
+                  setShowEmoji={setShowEmoji}
+                  userID={userID}
+                  setPreviewModalIsOpen={setPreviewModalIsOpen}
+                  mediaForm={mediaForm}
+                  setMediaForm={setMediaForm}
+                  setAllMessages={setAllMessages}
+                  allMessages={allMessages}
+                  newMessages={newMessages}
+                  setNewMessages={setNewMessages}
+                  setIsMessageSending={setIsMessageSending}
+                  lastMessage={lastMessage}
+                  setLastMessage={setLastMessage}
+                  handleRoomMessage={handleRoomMessage}
+                  roomID={roomID}
+                />
               </div>
-             
             </>
           </CardContainer>
 

package/src/components/textEditor/index.jsx

@@ -4,29 +4,28 @@ import MoveUpDownWhite from "./assets/moveUppDownWhite";
 import "./style.scss";
 import { createEditor, Editor, Transforms } from "slate";
 import { Slate, Editable, withReact } from "slate-react";
-import { DropDownComponent,ButtonComponent, } from "l-min-components/src/components";
+import DropDownComponent from "../dropdown component";
+import ButtonComponent from "../button";
 // import { fontList } from "../../pages/createLectures/defaults";
 import EmojiPicker from "emoji-picker-react";
 import Grammerly from "./assets/grammerly";
-import { CompactPicker } from 'react-color'
+import { CompactPicker } from "react-color";
 import ColorModal from "./colorModal";
 
 /**
  * @param {{
-* valueData: Object,
-* placeHolder: string,
-* }} props - properties of the editor
-*/
+ * valueData: Object,
+ * placeHolder: string,
+ * }} props - properties of the editor
+ */
 
 const TextEditor = ({
   valueData,
   showOptions,
   announce,
-  click,  
+  click,
   placeHolder,
-  
 }) => {
-
   const [heading, setHeading] = useState("");
   const [value, setValue] = useState(valueData);
   const editor = useMemo(() => withReact(createEditor()), []);
@@ -49,14 +48,14 @@ const TextEditor = ({
     event.preventDefault();
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setShowEmoji(false);
-      setActive(false)
-     }
+      setActive(false);
+    }
   };
 
   useEffect(() => {
-    document.addEventListener('click', handleClickOutside);
+    document.addEventListener("click", handleClickOutside);
     return () => {
-      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener("click", handleClickOutside);
     };
   }, []);
 
@@ -70,7 +69,7 @@ const TextEditor = ({
       // setActive(false)
     }
   };
-  
+
   const isMarkActive = (editor, format) => {
     const marks = Editor.marks(editor);
     return marks ? marks[format] === true : false;
@@ -89,13 +88,12 @@ const TextEditor = ({
     return numbers;
   }, []);
 
- 
   const handleEmojiButton = () => {
     setShowEmoji(!showEmoji);
   };
 
   const insertEmoji = useCallback((emoji) => {
-    editor.insertText(emoji)
+    editor.insertText(emoji);
   }, []);
 
   return (
@@ -107,59 +105,69 @@ const TextEditor = ({
         onChange={(val) => {
           setValue(val);
         }}
-        >
+      >
         <div className="editor-wrapper">
-           {showEmoji && (
-              <div
-                className="emoji_picker"
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                }}>
-                <EmojiPicker
-                  onEmojiClick={(data) => {
-                    insertEmoji(data.emoji);
-                  }}
-                  autoFocusSearch={false}
-                  suggestedEmojisMode="frequent"
-                  lazyLoadEmojis={true}
-                  previewConfig={{
-                    showPreview: false,
-                  }}
-                />
-              </div>
-            )}
-             <ColorModal isOpen={showColor} onClose={() => setShowColor(false)}   display={"none"} marginLeft={"0%"} top={"6%"} > 
-                 <div className="color_picker">
-                  <CompactPicker
-                    color={fontColor}
-                    onChangeComplete={(color) => {
-                        setFontColor(color.hex);
-                        toggleMark(editor, "color", color.hex);
-                    }}
-                  />                
-                 </div>                 
-                </ColorModal>
+          {showEmoji && (
+            <div
+              className="emoji_picker"
+              onMouseDown={(e) => {
+                e.preventDefault();
+              }}
+            >
+              <EmojiPicker
+                onEmojiClick={(data) => {
+                  insertEmoji(data.emoji);
+                }}
+                autoFocusSearch={false}
+                suggestedEmojisMode="frequent"
+                lazyLoadEmojis={true}
+                previewConfig={{
+                  showPreview: false,
+                }}
+              />
+            </div>
+          )}
+          <ColorModal
+            isOpen={showColor}
+            onClose={() => setShowColor(false)}
+            display={"none"}
+            marginLeft={"0%"}
+            top={"6%"}
+          >
+            <div className="color_picker">
+              <CompactPicker
+                color={fontColor}
+                onChangeComplete={(color) => {
+                  setFontColor(color.hex);
+                  toggleMark(editor, "color", color.hex);
+                }}
+              />
+            </div>
+          </ColorModal>
           <div className="editor_area">
-             {announce && (
-                <input
+            {announce && (
+              <input
                 placeholder="Announcement Heading"
                 value={heading}
                 onChange={(e) => setHeading(e.target.value)}
               />
-              )}
-           
+            )}
+
             <div className="editable">
-              <Editable renderLeaf={(props) => <Leaf {...props} />} placeholder={placeHolder} />
+              <Editable
+                renderLeaf={(props) => <Leaf {...props} />}
+                placeholder={placeHolder}
+              />
             </div>
           </div>
-           
 
           <div className="bottom">
             <div
               className="tool-bar"
               onMouseDown={(e) => {
                 e.preventDefault();
-              }}>
+              }}
+            >
               {/* <div className="font">
                 <DropDownComponent
                   className="font-dd"
@@ -187,7 +195,8 @@ const TextEditor = ({
                   e.preventDefault();
                   colorInput.current.click();
                   setShowColor((state) => !state);
-                }}>
+                }}
+              >
                 <div className="wrap">
                   <input
                     type="color"
@@ -212,8 +221,9 @@ const TextEditor = ({
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "bold");
-                    setBoldActive(!boldActive)
-                  }}>
+                    setBoldActive(!boldActive);
+                  }}
+                >
                   <BoldIcons />
                 </div>
                 <div
@@ -221,17 +231,19 @@ const TextEditor = ({
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "italic");
-                    setItalicActive(!italicActive)
-                  }}>
+                    setItalicActive(!italicActive);
+                  }}
+                >
                   <ItalicIcon />
                 </div>
                 <div
-                  className={underlinective ? "active" : "underline"} 
+                  className={underlinective ? "active" : "underline"}
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "underline");
-                    setUnderlineActive(!underlinective)
-                  }}>
+                    setUnderlineActive(!underlinective);
+                  }}
+                >
                   <UnderlineIcon />
                 </div>
               </div>
@@ -241,21 +253,23 @@ const TextEditor = ({
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "textAlign", "left");
-                    setLeftActive(!leftActive)
-                    setCenterActive(false)
-                    setRightActive(false)
-                  }}>
+                    setLeftActive(!leftActive);
+                    setCenterActive(false);
+                    setRightActive(false);
+                  }}
+                >
                   <TextAlignLeftIcon />
                 </div>
                 <div
-                  className={centerActive ? "a-center active" : "a-center"} 
+                  className={centerActive ? "a-center active" : "a-center"}
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "textAlign", "center");
-                    setCenterActive(!centerActive)
-                    setLeftActive(false)
-                    setRightActive(false)
-                  }}>
+                    setCenterActive(!centerActive);
+                    setLeftActive(false);
+                    setRightActive(false);
+                  }}
+                >
                   <TextAlignCenterIcon />
                 </div>
                 <div
@@ -263,40 +277,43 @@ const TextEditor = ({
                   onMouseDown={(event) => {
                     event.preventDefault();
                     toggleMark(editor, "textAlign", "right");
-                    setRightActive(!rightActive)
-                    setCenterActive(false)
-                    setLeftActive(false)
-                  }}>
+                    setRightActive(!rightActive);
+                    setCenterActive(false);
+                    setLeftActive(false);
+                  }}
+                >
                   <TextAlignRight />
                 </div>
               </div>
-              <div className="list" >
+              <div className="list">
                 <div
                   className={listActive ? "list-icon active" : "list-icon"}
                   onClick={() => {
                     toggleMark(editor, "list");
-                    setListActive(!listActive)
-                  }}>
+                    setListActive(!listActive);
+                  }}
+                >
                   <ListIcon />
                 </div>
                 {/* <div className="first-line-icon">
                   <FirstLineIcon />
                 </div> */}
               </div>
-              <button className={active ? "emoji_button_active" : "emoji_button" } 
-              // onClick={handleEmojiButton}   
-              onMouseDown={(e) => {
-                e.preventDefault();
-                setShowEmoji((state) => !state);
-                setActive(!active)
-              }}
+              <button
+                className={active ? "emoji_button_active" : "emoji_button"}
+                // onClick={handleEmojiButton}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  setShowEmoji((state) => !state);
+                  setActive(!active);
+                }}
               >
                 {" "}
-                  <Grammerly />{" "}
+                <Grammerly />{" "}
               </button>
             </div>
             {announce && (
-                <ButtonComponent
+              <ButtonComponent
                 text="Create Announcement"
                 styles={{
                   fontSize: "18px",
@@ -309,7 +326,7 @@ const TextEditor = ({
                   // marginLeft: "15px",
                 }}
                 onClick={click}
-            />
+              />
             )}
           </div>
         </div>
@@ -393,7 +410,8 @@ const BoldIcons = (props) => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M5.80664 5.27344C5.80664 4.17344 6.70664 3.27344 7.80664 3.27344H12.9266C15.5466 3.27344 17.6766 5.40344 17.6766 8.02344C17.6766 10.6434 15.5466 12.7734 12.9266 12.7734H5.80664V5.27344Z"
       stroke={props.stroke ?? "#313333"}
@@ -417,7 +435,8 @@ const ItalicIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M10.5449 3.77344H19.7949"
       stroke="#949999"
@@ -448,7 +467,8 @@ const UnderlineIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M5.92578 21.7734H19.9258"
       stroke="#949999"
@@ -472,7 +492,8 @@ const ArrowDown = () => (
     height="15"
     viewBox="0 0 15 15"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M12.5466 5.99219L8.74331 9.79552C8.29414 10.2447 7.55914 10.2447 7.10997 9.79552L3.30664 5.99219"
       stroke="#949999"
@@ -490,7 +511,8 @@ const TextAlignLeftIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M3.92578 5.27344H21.9258"
       stroke="#949999"
@@ -528,7 +550,8 @@ const TextAlignCenterIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M3.92578 5.27344H21.9258"
       stroke="#949999"
@@ -566,7 +589,8 @@ const TextAlignRight = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M3.92578 5.27344H21.9258"
       stroke="#949999"
@@ -604,7 +628,8 @@ const ListIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M11.9258 20.2734H21.9258"
       stroke="#949999"
@@ -656,7 +681,8 @@ const FirstLineIcon = () => (
     height="25"
     viewBox="0 0 25 25"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg">
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M14.9258 5.27344H21.9258"
       stroke="#949999"