@100mslive/roomkit-react 0.3.16-alpha.1 → 0.3.16-alpha.11

package/src/Prebuilt/App.tsx

@@ -23,6 +23,7 @@ import { KeyboardHandler } from './components/Input/KeyboardInputManager';
 import { LeaveScreen } from './components/LeaveScreen';
 import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
+import { PIPProvider } from './components/PIP/PIPProvider';
 import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
@@ -218,24 +219,26 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                         },
                       }}
                     >
-                      <Init />
-                      <DialogContainerProvider dialogContainerSelector={containerSelector}>
-                        <Box
-                          className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
-                          css={{
-                            bg: '$background_dim',
-                            size: '100%',
-                            lineHeight: '1.5',
-                            '-webkit-text-size-adjust': '100%',
-                            position: 'relative',
-                          }}
-                        >
-                          <AppRoutes
-                            authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
-                            defaultAuthToken={authToken}
-                          />
-                        </Box>
-                      </DialogContainerProvider>
+                      <PIPProvider>
+                        <Init />
+                        <DialogContainerProvider dialogContainerSelector={containerSelector}>
+                          <Box
+                            className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
+                            css={{
+                              bg: '$background_dim',
+                              size: '100%',
+                              lineHeight: '1.5',
+                              '-webkit-text-size-adjust': '100%',
+                              position: 'relative',
+                            }}
+                          >
+                            <AppRoutes
+                              authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
+                              defaultAuthToken={authToken}
+                            />
+                          </Box>
+                        </DialogContainerProvider>
+                      </PIPProvider>
                     </HMSThemeProvider>
                   );
                 }}

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -44,7 +44,7 @@ import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/
 // @ts-ignore: No implicit Any
 import { useIsNoiseCancellationEnabled, useSetNoiseCancellation } from './AppData/useUISettings';
 import { useAudioOutputTest } from './hooks/useAudioOutputTest';
-import { isMacOS, TEST_AUDIO_URL } from '../common/constants';
+import { isAndroid, isIOS, isMacOS, TEST_AUDIO_URL } from '../common/constants';
 
 const krispPlugin = new HMSKrispPlugin();
 // const optionsCSS = { fontWeight: '$semiBold', color: '$on_surface_high', w: '100%' };
@@ -310,10 +310,9 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
           disabled={!toggleAudio}
           hideOptions={hideOptions || !hasAudioDevices}
           onDisabledClick={toggleAudio}
+          testid="audio_toggle_btn"
           tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
-          icon={
-            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
-          }
+          icon={!isLocalAudioEnabled ? <MicOffIcon /> : <MicOnIcon />}
           active={isLocalAudioEnabled}
           onClick={toggleAudio}
           key="toggleAudio"
@@ -353,13 +352,8 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
           hideOptions={hideOptions || !hasVideoDevices}
           onDisabledClick={toggleVideo}
           tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
-          icon={
-            !isLocalVideoEnabled ? (
-              <VideoOffIcon data-testid="video_off_btn" />
-            ) : (
-              <VideoOnIcon data-testid="video_on_btn" />
-            )
-          }
+          testid="video_toggle_btn"
+          icon={!isLocalVideoEnabled ? <VideoOffIcon /> : <VideoOnIcon />}
           key="toggleVideo"
           active={isLocalVideoEnabled}
           onClick={toggleVideo}
@@ -372,7 +366,7 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
         </IconButtonWithOptions>
       ) : null}
 
-      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview ? (
+      {localVideoTrack?.facingMode && roomState === HMSRoomState.Preview && (isIOS || isAndroid) ? (
         <Tooltip title="Switch Camera" key="switchCamera">
           <IconButton
             onClick={async () => {

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAwayNotifications,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -50,6 +51,7 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const { requestPermission } = useAwayNotifications();
 
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
@@ -99,10 +101,20 @@ export const ConferenceScreen = () => {
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
+        .then(() => requestPermission())
         .catch(console.error);
       autoRoomJoined.current = true;
     }
-  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
+  }, [
+    authTokenInAppData,
+    endpoints?.init,
+    hmsActions,
+    isConnectedToRoom,
+    isPreviewScreenEnabled,
+    roomState,
+    userName,
+    requestPermission,
+  ]);
 
   useEffect(() => {
     onJoinFunc?.();

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -194,7 +194,6 @@ export const Participant = ({
         <ParticipantActions
           peerId={peer.id}
           peerType={peer.type}
-          isLocal={peer.id === localPeerId}
           role={peer.roleName}
           isHandRaisedAccordion={isHandRaisedAccordion}
         />
@@ -273,12 +272,10 @@ const ParticipantActions = React.memo(
     peerId,
     peerType,
     role,
-    isLocal,
     isHandRaisedAccordion,
   }: {
     peerId: string;
     role: string;
-    isLocal: boolean;
     isHandRaisedAccordion?: boolean;
     peerType: HMSPeerType;
   }) => {
@@ -331,7 +328,7 @@ const ParticipantActions = React.memo(
               </Flex>
             ) : null}
 
-            {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+            {shouldShowMoreActions ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
           </>
         )}
       </Flex>

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -90,6 +90,7 @@ export const IconButtonWithOptions = ({
   onDisabledClick = () => {
     return;
   },
+  testid = '',
   tooltipMessage = '',
   icon,
   children,
@@ -103,6 +104,7 @@ export const IconButtonWithOptions = ({
   onDisabledClick: () => void;
   icon: React.ReactNode;
   children: React.ReactNode;
+  testid?: string;
   hideOptions?: boolean;
   active: boolean;
   disabled?: boolean;
@@ -111,7 +113,13 @@ export const IconButtonWithOptions = ({
   const commonProps = { disabled, active };
   return (
     <Flex>
-      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions} className="__cancel-drag-event">
+      <IconSection
+        data-testid={testid}
+        {...commonProps}
+        onClick={onClick}
+        hideOptions={hideOptions}
+        className="__cancel-drag-event"
+      >
         <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
           <Icon {...commonProps}>{icon}</Icon>
         </Tooltip>

package/src/Prebuilt/components/MoreSettings/MoreSettings.tsx

@@ -10,7 +10,6 @@ import { DesktopOptions } from './SplitComponents/DesktopOptions';
 // @ts-ignore: No implicit Any
 import { MwebOptions } from './SplitComponents/MwebOptions';
 import { config as cssConfig } from '../../..';
-import { PIPProvider } from '../PIP/PIPProvider';
 import { useLandscapeHLSStream } from '../../common/hooks';
 
 export const MoreSettings = ({
@@ -25,8 +24,6 @@ export const MoreSettings = ({
   return isMobile || isLandscapeHLSStream ? (
     <MwebOptions elements={elements} screenType={screenType} />
   ) : (
-    <PIPProvider>
-      <DesktopOptions elements={elements} screenType={screenType} />
-    </PIPProvider>
+    <DesktopOptions elements={elements} screenType={screenType} />
   );
 };

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -48,12 +48,14 @@ import { CaptionModal } from '../CaptionModal';
 import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
 import { usePIPChat } from '../../PIP/usePIPChat';
 // @ts-ignore: No implicit any
-import { APP_DATA, isMacOS } from '../../../common/constants';
+import { APP_DATA, isMacOS, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -85,6 +87,8 @@ export const DesktopOptions = ({
   const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
   const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
   const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const showPipChatOption = !!elements?.chat && isSupported;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
@@ -180,7 +184,13 @@ export const DesktopOptions = ({
             </Dropdown.Item>
           ) : null}
 
-          <PIPChatOption showPIPChat={showPipChatOption} openChat={async () => await requestPipWindow(350, 500)} />
+          <PIPChatOption
+            showPIPChat={showPipChatOption}
+            openChat={async () => {
+              isChatOpen && toggleChat();
+              await requestPipWindow(350, 500);
+            }}
+          />
           <FullScreenItem />
           <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -1,14 +1,19 @@
 import { useEffect } from 'react';
+import { useDebounce } from 'react-use';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLocalScreenShared,
   selectPeerByID,
   selectRoomState,
+  useAwayNotifications,
   useHMSNotifications,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -22,6 +27,9 @@ export const HandRaisedNotifications = () => {
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
   const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const { showNotification } = useAwayNotifications();
+  const logoURL = useRoomLayout()?.logo?.url;
 
   useEffect(() => {
     if (!notification?.data) {
@@ -32,6 +40,7 @@ export const HandRaisedNotifications = () => {
     if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
+
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
@@ -41,5 +50,29 @@ export const HandRaisedNotifications = () => {
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
 
+  useDebounce(
+    () => {
+      if (!notification?.data) {
+        return;
+      }
+
+      // Don't show toast message in case of local peer.
+      if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
+        return;
+      }
+
+      const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+      const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
+      const handRaisedPeers = vanillaStore.getState(selectHandRaisedPeers);
+      if (amIScreenSharing && hasPeerHandRaised) {
+        const title = `${peer?.name} ${
+          handRaisedPeers.length > 1 ? `and ${handRaisedPeers.length - 1} others` : ''
+        } raised hand`;
+        showNotification(title, { icon: logoURL });
+      }
+    },
+    1000,
+    [isSubscribing, notification, roomState, vanillaStore, amIScreenSharing],
+  );
   return null;
 };

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -35,6 +35,7 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { usePIPWindow } from '../PIP/usePIPWindow';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
@@ -52,6 +53,7 @@ export function Notifications() {
   const { showNotification } = useAwayNotifications();
   const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
   const logoURL = useRoomLayout()?.logo?.url;
+  const { pipWindow } = usePIPWindow();
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -172,7 +174,7 @@ export function Notifications() {
         }
         break;
       case HMSNotificationTypes.NEW_MESSAGE:
-        if (amIScreenSharing && !notification.data?.ignored) {
+        if (amIScreenSharing && !notification.data?.ignored && !pipWindow) {
           showNotification(`New message from ${notification.data.senderName}`, {
             body: notification.data.message,
             icon: logoURL,

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   selectHMSMessages,
   selectLocalPeerID,
+  selectPeerNameByID,
   selectSessionStore,
   selectUnreadHMSMessagesCount,
   useHMSStore,
@@ -14,6 +15,7 @@ import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
 import { AnnotisedMessage } from '../Chat/ChatBody';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 import { CHAT_MESSAGE_LIMIT, formatTime } from '../Chat/utils';
 import { SESSION_STORE_KEY } from '../../common/constants';
 
@@ -43,10 +45,29 @@ export const PIPChat = () => {
     const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
     return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
   }, [blacklistedMessageIDs, messages]);
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
+    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
+  const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
   const { elements } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
   const canSendChatMessages = !!elements?.chat?.public_chat_enabled || !!elements?.chat?.roles_whitelist?.length;
 
+  const getChatStatus = useCallback(() => {
+    if (isLocalPeerBlacklisted) return "You've been blocked from sending messages";
+    if (!isChatEnabled)
+      return `Chat has been paused by ${
+        chatStateUpdatedBy.peerId === localPeerID ? 'you' : chatStateUpdatedBy?.userName
+      }`;
+    return message_placeholder;
+  }, [
+    chatStateUpdatedBy.peerId,
+    chatStateUpdatedBy?.userName,
+    isChatEnabled,
+    isLocalPeerBlacklisted,
+    localPeerID,
+    message_placeholder,
+  ]);
+
   return (
     <div style={{ height: '100%' }}>
       <Box
@@ -55,7 +76,7 @@ export const PIPChat = () => {
           bg: '$surface_dim',
           overflowY: 'auto',
           // Subtracting height of footer
-          h: canSendChatMessages ? 'calc(100% - 90px)' : '100%',
+          h: canSendChatMessages ? 'calc(100% - 87px)' : '100%',
           position: 'relative',
         }}
       >
@@ -108,16 +129,11 @@ export const PIPChat = () => {
                         </Text>
                       </Tooltip>
                     )}
-                    {message.recipientRoles ? (
-                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                        to {message.recipientRoles} (Group)
-                      </Text>
-                    ) : null}
-                    {message.recipientPeer ? (
-                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-                        (DM)
-                      </Text>
-                    ) : null}
+                    <MessageTitle
+                      localPeerID={localPeerID}
+                      recipientPeer={message.recipientPeer}
+                      recipientRoles={message.recipientRoles}
+                    />
                   </Flex>
 
                   <Text
@@ -193,13 +209,16 @@ export const PIPChat = () => {
             <TextArea
               id="chat-input"
               maxLength={CHAT_MESSAGE_LIMIT}
-              style={{ border: 'none', resize: 'none' }}
+              disabled={!isChatEnabled || isLocalPeerBlacklisted}
+              rows={1}
               css={{
                 w: '100%',
                 c: '$on_surface_high',
-                padding: '0.25rem !important',
+                p: '0.75rem 0.75rem !important',
+                border: 'none',
+                resize: 'none',
               }}
-              placeholder={message_placeholder}
+              placeholder={getChatStatus()}
               required
               autoComplete="off"
               aria-autocomplete="none"
@@ -207,6 +226,8 @@ export const PIPChat = () => {
 
             <IconButton
               id="send-btn"
+              disabled={!isChatEnabled || isLocalPeerBlacklisted}
+              title={getChatStatus()}
               css={{
                 ml: 'auto',
                 height: 'max-content',
@@ -223,3 +244,30 @@ export const PIPChat = () => {
     </div>
   );
 };
+
+const MessageTitle = ({
+  recipientPeer,
+  recipientRoles,
+  localPeerID,
+}: {
+  recipientPeer?: string;
+  recipientRoles?: string[];
+  localPeerID: string;
+}) => {
+  const peerName = useHMSStore(selectPeerNameByID(recipientPeer));
+
+  return (
+    <>
+      {recipientRoles ? (
+        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+          to {recipientRoles} (Group)
+        </Text>
+      ) : null}
+      {recipientPeer ? (
+        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+          to {recipientPeer === localPeerID ? 'You' : peerName} (DM)
+        </Text>
+      ) : null}
+    </>
+  );
+};

package/src/Prebuilt/components/PIP/PIPWindow.tsx

@@ -8,6 +8,6 @@ type PIPWindowProps = {
 
 export const PIPWindow = ({ pipWindow, children }: PIPWindowProps) => {
   pipWindow.document.body.style.margin = '0';
-  pipWindow.document.body.style.overflowX = 'hidden';
+  pipWindow.document.body.style.overflow = 'clip';
   return createPortal(children, pipWindow.document.body);
 };

package/src/Prebuilt/components/PIP/usePIPChat.tsx

@@ -25,6 +25,8 @@ export const usePIPChat = () => {
       const pipChatInput = pipWindow.document.getElementById('chat-input') as HTMLTextAreaElement;
       const marker = pipWindow.document.getElementById('marker');
 
+      marker?.scrollIntoView({ block: 'end' });
+
       const observer = new IntersectionObserver(
         entries => {
           entries.forEach(entry => {

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -8,6 +8,7 @@ import {
   selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
+  useAwayNotifications,
   useHMSStore,
   useParticipants,
   usePreviewJoin,
@@ -100,6 +101,7 @@ const PreviewJoin = ({
     },
     asRole,
   });
+  const { requestPermission } = useAwayNotifications();
   const roomState = useHMSStore(selectRoomState);
   const savePreferenceAndJoin = useCallback(() => {
     setPreviewPreference({
@@ -115,7 +117,7 @@ const PreviewJoin = ({
       if (skipPreview) {
         savePreferenceAndJoin();
       } else {
-        preview();
+        preview().then(() => requestPermission());
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -111,7 +111,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
       };
@@ -129,7 +129,7 @@ export const ToastConfig = {
       const count = new Set(notifications.map(notification => notification.data?.id)).size;
       return {
         title: `${notifications[notifications.length - 1].data?.name} ${
-          count > 1 ? `${count} and others` : ''
+          count > 1 ? `and ${count} others` : ''
         } raised hand`,
         icon: <HandIcon />,
         action: <HandRaiseAction isSingleHandRaise={false} />,

package/src/Prebuilt/components/VirtualBackground/VBOption.tsx

@@ -26,7 +26,7 @@ const Root = ({
       border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
       cursor: 'pointer',
       '&:hover': { border: '4px solid $primary_dim' },
-      ...(mediaURL ? { height: '$20', backgroundImage: `url(${mediaURL})`, backgroundSize: 'cover' } : {}),
+      ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
     }}
     onClick={async () => {
       await onClick?.();