Interface Config Overwrite

[bugrasercanseker]

Hello,

Issue Description: It has come to my attention that the Jitsi.joinConference method lacks the option to dynamically overwrite the interface configuration, specifically the "interfaceConfigOverwrite" option. This option is essential for making on-the-fly adjustments to the Jitsi interface configuration, enhancing the interface's appearance and behavior as needed.

Issue Details: Upon a thorough review of the documentation and exploration of the joinConference method's options, it's clear that there is no provision for dynamically overwriting the interface configuration. This omission hinders the ability to adapt the interface to varying application requirements and user preferences.

Expected Resolution: I kindly request consideration for the addition of a dynamic interface configuration overwrite option, such as "interfaceConfigOverwrite," to the joinConference method. Alternatively, guidance on achieving similar dynamic customization through an alternative approach would be greatly appreciated.

Thanks.

[calvinckho]

The web iFrame API is more advanced than the mobile SDKs and allows users to use executeCommand to overwrite the config.js. According to the web iFrame doc, interfaceConfigOverwrite can only be set at the launch of a meeting using new JitsiMeetExternalAPI() and not dynamically.

To see the limitation of the mobile SDKs, see the two commands available on Android, which are 1) join, and 2) dispose. https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-android-sdk#jitsimeetview

The iOS offers a few more commands but those are not used to change the interface on-the-fly. https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ios-sdk#jitsimeetview-class

I offer customization service for the UI interface of the mobile SDKs. Let me know if I can be of help. My customization is only for static customization and not for on-the-fly UI customization.

For the web IFrame interface customization, you need to be hosting your own server so you can edit the core files such as config.js / interface_config.js. see https://github.com/jitsi/jitsi-meet/issues/7354#issuecomment-666371078

[bugrasercanseker]

Can I modify the interface configuration before initializing a meeting?

For instance, in the iFrame API, we're able to configure settings and incorporate interfaceConfigOverwrite using various variables for customizing the toolbar.

We have the capability to enable or disable toolbar functionalities like the microphone, camera, and hangup, among others. You can refer to this link: "https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js"

Here's an example code snippet:

jitsiOptions: {
    configOverwrite: {
        enableNoisyMicDetection: true,
        startAudioOnly: this.appointment.type === 1, // If the appointment is a VOICE CALL, start with audio only
        enableWelcomePage: false,
        enableClosePage: true,
        prejoinConfig: {
            enabled: false,
        },
    },
    interfaceConfigOverwrite: {
        APP_NAME: "APP NAME HERE",
        DEFAULT_LOGO_URL: 'DEFAULT LOGO HERE',
        SHOW_BRAND_WATERMARK: false,
        SHOW_JITSI_WATERMARK: false,
        SHOW_WATERMARK_FOR_GUESTS: false,
        SHOW_CHROME_EXTENSION_BANNER: false,
        MOBILE_APP_PROMO: false,
        SHOW_PROMOTIONAL_CLOSE_PAGE: false,
        TOOLBAR_BUTTONS: [
            'microphone',
            this.appointment.type === 1 ? '' : 'camera', // If the appointment is a VOICE CALL, disable the camera button
            'closedcaptions', 'fullscreen', 'fodeviceselection', 'hangup', 'tileview', 'select-background'
        ]
    },
    preferredTranscribeLanguage: 'en-US',
    apiLogLevels: 'error',
}

This code illustrates how to modify the interface configuration before starting a Jitsi Meet session, along with various customization options.

Can we do that in Mobile SDK? Can we set toolbar options dynamically before starting the meeting?

PS: I am using a Self-Hosted solution, so I can overwrite the interface configuration on the server side. Also, I need to set the toolbar if the meet type is "Voice Only".

[bugrasercanseker]

I found a solution to make the toolbox button change dynamically before joining the meeting.

There are 'featureFlags', we can enable/disable the Camera button with the 'video-mute.enabled' param.

You can check all flags at: https://github.com/jitsi/jitsi-meet/blob/master/react/features/base/flags/constants.ts

[calvinckho]

Yes, my plugin supports the featureFlags configuration in the joinConference() method. https://github.com/calvinckho/capacitor-jitsi-meet#usage