l-min-components 1.7.1544 → 1.7.1545

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1544",
+  "version": "1.7.1545",
   "type": "module",
   "files": [
     "src/assets",
@@ -28,6 +28,7 @@
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "emoji-picker-react": "^4.12.0",
+    "emojibase-data": "^16.0.3",
     "hls.js": "^1.6.11",
     "html-to-draftjs": "^1.5.0",
     "i": "^0.3.7",

package/src/components/TextEditor2/emojiModal.jsx

@@ -1,24 +1,159 @@
-import React from "react";
-import EmojiPicker from "emoji-picker-react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import useTranslation from "../../hooks/useTranslation.jsx";
 import wordStore from "../../mc/wordStore.json";
+
+import data from "emojibase-data/en/data.json";
+
+// NOTE: SearchComponent is no longer needed/imported
+// import { SearchComponent } from "../index.js";
+
 const EmojiModal = ({ onChange }) => {
   const { findText } = useTranslation(wordStore);
+  const HIGH_PRIORITY_GROUPS = [0, 1];
+
+  // 1. Removed useState and handleSearchChange as search is removed
+
+  const displayedEmojis = useMemo(() => {
+    if (!Array.isArray(data)) return [];
+
+    // Helper to extract text sources once
+    const getTextSources = (emoji) => {
+      return [
+        emoji.annotation,
+        emoji.name,
+        emoji.shortcodes && emoji.shortcodes.join?.(" "),
+        emoji.keywords && emoji.keywords.join?.(" "),
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+    };
+
+    const isFaceOrHand = (emoji) => {
+      const emojiChar = emoji.emoji || "";
+      const textSources = getTextSources(emoji);
+
+      // --- 1. EXCLUSION: TARGETED EMOJIS (UPDATED) ---
+
+      // NEW EXCLUSION LIST: Blue Heart, Shaking Face, Flying Saucer, Pushing Hands, Goose
+      if (
+        emojiChar === "🩶" ||
+        emojiChar === "🩵" || // NEW: Light Blue Heart
+        emojiChar === "𫸸" || // NEW: Rightwards Pushing Hand (if standard emoji)
+        emojiChar === "𫆶" || // NEW: Goose (if standard emoji)
+        emojiChar === "𫩠" || // NEW: Wing (if standard emoji)
+        emojiChar === "𫩞" // NEW: Coral (if standard emoji)
+      )
+        return false;
+
+      // NOTE: 𫸸, 𫆶, etc., are in the private use area and might not render/filter properly
+      // depending on how emojibase handles them. Using the more common representations:
+      if (
+        emojiChar === "🫨" || // Shaking Face
+        emojiChar === "🫩" || // Mini Jet
+        emojiChar === "🫷" || // Leftwards Pushing Hand
+        emojiChar === "🫸" || // Rightwards Pushing Hand
+        emojiChar === "🫆" // Goose
+      )
+        return false;
+
+      // Exclude Directional Action ZWJ sequences (e.g., 🏃‍♂️‍➡️)
+      if (emojiChar.includes("➡️") || emojiChar.includes("←")) return false;
+
+      // Exclude ZWJ faces with arrows (↕️, ↔️)
+      if (
+        emojiChar.includes("↕️") ||
+        emojiChar.includes("↔️") ||
+        emojiChar.includes("⬆️") ||
+        emojiChar.includes("⬇️")
+      )
+        return false;
+
+      // Exclude ZWJ job roles (💻, ⚕️, 🌾, 🧑‍)
+      if (
+        emojiChar.includes("💻") ||
+        emojiChar.includes("⚕️") ||
+        emojiChar.includes("🌾") ||
+        emojiChar.includes("🧑‍")
+      )
+        return false;
+
+      // Arrow/Direction Text Exclusion (for non-face symbols)
+      if (
+        textSources.includes("arrow") ||
+        textSources.includes("direction") ||
+        (emoji.group === 6 &&
+          (textSources.includes("right") || textSources.includes("left")))
+      ) {
+        return false;
+      }
+
+      // --- 2. INCLUSION: Logic to keep faces/hands/hearts ---
+      const subgroup = emoji.subgroup;
+      if (typeof subgroup === "string") {
+        const s = subgroup.toLowerCase();
+        if (s.startsWith("face") || s.startsWith("hand") || s.includes("hand"))
+          return true;
+      }
+
+      if (
+        typeof emoji.group === "number" &&
+        HIGH_PRIORITY_GROUPS.includes(emoji.group)
+      )
+        return true;
+
+      if (textSources) {
+        if (
+          textSources.includes("face") ||
+          textSources.includes("hand") ||
+          textSources.includes("finger") ||
+          textSources.includes("heart") ||
+          textSources.includes("love")
+        ) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    // 1. Filtering (only Faces, Hands, Hearts remain, with all exclusions applied)
+    const filtered = data.filter(isFaceOrHand);
+
+    // 2. Sorting (Priority groups 0 and 1 remain at the top)
+    filtered.sort((a, b) => {
+      const isAPriority = HIGH_PRIORITY_GROUPS.includes(a.group);
+      const isBPriority = HIGH_PRIORITY_GROUPS.includes(b.group);
+
+      if (isAPriority && !isBPriority) return -1;
+      if (!isAPriority && isBPriority) return 1;
+
+      if (a.group !== b.group) return (a.group ?? 0) - (b.group ?? 0);
+
+      return (a.order ?? 0) - (b.order ?? 0);
+    });
+
+    return filtered;
+  }, [data]); // Removed searchQuery from dependencies
+
   return (
     <Container>
-      <EmojiPicker
-        theme={findText("light")}
-        searchDisabled
-        skinTonesDisabled
-        emojiStyle={findText("apple")}
-        width={270}
-        height={300}
-        onEmojiClick={onChange}
-      />
+      <Grid>
+        {displayedEmojis?.map((emoji) => (
+          <button
+            key={emoji?.hexcode}
+            onClick={() => onChange(emoji)}
+            title={emoji?.label}
+          >
+            {emoji?.emoji}
+          </button>
+        ))}
+      </Grid>
     </Container>
   );
 };
+
+// ... (Styled components remain the same) ...
 const Container = styled.div`
   background-color: #fff;
   width: fit-content;
@@ -26,13 +161,57 @@ const Container = styled.div`
   z-index: 3;
   left: 0;
   bottom: 40px;
+  width: 263px;
+  border-radius: 12px;
+  padding: 12px;
+
   .epr-main {
-    background-color: #fff;
+    background-color: #fff !important;
   }
 
   .epr-header,
   .epr-emoji-category-label {
-    display: none;
+    display: none !important;
+  }
+
+  .epr-body {
+    overflow-y: auto !important;
+    max-height: 300px !important;
+    scrollbar-width: thin;
+    will-change: transform;
+    transform: translateZ(0);
+  }
+`;
+
+export const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  gap: 8px;
+  height: 280px;
+  overflow-y: auto;
+  button {
+    width: 52px;
+    height: 52px;
+    display: grid;
+    place-items: center;
+    font-size: 24px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    border-radius: 10px;
+    transition: background 0.2s ease, transform 0.15s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.08); /* light gray hover */
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.97);
+      background: rgba(0, 0, 0, 0.12);
+    }
   }
 `;
+
 export default EmojiModal;

package/src/components/TextEditor2/tools.jsx

@@ -100,7 +100,7 @@ const List = ({ currentState, onChange }) => {
         aria-selected={currentState?.listType === "unordered"}
         title={findText("Unordered")}
         onClick={() => {
-          onChange('unordered');
+          onChange("unordered");
         }}
       >
         <ListIcon />
@@ -120,9 +120,9 @@ const Colors = ({ onChange, expanded, onExpandEvent, currentState }) => {
     >
       {expanded && (
         <ColorModal
-          color={currentState?.color || '#000000'}
+          color={currentState?.color || "#000000"}
           onChange={(v) => {
-            onChange('color', v?.hex);
+            onChange("color", v?.hex);
           }}
         />
       )}
@@ -194,7 +194,7 @@ const Fontsize = ({ onExpandEvent, expanded, onChange, currentState }) => {
                   onChange(i);
                 }}
               >
-                {i}{' '}
+                {i}{" "}
               </li>
             ))}
           </ul>

package/src/components/textEditor/index.jsx

@@ -9,10 +9,10 @@ import ButtonComponent from "../button";
 import OutsideAlerter from "../outsideEventChecker";
 // import { fontList } from "../../pages/createLectures/defaults";
 
-import EmojiPicker from 'emoji-picker-react';
-import Grammerly from './assets/grammerly';
-import { CompactPicker } from 'react-color';
-import ColorModal from './colorModal';
+import EmojiPicker from "emoji-picker-react";
+import Grammerly from "./assets/grammerly";
+import { CompactPicker } from "react-color";
+import ColorModal from "./colorModal";
 
 /**
  * @param {{
@@ -127,6 +127,7 @@ const TextEditor = ({
                   previewConfig={{
                     showPreview: false,
                   }}
+                  searchPlaceholder=""
                 />
               </div>
             )}
@@ -142,7 +143,7 @@ const TextEditor = ({
                   color={fontColor}
                   onChangeComplete={(color) => {
                     setFontColor(color.hex);
-                    toggleMark(editor, 'color', color.hex);
+                    toggleMark(editor, "color", color.hex);
                   }}
                 />
               </div>
@@ -190,7 +191,7 @@ const TextEditor = ({
                     }}
                     dropdownData={fontSizes()}
                     onSelect={({ name }) => {
-                      toggleMark(editor, 'fontSize', name);
+                      toggleMark(editor, "fontSize", name);
                     }}
                   />
                 </div>
@@ -210,7 +211,7 @@ const TextEditor = ({
                       ref={colorInput}
                       onChange={(e) => {
                         setFontColor(e.target.value);
-                        toggleMark(editor, 'color', e.target.value);
+                        toggleMark(editor, "color", e.target.value);
                       }}
                     />
                     <div
@@ -224,30 +225,30 @@ const TextEditor = ({
                 </div>
                 <div className="font-style">
                   <div
-                    className={boldActive ? 'active' : ''}
+                    className={boldActive ? "active" : ""}
                     onMouseDown={(event) => {
                       event.preventDefault();
-                      toggleMark(editor, 'bold');
+                      toggleMark(editor, "bold");
                       setBoldActive(!boldActive);
                     }}
                   >
                     <BoldIcons />
                   </div>
                   <div
-                    className={italicActive ? 'active' : ''}
+                    className={italicActive ? "active" : ""}
                     onMouseDown={(event) => {
                       event.preventDefault();
-                      toggleMark(editor, 'italic');
+                      toggleMark(editor, "italic");
                       setItalicActive(!italicActive);
                     }}
                   >
                     <ItalicIcon />
                   </div>
                   <div
-                    className={underlinective ? 'active' : 'underline'}
+                    className={underlinective ? "active" : "underline"}
                     onMouseDown={(event) => {
                       event.preventDefault();
-                      toggleMark(editor, 'underline');
+                      toggleMark(editor, "underline");
                       setUnderlineActive(!underlinective);
                     }}
                   >
@@ -256,10 +257,10 @@ const TextEditor = ({
                 </div>
                 <div className="alignments">
                   <div
-                    className={leftActive ? 'a-left active' : 'a-left'}
+                    className={leftActive ? "a-left active" : "a-left"}
                     onMouseDown={(event) => {
                       event.preventDefault();
-                      toggleMark(editor, 'textAlign', 'left');
+                      toggleMark(editor, "textAlign", "left");
                       setLeftActive(!leftActive);
                       setCenterActive(false);
                       setRightActive(false);
@@ -268,10 +269,10 @@ const TextEditor = ({
                     <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');
+                      toggleMark(editor, "textAlign", "center");
                       setCenterActive(!centerActive);
                       setLeftActive(false);
                       setRightActive(false);
@@ -280,10 +281,10 @@ const TextEditor = ({
                     <TextAlignCenterIcon />
                   </div>
                   <div
-                    className={rightActive ? 'a-right active' : 'a-right'}
+                    className={rightActive ? "a-right active" : "a-right"}
                     onMouseDown={(event) => {
                       event.preventDefault();
-                      toggleMark(editor, 'textAlign', 'right');
+                      toggleMark(editor, "textAlign", "right");
                       setRightActive(!rightActive);
                       setCenterActive(false);
                       setLeftActive(false);
@@ -294,9 +295,9 @@ const TextEditor = ({
                 </div>
                 <div className="list">
                   <div
-                    className={listActive ? 'list-icon active' : 'list-icon'}
+                    className={listActive ? "list-icon active" : "list-icon"}
                     onClick={() => {
-                      toggleMark(editor, 'list');
+                      toggleMark(editor, "list");
                       setListActive(!listActive);
                     }}
                   >
@@ -307,7 +308,7 @@ const TextEditor = ({
                    </div> */}
                 </div>
                 <button
-                  className={active ? 'emoji_button_active' : 'emoji_button'}
+                  className={active ? "emoji_button_active" : "emoji_button"}
                   // onClick={handleEmojiButton}
                   onMouseDown={(e) => {
                     e.preventDefault();
@@ -323,13 +324,13 @@ const TextEditor = ({
                 <ButtonComponent
                   text={findText("Create Announcement")}
                   styles={{
-                    fontSize: '18px',
-                    width: '30%',
+                    fontSize: "18px",
+                    width: "30%",
                     // textAlign: "center",
-                    padding: '8px 17px',
-                    borderRadius: '12px',
-                    marginTop: '15px',
-                    height: '50px',
+                    padding: "8px 17px",
+                    borderRadius: "12px",
+                    marginTop: "15px",
+                    height: "50px",
                     // marginLeft: "15px",
                   }}
                   onClick={click}
@@ -439,14 +440,14 @@ const BoldIcons = (props) => (
   >
     <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'}
+      stroke={props.stroke ?? "#313333"}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M5.80664 12.7734H15.3066C17.9266 12.7734 20.0566 14.9034 20.0566 17.5234C20.0566 20.1434 17.9266 22.2734 15.3066 22.2734H7.80664C6.70664 22.2734 5.80664 21.3734 5.80664 20.2734V12.7734V12.7734Z"
-      stroke={props.stroke ?? '#313333'}
+      stroke={props.stroke ?? "#313333"}
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"

package/src/components/video-player/index.jsx

@@ -175,10 +175,12 @@ const VideoPlayer2 = ({
         hlsRef.current?.loadSource(url);
       });
       hlsRef.current?.on(Hls.Events.LEVEL_SWITCHED, (val) => {
-        // setIsReady(true);
-        // setError(null);
-        // if (val === "hlsLevelSwitched") {
-        // }
+        setIsReady(true);
+        setError(null);
+        if (val === "hlsLevelSwitched") {
+          setIsReady(true);
+          setError(null);
+        }
       });
       hlsRef.current?.on(Hls.Events.LEVEL_LOADING, (val) => {
         if (val === "hlsLevelLoading") {