Skip to content

Exemple — appli pilotée par préférences + i18n

Intention : afficher un panneau de bienvenue dont la couleur et le message sont configurés par le streamer, dans sa langue.

preferences.config.js

js
module.exports = {
    type: 'group',
    appearance: { wrap: 'tabs' },
    groupItems: {
        global: {
            type: 'group',
            label: { en: 'Global', fr: 'Global' },
            groupItems: {
                color: { type: 'string', label: { en: 'Color', fr: 'Couleur' } },
                title: { type: 'string', label: { en: 'Title', fr: 'Titre' } },
            },
        },
    },
};

textset.js

js
const textset = {
    fallbackTitle: { fr: 'Bienvenue !', en: 'Welcome!' },
    poweredBy: { fr: args => `Propulsé par ${args.app}`, en: args => `Powered by ${args.app}` },
};

script.js

js
(async function () {
    const color = kapp.preferences.get('global.color') ?? '#9146FF';   // ou prefs.global?.color
    const title = kapp.preferences.get('global.title') || text('fallbackTitle');

    kapp.display();
    document.body.innerHTML = `
        <div style="color:${color}">
            <h1>${title}</h1>
            <small>${text('poweredBy', { app: 'Kappapps' })}</small>
        </div>`;

    await wait(6000);
    await kapp.finish();
})();

Pourquoi

  • kapp.preferences.get(path) lit la config streamer ; prévois un défaut (?? / ||) car un chemin inconnu renvoie undefined.
  • text(key, args) résout dans la langue du channel ; une valeur de textset peut être une fonction args => string.
  • preferences.config.js est compilé en config/preferences.config.json par le HUB (transpile).