I18N

[rainbowflesh]

Describe the problem

Hope there have i18n entry.

Describe the proposed solution

Maintain a json file that contain i18n KV context / translate, for example: https://react.i18next.com/

export const useTranslate = () => {
    const { i18nProvider } = useContext("path/to/json.json");

    const fn = useMemo(() => {
        function translate(
            key: string,
            options?: any,
            defaultMessage?: string,
        ): string;
        function translate(key: string, defaultMessage?: string): string;

        function translate(
            key: string,
            options?: string | any,
            defaultMessage?: string,
        ) {
            return (
                i18nProvider?.translate(key, options, defaultMessage) ??
                defaultMessage ??
                (typeof options === "string" &&
                typeof defaultMessage === "undefined"
                    ? options
                    : key)
            );
        }

        return translate;
    }, [i18nProvider]);

    return fn;
};

Alternatives considered

No response

Importance

I cannot use LiveKit without it

Additional Information

No response

[lukasIO]

Hi,

while i18n is very interesting, this would be a rather big endeavour.

Can you share a bit more about what you would like to achieve specifically?
Are you using lower level components or the VideoConference prefab directly?

[rainbowflesh]

Hi,

while i18n is very interesting, this would be a rather big endeavour.

Can you share a bit more about what you would like to achieve specifically? Are you using lower level components or the VideoConference prefab directly?

I tested both, and I found some component like <PreJoin /> allow override label; But prefabricated components like <ControlBar /> in line 126 give the showText a const value;

      {visibleControls.leave && (
        <DisconnectButton>
          {showIcon && <LeaveIcon />}
          {showText && 'Leave'}
        </DisconnectButton>
      )}

I'm attempting to make some of these components i18nlized such as {showText && translate("buttons.leave")}, however it may not an elegant solution because I was creating duplicate components. It could be helpful if showText have value from overridable labels.

Or, am I missing some hacky function to inject i18n value to showText 🤔? Please forgive me, Im not professional in front end.

---

Edit:
I had a quick thought: Could I replace these components with overridable labels like <PreJoin/> then PR, is that reasonable? If not, please let me know ;).

[lukasIO]

for the control bar you cannot inject it right now, but you can always do something like

<DisconnectButton>
{t('disconnect-button')}
<DisconnectButtion>

with your own translate implementation.

We'll think more about how to make this easier for users in the future

[AlexanderKozhevin]

can I set up labels in config somehow?