feat(phone/call): anonymous calling

apps/game/client/calls/cl_calls.controller.ts

@@ -43,9 +43,10 @@ export const initializeCallHandler = async (data: InitializeCallDTO, cb?: NuiCal
 // Will trigger whenever somebody initializes a call to any number
 RegisterNuiCB<InitializeCallDTO>(CallEvents.INITIALIZE_CALL, initializeCallHandler);
 
-onNetTyped<StartCallEventData>(CallEvents.START_CALL, async (data) => {
-  const { transmitter, isTransmitter, receiver, isUnavailable } = data;
-  callService.handleStartCall(transmitter, receiver, isTransmitter, isUnavailable);
+onNetTyped<StartCallEventData>(CallEvents.START_CALL, async (data: ActiveCall) => {
+  // TODO: add isAnonymous to the call for the client that is being called
+  const { transmitter, isTransmitter, receiver, isUnavailable, isAnonymous } = data;
+  callService.handleStartCall(transmitter, receiver, isTransmitter, isUnavailable, isAnonymous);
 });
 
 RegisterNuiCB<TransmitterNumDTO>(CallEvents.ACCEPT_CALL, (data, cb) => {

apps/game/client/calls/cl_calls.service.ts

@@ -82,6 +82,7 @@ export class CallService {
     receiver: string,
     isTransmitter: boolean,
     isUnavailable: boolean,
+    isAnonymous: boolean,
   ) {
     // If we're already in a call we want to automatically reject
     if (this.isInCall() || !(await checkHasPhone()) || this.currentPendingCall)
@@ -113,6 +114,7 @@ export class CallService {
       isTransmitter: isTransmitter,
       accepted: false,
       isUnavailable: isUnavailable,
+      isAnonymous: isAnonymous,
     });
   }
 

apps/game/client/cl_photo.ts

@@ -54,7 +54,7 @@ RegisterNuiCB<void>(PhotoEvents.TAKE_PHOTO, async (_, cb) => {
   } else {
     canToggleHUD = false;
   }
-  
+
   // If radar is not already hidden (by another resource), Hide the radar
   if (!IsRadarHidden()) {
     canToggleRadar = true;
@@ -69,7 +69,7 @@ RegisterNuiCB<void>(PhotoEvents.TAKE_PHOTO, async (_, cb) => {
 
   while (inCameraMode) {
     await Delay(0);
-    
+
     // Arrow Up Key, Toggle Front/Back Camera
     if (IsControlJustPressed(1, 27)) {
       frontCam = !frontCam;
@@ -118,7 +118,7 @@ const handleTakePicture = async () => {
     DisplayHud(true);
     canToggleHUD = false;
   }
-  
+
   // If radar is already hidden (by this resource), Show the radar
   if (canToggleRadar) {
     DisplayRadar(true);
@@ -143,7 +143,7 @@ const handleCameraExit = async () => {
     DisplayHud(true);
     canToggleHUD = false;
   }
-  
+
   // If radar is already hidden (by this resource), Show the radar
   if (canToggleRadar) {
     DisplayRadar(true);

apps/game/server/calls/calls.service.ts

@@ -53,6 +53,7 @@ class CallsService {
       receiver: reqObj.data.receiverNumber,
       is_accepted: false,
       start: startCallTimeUnix.toString(),
+      isAnonymous: reqObj.data.isAnonymous,
     };
 
     // If not online we immediately let the caller know that is an invalid
@@ -106,6 +107,7 @@ class CallsService {
       receiverSource: receivingPlayer.source,
       start: startCallTimeUnix.toString(),
       is_accepted: false,
+      isAnonymous: reqObj.data.isAnonymous,
     };
 
     // Now we can add the call to our memory map
@@ -141,6 +143,7 @@ class CallsService {
         transmitter: transmitterNumber,
         receiver: reqObj.data.receiverNumber,
         isTransmitter: false,
+        isAnonymous: reqObj.data.isAnonymous,
       },
       receivingPlayer.source,
     );
@@ -165,6 +168,7 @@ class CallsService {
         transmitter: transmitterNumber,
         receiver: targetCallItem.receiver,
         isTransmitter: false,
+        isAnonymous: targetCallItem.isAnonymous,
         channelId,
       },
       targetCallItem.receiverSource,

apps/phone/src/apps/dialer/components/views/DialerHistory.tsx

@@ -52,8 +52,9 @@ export const DialerHistory: React.FC = () => {
     return (
       <Box display="flex" justifyContent="center" alignItems="center" paddingTop={35}>
         <p>
-          {<Typography style={{ color: phoneTheme.palette.text.primary }}>
-            {t('DIALER.NO_HISTORY')}
+          {
+            <Typography style={{ color: phoneTheme.palette.text.primary }}>
+              {t('DIALER.NO_HISTORY')}
             </Typography>
           }
           <span role="img" aria-label="sad">
@@ -83,7 +84,7 @@ export const DialerHistory: React.FC = () => {
               primaryTypographyProps={{
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
-                color: phoneTheme.palette.text.primary
+                color: phoneTheme.palette.text.primary,
               }}
             />
             <IconButton onClick={() => handleCall(call.receiver)} size="large">
@@ -108,7 +109,7 @@ export const DialerHistory: React.FC = () => {
             </ListItemIcon>
 
             <ListItemText
-              primary={getDisplay(call.transmitter)}
+              primary={call.isAnonymous ? 'Anonymous' : getDisplay(call.transmitter)}
               secondary={
                 <Typography style={{ color: phoneTheme.palette.text.secondary }}>
                   {dayjs().to(dayjs.unix(parseInt(call.start)))}
@@ -117,14 +118,19 @@ export const DialerHistory: React.FC = () => {
               primaryTypographyProps={{
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
-                color: phoneTheme.palette.text.primary
+                color: phoneTheme.palette.text.primary,
               }}
             />
-            <IconButton onClick={() => handleCall(call.transmitter)} size="large">
+
+            <IconButton
+              onClick={() => handleCall(call.transmitter)}
+              size="large"
+              disabled={call.isAnonymous}
+            >
               <PhoneIcon />
             </IconButton>
 
-            {getDisplay(call.transmitter) === call.transmitter && (
+            {!call.isAnonymous && getDisplay(call.transmitter) === call.transmitter && (
               <IconButton
                 onClick={() =>
                   history.push(`/contacts/-1?addNumber=${call.transmitter}&referal=/phone/contacts`)

apps/phone/src/apps/settings/components/SettingsApp.tsx

@@ -27,6 +27,7 @@ import {
   Book,
   DeleteForever,
   Apps,
+  PersonOff,
 } from '@mui/icons-material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/material';
@@ -41,7 +42,6 @@ import { useApp } from '@os/apps/hooks/useApps';
 import { useCustomWallpaperModal } from '../state/customWallpaper.state';
 import fetchNui from '@utils/fetchNui';
 import { SettingEvents } from '@typings/settings';
-import { useCustomEvent } from '@os/events/useCustomEvents';
 
 const useStyles = makeStyles({
   backgroundModal: {
@@ -63,7 +63,6 @@ export const SettingsApp: React.FC = () => {
   const [settings, setSettings] = useSettings();
   const [t] = useTranslation();
   const [customWallpaperState, setCustomWallpaperState] = useCustomWallpaperModal();
-  const dispatchEvent = useCustomEvent('themeChanged', {});
 
   const { addAlert } = useSnackbar();
 
@@ -78,7 +77,6 @@ export const SettingsApp: React.FC = () => {
       } else {
         document.documentElement.classList.remove('dark');
       }
-      //dispatchEvent(value);
     }
   };
 
@@ -231,6 +229,14 @@ export const SettingsApp: React.FC = () => {
             onClick={(curr) => handleSettingChange('streamerMode', !curr)}
             theme={theme}
           />
+          <SettingSwitch
+            label={t('SETTINGS.OPTIONS.ANONYMOUS_MODE.TITLE')}
+            secondary={t('SETTINGS.OPTIONS.ANONYMOUS_MODE.DESCRIPTION')}
+            icon={<PersonOff />}
+            value={settings.anonymousMode}
+            onClick={(curr) => handleSettingChange('anonymousMode', !curr)}
+            theme={theme}
+          />
           <SettingItemSlider
             label={t('SETTINGS.OPTIONS.CALL_VOLUME')}
             icon={<VolumeUp />}

apps/phone/src/config/default.json

@@ -230,6 +230,7 @@
       "value": 0.9
     },
     "streamerMode": false,
+    "anonymousMode": false,
     "ringtone": {
       "label": "iFruit",
       "value": "PHONE_GENERIC_RING_01"

apps/phone/src/locale/en.json

@@ -48,6 +48,10 @@
           "TITLE": "Streamer mode",
           "DESCRIPTION": "Hide images before they are shown"
         },
+        "ANONYMOUS_MODE": {
+          "TITLE": "Anonymous mode",
+          "DESCRIPTION": "Hide your phone number from other players"
+        },
         "CUSTOM_WALLPAPER": {
           "DIALOG_TITLE": "Custom Wallpaper",
           "DIALOG_CONTENT": "Set a custom wallpaper by entering the URL of the image below!",

apps/phone/src/os/call/components/CallContactContainer.tsx

@@ -11,7 +11,11 @@ const CallContactContainer = () => {
   const { getDisplayByNumber, getPictureByNumber } = useContactActions();
 
   const getDisplayOrNumber = () =>
-    call.isTransmitter ? getDisplayByNumber(call?.receiver) : getDisplayByNumber(call?.transmitter);
+    call.isTransmitter
+      ? getDisplayByNumber(call?.receiver)
+      : !call.isTransmitter && call.isAnonymous
+      ? 'Anonymous'
+      : getDisplayByNumber(call?.transmitter);
 
   return (
     <Box display="flex" alignItems="center">
@@ -29,6 +33,8 @@ const CallContactContainer = () => {
         src={
           call.isTransmitter
             ? getPictureByNumber(call.receiver)
+            : !call.isTransmitter && call.isAnonymous
+            ? 'https://i.fivemanage.com/images/3ClWwmpwkFhL.png'
             : getPictureByNumber(call?.transmitter)
         }
       />

apps/phone/src/os/call/hooks/useCall.ts

@@ -5,6 +5,7 @@ import fetchNui from '@utils/fetchNui';
 import { useCallback } from 'react';
 import { useMyPhoneNumber } from '@os/simcard/hooks/useMyPhoneNumber';
 import { ServerPromiseResp } from '@typings/common';
+import { useSettingsValue } from '@apps/settings/hooks/useSettings';
 
 interface CallHook {
   call: ActiveCall;
@@ -22,23 +23,28 @@ export const useCall = (): CallHook => {
   const [call, setCall] = useCurrentCall();
   const myPhoneNumber = useMyPhoneNumber();
   //const [t] = useTranslation();
+  const { anonymousMode } = useSettingsValue();
 
-  const initializeCall = useCallback((number) => {
-    // We allow calling of ourselves in development
-    /*if (process.env.NODE_ENV !== 'development' && myPhoneNumber === number) {
+  const initializeCall = useCallback(
+    (number: string) => {
+      // We allow calling of ourselves in development
+      /*if (process.env.NODE_ENV !== 'development' && myPhoneNumber === number) {
         return addAlert({ message: t('CALLS.FEEDBACK.ERROR_MYSELF'), type: 'error' });
       }*/
 
-    fetchNui<ServerPromiseResp<ActiveCall>>(CallEvents.INITIALIZE_CALL, {
-      receiverNumber: number,
-    }).then((resp) => {
-      if (resp.status !== 'ok') {
-        //          addAlert({ message: t('CALLS.FEEDBACK.ERROR'), type: 'error' });
-        console.error(resp.errorMsg);
-        return;
-      }
-    });
-  }, []);
+      fetchNui<ServerPromiseResp<ActiveCall>>(CallEvents.INITIALIZE_CALL, {
+        receiverNumber: number,
+        isAnonymous: anonymousMode,
+      }).then((resp) => {
+        if (resp.status !== 'ok') {
+          //          addAlert({ message: t('CALLS.FEEDBACK.ERROR'), type: 'error' });
+          console.error(resp.errorMsg);
+          return;
+        }
+      });
+    },
+    [anonymousMode],
+  );
 
   const acceptCall = useCallback(() => {
     fetchNui(CallEvents.ACCEPT_CALL, {

apps/phone/src/os/new-notifications/useCallNotification.ts

@@ -33,7 +33,7 @@ export const useCallNotification = () => {
         onExited: () => {
           setCurrenCall(null);
         },
-        transmitter: contactDisplay(dto.transmitter),
+        transmitter: dto.isAnonymous ? 'Anonymous' : contactDisplay(dto.transmitter),
         receiver: contactDisplay(dto.receiver),
         key: 'npwd:callNotification',
       });

import.sql

@@ -6,6 +6,8 @@
 # ALTER TABLE npwd_messages ADD COLUMN `is_embed` tinyint(4) NOT NULL DEFAULT 0;
 # ALTER TABLE npwd_messages ADD COLUMN `embed` varchar(512) NOT NULL DEFAULT '';
 
+# ALTER TABLE npwd_calls ADD COLUMN `isAnonymous` tinyint(4) NOT NULL DEFAULT 0;
+
 #match voice messages update
 # ALTER TABLE npwd_match_profiles ADD COLUMN `voiceMessage` varchar(512) DEFAULT NULL;
 
@@ -182,6 +184,7 @@ CREATE TABLE IF NOT EXISTS `npwd_calls`
     `transmitter` varchar(255) NOT NULL,
     `receiver`    varchar(255) NOT NULL,
     `is_accepted` tinyint(4)   DEFAULT 0,
+    `isAnonymous` tinyint(4)   NOT NULL DEFAULT 0,
     `start`       varchar(255) DEFAULT NULL,
     end           varchar(255) DEFAULT NULL,
     PRIMARY KEY (id),

packages/database/src/calls/index.ts

@@ -5,11 +5,12 @@ import DbInterface from '../db/db_wrapper';
 export class _CallsRepo {
   async saveCall(call: CallHistoryItem): Promise<void> {
     const query =
-      'INSERT INTO npwd_calls (identifier, transmitter, receiver, `start`) VALUES (?, ?, ?, ?)';
+      'INSERT INTO npwd_calls (identifier, transmitter, receiver, isAnonymous, `start`) VALUES (?, ?, ?, ?, ?)';
     await DbInterface._rawExec(query, [
       call.identifier,
       call.transmitter,
       call.receiver,
+      call.isAnonymous,
       call.start,
     ]);
   }

typings/call.ts

@@ -6,11 +6,12 @@ export interface ActiveCall {
   channelId?: number;
   isUnavailable?: boolean;
   start?: string;
-  identifier?: string;
+  isAnonymous?: boolean;
 }
 
 export interface InitializeCallDTO {
   receiverNumber: string;
+  isAnonymous: boolean;
 }
 
 export interface StartCallEventData {
@@ -44,6 +45,7 @@ export interface ActiveCallRaw {
   receiverSource: number;
   start: string;
   is_accepted: boolean;
+  isAnonymous: boolean;
 }
 
 export interface CallHistoryItem {
@@ -56,6 +58,7 @@ export interface CallHistoryItem {
   start: string;
   end?: number;
   is_accepted: boolean;
+  isAnonymous?: boolean;
 }
 
 export enum CallRejectReasons {

typings/settings.ts

@@ -28,6 +28,7 @@ export interface IPhoneSettings {
   theme: SettingOption;
   zoom: SettingOption;
   streamerMode: boolean;
+  anonymousMode: boolean;
   ringtone: SettingOption;
   callVolume: number;
   notiSound: SettingOption;