@nualang/nualang-ui-components 0.1.1210 → 0.1.1212

package/dist/Cards/Category/Category.js

@@ -7,6 +7,8 @@ exports.default = Category;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _CardElements = require("../CardElements");
+var _styles = require("@mui/material/styles");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Category({
@@ -17,17 +19,26 @@ function Category({
   backgroundColor = "#B103D8",
   handleSelectCategory
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardElements.CardContainer, {
+  const theme = (0, _styles.useTheme)();
+  const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Card, {
     sx: {
-      maxWidth: 450,
-      minHeight: 160,
+      minHeight: isSmallScreen ? 40 : 150,
       background: backgroundColor,
       color: "white",
       position: "relative",
       display: "flex",
       flexDirection: "column",
       justifyContent: "space-between",
-      overflow: "hidden"
+      overflow: "hidden",
+      cursor: "pointer",
+      transition: "transform 0.3s ease, box-shadow 0.3s ease",
+      height: "100%",
+      borderRadius: theme.spacing(2),
+      "&:hover": {
+        boxShadow: "5px 10px 30px rgba(0, 0, 0, 0.15)",
+        transform: "translateY(5px)"
+      }
     },
     onClick: () => handleSelectCategory(searchString || categoryTitle),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -65,7 +76,7 @@ function Category({
         },
         children: !!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           sx: {
-            fontSize: 100,
+            fontSize: isSmallScreen ? 70 : 100,
             position: "absolute",
             bottom: 10,
             right: 10
@@ -80,7 +91,7 @@ function Category({
         bottom: 10,
         right: 0,
         borderRadius: "8px",
-        width: "180px",
+        width: isSmallScreen ? "85px" : "200px",
         transform: "rotate(10deg)"
       }
     })]

package/dist/Lists/Categories/Categories.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _material = require("@mui/material");
 var _Category = _interopRequireDefault(require("../../Cards/Category/Category"));
+var _styles = require("@mui/material/styles");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CategoryList({
@@ -15,42 +17,35 @@ function CategoryList({
   categories,
   currentLanguage,
   handleSelectCategory,
-  singleLineGrid = false,
-  singleLineGridCols = 3,
+  isCategoriesLoading,
   ...otherProps
 }) {
-  if (!categories) {
+  const theme = (0, _styles.useTheme)();
+  const isSmallScreen = (0, _useMediaQuery.default)(theme.breakpoints.down("sm"));
+  if (isCategoriesLoading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
-      children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
-        cols: singleLineGridCols,
-        rowHeight: "auto",
-        gap: 0,
-        children: new Array(5).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
-          justifyContent: "center",
-          item: true,
-          xs: 12,
-          sm: 6,
-          md: 4,
-          lg: 4,
-          xl: 4,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Category.default, {
-              t: t
-            })
-          })
-        }, index))
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         container: true,
+        direction: "row",
         justifyContent: "center",
-        children: new Array(5).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+        alignItems: "stretch",
+        flexWrap: "wrap",
+        spacing: 2,
+        children: new Array(3).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
           item: true,
           xs: 12,
           sm: 6,
-          md: 3,
-          lg: 3,
-          xl: 3,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Category.default, {
-            t: t
+          lg: 4,
+          sx: {
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "rectangular",
+            sx: {
+              minHeight: isSmallScreen ? 40 : 150,
+              borderRadius: theme.spacing(2)
+            }
           })
         }, index))
       })
@@ -63,14 +58,12 @@ function CategoryList({
       justifyContent: "center",
       alignItems: "stretch",
       flexWrap: "wrap",
-      spacing: 3,
-      children: categories.map((category, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
+      spacing: 2,
+      children: categories && categories.length && !isCategoriesLoading && categories.map((category, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
         item: true,
         xs: 12,
         sm: 6,
-        md: 4,
         lg: 4,
-        xl: 4,
         sx: {
           justifyContent: "center",
           alignItems: "center"
@@ -81,8 +74,8 @@ function CategoryList({
           backgroundColor: category?.color || '#B103D8',
           searchString: category?.searchString,
           categoryTitle: category?.languages?.[currentLanguage] || category?.categoryName,
-          image: category?.url || category?.image,
-          Icon: category?.Icon,
+          image: category?.categoryImage || category?.url,
+          Icon: category?.Icon || null,
           handleSelectCategory: handleSelectCategory
         })
       }, index))
@@ -93,11 +86,9 @@ CategoryList.propTypes = {
   t: _propTypes.default.func,
   categories: _propTypes.default.arrayOf(_propTypes.default.shape({
     categoryTitle: _propTypes.default.string,
-    image: _propTypes.default.string,
+    categoryImage: _propTypes.default.string,
     Icon: _propTypes.default.string
   })).isRequired,
-  handleSelectCategory: _propTypes.default.func,
-  singleLineGrid: _propTypes.default.bool,
-  singleLineGridCols: _propTypes.default.number
+  handleSelectCategory: _propTypes.default.func
 };
 var _default = exports.default = CategoryList;

package/dist/Screens/Dashboard/Dashboard.js

@@ -4,15 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Dashboard;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _mui = require("tss-react/mui");
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _Courses = _interopRequireDefault(require("../../Lists/Courses"));
 var _Categories = _interopRequireDefault(require("../../Lists/Categories/Categories"));
+var _Queries = require("@nualang/nualang-api-and-queries/Queries");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useStyles = (0, _mui.makeStyles)()(theme => ({
   root: {
     height: "100%",
@@ -40,6 +43,56 @@ const useStyles = (0, _mui.makeStyles)()(theme => ({
     }
   }
 }));
+const CategoryListComponent = ({
+  categoryType,
+  learnLang,
+  getCategories,
+  handleSelectCategory,
+  currentLanguage,
+  t,
+  classes
+}) => {
+  const encodedCategoryType = encodeURIComponent(`${learnLang}|${categoryType}`);
+  const categoriesQuery = _Queries.categories.useCategories(async categoryType => {
+    const response = await getCategories(categoryType);
+    return response;
+  }, {
+    categoryType: encodedCategoryType
+  });
+  const isCategoriesLoading = categoriesQuery.isLoading;
+  const categories = categoriesQuery.isSuccess && Array.isArray(categoriesQuery.data.Items) && categoriesQuery.data.Items.length ? categoriesQuery.data.Items : [];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: process.env.REACT_APP_STAGE === "dev" && (isCategoriesLoading || categories.length > 0) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        pb: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.header,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.headerText,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "h5",
+              component: "h2",
+              children: categories.length > 0 ? t(categoryType) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+                variant: "rectangular",
+                height: 32,
+                width: 250
+              })
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Categories.default, {
+          t: t,
+          handleSelectCategory: handleSelectCategory,
+          currentLanguage: currentLanguage,
+          isCategoriesLoading: isCategoriesLoading,
+          categories: categories.length > 0 ? categories : []
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        pb: 2,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
+      })]
+    }) : null
+  });
+};
 function Dashboard({
   t = text => text,
   completions = [],
@@ -68,10 +121,11 @@ function Dashboard({
   username,
   memberId,
   handleDuplicateCourse,
-  categories = [],
+  learnLang,
+  getCategories,
+  handleSelectCategory,
   currentLanguage,
-  isCategoriesLoading = false,
-  handleSelectCategory = () => {}
+  categoryTypesArray
 }) {
   const {
     classes
@@ -88,45 +142,15 @@ function Dashboard({
           children: t(`explore`)
         })
       })
-    }), isCategoriesLoading || categories.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        pb: 2,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: classes.header,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: classes.headerText,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              variant: "h5",
-              component: "h2",
-              children: categories.length > 0 ? t("categories") : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
-                variant: "rectangular",
-                height: 32,
-                width: 250
-              })
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-            title: t("find_category"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
-              onClick: handleSearch,
-              "aria-label": t("find_category"),
-              color: "inherit",
-              "data-cy": "search-category-fab",
-              size: "large",
-              role: "link",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
-            })
-          })]
-        }), process.env.REACT_APP_STAGE === "dev" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Categories.default, {
-          t: t,
-          handleSelectCategory: handleSelectCategory,
-          currentLanguage: currentLanguage,
-          categories: Array.isArray(categories) && categories.length ? categories : null
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        pb: 2,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
-      })]
-    }) : null, isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }), categoryTypesArray?.[0] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
+      categoryType: categoryTypesArray[0],
+      learnLang: learnLang,
+      getCategories: getCategories,
+      handleSelectCategory: handleSelectCategory,
+      currentLanguage: currentLanguage,
+      t: t,
+      classes: classes
+    }), isPopularCoursesLoading || popularCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         pb: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -181,7 +205,15 @@ function Dashboard({
         pb: 2,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
       })]
-    }) : null, isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }) : null, categoryTypesArray?.[1] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
+      categoryType: categoryTypesArray[1],
+      learnLang: learnLang,
+      getCategories: getCategories,
+      handleSelectCategory: handleSelectCategory,
+      currentLanguage: currentLanguage,
+      t: t,
+      classes: classes
+    }), isRecommendedCoursesLoading || recommendedCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         pb: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -236,7 +268,15 @@ function Dashboard({
         pb: 2,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {})
       })]
-    }) : null, isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }) : null, categoryTypesArray?.[2] && /*#__PURE__*/(0, _jsxRuntime.jsx)(CategoryListComponent, {
+      categoryType: categoryTypesArray[2],
+      learnLang: learnLang,
+      getCategories: getCategories,
+      handleSelectCategory: handleSelectCategory,
+      currentLanguage: currentLanguage,
+      t: t,
+      classes: classes
+    }), isNewCoursesLoading || newCourses.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
         pb: 2,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/hooks/useRecognition.js

@@ -154,22 +154,12 @@ function useRecognition(props = {}) {
    */
   const initRecording = async (gcloudParams, onData, onError) => {
     try {
-      const {
-        mediaDevices
-      } = navigator;
-      const [availableMicrophones, activeMicrophone, sampleRate] = await (0, _index.getMicrophoneInfo)(mediaDevices);
       await setupAudioContext();
-      let sampleRateToUse = sampleRate;
-      if (sampleRate && sampleRate < 8000) {
-        sampleRateToUse = 8000;
-      } else if (sampleRate && sampleRate > 48000) {
-        sampleRateToUse = 48000;
-      }
       const handleSuccess = function (stream) {
         const gcloudConfig = {
           config: {
             encoding: "LINEAR16",
-            sampleRateHertz: sampleRateToUse || 16000,
+            sampleRateHertz: 16000,
             languageCode: gcloudParams.languageCode || "en-US",
             profanityFilter: true,
             enableWordTimeOffsets: false,
@@ -182,6 +172,7 @@ function useRecognition(props = {}) {
           interimResults: gcloudParams.interimResults // If you want interim results, set this to true
         };
         socket.emit("startGoogleCloudStream", gcloudConfig, version); // init socket Google Speech Connection
+
         streamRef.current = stream;
         audioInputRef.current = audioContextRef.current.createMediaStreamSource(stream);
         serverErrorRef.current = null;

package/dist/utils/index.js

@@ -454,12 +454,7 @@ const getMicrophoneInfo = async mediaDevices => {
     const availableMicrophoneNames = microphones?.filter(device => device.deviceId !== "default").map(device => device.label).join(", ") || "No available microphones detected";
     const activeMicrophone = microphones?.length > 0 ? microphones.find(mic => mic.deviceId === "default") || microphones[0] : null;
     const activeMicrophoneName = activeMicrophone?.label.split("Default - ").pop() || "No active microphone detected";
-
-    // Create an AudioContext with the stream from the active microphone
-
-    const capabilities = activeMicrophone.getCapabilities();
-    let sampleRate = capabilities?.sampleRate.max || capabilities?.sampleRate.exacty;
-    return [availableMicrophoneNames, activeMicrophoneName, sampleRate];
+    return [availableMicrophoneNames, activeMicrophoneName];
   } catch (error) {
     console.error("Error accessing the microphone:", error);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1210",
+  "version": "0.1.1212",
   "main": "dist/index.js",
   "files": [
     "dist",