- {title &&
{title}
}
- {children}
- {toolbarSection}
- {warningsSection}
+
+
+
+ {/* Extract when finish the modal */}
+
{}}
+ disableBackdrop
+ >
+
+ {videoTrack ? (
+
+ ) : (
+
+ )}
+
+
setIsNameInputFocused(true)}
+ onBlur={() => setIsNameInputFocused(false)}
+ />
+ {showNameError && (
+
+
{t("meet.preMeeting.nameRequired")}
+
+ )}
+
+
+
+
+
+
+
+
+ {title &&
{title}
}
+ {children}
+ {toolbarSection}
+ {warningsSection}
+
-
);
diff --git a/react/features/base/meet/views/PreMeeting/components/Header.tsx b/react/features/base/meet/views/PreMeeting/components/Header.tsx
new file mode 100644
index 000000000000..20945f8f2fb8
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/components/Header.tsx
@@ -0,0 +1,77 @@
+import { Avatar, Button, Header as IntxHeader } from "@internxt/ui";
+import React from "react";
+
+const LeftContent = React.memo(
+ (): JSX.Element => (
+
+
+
![logo]({"images/internxt_logo.png"})
+
+ Meet
+
+
![logo]({"images/beta.png"})
+
+
+ )
+);
+
+interface RightContentProps {
+ isLogged: boolean;
+ avatar: string | null;
+ fullName?: string;
+ translate: Function;
+}
+
+const RightContent = React.memo(({ isLogged, avatar, fullName, translate }: RightContentProps): JSX.Element => {
+ const handleNewMeeting = () => {
+ alert("Creating new meeting...");
+ };
+
+ const handleLogin = () => {
+ alert("Redirecting to login...");
+ };
+
+ const handleSignUp = () => {
+ alert("Redirecting to sign up...");
+ };
+
+ return isLogged ? (
+
+
+
+
+ ) : (
+
+ {/* TODO: Change to secondary variant when dark mode works properly */}
+
+
+
+ );
+});
+
+const Header = ({ userData, translate }) => (
+
}
+ rightContent={
+
+ }
+ className="z-50 py-3"
+ />
+);
+
+
+export default Header;
\ No newline at end of file
diff --git a/react/features/base/meet/views/PreMeeting/hooks/useFullName.test.ts b/react/features/base/meet/views/PreMeeting/hooks/useFullName.test.ts
new file mode 100644
index 000000000000..6590560d381c
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/hooks/useFullName.test.ts
@@ -0,0 +1,65 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { UserData } from "../types";
+import { useFullName } from "./useFullName";
+
+describe("useFullName", () => {
+ it("should return initial value when userData is null", () => {
+ const initialValue = "John Doe";
+ const { result } = renderHook(() => useFullName(null, initialValue));
+
+ expect(result.current[0]).toBe(initialValue);
+ });
+
+ it("should return empty string when userData has no name and lastname", () => {
+ const userData: any = {};
+ const { result } = renderHook(() => useFullName(userData));
+
+ expect(result.current[0]).toBe("");
+ });
+
+ it("should return full name when userData has both name and lastname", () => {
+ const userData: UserData = {
+ name: "John",
+ lastname: "Doe",
+ avatar: null,
+ };
+ const { result } = renderHook(() => useFullName(userData));
+
+ expect(result.current[0]).toBe("John Doe");
+ });
+
+ it("should update when userData changes", () => {
+ const initialUserData: UserData = {
+ name: "John",
+ lastname: "Doe",
+ avatar: null,
+ };
+
+ const { result, rerender } = renderHook(({ userData }) => useFullName(userData), {
+ initialProps: { userData: initialUserData },
+ });
+
+ expect(result.current[0]).toBe("John Doe");
+
+ rerender({
+ userData: {
+ name: "Jane",
+ lastname: "Smith",
+ avatar: null,
+ },
+ });
+
+ expect(result.current[0]).toBe("Jane Smith");
+ });
+
+ it("should allow manual name updates", () => {
+ const { result } = renderHook(() => useFullName(null, ""));
+
+ act(() => {
+ result.current[1]("Jane Smith");
+ });
+
+ expect(result.current[0]).toBe("Jane Smith");
+ });
+});
diff --git a/react/features/base/meet/views/PreMeeting/hooks/useFullName.ts b/react/features/base/meet/views/PreMeeting/hooks/useFullName.ts
new file mode 100644
index 000000000000..fde60924f71e
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/hooks/useFullName.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { UserData } from "../types";
+
+export const useFullName = (userData: UserData | null, initialValue: string = "") => {
+ const getInitialFullName = () => {
+ if (!userData?.name && !userData?.lastname) return initialValue;
+ return `${userData.name || ""} ${userData.lastname || ""}`.trim();
+ };
+
+ const [fullName, setFullName] = useState(getInitialFullName());
+
+ useEffect(() => {
+ const newFullName = getInitialFullName();
+ if (newFullName !== fullName) {
+ setFullName(newFullName);
+ }
+ }, [userData?.name, userData?.lastname]);
+
+ return [fullName, setFullName] as const;
+};
\ No newline at end of file
diff --git a/react/features/base/meet/views/PreMeeting/hooks/useUseData.test.ts b/react/features/base/meet/views/PreMeeting/hooks/useUseData.test.ts
new file mode 100644
index 000000000000..1ff6632e4df4
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/hooks/useUseData.test.ts
@@ -0,0 +1,45 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useUserData } from "./useUserData";
+
+describe("useUserData", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ vi.clearAllMocks();
+ });
+
+ it("should return null when no user data exists", () => {
+ const { result } = renderHook(() => useUserData());
+ expect(result.current).toBeNull();
+ });
+
+ it("should return parsed user data", () => {
+ const mockUser = { id: 1, name: "John" };
+ localStorage.setItem("xUser", JSON.stringify(mockUser));
+
+ const { result } = renderHook(() => useUserData());
+ expect(result.current).toEqual(mockUser);
+ });
+
+ it("should handle invalid JSON", () => {
+ const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+ localStorage.setItem("xUser", "invalid-json");
+
+ const { result } = renderHook(() => useUserData());
+
+ expect(result.current).toBeNull();
+ expect(consoleSpy).toHaveBeenCalled();
+ });
+
+ it("should memoize parsed result", () => {
+ const mockUser = { id: 1, name: "John" };
+ localStorage.setItem("xUser", JSON.stringify(mockUser));
+
+ const { result, rerender } = renderHook(() => useUserData());
+ const firstResult = result.current;
+
+ rerender();
+
+ expect(result.current).toBe(firstResult);
+ });
+});
diff --git a/react/features/base/meet/views/PreMeeting/hooks/useUserData.ts b/react/features/base/meet/views/PreMeeting/hooks/useUserData.ts
new file mode 100644
index 000000000000..8b6474cc0b56
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/hooks/useUserData.ts
@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { UserData } from "../types";
+
+export const useUserData = (): UserData | null => {
+ const xUser = localStorage.getItem("xUser");
+
+ return useMemo(() => {
+ if (!xUser) return null;
+ try {
+ return JSON.parse(xUser);
+ } catch (e) {
+ console.error("Error parsing user data:", e);
+ return null;
+ }
+ }, [xUser]);
+};
diff --git a/react/features/base/meet/views/PreMeeting/types/index.ts b/react/features/base/meet/views/PreMeeting/types/index.ts
new file mode 100644
index 000000000000..306428b6c0cb
--- /dev/null
+++ b/react/features/base/meet/views/PreMeeting/types/index.ts
@@ -0,0 +1,5 @@
+export interface UserData {
+ name: string;
+ lastname: string;
+ avatar: string | null;
+}
diff --git a/react/features/base/ui/styles/index.scss b/react/features/base/ui/styles/index.scss
new file mode 100644
index 000000000000..f2e90bc125b0
--- /dev/null
+++ b/react/features/base/ui/styles/index.scss
@@ -0,0 +1,383 @@
+/* TODO: MIGRATE THIS TO css-config or internxt/ui */
+@import url("../../../../../fonts/font.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* COLORS */
+
+:root,
+#root {
+ background: rgb(var(--color-surface));
+ font-family: "Instrument Sans", sans-serif;
+ height: 100%;
+ -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+
+ --footer-height: 1rem;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color-scheme: light;
+
+ --color-primary: 0 102 255;
+ --color-primary-dark: 0 88 219;
+ --color-red: 255 13 0;
+ --color-red-dark: 230 11 0;
+ --color-orange: 255 149 0;
+ --color-orange-dark: 230 134 0;
+ --color-yellow: 255 204 0;
+ --color-yellow-dark: 230 184 0;
+ --color-green: 50 195 86;
+ --color-green-dark: 45 174 77;
+ --color-pink: 255 36 76;
+ --color-pink-dark: 235 0 63;
+ --color-indigo: 81 78 212;
+ --color-indigo-dark: 60 58 207;
+ --color-surface: 255 255 255;
+ --color-highlight: 17 17 17;
+ --color-gray-1: 249 249 252;
+ --color-gray-5: 243 243 248;
+ --color-gray-10: 229 229 235;
+ --color-gray-20: 209 209 215;
+ --color-gray-30: 199 199 205;
+ --color-gray-40: 174 174 179;
+ --color-gray-50: 142 142 148;
+ --color-gray-60: 99 99 103;
+ --color-gray-70: 72 72 75;
+ --color-gray-80: 58 58 59;
+ --color-gray-90: 44 44 48;
+ --color-gray-100: 24 24 27;
+ }
+
+ :root.dark {
+ color-scheme: dark;
+
+ --color-primary: 20 114 255;
+ --color-primary-dark: 0 96 240;
+ --color-red: 255 61 51;
+ --color-red-dark: 255 36 26;
+ --color-orange: 255 164 36;
+ --color-orange-dark: 255 153 10;
+ --color-yellow: 255 214 51;
+ --color-yellow-dark: 255 209 26;
+ --color-green: 72 208 106;
+ --color-green-dark: 52 203 90;
+ --color-pink: 255 71 105;
+ --color-pink-dark: 255 15 80;
+ --color-indigo: 106 103 218;
+ --color-indigo-dark: 85 83 213;
+ --color-surface: 17 17 17;
+ --color-highlight: 255 255 255;
+ --color-gray-1: 24 24 27;
+ --color-gray-5: 44 44 48;
+ --color-gray-10: 58 58 59;
+ --color-gray-20: 72 72 75;
+ --color-gray-30: 99 99 103;
+ --color-gray-40: 142 142 148;
+ --color-gray-50: 174 174 179;
+ --color-gray-60: 199 199 205;
+ --color-gray-70: 209 209 215;
+ --color-gray-80: 229 229 235;
+ --color-gray-90: 243 243 248;
+ --color-gray-100: 249 249 252;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+
+ --color-primary: 20 114 255;
+ --color-primary-dark: 0 96 240;
+ --color-red: 255 61 51;
+ --color-red-dark: 255 36 26;
+ --color-orange: 255 164 36;
+ --color-orange-dark: 255 153 10;
+ --color-yellow: 255 214 51;
+ --color-yellow-dark: 255 209 26;
+ --color-green: 72 208 106;
+ --color-green-dark: 52 203 90;
+ --color-pink: 255 71 105;
+ --color-pink-dark: 255 15 80;
+ --color-indigo: 106 103 218;
+ --color-indigo-dark: 85 83 213;
+ --color-surface: 17 17 17;
+ --color-highlight: 255 255 255;
+ --color-gray-1: 24 24 27;
+ --color-gray-5: 44 44 48;
+ --color-gray-10: 58 58 59;
+ --color-gray-20: 72 72 75;
+ --color-gray-30: 99 99 103;
+ --color-gray-40: 142 142 148;
+ --color-gray-50: 174 174 179;
+ --color-gray-60: 199 199 205;
+ --color-gray-70: 209 209 215;
+ --color-gray-80: 229 229 235;
+ --color-gray-90: 243 243 248;
+ --color-gray-100: 249 249 252;
+ }
+
+ :root:not(.dark) {
+ color-scheme: light;
+
+ --color-primary: 0 102 255;
+ --color-primary-dark: 0 88 219;
+ --color-red: 255 13 0;
+ --color-red-dark: 230 11 0;
+ --color-orange: 255 149 0;
+ --color-orange-dark: 230 134 0;
+ --color-yellow: 255 204 0;
+ --color-yellow-dark: 230 184 0;
+ --color-green: 50 195 86;
+ --color-green-dark: 45 174 77;
+ --color-pink: 255 36 76;
+ --color-pink-dark: 235 0 63;
+ --color-indigo: 81 78 212;
+ --color-indigo-dark: 60 58 207;
+ --color-surface: 255 255 255;
+ --color-highlight: 17 17 17;
+ --color-gray-1: 249 249 252;
+ --color-gray-5: 243 243 248;
+ --color-gray-10: 229 229 235;
+ --color-gray-20: 209 209 215;
+ --color-gray-30: 199 199 205;
+ --color-gray-40: 174 174 179;
+ --color-gray-50: 142 142 148;
+ --color-gray-60: 99 99 103;
+ --color-gray-70: 72 72 75;
+ --color-gray-80: 58 58 59;
+ --color-gray-90: 44 44 48;
+ --color-gray-100: 24 24 27;
+ }
+}
+
+/* COMPONENTS */
+
+iframe#webpack-dev-server-client-overlay {
+ display: none !important;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ overflow: hidden;
+ position: relative;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+/* TAILWIND FALLBACKS */
+
+.text-supporting-2 {
+ font-size: 10px;
+ font-stretch: normal;
+ font-style: normal;
+}
+
+@layer components {
+ html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow-x: hidden;
+
+ @apply text-gray-100;
+ }
+
+ /* LINKS */
+ a,
+ .link {
+ @apply text-primary underline hover:text-primary-dark;
+ }
+
+ a.secondary {
+ @apply text-white;
+ }
+
+ /* INPUTS */
+ input[type="checkbox"]:not(.base-checkbox) {
+ @apply h-4 w-4 rounded border-2 border-gray-70 text-xs text-gray-70;
+ }
+
+ input:not([type], .inxt-input),
+ input[type="text"]:not(.inxt-input),
+ input[type="email"]:not(.inxt-input),
+ input[type="password"]:not(.inxt-input) {
+ @apply rounded-md px-3 py-2 text-base text-gray-70 placeholder-gray-30 ring-1 ring-gray-50 focus:ring-primary;
+
+ &:focus {
+ outline: none !important;
+ }
+
+ &.error {
+ @apply bg-white ring-1 ring-1 ring-red;
+ }
+
+ &.warning {
+ @apply bg-white ring-1 ring-1 ring-orange;
+ }
+
+ &.success {
+ @apply bg-white ring-1 ring-1 ring-green;
+ }
+
+ &.semi-dense {
+ @apply px-2 py-0.5;
+ }
+
+ &.dense {
+ @apply px-1 py-0;
+ }
+
+ &.right-icon {
+ @apply pr-8;
+ }
+
+ &.left-icon {
+ @apply pl-9;
+ }
+
+ &.no-ring {
+ @apply ring-0 focus:ring-1 focus:ring-primary;
+ }
+
+ &.no-ring-at-all {
+ @apply ring-0;
+ }
+
+ &.rect {
+ @apply rounded-none;
+ }
+ }
+
+ .input-number {
+ @apply appearance-none border-gray-30 text-center outline-none;
+
+ appearance: textfield;
+ }
+
+ input[type="number"]::-webkit-inner-spin-button,
+ ::-webkit-outer-spin-button {
+ appearance: none;
+ margin: 0;
+ }
+
+ .inxt-input::placeholder {
+ @apply font-normal;
+ }
+
+ /* BUTTONS */
+ .base-button,
+ button {
+ &:disabled {
+ cursor: not-allowed;
+ }
+ }
+
+ .base-button.primary,
+ .base-button.secondary,
+ .base-button.cancel {
+ height: 40px;
+
+ @apply rounded-lg px-4 py-2 transition duration-200 ease-in-out;
+ }
+
+ button.primary,
+ .base-button.primary {
+ @apply bg-primary text-white hover:bg-primary-dark;
+
+ &:disabled {
+ @apply bg-gray-5 text-gray-40 hover:bg-gray-5;
+ }
+ }
+
+ button.secondary,
+ .base-button.secondary {
+ @apply bg-white text-primary hover:bg-primary hover:text-white;
+ }
+
+ button.dark,
+ .base-button.dark {
+ @apply bg-white text-gray-70 hover:bg-gray-70 hover:text-white;
+ }
+
+ button.quaternary,
+ .base-button.quaternary {
+ @apply bg-gray-10 text-gray-80 hover:bg-gray-20;
+ }
+
+ button.delete-red,
+ .base-button.delete-red {
+ @apply bg-red text-white hover:bg-red-dark;
+ }
+
+ button.cancel,
+ .base-button.cancel {
+ @apply bg-opacity-0 text-red;
+ }
+
+ .base-button.square {
+ @apply box-content flex items-center justify-center px-2 py-0;
+ }
+
+ /* EVENTS */
+ .pointer-events-none.descendants {
+ * {
+ pointer-events: none;
+ }
+
+ &.only {
+ @apply pointer-events-auto;
+ }
+ }
+
+ /* GRID */
+ .square {
+ aspect-ratio: 1;
+ }
+
+ /* DRAG AND DROP */
+ .drag-over-effect {
+ box-shadow: inset 0 0 0 0.15rem var(--color-primary);
+
+ @apply rounded-md bg-primary/30;
+ }
+}
+
+/* RECAPTCHA */
+.grecaptcha-badge {
+ visibility: hidden;
+}
+
+/* Abbr */
+abbr[title] {
+ text-decoration: none !important;
+}
+
+/* Photos skeleton animation */
+@keyframes shimmer {
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+.mt-22 {
+ margin-top: 5.5rem;
+}
+
+.separator {
+ height: 1px;
+
+ @apply w-full bg-gray-10;
+}
+
+.text-ellipsis {
+ text-overflow: ellipsis;
+}
diff --git a/react/features/lobby/components/web/LobbyScreen.tsx b/react/features/lobby/components/web/LobbyScreen.tsx
index 507d74d82f8b..f81671b1a94e 100644
--- a/react/features/lobby/components/web/LobbyScreen.tsx
+++ b/react/features/lobby/components/web/LobbyScreen.tsx
@@ -4,7 +4,8 @@ import { connect } from 'react-redux';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
import { IconCloseLarge } from '../../../base/icons/svg';
-import PreMeetingScreen from '../../../base/premeeting/components/web/PreMeetingScreen';
+
+import PreMeetingScreen from "../../../base/meet/views/PreMeeting/PreMeetingScreen";
import LoadingIndicator from '../../../base/react/components/web/LoadingIndicator';
import Button from '../../../base/ui/components/web/Button';
import Input from '../../../base/ui/components/web/Input';
diff --git a/react/features/prejoin/components/web/Prejoin.tsx b/react/features/prejoin/components/web/Prejoin.tsx
index 3d66d7463e25..ebee5662328f 100644
--- a/react/features/prejoin/components/web/Prejoin.tsx
+++ b/react/features/prejoin/components/web/Prejoin.tsx
@@ -9,38 +9,37 @@ import Avatar from '../../../base/avatar/components/Avatar';
import { isNameReadOnly } from '../../../base/config/functions.web';
import { IconArrowDown, IconArrowUp, IconPhoneRinging, IconVolumeOff } from '../../../base/icons/svg';
import { isVideoMutedByUser } from '../../../base/media/functions';
-import { getLocalParticipant } from '../../../base/participants/functions';
-import Popover from '../../../base/popover/components/Popover.web';
-import ActionButton from '../../../base/premeeting/components/web/ActionButton';
-import PreMeetingScreen from '../../../base/premeeting/components/web/PreMeetingScreen';
-import { updateSettings } from '../../../base/settings/actions';
-import { getDisplayName } from '../../../base/settings/functions.web';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
-import { getLocalJitsiVideoTrack } from '../../../base/tracks/functions.web';
-import Button from '../../../base/ui/components/web/Button';
-import Input from '../../../base/ui/components/web/Input';
-import { BUTTON_TYPES } from '../../../base/ui/constants.any';
-import isInsecureRoomName from '../../../base/util/isInsecureRoomName';
-import { openDisplayNamePrompt } from '../../../display-name/actions';
-import { isUnsafeRoomWarningEnabled } from '../../../prejoin/functions';
+import PreMeetingScreen from "../../../base/meet/views/PreMeeting/PreMeetingScreen";
+import { getLocalParticipant } from "../../../base/participants/functions";
+import Popover from "../../../base/popover/components/Popover.web";
+import ActionButton from "../../../base/premeeting/components/web/ActionButton";
+import { updateSettings } from "../../../base/settings/actions";
+import { getDisplayName } from "../../../base/settings/functions.web";
+import { withPixelLineHeight } from "../../../base/styles/functions.web";
+import { getLocalJitsiAudioTrack, getLocalJitsiVideoTrack } from "../../../base/tracks/functions.web";
+import Button from "../../../base/ui/components/web/Button";
+import Input from "../../../base/ui/components/web/Input";
+import { BUTTON_TYPES } from "../../../base/ui/constants.any";
+import isInsecureRoomName from "../../../base/util/isInsecureRoomName";
+import { openDisplayNamePrompt } from "../../../display-name/actions";
+import { isUnsafeRoomWarningEnabled } from "../../../prejoin/functions";
import {
joinConference as joinConferenceAction,
joinConferenceWithoutAudio as joinConferenceWithoutAudioAction,
- setJoinByPhoneDialogVisiblity as setJoinByPhoneDialogVisiblityAction
-} from '../../actions.web';
+ setJoinByPhoneDialogVisiblity as setJoinByPhoneDialogVisiblityAction,
+} from "../../actions.web";
import {
isDeviceStatusVisible,
isDisplayNameRequired,
isJoinByPhoneButtonVisible,
isJoinByPhoneDialogVisible,
- isPrejoinDisplayNameVisible
-} from '../../functions';
-import { hasDisplayName } from '../../utils';
+ isPrejoinDisplayNameVisible,
+} from "../../functions";
+import { hasDisplayName } from "../../utils";
-import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog';
+import JoinByPhoneDialog from "./dialogs/JoinByPhoneDialog";
interface IProps {
-
/**
* Flag signaling if the device status is visible or not.
*/
@@ -135,77 +134,82 @@ interface IProps {
* The JitsiLocalTrack to display.
*/
videoTrack?: Object;
+
+ /**
+ * The JitsiLocalAudioTrack.
+ */
+ audioTrack?: Object;
}
-const useStyles = makeStyles()(theme => {
+const useStyles = makeStyles()((theme) => {
return {
inputContainer: {
- width: '100%'
+ width: "100%",
},
input: {
- width: '100%',
+ width: "100%",
marginBottom: theme.spacing(3),
- '& input': {
- textAlign: 'center'
- }
+ "& input": {
+ textAlign: "center",
+ },
},
avatarContainer: {
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'column'
+ display: "flex",
+ alignItems: "center",
+ flexDirection: "column",
},
avatar: {
- margin: `${theme.spacing(2)} auto ${theme.spacing(3)}`
+ margin: `${theme.spacing(2)} auto ${theme.spacing(3)}`,
},
avatarName: {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
color: theme.palette.text01,
marginBottom: theme.spacing(5),
- textAlign: 'center'
+ textAlign: "center",
},
error: {
backgroundColor: theme.palette.actionDanger,
color: theme.palette.text01,
borderRadius: theme.shape.borderRadius,
- width: '100%',
+ width: "100%",
...withPixelLineHeight(theme.typography.labelRegular),
- boxSizing: 'border-box',
+ boxSizing: "border-box",
padding: theme.spacing(1),
- textAlign: 'center',
+ textAlign: "center",
marginTop: `-${theme.spacing(2)}`,
- marginBottom: theme.spacing(3)
+ marginBottom: theme.spacing(3),
},
dropdownContainer: {
- position: 'relative',
- width: '100%'
+ position: "relative",
+ width: "100%",
},
dropdownButtons: {
- width: '300px',
- padding: '8px 0',
+ width: "300px",
+ padding: "8px 0",
backgroundColor: theme.palette.action02,
color: theme.palette.text04,
borderRadius: theme.shape.borderRadius,
- position: 'relative',
+ position: "relative",
top: `-${theme.spacing(3)}`,
- '@media (max-width: 511px)': {
- margin: '0 auto',
- top: 0
+ "@media (max-width: 511px)": {
+ margin: "0 auto",
+ top: 0,
},
- '@media (max-width: 420px)': {
+ "@media (max-width: 420px)": {
top: 0,
- width: 'calc(100% - 32px)'
- }
- }
+ width: "calc(100% - 32px)",
+ },
+ },
};
});
@@ -228,15 +232,18 @@ const Prejoin = ({
showUnsafeRoomWarning,
unsafeRoomConsent,
updateSettings: dispatchUpdateSettings,
- videoTrack
+ videoTrack,
+ audioTrack,
}: IProps) => {
const showDisplayNameField = useMemo(
() => isDisplayNameVisible && !readOnlyName,
- [ isDisplayNameVisible, readOnlyName ]);
+ [isDisplayNameVisible, readOnlyName]
+ );
const showErrorOnField = useMemo(
() => showDisplayNameField && showErrorOnJoin,
- [ showDisplayNameField, showErrorOnJoin ]);
- const [ showJoinByPhoneButtons, setShowJoinByPhoneButtons ] = useState(false);
+ [showDisplayNameField, showErrorOnJoin]
+ );
+ const [showJoinByPhoneButtons, setShowJoinByPhoneButtons] = useState(false);
const { classes } = useStyles();
const { t } = useTranslation();
const dispatch = useDispatch();
@@ -249,10 +256,12 @@ const Prejoin = ({
*/
const onJoinButtonClick = () => {
if (showErrorOnJoin) {
- dispatch(openDisplayNamePrompt({
- onPostSubmit: joinConference,
- validateInput: hasDisplayName
- }));
+ dispatch(
+ openDisplayNamePrompt({
+ onPostSubmit: joinConference,
+ validateInput: hasDisplayName,
+ })
+ );
return;
}
@@ -277,7 +286,7 @@ const Prejoin = ({
const onOptionsClick = (e?: React.KeyboardEvent | React.MouseEvent | undefined) => {
e?.stopPropagation();
- setShowJoinByPhoneButtons(show => !show);
+ setShowJoinByPhoneButtons((show) => !show);
};
/**
@@ -288,7 +297,7 @@ const Prejoin = ({
*/
const setName = (displayName: string) => {
dispatchUpdateSettings({
- displayName
+ displayName,
});
};
@@ -319,7 +328,7 @@ const Prejoin = ({
* @returns {void}
*/
const showDialogKeyPress = (e: React.KeyboardEvent) => {
- if (e.key === ' ' || e.key === 'Enter') {
+ if (e.key === " " || e.key === "Enter") {
e.preventDefault();
doShowDialog();
}
@@ -333,9 +342,7 @@ const Prejoin = ({
* @returns {void}
*/
const onJoinConferenceWithoutAudioKeyPress = (e: React.KeyboardEvent) => {
- if (joinConferenceWithoutAudio
- && (e.key === ' '
- || e.key === 'Enter')) {
+ if (joinConferenceWithoutAudio && (e.key === " " || e.key === "Enter")) {
e.preventDefault();
joinConferenceWithoutAudio();
}
@@ -348,26 +355,26 @@ const Prejoin = ({
*/
const getExtraJoinButtons = () => {
const noAudio = {
- key: 'no-audio',
- testId: 'prejoin.joinWithoutAudio',
+ key: "no-audio",
+ testId: "prejoin.joinWithoutAudio",
icon: IconVolumeOff,
- label: t('prejoin.joinWithoutAudio'),
+ label: t("prejoin.joinWithoutAudio"),
onClick: joinConferenceWithoutAudio,
- onKeyPress: onJoinConferenceWithoutAudioKeyPress
+ onKeyPress: onJoinConferenceWithoutAudioKeyPress,
};
const byPhone = {
- key: 'by-phone',
- testId: 'prejoin.joinByPhone',
+ key: "by-phone",
+ testId: "prejoin.joinByPhone",
icon: IconPhoneRinging,
- label: t('prejoin.joinAudioByPhone'),
+ label: t("prejoin.joinAudioByPhone"),
onClick: doShowDialog,
- onKeyPress: showDialogKeyPress
+ onKeyPress: showDialogKeyPress,
};
return {
noAudio,
- byPhone
+ byPhone,
};
};
@@ -378,105 +385,109 @@ const Prejoin = ({
* @returns {void}
*/
const onInputKeyPress = (e: React.KeyboardEvent) => {
- if (e.key === 'Enter') {
+ if (e.key === "Enter") {
joinConference();
}
};
const extraJoinButtons = getExtraJoinButtons();
- let extraButtonsToRender = Object.values(extraJoinButtons).filter((val: any) =>
- !(prejoinConfig?.hideExtraJoinButtons || []).includes(val.key)
+ let extraButtonsToRender = Object.values(extraJoinButtons).filter(
+ (val: any) => !(prejoinConfig?.hideExtraJoinButtons || []).includes(val.key)
);
if (!hasJoinByPhoneButton) {
- extraButtonsToRender = extraButtonsToRender.filter((btn: any) => btn.key !== 'by-phone');
+ extraButtonsToRender = extraButtonsToRender.filter((btn: any) => btn.key !== "by-phone");
}
const hasExtraJoinButtons = Boolean(extraButtonsToRender.length);
return (
-
- {showDisplayNameField ? (
+ showDeviceStatus={deviceStatusVisible}
+ showRecordingWarning={showRecordingWarning}
+ showUnsafeRoomWarning={showUnsafeRoomWarning}
+ title={t("prejoin.joinMeeting")}
+ videoMuted={!showCameraPreview}
+ videoTrack={videoTrack}
+ audioTrack={audioTrack}
+ >
+
+ {showDisplayNameField ? (
+
) : (
-
-
- {isDisplayNameVisible &&
{name}
}
+
+
+ {isDisplayNameVisible &&
{name}
}
)}
- {showErrorOnField &&
{t('prejoin.errorMissingName')}
}
+ {showErrorOnField && (
+
+ {t("prejoin.errorMissingName")}
+
+ )}
-
+
- {extraButtonsToRender.map(({ key, ...rest }) => (
-
- ))}
- }
- onPopoverClose = { onDropdownClose }
- position = 'bottom'
- trigger = 'click'
- visible = { showJoinByPhoneButtons }>
+ content={
+ hasExtraJoinButtons && (
+
+ {extraButtonsToRender.map(({ key, ...rest }) => (
+
+ ))}
+
+ )
+ }
+ onPopoverClose={onDropdownClose}
+ position="bottom"
+ trigger="click"
+ visible={showJoinByPhoneButtons}
+ >
- {t('prejoin.joinMeeting')}
+ OptionsIcon={showJoinByPhoneButtons ? IconArrowUp : IconArrowDown}
+ ariaDropDownLabel={t("prejoin.joinWithoutAudio")}
+ ariaLabel={t("prejoin.joinMeeting")}
+ ariaPressed={showJoinByPhoneButtons}
+ disabled={
+ joiningInProgress || (showUnsafeRoomWarning && !unsafeRoomConsent) || showErrorOnField
+ }
+ hasOptions={hasExtraJoinButtons}
+ onClick={onJoinButtonClick}
+ onOptionsClick={onOptionsClick}
+ role="button"
+ tabIndex={0}
+ testId="prejoin.joinMeeting"
+ type="primary"
+ >
+ {t("prejoin.joinMeeting")}
{showDialog && (
-
+
)}
);
};
-
/**
* Maps (parts of) the redux state to the React {@code Component} props.
*
@@ -487,10 +498,11 @@ function mapStateToProps(state: IReduxState) {
const name = getDisplayName(state);
const showErrorOnJoin = isDisplayNameRequired(state) && !name;
const { id: participantId } = getLocalParticipant(state) ?? {};
- const { joiningInProgress } = state['features/prejoin'];
- const { room } = state['features/base/conference'];
- const { unsafeRoomConsent } = state['features/base/premeeting'];
- const { showPrejoinWarning: showRecordingWarning } = state['features/base/config'].recordings ?? {};
+ const { joiningInProgress } = state["features/prejoin"];
+ const { room } = state["features/base/conference"];
+ const { unsafeRoomConsent } = state["features/base/premeeting"];
+ const { showPrejoinWarning: showRecordingWarning } = state["features/base/config"].recordings ?? {};
+ const audioTrack = getLocalJitsiAudioTrack(state);
return {
deviceStatusVisible: isDeviceStatusVisible(state),
@@ -499,7 +511,7 @@ function mapStateToProps(state: IReduxState) {
joiningInProgress,
name,
participantId,
- prejoinConfig: state['features/base/config'].prejoinConfig,
+ prejoinConfig: state["features/base/config"].prejoinConfig,
readOnlyName: isNameReadOnly(state),
showCameraPreview: !isVideoMutedByUser(state),
showDialog: isJoinByPhoneDialogVisible(state),
@@ -507,7 +519,8 @@ function mapStateToProps(state: IReduxState) {
showRecordingWarning: Boolean(showRecordingWarning),
showUnsafeRoomWarning: isInsecureRoomName(room) && isUnsafeRoomWarningEnabled(state),
unsafeRoomConsent,
- videoTrack: getLocalJitsiVideoTrack(state)
+ videoTrack: getLocalJitsiVideoTrack(state),
+ audioTrack,
};
}
diff --git a/react/features/prejoin/components/web/PrejoinThirdParty.tsx b/react/features/prejoin/components/web/PrejoinThirdParty.tsx
index f6f5f990b3ff..9c652cc90018 100644
--- a/react/features/prejoin/components/web/PrejoinThirdParty.tsx
+++ b/react/features/prejoin/components/web/PrejoinThirdParty.tsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { isVideoMutedByUser } from '../../../base/media/functions';
-import PreMeetingScreen from '../../../base/premeeting/components/web/PreMeetingScreen';
+import PreMeetingScreen from "../../../base/meet/views/PreMeeting/PreMeetingScreen";
import { getLocalJitsiVideoTrack } from '../../../base/tracks/functions.web';
import { isDeviceStatusVisible } from '../../functions';
diff --git a/react/test/setup.ts b/react/test/setup.ts
new file mode 100644
index 000000000000..3b084414fb97
--- /dev/null
+++ b/react/test/setup.ts
@@ -0,0 +1,23 @@
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+
+const localStorageMock = (() => {
+ let store: Record
= {};
+
+ return {
+ getItem: vi.fn((key: string) => store[key] || null),
+ setItem: vi.fn((key: string, value: string) => {
+ store[key] = value;
+ }),
+ clear: vi.fn(() => {
+ store = {};
+ }),
+ removeItem: vi.fn((key: string) => {
+ delete store[key];
+ }),
+ };
+})();
+
+Object.defineProperty(window, "localStorage", {
+ value: localStorageMock,
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 000000000000..a240d533d2ac
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,16 @@
+///
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ globals: true,
+ environment: "jsdom",
+ setupFiles: ["./react/test/setup.ts"],
+ include: ["react/**/*.{test,spec}.{js,ts,jsx,tsx}"],
+ coverage: {
+ provider: "v8",
+ reporter: ["text", "json", "html"],
+ },
+ },
+});
+ 
+