Merge branch 'main' into fix-language-filter-1519

.all-contributorsrc

@@ -715,6 +715,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "saddamhr",
+      "name": "Md. Saddam Hossain",
+      "avatar_url": "https://avatars.githubusercontent.com/u/44530098?v=4",
+      "profile": "https://medium.com/@saddamhr",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1,7 +1,7 @@
 # ReactPlay(Repo: `react-play`)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-79-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-80-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -390,6 +390,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="http://priyank.live"><img src="https://avatars.githubusercontent.com/u/88102392?v=4?s=100" width="100px;" alt="Priyankar Pal"/><br /><sub><b>Priyankar Pal</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=priyankarpal" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Akshaygore1"><img src="https://avatars.githubusercontent.com/u/92959398?v=4?s=100" width="100px;" alt="Akshay Gore"/><br /><sub><b>Akshay Gore</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=Akshaygore1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@saddamhr"><img src="https://avatars.githubusercontent.com/u/44530098?v=4?s=100" width="100px;" alt="Md. Saddam Hossain"/><br /><sub><b>Md. Saddam Hossain</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=saddamhr" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

src/common/utils/coverImageUtil.js

@@ -1,14 +1,34 @@
 import FallbackImage from 'images/play-fallback-cover.png';
+import { IMAGE_EXTENSIONS, FULFILLED_STATUS } from './utilsConstants';
 
-export async function loadCoverImage(playSlug) {
-  const acceptedImgExtensions = [`png`, `jpg`, `jpeg`];
-  const imgPromises = acceptedImgExtensions.map((ext) => import(`plays/${playSlug}/cover.${ext}`));
+/**
+ * Tries to dynamically import the image with the given extension for the specified play slug.
+ *
+ * @param {string} playSlug - The slug of the play.
+ * @param {string} extension - The image extension (e.g., 'png', 'jpg').
+ * @returns {Promise} - A promise that resolves with the image or rejects if not found.
+ */
+const loadImageForExtension = (playSlug, extension) =>
+  import(`plays/${playSlug}/cover.${extension}`);
 
-  const response = await Promise.allSettled(imgPromises);
+/**
+ * Attempts to load the cover image for a play by trying multiple image formats.
+ * Falls back to a default image if none of the formats are available.
+ *
+ * @param {string} playSlug - The slug of the play.
+ * @returns {Promise} - A promise that resolves to the cover image or the fallback image.
+ */
+export const loadCoverImage = async (playSlug) => {
+  // const imagePromises = supportedExtensions.map((extension) =>
+  const imagePromises = IMAGE_EXTENSIONS.map((extension) =>
+    loadImageForExtension(playSlug, extension)
+  );
+
+  const results = await Promise.allSettled(imagePromises);
 
-  const fulfilledResult = response.find(
-    (result) => result.status === 'fulfilled' && result.value.default
+  const image = results.find(
+    (result) => result.status === FULFILLED_STATUS && result.value?.default
   );
 
-  return fulfilledResult?.value.default || FallbackImage;
-}
+  return image?.value.default || FallbackImage;
+};

src/common/utils/fakeUser.js

@@ -1,11 +1,30 @@
 import { faker } from '@faker-js/faker';
+import { USER_COUNT } from './utilsConstants';
 
-const THRESHOLD = 10000;
+/**
+ * Generates a single user object with random data.
+ *
+ * @returns {Object} - A user object containing name, avatar, and background.
+ */
+const generateUser = () => {
+  const { person, image } = faker;
 
-export const users = Array.from(Array(THRESHOLD), () => {
-  return {
-    name: faker.person.fullName(),
-    avatar: faker.image.avatar(),
-    background: faker.image.urlLoremFlickr({ category: 'nature' })
+  // Generate user information
+  const user = {
+    name: person.fullName(),
+    avatar: image.avatar(),
+    background: image.urlLoremFlickr({ category: 'nature' })
   };
-});
+
+  return user;
+};
+
+/**
+ * Generates an array of users with random data.
+ *
+ * @param {number} count - The number of users to generate.
+ * @returns {Array<Object>} - An array of user objects.
+ */
+const generateUsers = (count) => Array.from({ length: count }, generateUser);
+
+export const users = generateUsers(USER_COUNT);

src/common/utils/formatCount.ts

@@ -1,22 +1,36 @@
+import { BILLION, MILLION, SECONDS_IN_HOUR, SECONDS_IN_MINUTE, THOUSAND } from './utilsConstants';
+
+/**
+ * Formats a duration in seconds into a string representation of hours, minutes, and seconds.
+ *
+ * @param {number} duration - The duration in seconds to format.
+ * @returns {string} - The formatted duration as a string in the format "HH:MM:SS" or "MM:SS".
+ */
 export const formatDurationCount = (duration: number): string => {
-  const hours = Math.floor(duration / 3600);
-  const minutes = Math.floor((duration % 3600) / 60);
+  const hours = Math.floor(duration / SECONDS_IN_HOUR);
+  const minutes = Math.floor((duration % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
   const seconds = Math.floor(duration % 60);
 
-  let time = '';
-  if (hours > 0) {
-    time += `${hours}:`;
-  }
-  if (hours > 0 || minutes > 0) {
-    time += (minutes < 10 ? '0' + minutes : minutes) + ':';
-  }
-  time += seconds < 10 ? '0' + seconds : seconds;
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  const formattedSeconds = seconds.toString().padStart(2, '0');
 
-  return time;
+  return hours > 0
+    ? `${hours}:${formattedMinutes}:${formattedSeconds}`
+    : `${formattedMinutes}:${formattedSeconds}`;
 };
 
-export const formatViewCount = (viewCount: string) => {
-  if (parseInt(viewCount) >= 1000000000) return (parseInt(viewCount) / 1000000000).toFixed(1) + 'B';
-  if (parseInt(viewCount) >= 1000000) return (parseInt(viewCount) / 1000000).toFixed(1) + 'M';
-  if (parseInt(viewCount) >= 1000) return (parseInt(viewCount) / 1000).toFixed(1) + 'K';
+/**
+ * Formats the view count into a more readable string representation with suffixes.
+ *
+ * @param {string} viewCount - The view count as a string.
+ * @returns {string} - The formatted view count with appropriate suffix (B, M, K) or the original count if below 1000.
+ */
+export const formatViewCount = (viewCount: string): string => {
+  const count = parseInt(viewCount);
+
+  if (count >= BILLION) return (count / BILLION).toFixed(1) + 'B';
+  if (count >= MILLION) return (count / MILLION).toFixed(1) + 'M';
+  if (count >= THOUSAND) return (count / THOUSAND).toFixed(1) + 'K';
+
+  return viewCount; // Return the original count if below 1000
 };

src/common/utils/utilsConstants.js

@@ -0,0 +1,16 @@
+// cover image constants
+export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg'];
+export const FULFILLED_STATUS = 'fulfilled';
+
+// fake user constant
+export const USER_COUNT = 10000;
+
+// format format duration count constants
+export const SECONDS_IN_MINUTE = 60; // 60 seconds in a minute
+export const SECONDS_IN_HOUR = 3600; // 3600 seconds in an hour
+export const HOURS_THRESHOLD = 0; // Used for checking if hours are greater than 0
+
+// format view count constants
+export const BILLION = 1_000_000_000; // 1 billion
+export const MILLION = 1_000_000; // 1 million
+export const THOUSAND = 1_000; // 1 thousand

src/plays/zoomlogin/MainPage.js

@@ -0,0 +1,20 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import App from './components/App';
+import HomePage from './components/HomePage';
+import LinkedinPage from './components/Linkedin/LinkedinPage';
+import ZoomPage from './components/Zoom/ZoomPage';
+
+export function MainPage() {
+  return (
+    <BrowserRouter basename="/react-login-form">
+      <App>
+        <Routes>
+          <Route element={<HomePage />} path="/" />
+          <Route element={<LinkedinPage />} path="/linkedin" />
+          <Route element={<ZoomPage />} path="/zoom" />
+        </Routes>
+      </App>
+    </BrowserRouter>
+  );
+}
+export default MainPage;

src/plays/zoomlogin/components/Zoom/ZoomSignin.js

@@ -184,7 +184,7 @@ function ZoomSignin({ helpHandle }) {
                 {isEmailFocused && (
                   <label
                     className="absolute text-slate-500 pt-1 pb-2 left-0 top-0 text-xs mb-1 px-2"
-                    htmlFor="email"
+                    htmlFor="zoomemail"
                   >
                     Email Address
                   </label>
@@ -210,7 +210,7 @@ function ZoomSignin({ helpHandle }) {
                 {isPasswordFocused && (
                   <label
                     className="absolute text-slate-500 pt-1 pb-2 left-0 top-0 text-xs mb-1 px-2"
-                    htmlFor="email"
+                    htmlFor="zoompassword"
                   >
                     Password
                   </label>

src/plays/zoomlogin/components/chatbot/widget/InitialButtonOptions.jsx

@@ -9,10 +9,10 @@ const InitialButtonOptions = (props) => {
   };
 
   return (
-    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[13px] sm:text-[14px]">
+    <div className="text-[#0e72ed] ml-[4rem] font-extrabold text-[14px]">
       <button
         aria-label="My Account is Locked"
-        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white hover:cursor-not-allowed"
+        className="inline-block border border-[#0e72ed] rounded-3xl px-4 py-1.5 m-1 hover:bg-[#0e72ed] hover:text-white  hover:cursor-pointer"
         title="My Account is Locked"
         onClick={() => handleAccountLockedClick('My Account is Locked')}
       >