Javascript API

Our phone injects multiple functions into your custom application's window, thus allowing you to access various functions and events.

Initialization

To initialize your custom application, you can access the global hphone variable in the window context.

index.js

if(window.hphone) {
    const { events, useApplication } = window.hphone;
    const { name, data, settings, options } = useApplication();
 
    // Your code goes here..
}

Events

The event system on our phone is based on mitt.

Event List

Name	Description	Argument
`general.PHONE_OPEN`	Fires when the phone is opened	`-`
`general.PHONE_CLOSED`	Fires when the phone is opened	`-`
`general.CHANGED_STATE`	Fires when the phone state changes	`'booting' \| 'off' \| 'screen_off' \| 'locked' \| 'unlocked'`
`general.SETTING_UPDATED`	Fires when a phone setting is updated	`{ name: string, value: any, oldValue: any }`
`lockScreen.LOCK`	Fires when the phone is locked	`-`
`lockScreen.UNLOCK`	Fires when the phone is unlocked	`-`
`notificationManager.ADD`	Fires when a new notification is sent	NotificationData

Example

index.js

const { events } = window.hphone;
const callback = (data) => {
    console.log(`Setting '${data.name}' updated, old value: '${data.oldValue}', new value: '${data.value}'`);
    events.off('general.SETTING_UPDATED', callback);
}
 
events.on('general.SETTING_UPDATED', callback)

Functions

All functions provided in the window.hphone variable

`getSettings`

Get all settings of the current phone

Example

index.js

const { getSettings } = window.hphone;
const settings = getSettings();
 
console.log(settings.airplaneMode, settings.darkMode)

`useApplication`

Gets current application functions and data

Example

index.js

const { useApplication } = window.hphone;
const { name, data, settings, options } = useApplication();
 
console.log(name, data, settings, options);

`useI18n`

Gets i18n context of the phone. Useful in case you're using our built-in locale system, or need to get some locales.

Example

index.js

const { useI18n } = window.hphone;
const { t, te, n } = useI18n();
 
if(te('phone_models.h1'))
    console.log(t('phone_models.h1'))
else
    console.warn('Locale does not exist!')

`emitNui`

Emits an NUI callback to your app's resource, asynchronous.

Arguments

Name	Type	Description
`name`	`string`	Callback name
`payload?`	`any`	Payload, can be undefined, an object, a stringified object, etc.
`options?`	`{ debounce: number }`	Options, can use local debounce

Example

index.js

const { emitNui } = window.hphone;
 
// Await usage
const data = await emitNui('test', { hello: 'world' });
 
// then / catch usage
emitNui('test', { hello: 'world' }).then(data => {
    console.log(data);
}).catch(err => {
    console.error(err)
});

`openModal`

Open a box modal with text and buttons

Arguments

Name	Type	Description
`data`	ModalData	Modal data

Example

index.js

const { openModal } = window.hphone;
 
openModal({
    title: 'Title',
    description: 'Description',
    buttons: [
        {
            type: 'confirm',
            label: 'Confirm',
            callback: () => {
                console.log('Confirmed!')
            }
        },
        {
            type: 'cancel',
            label: 'Cancel',
            callback: () => {}
        }
    ]
});

`openModalSheet`

Open a modal sheet, this is what's used for full screen modals, such as media selection, contact selection, etc.

Arguments

Name	Type	Description
`data`	ModalSheetData	Modal data

Example

index.js

const { openModalSheet } = window.hphone;
 
openModalSheet({ 
    name: 'select_media',
    options: {
        limit: 1,
        allowCustomUrl: true,
        allowTake: true,
        allowedTypes: [ 'image', 'video' ]
    },
    callback: (attachments) => {
        const image = attachments[0]?.content;
        if(!image) return;
 
        console.log(image.url);
    }
});

Types

ModalData

Name	Type	Description
`title`	`string`	Title
`description`	`string`	Description
`buttons`	ModalButton[]	Modal buttons

ModalButton

Name	Type	Description
`type`	`'confirm' \| 'cancel'`	Button type
`label`	`string`	Button label
`callback`	`() => void`	Callback function

ModalSheetData

Name	Type	Description
`name`	ModalSheetName	Modal name
`data?`	`any`	Modal data, can be an array / proxy and it will be mutated on finish by default
`description?`	`string`	Modal description
`callback`	`(data: any) => void`	Callback function

NotificationData

Name	Type	Description
`title?`	`string`	Notification title
`content`	`string`	Notification content
`duration`	`number`	Notification duration
`application?`	`{ name: string }`	Notification application

`select_media`

Example

index.js

openModalSheet({
    name: 'select_media',
    options: {
        limit: 1,
        allowCustomUrl: true,
        allowTake: true,
        allowedTypes: [ 'image', 'video' ]
    },
    callback: (attachments) => {
        const image = attachments[0]?.content;
        if(!image) return;
 
        console.log(image.url);
    }
})

Options

Name	Type	Description
`limit`	`number`	Limit of media to be selected
`allowCustomUrl`	`boolean`	Allow custom URL input?
`allowTake`	`boolean`	Allow taking media in camera?
`allowedTypes`	`('video' \| 'image')[]`	Allowed types of media

`select_contact`

Example

index.js

openModalSheet({
    name: 'select_contact',
    data: [ 
        {
            number: '1234'
        }
    ],
    options: {
        limit: 1
    },
    callback: (attachments) => {
        const contactNumber = attachments[0]?.content;
        if(!contactNumber) return;
 
        console.log(contactNumber);
    }
})

Options

Name	Type	Description
`limit`	`number`	Limit of contacts to be selected

`new_contact`

Example

index.js

openModalSheet({
    name: 'new_contact',
    data: {
        number: '1234'
    }
})

Data (optional)

Name	Type	Description
`number`	`string`	Pre entered phone number

`new_chat`

Example

index.js

openModalSheet({
    name: 'new_contact',
    data: {
        number: '1234',
        content: 'Hello World',
        attachments: [
            { type: 'media', content: { type: 'image', url: 'https://i.imgur.com/6AnLddq.png' } }
        ]
    }
})

Data (optional)

Name	Type	Description
`number`	`string`	Pre entered phone number
`content`	`string`	Pre entered content
`attachments`	Attachment[]	Pre added attachments

`gif`

Example

index.js

openModalSheet({
    name: 'gif',
    callback: (attachments) => {
        const image = attachments[0]?.content;
        if(!image) return;
 
        console.log(image.url);
    }
})

Shared options

Name	Type	Description
`disableMutation`	`boolean`	Disable mutation of the original data object / array?
`liveChanges`	`boolean`	Enable live mutation of the original data array when selecting / deselecting stuff?
`disableGradient`	`boolean`	Disable gradient background on the modal
`noDimming`	`boolean`	Disable dimming above / under the modal
`hideButton`	`boolean`	Disable the default 'Done' button
`fullScreen`	`boolean`	Should the modal be fullscreen
`compact`	`boolean`	Compact size of the modal
`closeAfterCallback`	`boolean`	Close the modal after callback? E.g. when a picture is selected

Javascript API

On this page