Multi-language support

[juanbrk]

Describe the feature

When changing language, using i18next the viewer requires a reload in order to see all the PSV button tooltips translated. It would be helpful to have built-in support for multiple languages without requiring a manual page refresh to see the new language in place.

Alternatives you've considered

I've tried to add language as dependency to the viewer configuration so that when It changes, the viewer would reload or re-render but this only made the viewer crash.

I've also tried to update the tooltips programmatically when the language changed with no luck:

const viewerTexts = useMemo(
    () => ({
      zoom: t('project_details.viewer.zoom'),
      zoomOut: t('project_details.viewer.zoomOut'),
      zoomIn: t('project_details.viewer.zoomIn'),
      moveUp: t('project_details.viewer.moveUp'),
      moveDown: t('project_details.viewer.moveDown'),
      moveLeft: t('project_details.viewer.moveLeft'),
      moveRight: t('project_details.viewer.moveRight'),
      download: t('project_details.viewer.download'),
      fullscreen: t('project_details.viewer.fullscreen'),
      menu: t('project_details.viewer.menu'),
      close: t('project_details.viewer.close'),
      twoFingers: t('project_details.viewer.twoFingers'),
      ctrlZoom: t('project_details.viewer.ctrlZoom'),
      loadError: t('project_details.viewer.loadError'),
      gallery: t('project_details.viewer.gallery'),
    }),
    [t]
  );

  const handleLanguageChange = useCallback(() => {
    if (viewerRef.current) {
      viewerRef.current.setOption('lang', viewerTexts);
    }
  }, [viewerTexts]);

useEffect(() => {
    i18n.on('languageChanged', handleLanguageChange);

    return () => {
      i18n.off('languageChanged', handleLanguageChange);
    };
  }, [i18n, handleLanguageChange]);

Additional context

I am working on a project where there is implemented language switching using i18next and if the language is switched when the viewer is visible, it takes a manual page refresh to see It take effect, as all PSV tooltips still display on the previous language. language switching is implemented using i18next. This is how the langproperty on the viewer configuration is set up usingreact-i18next`:

const { t } = useTranslation();
lang: {
        zoom: t('project_details.viewer.zoom'),
        zoomOut: t('project_details.viewer.zoomOut'),
        zoomIn: t('project_details.viewer.zoomIn'),
        moveUp: t('project_details.viewer.moveUp'),
        moveDown: t('project_details.viewer.moveDown'),
        moveLeft: t('project_details.viewer.moveLeft'),
        moveRight: t('project_details.viewer.moveRight'),
        download: t('project_details.viewer.download'),
        fullscreen: t('project_details.viewer.fullscreen'),
        menu: t('project_details.viewer.menu'),
        close: t('project_details.viewer.close'),
        twoFingers: t('project_details.viewer.twoFingers'),
        ctrlZoom: t('project_details.viewer.ctrlZoom'),
        loadError: t('project_details.viewer.loadError'),
        gallery: t('project_details.viewer.gallery'),
      },

[mistic100]

Using the API is the way to go.

What do you mean "no luck" ? Please explain what you get.

---

I just tried viewer.setOption('lang', { moveUp: 'Vers le haut' }) on the test page and it successfully updates the title for the up button.

So at least it is working for the navbar buttons. (might no be the case for other labels in some plugins)

[juanbrk]

Using the API is the way to go.

What do you mean "no luck" ? Please explain what you get.

I just tried viewer.setOption('lang', { moveUp: 'Vers le haut' }) on the test page and it successfully updates the title for the up button.

So at least it is working for the navbar buttons. (might no be the case for other labels in some plugins)

So, I moved a bunch of stuff around and now translation works for the navbar buttons, the ones that are not being updated are the custom navbar buttons ( I don't know how to target those using lang) and those from the Plan (maximize, reset, layers) and Markers plugin (markers navbar button)

[mistic100]

For custom buttons you could declare title as a getter, this way it will be reevaluated when the navbar is refreshed, or call viewer.navbar.setButtons() with the new config.

For the markers button there is now reason it does not work, again viewer.setOption('lang', { markers: 'Pins' }) works.

For the plan widget that's one of the thing that really needs to be fixed.

[mistic100]

Fixed the map, plan, settings and resolution plugins content updates if the lang changes.

Also added an optionnal lookup of custom buttons title in the lang object.

lang: {
  myButton: 'Click here',
},
navbar: [{
  title: 'myButton`,
  ...
}]

[github-actions]

This feature/bug fix has been released in version 5.11.0.