diff --git a/package.json b/package.json index 6747ffef8..b4bd2396e 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "src" ], "dependencies": { - "@100mslive/roomkit-react": "0.1.1", - "@100mslive/hls-player": "0.1.10", - "@100mslive/hms-virtual-background": "1.11.10", - "@100mslive/react-icons": "0.8.10", - "@100mslive/react-sdk": "0.8.10", + "@100mslive/hls-player": "0.1.11", + "@100mslive/hms-virtual-background": "1.11.11", + "@100mslive/react-icons": "0.8.11", + "@100mslive/react-sdk": "0.8.11", + "@100mslive/roomkit-react": "0.1.2", "@emoji-mart/data": "^1.0.6", "@emoji-mart/react": "^1.0.1", "@tldraw/tldraw": "^1.18.4", diff --git a/src/App.js b/src/App.js index 6aa9660dc..474e7c28e 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,7 @@ import { KeyboardHandler } from "./components/Input/KeyboardInputManager"; import { Notifications } from "./components/Notifications"; import PostLeave from "./components/PostLeave"; import { ToastContainer } from "./components/Toast/ToastContainer"; -import { hmsActions, hmsNotifications, hmsStats, hmsStore } from "./hms.js"; +import { palette } from "./theme.js"; import { Confetti } from "./plugins/confetti"; import { FlyingEmoji } from "./plugins/FlyingEmoji.jsx"; import { RemoteStopScreenshare } from "./plugins/RemoteStopScreenshare"; @@ -68,7 +68,6 @@ export function EdtechComponent({ logo = "", headerPresent = "false", metadata = "", - recordingUrl = "", }, policyConfig = envPolicyConfig, getDetails = () => {}, @@ -77,7 +76,6 @@ export function EdtechComponent({ const { 0: width, 1: height } = aspectRatio .split("-") .map(el => parseInt(el)); - globalStyles(); return ( @@ -87,27 +85,21 @@ export function EdtechComponent({ aspectRatio={getAspectRatio({ width, height })} theme={{ colors: { - brandDefault: color, - brandDark: shadeColor(color, -30), - brandLight: shadeColor(color, 30), - brandDisabled: shadeColor(color, 10), + ...palette[theme], + primary_default: color, + primary_dark: shadeColor(color, -30), + primary_bright: shadeColor(color, 30), + primary_disabled: shadeColor(color, 10), }, fonts: { sans: [font, "Inter", "sans-serif"], }, }} > - + @@ -115,7 +107,7 @@ export function EdtechComponent({ { return typeof navigator.mediaDevices.getDisplayMedia !== "undefined"; }; -export const getDefaultMeetingUrl = () => { - return ( - window.location.href.replace("meeting", "preview") + - `?${QUERY_PARAM_SKIP_PREVIEW}=true` - ); -}; - export const getRoutePrefix = () => { return window.location.pathname.startsWith("/streaming") ? "/streaming" : ""; }; diff --git a/src/components/AppData/AppData.jsx b/src/components/AppData/AppData.jsx index 18d1d97b4..156112b84 100644 --- a/src/components/AppData/AppData.jsx +++ b/src/components/AppData/AppData.jsx @@ -87,7 +87,7 @@ const initialAppData = { }; export const AppData = React.memo( - ({ appDetails, logo, recordingUrl, tokenEndpoint, policyConfig, uiMode }) => { + ({ appDetails, logo, tokenEndpoint, policyConfig, uiMode }) => { const hmsActions = useHMSActions(); const isConnected = useHMSStore(selectIsConnectedToRoom); const sidePane = useSidepaneState(); @@ -128,7 +128,6 @@ export const AppData = React.memo( useEffect(() => { const appData = { - [APP_DATA.recordingUrl]: recordingUrl, [APP_DATA.tokenEndpoint]: tokenEndpoint, [APP_DATA.logo]: logo, [APP_DATA.hlsViewerRole]: @@ -140,7 +139,7 @@ export const AppData = React.memo( for (const key in appData) { hmsActions.setAppData([key], appData[key]); } - }, [appDetails, logo, recordingUrl, tokenEndpoint, uiMode, hmsActions]); + }, [appDetails, logo, tokenEndpoint, uiMode, hmsActions]); useEffect(() => { if (!preferences.subscribedNotifications) { diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js index 861b68a36..78fe29ff6 100644 --- a/src/components/Chat/Chat.js +++ b/src/components/Chat/Chat.js @@ -27,7 +27,12 @@ const PinnedMessage = ({ clearPinnedMessage }) => { return pinnedMessage ? ( @@ -37,7 +42,7 @@ const PinnedMessage = ({ clearPinnedMessage }) => { { ml: "auto", mr: "$4", p: "$2 $4", - border: "1px solid $textDisabled", + border: "1px solid $on_surface_low", r: "$0", }} > {left && ( - + {left} )} {left && right && ( )} {right && ( @@ -108,7 +112,7 @@ const URL_REGEX = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/; const Link = styled("a", { - color: "$brandDefault", + color: "$primary_default", wordBreak: "break-word", "&:hover": { textDecoration: "underline", @@ -219,7 +223,7 @@ const ChatMessage = React.memo( align="center" css={{ flexWrap: "wrap", - bg: messageType ? "$surfaceLight" : undefined, + bg: messageType ? "$surface_bright" : undefined, r: messageType ? "$1" : undefined, px: messageType ? "$4" : "$2", py: messageType ? "$4" : 0, @@ -230,7 +234,7 @@ const ChatMessage = React.memo( > diff --git a/src/components/Chat/ChatFooter.jsx b/src/components/Chat/ChatFooter.jsx index 8b2aa88a2..a10936959 100644 --- a/src/components/Chat/ChatFooter.jsx +++ b/src/components/Chat/ChatFooter.jsx @@ -18,7 +18,7 @@ const TextArea = styled("textarea", { width: "100%", fontFamily: "$sans", bg: "transparent", - color: "$textPrimary", + color: "$on_surface_high", resize: "none", lineHeight: "1rem", position: "relative", @@ -113,7 +113,7 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => { { placeholder="Write something here" ref={inputRef} autoFocus + css={{ fontSize: "1rem" }} onKeyPress={async event => { if (event.key === "Enter") { if (!event.shiftKey) { diff --git a/src/components/Chat/ChatHeader.jsx b/src/components/Chat/ChatHeader.jsx index 7a3762d0f..c787eb490 100644 --- a/src/components/Chat/ChatHeader.jsx +++ b/src/components/Chat/ChatHeader.jsx @@ -25,7 +25,7 @@ export const ChatHeader = React.memo( onClick={onToggle} align="center" css={{ - color: "$textPrimary", + color: "$on_surface_high", h: "$16", mb: "$2", }} @@ -36,7 +36,7 @@ export const ChatHeader = React.memo( asChild data-testid="participant_list_filter" css={{ - border: "1px solid $textDisabled", + border: "1px solid $on_surface_low", r: "$0", p: "$2 $4", ml: "$8", @@ -47,7 +47,7 @@ export const ChatHeader = React.memo( {selection} - + {open ? ( ) : ( @@ -61,6 +61,7 @@ export const ChatHeader = React.memo( w: "$64", overflow: "hidden", maxHeight: "unset", + backgroundColor: "$surface_default", }} align="start" sideOffset={8} diff --git a/src/components/Chat/ChatSelector.jsx b/src/components/Chat/ChatSelector.jsx index 4b93202c4..71d886499 100644 --- a/src/components/Chat/ChatSelector.jsx +++ b/src/components/Chat/ChatSelector.jsx @@ -22,7 +22,7 @@ import { useFilteredRoles } from "../../common/hooks"; const ChatDotIcon = () => { return ( - + ); }; @@ -30,11 +30,15 @@ const SelectorItem = ({ value, active, onClick, unreadCount }) => { return ( {value} - + {unreadCount > 0 && ( diff --git a/src/components/Chat/useEmojiPickerStyles.js b/src/components/Chat/useEmojiPickerStyles.js index c744c64d3..d35d5e4df 100644 --- a/src/components/Chat/useEmojiPickerStyles.js +++ b/src/components/Chat/useEmojiPickerStyles.js @@ -9,16 +9,16 @@ export const useEmojiPickerStyles = showing => { const style = document.createElement("style"); style.textContent = ` #root { - --em-rgb-color: var(--hms-ui-colors-textPrimary); - --em-rgb-input: var(--hms-ui-colors-textPrimary); - --em-color-border: var(--hms-ui-colors-surfaceDefault); - --color-b: var(--hms-ui-colors-textPrimary); + --em-rgb-color: var(--hms-ui-colors-on_surface_high); + --em-rgb-input: var(--hms-ui-colors-on_surface_high); + --em-color-border: var(--hms-ui-colors-surface_default); + --color-b: var(--hms-ui-colors-on_surface_high); --rgb-background: transparent; - color: var(--hms-ui-colors-textPrimary); + color: var(--hms-ui-colors-on_surface_high); font-family: var(--hms-ui-fonts-sans); } .sticky { - background-color: var(--hms-ui-colors-surfaceLight); + background-color: var(--hms-ui-colors-surface_bright); } `; root?.appendChild(style); diff --git a/src/components/Connection/TileConnection.jsx b/src/components/Connection/TileConnection.jsx index 3ce399ab0..928442a40 100644 --- a/src/components/Connection/TileConnection.jsx +++ b/src/components/Connection/TileConnection.jsx @@ -8,7 +8,7 @@ const TileConnection = ({ name, peerId, hideLabel, width }) => { {!hideLabel ? ( { {emojiReactionList.map((emojiLine, index) => ( @@ -133,7 +133,7 @@ export const EmojiReaction = () => { variant="sm" inline={true} css={{ - color: "$textSecondary", + color: "$on_surface_medium", }} > Reactions will be timed for Live Streaming viewers.{" "} @@ -142,7 +142,7 @@ export const EmojiReaction = () => { variant="sm" inline={true} css={{ - color: "$primaryLight", + color: "$primary_bright", fontWeight: "$semiBold", }} > @@ -150,8 +150,9 @@ export const EmojiReaction = () => { href={HLS_TIMED_METADATA_DOC_URL} target="_blank" rel="noopener noreferrer" + style={{ color: "inherit", textDecoration: "none" }} > - {"Learn more ->"} + Learn more @@ -169,7 +170,7 @@ const EmojiContainer = styled("span", { p: "$4", "&:hover": { p: "7px", - bg: "$surfaceLighter", + bg: "$surface_brighter", borderRadius: "$1", }, }); diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx index 6606b9da6..68961760b 100644 --- a/src/components/ErrorBoundary.jsx +++ b/src/components/ErrorBoundary.jsx @@ -43,8 +43,8 @@ export class ErrorBoundary extends Component { justify="center" css={{ size: "100%", - color: "$textPrimary", - backgroundColor: "$bgPrimary", + color: "$on_surface_high", + backgroundColor: "$background_default", }} > diff --git a/src/components/ErrorPage.jsx b/src/components/ErrorPage.jsx index ccbb34f6a..031525285 100644 --- a/src/components/ErrorPage.jsx +++ b/src/components/ErrorPage.jsx @@ -10,8 +10,8 @@ function ErrorPage({ error }) { justify="center" css={{ size: "100%", - color: "$textPrimary", - backgroundColor: "$bgPrimary", + color: "$on_surface_high", + backgroundColor: "$background_default", }} > diff --git a/src/components/Footer/ScreenshareAudio.jsx b/src/components/Footer/ScreenshareAudio.jsx index 414a546eb..d5513d587 100644 --- a/src/components/Footer/ScreenshareAudio.jsx +++ b/src/components/Footer/ScreenshareAudio.jsx @@ -2,6 +2,7 @@ import React, { Fragment, useState } from "react"; import { useScreenShare } from "@100mslive/react-sdk"; import { ScreenShareHintModal } from "../ScreenshareHintModal"; import { WidgetCard } from "./WidgetCard"; +import { useWidgetToggle } from "../AppData/useSidepane"; import { useShowAudioShare } from "../AppData/useUISettings"; export const ScreenshareAudio = () => { @@ -14,6 +15,7 @@ export const ScreenshareAudio = () => { const isAudioScreenshare = amIScreenSharing && !video && !!audio; const [showModal, setShowModal] = useState(false); const { showAudioShare } = useShowAudioShare(); + const toggleWidget = useWidgetToggle(); if (!showAudioShare) { return null; @@ -35,7 +37,12 @@ export const ScreenshareAudio = () => { }} /> {showModal && ( - setShowModal(false)} /> + { + setShowModal(false); + toggleWidget(); + }} + /> )} ); diff --git a/src/components/Footer/ToggleWidgets.jsx b/src/components/Footer/ToggleWidgets.jsx index 1bac221c8..d871899cf 100644 --- a/src/components/Footer/ToggleWidgets.jsx +++ b/src/components/Footer/ToggleWidgets.jsx @@ -32,8 +32,16 @@ export const ToggleWidgets = () => { zIndex: "100", }} > - toggle()} icon> - {widgetView ? : } + toggle()} + css={{ color: "$on_surface_high" }} + > + {widgetView ? ( + + ) : ( + + )} ); diff --git a/src/components/Footer/WidgetCard.jsx b/src/components/Footer/WidgetCard.jsx index b7e684e08..652d2c0b4 100644 --- a/src/components/Footer/WidgetCard.jsx +++ b/src/components/Footer/WidgetCard.jsx @@ -20,17 +20,17 @@ export const WidgetCard = ({ onClick={onClick} key={title} > - + {`${imageSrc}-polls`} - + {title} - + {subtitle} diff --git a/src/components/Footer/Widgets.jsx b/src/components/Footer/Widgets.jsx index 961e3ca2f..c1deccd51 100644 --- a/src/components/Footer/Widgets.jsx +++ b/src/components/Footer/Widgets.jsx @@ -71,10 +71,10 @@ const WidgetOptions = ({ title, onClick, subtitle, Icon }) => { > {Icon} @@ -82,7 +82,7 @@ const WidgetOptions = ({ title, onClick, subtitle, Icon }) => { {title} diff --git a/src/components/GoLiveButton.jsx b/src/components/GoLiveButton.jsx index 3bcd80cde..890b39be2 100644 --- a/src/components/GoLiveButton.jsx +++ b/src/components/GoLiveButton.jsx @@ -33,10 +33,7 @@ const GoLiveButton = () => { diff --git a/src/components/MoreSettings/ChangeSelfRole.jsx b/src/components/MoreSettings/ChangeSelfRole.jsx index 61788768d..18210e4cd 100644 --- a/src/components/MoreSettings/ChangeSelfRole.jsx +++ b/src/components/MoreSettings/ChangeSelfRole.jsx @@ -49,12 +49,18 @@ export const ChangeSelfRole = ({ onClick }) => { {availableSelfChangeRoles.map((role, i) => ( { try { await hmsActions.changeRole(localPeerId, role, true); diff --git a/src/components/MoreSettings/EmbedUrl.jsx b/src/components/MoreSettings/EmbedUrl.jsx index 81ae318c1..41cc8f023 100644 --- a/src/components/MoreSettings/EmbedUrl.jsx +++ b/src/components/MoreSettings/EmbedUrl.jsx @@ -20,6 +20,7 @@ export const EmbedUrl = ({ setShowOpenUrl }) => { } return ( { if (!amIScreenSharing) { setShowOpenUrl(true); diff --git a/src/components/MoreSettings/FullScreenItem.jsx b/src/components/MoreSettings/FullScreenItem.jsx index b73e3c0a6..8538dd124 100644 --- a/src/components/MoreSettings/FullScreenItem.jsx +++ b/src/components/MoreSettings/FullScreenItem.jsx @@ -15,6 +15,7 @@ export const FullScreenItem = () => { return ( { toggleFullscreen(); }} diff --git a/src/components/MoreSettings/MoreSettings.jsx b/src/components/MoreSettings/MoreSettings.jsx index 7fa3624da..5b512d91f 100644 --- a/src/components/MoreSettings/MoreSettings.jsx +++ b/src/components/MoreSettings/MoreSettings.jsx @@ -113,6 +113,7 @@ export const MoreSettings = () => { sideOffset={5} align="center" css={{ + backgroundColor: "$surface_default", maxHeight: "$96", "@md": { w: "$64" }, "div[role='separator']:first-child": { @@ -123,6 +124,7 @@ export const MoreSettings = () => { {isMobile && permissions?.browserRecording ? ( <> updateState(MODALS.START_RECORDING, true)} > @@ -130,11 +132,11 @@ export const MoreSettings = () => { {isBrowserRecordingOn ? "Stop" : "Start"} Recording - ) : null} {isChangeNameEnabled && ( updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn" > @@ -149,6 +151,7 @@ export const MoreSettings = () => { /> {permissions?.changeRole && ( updateState(MODALS.BULK_ROLE_CHANGE, true)} data-testid="bulk_role_change_btn" > @@ -166,6 +169,7 @@ export const MoreSettings = () => { )} {permissions.mute && ( updateState(MODALS.MUTE_ALL, true)} data-testid="mute_all_btn" > @@ -175,8 +179,8 @@ export const MoreSettings = () => { )} - updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn" > @@ -190,6 +194,7 @@ export const MoreSettings = () => { (localPeerRole === "hls-viewer" ? ( Hls.isSupported() ? ( hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats) } @@ -220,6 +225,7 @@ export const MoreSettings = () => { ) : null ) : ( updateState(MODALS.STATS_FOR_NERDS, true)} data-testid="stats_for_nreds_btn" > diff --git a/src/components/Notifications/Notifications.jsx b/src/components/Notifications/Notifications.jsx index 253e871fb..7aaccc179 100644 --- a/src/components/Notifications/Notifications.jsx +++ b/src/components/Notifications/Notifications.jsx @@ -172,9 +172,9 @@ export function Notifications() { onClick={() => toggleWidget(notification.data.id)} variant="standard" css={{ - backgroundColor: "$surfaceLight", + backgroundColor: "$surface_bright", fontWeight: "$semiBold", - color: "$textHighEmp", + color: "$on_surface_high", p: "$xs $md", }} > diff --git a/src/components/Notifications/PeerNotifications.jsx b/src/components/Notifications/PeerNotifications.jsx index efa38991f..0bf9ba3df 100644 --- a/src/components/Notifications/PeerNotifications.jsx +++ b/src/components/Notifications/PeerNotifications.jsx @@ -5,6 +5,7 @@ import { } from "@100mslive/react-sdk"; import { ToastBatcher } from "../Toast/ToastBatcher"; import { useSubscribedNotifications } from "../AppData/useUISettings"; +import { isInternalRole } from "../../common/utils"; import { SUBSCRIBED_NOTIFICATIONS } from "../../common/constants"; const notificationTypes = [ @@ -22,7 +23,11 @@ export const PeerNotifications = () => { SUBSCRIBED_NOTIFICATIONS.PEER_LEFT ); useEffect(() => { - if (!notification) { + if ( + !notification || + (notification?.data?.roleName && + isInternalRole(notification.data.roleName)) + ) { return; } console.debug(`[${notification.type}]`, notification); diff --git a/src/components/Notifications/PermissionErrorModal.jsx b/src/components/Notifications/PermissionErrorModal.jsx index 9ee34eb5e..4270cbb14 100644 --- a/src/components/Notifications/PermissionErrorModal.jsx +++ b/src/components/Notifications/PermissionErrorModal.jsx @@ -51,7 +51,7 @@ export function PermissionErrorModal() { display: "flex", alignItems: "center", justifyContent: "space-between", - borderBottom: "1px solid $borderDefault", + borderBottom: "1px solid $border_default", pb: "$8", }} > diff --git a/src/components/Notifications/ReconnectNotifications.jsx b/src/components/Notifications/ReconnectNotifications.jsx index 2f85d9efc..0e2614412 100644 --- a/src/components/Notifications/ReconnectNotifications.jsx +++ b/src/components/Notifications/ReconnectNotifications.jsx @@ -67,7 +67,7 @@ export const ReconnectNotifications = () => {
- + You lost your network connection. Trying to reconnect.
diff --git a/src/components/PIP/pipUtils.js b/src/components/PIP/pipUtils.js index 0788059f0..551e580bc 100644 --- a/src/components/PIP/pipUtils.js +++ b/src/components/PIP/pipUtils.js @@ -5,12 +5,12 @@ function setPIPCanvasColors() { if (!CANVAS_FILL_COLOR) { CANVAS_FILL_COLOR = window .getComputedStyle(document.documentElement) - .getPropertyValue("--hms-ui-colors-surfaceLight"); + .getPropertyValue("--hms-ui-colors-surface_bright"); } if (!CANVAS_STROKE_COLOR) { CANVAS_STROKE_COLOR = window .getComputedStyle(document.documentElement) - .getPropertyValue("--hms-ui-colors-borderLight"); + .getPropertyValue("--hms-ui-colors-border_bright"); } } diff --git a/src/components/Playlist/Playlist.jsx b/src/components/Playlist/Playlist.jsx index 0e6518ec9..53731cd2b 100644 --- a/src/components/Playlist/Playlist.jsx +++ b/src/components/Playlist/Playlist.jsx @@ -95,15 +95,15 @@ export const Playlist = ({ type }) => { width: "$60", p: "$0", bg: "$bgSecondary", - border: "1px solid $menuBg", + border: "1px solid $surface_default", }} > diff --git a/src/components/Playlist/PlaylistControls.jsx b/src/components/Playlist/PlaylistControls.jsx index e8a24e0ef..4774f8a05 100644 --- a/src/components/Playlist/PlaylistControls.jsx +++ b/src/components/Playlist/PlaylistControls.jsx @@ -126,7 +126,7 @@ const VolumeControl = () => { const sliderVolume = active ? volume : audioTrackVolume; return ( - + { diff --git a/src/components/Playlist/PlaylistItem.jsx b/src/components/Playlist/PlaylistItem.jsx index 84f918293..22c0c7eeb 100644 --- a/src/components/Playlist/PlaylistItem.jsx +++ b/src/components/Playlist/PlaylistItem.jsx @@ -28,10 +28,10 @@ export const PlaylistItem = React.memo( p: "$8", "&:hover": { cursor: "pointer", - bg: "$menuBg", + bg: "$surface_default", }, "&:focus-visible": { - bg: "$menuBg", + bg: "$surface_default", }, }} onClick={onClick} @@ -43,7 +43,7 @@ export const PlaylistItem = React.memo( > {name} diff --git a/src/components/Playlist/VideoPlayer.jsx b/src/components/Playlist/VideoPlayer.jsx index e46ec1981..2e100fe7b 100644 --- a/src/components/Playlist/VideoPlayer.jsx +++ b/src/components/Playlist/VideoPlayer.jsx @@ -46,16 +46,16 @@ export const VideoPlayer = React.memo(({ peerId }) => { justify="between" align="center" css={{ - bg: "$menuBg", + bg: "$surface_default", p: "$2 $2 $2 $6", borderTopLeftRadius: "$1", borderTopRightRadius: "$1", }} > - {active.name} + {active.name} { hmsActions.videoPlaylist.stop(); @@ -92,7 +92,7 @@ export const VideoPlayer = React.memo(({ peerId }) => { toggle()} css={{ - color: "$white", + color: "$on_primary_high", height: "max-content", alignSelf: "center", cursor: "pointer", diff --git a/src/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx b/src/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx index 6b285f376..00e7992a8 100644 --- a/src/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx +++ b/src/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx @@ -45,8 +45,8 @@ export const PollsQuizMenu = () => { function InteractionSelectionCard({ title, icon, active, onClick }) { const activeBorderStyle = active - ? "$space$px solid $borderAccent" - : "$space$px solid $borderLight"; + ? "$space$px solid $primary_default" + : "$space$px solid $border_bright"; return ( @@ -111,7 +111,7 @@ const AddMenu = () => { return ( <> - + Select the type you want to continue with @@ -137,13 +137,17 @@ const AddMenu = () => { type="text" value={title} onChange={event => setTitle(event.target.value)} + css={{ + backgroundColor: "$surface_bright", + border: "1px solid $border_default", + }} /> setHideVoteCount(value)} css={{ mr: "$6" }} /> - + Hide Vote Count @@ -152,7 +156,7 @@ const AddMenu = () => { onCheckedChange={value => setAnonymous(value)} css={{ mr: "$6" }} /> - + Make Results Anonymous @@ -200,13 +204,13 @@ const PrevMenu = () => { return polls?.length ? ( - + Previous Polls/Quiz @@ -238,12 +242,12 @@ const InteractionCard = ({ id, title, isLive, isTimed }) => { return ( {title} diff --git a/src/components/Polls/CreatePollQuiz/Timer.jsx b/src/components/Polls/CreatePollQuiz/Timer.jsx index 6480b316d..01ae2fa7c 100644 --- a/src/components/Polls/CreatePollQuiz/Timer.jsx +++ b/src/components/Polls/CreatePollQuiz/Timer.jsx @@ -33,7 +33,7 @@ export const Timer = ({ onCheckedChange={setShowTimerDropDown} css={{ mr: "$6" }} /> - + Timer @@ -47,7 +47,7 @@ export const Timer = ({ ref={timerDropdownRef} title={timerSettings[timer]} open={timerDropdownToggle} - titleCss={{ c: "$textHighEmp", ml: "$md" }} + titleCss={{ c: "$on_surface_high", ml: "$md" }} /> setQuestions([...questions, { draftID: uuid() }])} > @@ -126,7 +126,7 @@ const QuestionCard = ({ return ( {question.saved ? ( Question {index + 1} of {length} @@ -57,6 +57,10 @@ export const QuestionForm = ({ @@ -84,7 +88,11 @@ export const QuestionForm = ({ setText(event.target.value)} @@ -92,10 +100,10 @@ export const QuestionForm = ({ {type === QUESTION_TYPE.SINGLE_CHOICE || type === QUESTION_TYPE.MULTIPLE_CHOICE ? ( <> - + Options{" "} {isQuiz && ( - + (Use checkboxes to indicate correct answers) )} @@ -117,9 +125,9 @@ export const QuestionForm = ({ {options?.length < 20 && ( setOptions([...options, { text: "", isCorrectAnswer: false }]) @@ -154,9 +162,9 @@ export const QuestionForm = ({ setOpenDelete(!open)} /> @@ -191,7 +199,7 @@ export const QuestionForm = ({ title="Delete question?" css={{ w: "$80", p: "$10", backgroundColor: "#201617" }} > - + Are you sure you want to delete this question? This action cannot be undone. diff --git a/src/components/Polls/CreateQuestions/SavedQuestion.jsx b/src/components/Polls/CreateQuestions/SavedQuestion.jsx index 7899dc2a5..47f229a39 100644 --- a/src/components/Polls/CreateQuestions/SavedQuestion.jsx +++ b/src/components/Polls/CreateQuestions/SavedQuestion.jsx @@ -7,7 +7,7 @@ import { QUESTION_TYPE_TITLE } from "../../../common/constants"; export const SavedQuestion = ({ question, index, length, convertToDraft }) => { return ( <> - + Question {index + 1} of {length}: {QUESTION_TYPE_TITLE[question.type]} @@ -15,11 +15,11 @@ export const SavedQuestion = ({ question, index, length, convertToDraft }) => { {question.options.map(option => ( - + {option.text} {option.isCorrectAnswer && ( - + )} diff --git a/src/components/Polls/Voting/PollResultSummary.jsx b/src/components/Polls/Voting/PollResultSummary.jsx index f467fb89a..5fe9a73f5 100644 --- a/src/components/Polls/Voting/PollResultSummary.jsx +++ b/src/components/Polls/Voting/PollResultSummary.jsx @@ -126,12 +126,12 @@ export const PollResultSummary = ({ const PollStat = ({ label, value }) => { return ( - + @@ -139,7 +139,7 @@ const PollStat = ({ label, value }) => { {value} diff --git a/src/components/Polls/Voting/QuestionCard.jsx b/src/components/Polls/Voting/QuestionCard.jsx index c5e8fab11..7207bfb26 100644 --- a/src/components/Polls/Voting/QuestionCard.jsx +++ b/src/components/Polls/Voting/QuestionCard.jsx @@ -22,11 +22,11 @@ import { SingleChoiceOptions } from "../common/SingleChoiceOptions"; import { QUESTION_TYPE } from "../../../common/constants"; const TextArea = styled("textarea", { - backgroundColor: "$surfaceLighter", - border: "1px solid $borderLight", + backgroundColor: "$surface_brighter", + border: "1px solid $border_bright", borderRadius: "$1", mb: "$md", - color: "$textHighEmp", + color: "$on_surface_high", resize: "none", p: "$2", w: "100%", @@ -35,6 +35,7 @@ const TextArea = styled("textarea", { export const QuestionCard = ({ pollID, isQuiz, + startedBy, pollState, index, totalQuestions, @@ -54,12 +55,15 @@ export const QuestionCard = ({ const localPeerResponse = responses?.find( response => response.peer?.peerid === localPeerID ); + const isLocalPeerCreator = localPeerID === startedBy; const localPeerRoleName = useHMSStore(selectLocalPeerRoleName); + const roleCanViewResponse = + !rolesThatCanViewResponses || + rolesThatCanViewResponses.length === 0 || + rolesThatCanViewResponses.includes(localPeerRoleName || ""); const showVoteCount = - localPeerResponse && - (!rolesThatCanViewResponses || - rolesThatCanViewResponses.length === 0 || - rolesThatCanViewResponses.includes(localPeerRoleName || "")); + roleCanViewResponse && + (localPeerResponse || (isLocalPeerCreator && pollState === "stopped")); const isLive = pollState === "started"; const canRespond = isLive && !localPeerResponse; @@ -137,20 +141,22 @@ export const QuestionCard = ({ return ( QUESTION {index} OF {totalQuestions}: {type.toUpperCase()} @@ -162,9 +168,9 @@ export const QuestionCard = ({ onClick={movePrev} css={ prev - ? { color: "$textHighEmp", cursor: "pointer" } + ? { color: "$on_surface_high", cursor: "pointer" } : { - color: "$textDisabled", + color: "$on_surface_low", cursor: "not-allowed", } } @@ -176,9 +182,9 @@ export const QuestionCard = ({ onClick={moveNext} css={ next - ? { color: "$textHighEmp", cursor: "pointer" } + ? { color: "$on_surface_high", cursor: "pointer" } : { - color: "$textDisabled", + color: "$on_surface_low", cursor: "not-allowed", } } @@ -190,7 +196,7 @@ export const QuestionCard = ({ - {text} + {text} {type === QUESTION_TYPE.SHORT_ANSWER ? ( @@ -200,9 +206,9 @@ export const QuestionCard = ({ onChange={e => setTextAnswer(e.target.value)} css={{ w: "100%", - backgroundColor: "$surfaceLighter", + backgroundColor: "$surface_brighter", mb: "$md", - border: "1px solid $borderDefault", + border: "1px solid $border_default", cursor: localPeerResponse ? "not-allowed" : "text", }} /> @@ -280,7 +286,7 @@ const QuestionActions = ({ ) : null} {response ? ( - + {response.skipped ? "Skipped" : stringAnswerExpected diff --git a/src/components/Polls/Voting/StandardVoting.jsx b/src/components/Polls/Voting/StandardVoting.jsx index 9e0a81431..1f97275a0 100644 --- a/src/components/Polls/Voting/StandardVoting.jsx +++ b/src/components/Polls/Voting/StandardVoting.jsx @@ -17,6 +17,7 @@ export const StandardView = ({ poll }) => { { { gap: "$6", py: "$10", w: "100%", - color: "$textHighEmp", - borderBottom: "1px solid $borderDefault", + color: "$on_surface_high", + borderBottom: "1px solid $border_default", }} > {poll?.type?.toUpperCase()} @@ -62,7 +62,9 @@ export const Voting = ({ id, toggleVoting }) => { - + {pollCreatorName || "Participant"} started a {poll.type} diff --git a/src/components/Polls/common/MultipleChoiceOptions.jsx b/src/components/Polls/common/MultipleChoiceOptions.jsx index 60df37a09..16a372791 100644 --- a/src/components/Polls/common/MultipleChoiceOptions.jsx +++ b/src/components/Polls/common/MultipleChoiceOptions.jsx @@ -116,7 +116,11 @@ export const MultipleChoiceOptionInputs = ({ isQuiz, options, setOptions }) => { )} { diff --git a/src/components/Polls/common/SingleChoiceOptions.jsx b/src/components/Polls/common/SingleChoiceOptions.jsx index bb754f5e9..e6b247cc3 100644 --- a/src/components/Polls/common/SingleChoiceOptions.jsx +++ b/src/components/Polls/common/SingleChoiceOptions.jsx @@ -36,13 +36,13 @@ export const SingleChoiceOptions = ({ h: "$9", w: "$9", border: "2px solid", - borderColor: "$textHighEmp", + borderColor: "$on_surface_high", display: "flex", justifyContent: "center", alignItems: "center", cursor: canRespond ? "pointer" : "not-allowed", '&[data-state="checked"]': { - borderColor: "$primaryLight", + borderColor: "$primary_bright", borderWidth: "2px", }, }} @@ -54,7 +54,7 @@ export const SingleChoiceOptions = ({ css={{ h: "80%", w: "80%", - background: "$primaryLight", + background: "$primary_bright", borderRadius: "$round", }} /> @@ -127,13 +127,13 @@ export const SingleChoiceOptionInputs = ({ isQuiz, options, setOptions }) => { h: "$9", w: "$9", border: "2px solid", - borderColor: "$textHighEmp", + borderColor: "$on_surface_high", display: "flex", justifyContent: "center", alignItems: "center", cursor: "pointer", '&[data-state="checked"]': { - borderColor: "$primaryLight", + borderColor: "$primary_bright", borderWidth: "2px", }, }} @@ -143,7 +143,7 @@ export const SingleChoiceOptionInputs = ({ isQuiz, options, setOptions }) => { css={{ h: "80%", w: "80%", - background: "$primaryLight", + background: "$primary_bright", borderRadius: "$round", }} /> @@ -152,7 +152,11 @@ export const SingleChoiceOptionInputs = ({ isQuiz, options, setOptions }) => { { diff --git a/src/components/Polls/common/StatusIndicator.jsx b/src/components/Polls/common/StatusIndicator.jsx index 0f25a337b..6e4dc4d2e 100644 --- a/src/components/Polls/common/StatusIndicator.jsx +++ b/src/components/Polls/common/StatusIndicator.jsx @@ -7,7 +7,9 @@ export const StatusIndicator = ({ isLive, shouldShowTimer }) => { { variant="caption" css={{ fontWeight: "$semiBold", - color: "$textHighEmp", + color: "$on_surface_high", }} > {isLive ? "LIVE" : "ENDED"} @@ -28,14 +30,14 @@ export const StatusIndicator = ({ isLive, shouldShowTimer }) => { css={{ borderRadius: "0 $0 $0 0", p: "$2 $4", - backgroundColor: "$backgroundDefault", + backgroundColor: "$background_default", }} > 0:32 diff --git a/src/components/Polls/common/VoteCount.jsx b/src/components/Polls/common/VoteCount.jsx index 74b68c3be..ec14a2e3b 100644 --- a/src/components/Polls/common/VoteCount.jsx +++ b/src/components/Polls/common/VoteCount.jsx @@ -11,15 +11,17 @@ export const VoteCount = ({ isQuiz, voteCount, isCorrectAnswer }) => { css={{ p: "$2", mr: "$2", - color: isCorrectAnswer ? "$success" : "$error", + color: isCorrectAnswer ? "$alert_success" : "$alert_error_default", borderRadius: "$1", - border: `1px solid ${isCorrectAnswer ? "$success" : "$error"}`, + border: `1px solid ${ + isCorrectAnswer ? "$alert_success" : "$alert_error_default" + }`, }} > {isCorrectAnswer ? "Correct" : "Incorrect"} )} - + {voteCount}  {voteCount === 1 ? "vote" : "votes"} diff --git a/src/components/Polls/common/VoterList.jsx b/src/components/Polls/common/VoterList.jsx index ee9a76320..61e924337 100644 --- a/src/components/Polls/common/VoterList.jsx +++ b/src/components/Polls/common/VoterList.jsx @@ -19,7 +19,7 @@ export const VoterList = ({ voters }) => { /> {voter} diff --git a/src/components/Polls/common/Votes.jsx b/src/components/Polls/common/Votes.jsx index 2d05cd7c1..ea5c880e7 100644 --- a/src/components/Polls/common/Votes.jsx +++ b/src/components/Polls/common/Votes.jsx @@ -7,7 +7,7 @@ export const Votes = ({ voters }) => { return ( - + {voters.length}  {voters.length && voters.length !== 1 ? "votes" : "votes"} @@ -16,7 +16,7 @@ export const Votes = ({ voters }) => { align="start" disabled={hiddenVotersCount === 0} boxCss={{ - backgroundColor: "$surfaceLighter", + backgroundColor: "$surface_brighter", borderRadius: "$1", p: "$4 $6", top: "$2", @@ -45,7 +45,7 @@ export const Votes = ({ voters }) => { {hiddenVotersCount ? ( { variant="caption" css={{ fontWeight: "$semiBold", - color: "$textHighEmp", + color: "$on_surface_high", fontSize: "$tiny", }} > diff --git a/src/components/PostLeave.jsx b/src/components/PostLeave.jsx index 4ea992dac..7a1a11c96 100644 --- a/src/components/PostLeave.jsx +++ b/src/components/PostLeave.jsx @@ -34,21 +34,25 @@ const PostLeave = () => { justify="center" direction="column" align="center" - css={{ bg: "$mainBg", flex: "1 1 0", position: "relative" }} + css={{ bg: "$background_dim", flex: "1 1 0", position: "relative" }} > đź‘‹ You left the {getRoutePrefix() ? "stream" : "room"} { Left by mistake? diff --git a/src/components/Preview/PreviewJoin.jsx b/src/components/Preview/PreviewJoin.jsx index 008599e05..8bed01f49 100644 --- a/src/components/Preview/PreviewJoin.jsx +++ b/src/components/Preview/PreviewJoin.jsx @@ -95,11 +95,24 @@ const PreviewJoin = ({ }, [token, skipPreview]); return ( - + Get Started Setup your audio and video before joining @@ -149,7 +162,7 @@ const PreviewTile = ({ name, error }) => { return ( { id="name" css={{ w: "100%" }} value={name} - onChange={e => onChange(e.target.value)} + onChange={e => onChange(e.target.value.trimStart())} placeholder="Enter your name" autoFocus autoComplete="name" diff --git a/src/components/RoleChangeModal.jsx b/src/components/RoleChangeModal.jsx index 7a0b32846..3432bf181 100644 --- a/src/components/RoleChangeModal.jsx +++ b/src/components/RoleChangeModal.jsx @@ -60,7 +60,12 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { - + Change Role @@ -72,7 +77,7 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { css={{ mt: "$4", mb: "$8", - c: "$textMedEmp", + c: "$on_surface_medium", display: "flex", flexWrap: "wrap", columnGap: "4px", @@ -116,8 +121,8 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { data-testid="open_role_selection_dropdown" asChild css={{ - border: "1px solid $borderLight", - bg: "$surfaceLight", + border: "1px solid $border_bright", + bg: "$surface_bright", r: "$1", p: "$6 $9", }} @@ -146,7 +151,16 @@ export const RoleChangeModal = ({ peerId, onOpenChange }) => { onSelect={() => setRole(role)} css={{ px: "$9", - bg: role === selectedRole ? selectionBg : undefined, + bg: + role === selectedRole + ? selectionBg + : "$surface_bright", + "&:hover": { + backgroundColor: + role !== selectedRole + ? "$surface_brighter" + : "$primary_default", + }, }} > {role} diff --git a/src/components/ScreenshareDisplay.jsx b/src/components/ScreenshareDisplay.jsx index 26c148534..b2d78adfd 100644 --- a/src/components/ScreenshareDisplay.jsx +++ b/src/components/ScreenshareDisplay.jsx @@ -19,8 +19,8 @@ export const ScreenshareDisplay = () => { h: "100%", r: "$3", m: "0 auto", - color: "$textPrimary", - bg: "$surfaceDefault", + color: "$on_surface_high", + bg: "$surface_default", textAlign: "center", }} > diff --git a/src/components/Settings/SettingsModal.jsx b/src/components/Settings/SettingsModal.jsx index 50e7135f1..a858f9562 100644 --- a/src/components/Settings/SettingsModal.jsx +++ b/src/components/Settings/SettingsModal.jsx @@ -107,7 +107,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => { css={{ w: isMobile ? "100%" : "18.625rem", flexDirection: "column", - bg: "$backgroundDefault", + bg: "$background_dim", p: "$14 $10", borderTopLeftRadius: "$4", borderBottomLeftRadius: "$4", @@ -146,7 +146,7 @@ const SettingsModal = ({ open, onOpenChange, children }) => { position: "absolute", left: 0, right: 0, - bg: "$surfaceDefault", + bg: "$surface_default", width: "100%", height: "100%", } @@ -197,7 +197,7 @@ const SettingsContentHeader = ({ children, isMobile, onBack }) => { {isMobile && ( diff --git a/src/components/Settings/StartRecording.jsx b/src/components/Settings/StartRecording.jsx index 567ad76b8..b95909dfd 100644 --- a/src/components/Settings/StartRecording.jsx +++ b/src/components/Settings/StartRecording.jsx @@ -1,6 +1,5 @@ import React, { useState } from "react"; import { - selectAppData, selectPermissions, useHMSActions, useHMSStore, @@ -19,7 +18,6 @@ import { const StartRecording = ({ open, onOpenChange }) => { const permissions = useHMSStore(selectPermissions); - const recordingUrl = useHMSStore(selectAppData(APP_DATA.recordingUrl)); const [resolution, setResolution] = useState(RTMP_RECORD_DEFAULT_RESOLUTION); const [recordingStarted, setRecordingState] = useSetAppDataByKey( @@ -43,14 +41,14 @@ const StartRecording = ({ open, onOpenChange }) => { }} > - + End Recording - + Are you sure you want to end recording? You can’t undo this action. @@ -58,7 +56,7 @@ const StartRecording = ({ open, onOpenChange }) => { @@ -109,7 +107,6 @@ const StartRecording = ({ open, onOpenChange }) => { try { setRecordingState(true); await hmsActions.startRTMPOrRecording({ - meetingURL: recordingUrl, resolution: getResolution(resolution), record: true, }); diff --git a/src/components/Settings/SwitchWithLabel.jsx b/src/components/Settings/SwitchWithLabel.jsx index 2a2646462..361600b2e 100644 --- a/src/components/Settings/SwitchWithLabel.jsx +++ b/src/components/Settings/SwitchWithLabel.jsx @@ -16,7 +16,7 @@ const SwitchWithLabel = ({ my: "$2", py: "$8", w: "100%", - borderBottom: "1px solid $borderDefault", + borderBottom: "1px solid $border_default", display: hide ? "none" : "flex", }} > @@ -25,7 +25,7 @@ const SwitchWithLabel = ({ css={{ fontSize: "$md", fontWeight: "$semiBold", - color: checked ? "$textHighEmp" : "$textDisabled", + color: checked ? "$on_surface_high" : "$on_surface_low", cursor: "pointer", display: "flex", alignItems: "center", diff --git a/src/components/StatsForNerds.jsx b/src/components/StatsForNerds.jsx index 23f659036..6be846516 100644 --- a/src/components/StatsForNerds.jsx +++ b/src/components/StatsForNerds.jsx @@ -122,7 +122,9 @@ export const StatsForNerds = ({ onOpenChange }) => { css={{ px: "$9", bg: isSelected ? selectionBg : undefined, - c: isSelected ? "$white" : "$textPrimary", + c: isSelected + ? "$on_primary_high" + : "$on_surface_high", }} > {option.label} @@ -270,12 +272,12 @@ const TrackStats = ({ trackID, layer, local }) => { }; const StatsRow = React.memo(({ label, value }) => ( - + @@ -283,7 +285,7 @@ const StatsRow = React.memo(({ label, value }) => ( {value || "-"} diff --git a/src/components/Streaming/Common.jsx b/src/components/Streaming/Common.jsx index c9cf4e2e8..6d448146b 100644 --- a/src/components/Streaming/Common.jsx +++ b/src/components/Streaming/Common.jsx @@ -18,6 +18,7 @@ export const StreamCard = ({ title, subtitle, Icon, + imgSrc = "", css = {}, onClick, testId, @@ -29,7 +30,7 @@ export const StreamCard = ({ p: "$10", r: "$1", cursor: "pointer", - bg: "$surfaceLight", + bg: "$surface_bright", mb: "$10", mt: "$8", ...css, @@ -38,13 +39,17 @@ export const StreamCard = ({ onClick={onClick} > - + {imgSrc ? ( + + ) : ( + + )} {title} - + {subtitle} @@ -62,7 +67,7 @@ export const ContentHeader = ({ onBack, onClose, title = "", content }) => { { css={{ textTransform: "uppercase", fontWeight: "$semiBold", - color: "$textMedEmp", + color: "$on_surface_medium", }} > {title} @@ -109,7 +114,7 @@ export const Container = ({ children, rounded = false }) => { position: "absolute", top: 0, left: 0, - bg: "$surfaceDefault", + bg: "$surface_default", transform: "translateX(10%)", animation: `${slideLeftAndFade("10%")} 100ms ease-out forwards`, display: "flex", @@ -138,7 +143,7 @@ export const ContentBody = ({ {title} - + {children} @@ -150,9 +155,9 @@ export const RecordStream = ({ record, setRecord, testId }) => { return permissions?.browserRecording ? ( - + @@ -172,7 +177,7 @@ export const ErrorText = ({ error }) => { return null; } return ( - + {error} ); diff --git a/src/components/Streaming/HLSStreaming.jsx b/src/components/Streaming/HLSStreaming.jsx index 0ab6b8562..21cd65bfc 100644 --- a/src/components/Streaming/HLSStreaming.jsx +++ b/src/components/Streaming/HLSStreaming.jsx @@ -1,6 +1,5 @@ import { Fragment, useCallback, useEffect, useState } from "react"; import { - selectAppData, selectRoomID, useHMSActions, useHMSStore, @@ -26,7 +25,6 @@ import { } from "./Common"; import { useSetAppDataByKey } from "../AppData/useUISettings"; import { useFilteredRoles } from "../../common/hooks"; -import { getDefaultMeetingUrl } from "../../common/utils"; import { APP_DATA } from "../../common/constants"; const getCardData = (roleName, roomId) => { @@ -70,19 +68,19 @@ const Card = ({ title, icon, link, content, isHLSRunning, order = 0 }) => { - + {icon} {title} - + {content}