LB Phone v2 - An advanced phone for FiveM with unique features and good performance. Compatible with ESX framework for FiveM servers.
Sofortige Lieferung
Ja
Updates
Lebenslang
LB Phone allows you to add apps that either have a UI or simply trigger functions when opening the app. To add an app that triggers a function upon opening it, go to lb-phone/config/config.lua and add the app to the Config.CustomApps table, like this:
Config.CustomApps = { [app_identifier] = { -- A unique identifier for the app, not shown to the user name = App Name, -- The name of the app, shown to the user description = App Description, -- The description of the app, shown to the user developer = LB Phone, -- OPTIONAL the developer of the app defaultApp = true, -- OPTIONAL if set to true, app should be added without having to download it, game = false, -- OPTIONAL if set to true, app will be added to the game section size = 59812, -- OPTIONAL in kB images = { https://example.com/photo.jpg }, -- OPTIONAL array of images for the app on the app store ui = resource-name/ui/index.html, -- OPTIONAL icon = https://cfx-nui- .. GetCurrentResourceName() .. /ui/icon.png, -- OPTIONAL app icon price = 0, -- OPTIONAL, Make players pay with in-game money to download the app landscape = false, -- OPTIONAL, if set to true, the app will be displayed in landscape mode keepOpen = true, -- OPTIONAL, if set to true, the app will not close when the player opens the app (only works if ui is not defined) onUse = function() -- OPTIONAL function to be called when the app is opened -- do something end, onServerUse = function(source) -- OPTIONAL server side function to be called when the app is opened -- do something end }}If you want to use a custom UI for your app, you need to create a seperate script and provide the path of the HTML file and send it as ui.
The recommended way to create an app with UI is to create it using exports. We have template apps that you can use for reference.
If the user has dark mode enabled, data-theme will be set to dark. Otherwise, it will be set to light.
To add the app, use the AddCustomApp export.
To remove the app, use the RemoveCustomApp export.
To send a message to the UI, you need to use the SendCustomAppMessage export instead of using SendNUIMessage. You would listen for it the same way in the frontend.
When the app gets loaded on the phone, a few functions are imported into the globalThis object.
| Name | Type | Description |
|---|---|---|
| resourceName | string | The name of the resource that added the custom app |
| appName | string | The app name |
| settings | object | The settings of the phone |
| components | object | Useful components for the app |
The following components can be accessed via globalThis.components. You can view a TypeScript declaration file at lb-reactts/ui/src/components.d.ts.
Creates a game render, which renders the game to a canvas. This is used to create a camera in your app, and should be used with the camera exports.
const gameRender = components.createGameRender(canvas) // set the aspect ratiogameRender.resizeByAspect(9 / 16) // pause the renderinggameRender.pause() // unpause the renderinggameRender.resume() // take a photoconst blob: Blob = await gameRender.takePhoto() // take a videoconst recorder = gameRender.startRecording((blob: Blob) => { const video = URL.createObjectURL(blob)}) await new Promise((resolve) => setTimeout(resolve, 5000)) recorder.stop() // destroy the game rendergameRender.destroy()Uploads media and returns a promise with the URL.
// Upload type can be 'Video' | 'Image' | 'Audio'const url = await components.uploadMedia('Video', blob)Saves a URL to the gallery and returns a promise with the ID
const id = await components.saveToGallery(url)components.setColorPicker({ onSelect(color) {}, onClose(color) {}})components.setPopUp({ title: 'Popup Menu', description: 'Confirm your choice', buttons: [ { title: 'Cancel', color: 'red', cb: () => { console.log('Cancel') } }, { title: 'Confirm', color: 'blue', cb: () => { console.log('Confirm') } } ]})components.setContextMenu({ title: 'Context menu', buttons: [ { title: 'Phone Notification', color: 'blue', cb: () => { sendNotification({ title: notificationText }) } }, { title: 'GTA Notification', color: 'red', cb: () => { fetchNui('drawNotification', { message: notificationText }) } } ]})components.setContactSelector({ onSelect(contact) { components.setPopUp({ title: 'Selected contact', description: `${contact.firstname ?? '??'} ${contact.lastname ?? ''} ${contact.number}`, buttons: [ { title: 'OK' } ] }) }})See the AirShare export for what data to send.
components.setShareComponent({ type: 'image', data: { isVideo: false, src: 'https://docs.lbscripts.com/images/icons/icon.png' }})components.setEmojiPickerVisible({ onSelect: (emoji) => { components.setEmojiPickerVisible(false) components.setPopUp({ title: 'Selected emoji', description: emoji.emoji, buttons: [ { title: 'OK' } ] }) }})components.setGifPickerVisible({ onSelect(gif) { components.setPopUp({ title: 'Selected GIF', attachment: { src: gif }, buttons: [ { title: 'OK' } ] }) }})components.setGallery({ includeVideos: true, includeImages: true, allowExternal: true, multiSelect: false, onSelect(data) { components.setPopUp({ title: 'Selected media', attachment: { src: Array.isArray(data) ? data[0].src : data.src }, buttons: [ { title: 'OK' } ] }) }})components.setFullscreenImage('https://docs.lbscripts.com/images/icons/icon.png')components.setHomeIndicatorVisible(true)fetchNui('test', { foo: 'bar'})Listen for NUI messages sent via SendCustomAppMessage
onNuiEvent('test', (data) => { console.log(data)})Listen for settings changes
onSettingsChange((newSettings) => { console.log(newSettings)})createCall({ number: '1234567890', // you can send `company` instead of `number` to call a company videoCall: false, hideNumber: false})