Can't change UI in config.js

[enerch]

Hi!

I already posted this as an Issue on Github, but Miroslav confirmed that this is not a bug of Mirotalk. So probably it's an Issue with Cloudron?

Below, you can see my config.js of my Mirotalk SFU instance on Cloudron. Changes in the config.js to the UI don't affect the UI. Changes in other parts of config.js work (for example host protection). Could this be an issue with cloudron?

I don't know if this helps, but I found this in the Mirotalk Discord:

// All options at https://github.com/miroslavpejic85/mirotalksfu/blob/main/app/src/config.template.js

module.exports = {
    host: {
        /*
            Host Protection (default: false)
            To enhance host security, enable host protection - user auth and provide valid
            usernames and passwords in the users array.
        */
        protected: true, //protection works fine
        user_auth: false,
        users: [
            
            {
                username: 'usertest',
                password: 'passtest',
            }        
            
        ]
    },
    presenters: {
        /*
            By default, the presenter is identified as the first participant 
            to join the room, distinguished by their username and UUID.
            Additional layers can be added to specify valid presenters 
            and co-presenters by setting designated usernames.
        */
        list: [],
        join_first: true, // Set to true for traditional behavior, false to prioritize presenters
    },
    ui: {
        /*
            Customize your MiroTalk instance
        */
        brand: {
            app: {
                name: 'new app name',
                title: 'new app title',
                description:
                    'new app description',
            },
            site: {
                title: 'new site name',
                icon: '../images/logo.svg',
                appleTouchIcon: '../images/logo.svg',
            },
            meta: {
                description:
                    'meta description',
                keywords:
                    'meeting',
            },
            og: {
                type: 'app-webrtc',
                siteName: 'Newname',
                title: 'newTitle',
                description: 'new description',
                image: 'https://sfu.mirotalk.com/images/mirotalksfu.png',
                url: 'https://test.com/',
            },
            html: {
                features: false, //features will appear, eventhough this is false
                teams: true,
                tryEasier: true,
                poweredBy: true,
                sponsors: true,
                advertisers: true,
                footer: true,
            }
        }
        }
};

[nebulon]

Ah indeed, we only selectively apply user set configs to the app. Most are not taken into account yet in the package. I guess we can apply the ui object with the next package to fix this.

[nebulon]

I've update the package now and the latest version will make use of the ui object settings.

[imc67]

I reinstalled the app with the latest version, OIDC works flawless (thanks !!!!) but I can't get the UI config to work, did you @nebulon ?

[nebulon]

Adding the following to the /app/data/config.js and then restarting the app works fine here:

...
ui: {
        /*
            Customize your MiroTalk instance
        */
        brand: {
            app: {
                name: 'New name'
            }
      }
}
...

[imc67]

this is what I have on the same "depth level" as 'host' and 'presenters':

ui: {
        /*
            Customize your MiroTalk instance
        */
        brand: {
            app: {
                name: 'MiroTalk SFU',
                title: 'MiroTalk SFU',
                description:
                    '',
            },
            site: {
                title: 'MiroTalk SFU',
                icon: '../images/logo.svg',
                appleTouchIcon: '../images/logo.svg',
            },
            meta: {
                description:
                    'MiroTalk SFU',
                keywords:
                    '',
            },
            html: {
                features: false,
                teams: true, // Please keep me always visible, thank you!
                tryEasier: false,
                poweredBy: false,
                sponsors: false,
                advertisers: false,
                footer: false,
            },
        },
    },

[nebulon]

Looks correct. So after app restart it is not taking into account?

[imc67]

@nebulon no alas it doesn’t work

[luckow]

+1
It doesn't work on my instance either. To be precise: I tried mirotalk sfu. There is no default /app/data/config.js in the mirotalk p2p app.
and: it feels like the config.js is completly ignored. I tried to "protect" my instance via

        protected: true,
        user_auth: true,

but it has no effect.
Log file tells me: No valid user config found at /app/data/config.js ... starting fresh

[nebulon]

This is only added to the SFU flavor, however I just did a fresh installation from the appstore and indeed the ui tweaks are not applied here also.

[nebulon]

After debugging this a bit, so for a start the branding data is stashed in the browser session storage, so it needs to be cleared after restarting the app. Further all properties have to be specified otherwise you will see Javascript errors in the browser console and it will simply fail to apply the branding.

Lastly if you see No valid user config found at /app/data/config.js ... starting fresh then it is most likely a syntax error in the config file. Next version will print the parsing error then.

[nebulon]

Just released a new package version for SFU which will promptly exit if the config file cannot be parsed and it is also a bit more forgiving when not all branding objects are set.

[imc67]

YES!! It’s working as expected! Wonderful job. Finally the moment to take it in production for two volunteers organizations.