[website UI] Fully localize all toasts and dialogs

[fm-sys]

The website will currently always occur in English. Only settings, etc. are localized. We maybe should try to change this in new versions. Contributions welcome ;)

Also posted by @fm-sys in https://github.com/fm-sys/snapdrop-android/issues/43#issuecomment-817375635_

[ueen]

I wrote a js object solution for different languages recently here https://github.com/manucaralmo/GlowCookies proabably this should be integrated to snapdrop itself or injected via js, could be the same code then in case RobinLinus wants to KISS.

Anyway, we could use window.navigator.language* to get the language, give it to the language object (s. link) and adjust accordingly, let me know if i should set this up in JSI, but maybe we should ask first wheter it can be integrated in snapdrop directly.

*https://stackoverflow.com/questions/6547642/get-the-language-of-user-in-android

[fm-sys]

Yes, doing that in the original snapdrop repository would be the best solution. Unfortunately @RobinLinus seems to be quite busy if full localisation will work over long term. Anyway, if we want to go that way Snapdrop should use a localization tool like crowdin as we use for this repo (with automatic merge preferred).

[ueen]

Take a look at the commit above, the way I set it up, it's completely drop in compatible with snapdrop. Yea do you want to look at how this might be integrated with crowdin? The translations are just in associative array inside a js class...

[fm-sys]

We would need some kind of folder structure (one file for every language). AFAIK crowdin unfortunately doesn't support localization for arrays inside a single file. But let's wait for some feedback at the Snapdrop repository...

[ueen]

Ok hmm so the for js its the easiest to have it in a js file because otherwise you would need to do xhr requests, which takes some extra time. Maybe there's another tool, do you know GitLokalize or something like that. I wouldn't count on any comments from snapdrop, I could understand why they would like to keep it simple with English only..

[fm-sys]

If we want to implement a solution only for the android app, we could rather use the strings.xml resource file which can be translated and injected easily via the JSI.

Something like this

String jsCommand = "document.querySelector(...).text=" + context.getString(R.strings.the_string_resources);

Maybe with additional escaping of special characters in the resource strings...

[ueen]

Yea that would work but I'd prefer a compatible js version, is there no crowd translation solution that might work?

[ueen]

It's pretty much json that might work with gitlocalize, no?

[fm-sys]

These are the supported file formats: https://support.crowdin.com/supported-formats/

[ueen]

Looks good, it does say js there, let's see if we can set this up :)

[fm-sys]

I've created a first version, see 05da35c. It uses the android resources, which seems like the easiest solution to me... (I couldn't figure out how crowdin works with js)

[artelse]

On my android Chinese version with language set to English, the pairdrop page shows in Chinese, while the settings are correctly displayed in English. The website in the browser allows to set the language manually. Can this be added or is there another fix? (Running version 2.2.4)

[fm-sys]

On my android Chinese version with language set to English, the pairdrop page shows in Chinese, while the settings are correctly displayed in English.

@schlagmichdoch how does the PairDrop website select their language?

[schlagmichdoch]

PairDrop tries to find a supported language string in navigator.languages which is provided by the browser:

https://github.com/schlagmichdoch/PairDrop/blob/794e6304fe87b59624b0ae9a432e2107ecdc8b2d/public/scripts/localization.js#L12

https://github.com/schlagmichdoch/PairDrop/blob/794e6304fe87b59624b0ae9a432e2107ecdc8b2d/public/scripts/localization.js#L37-L48

[schlagmichdoch]

Im unsure whether it's possible to specify the available navigator.languages.

I guess the easiest approach would be to inject some code to overwrite Localisation.systemLocale with the language string we get by running Locale.getDefault().toLanguageTag() (source) and then rerun

let storedLanguageCode = localStorage.getItem('language_code');

        Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode)
            ? storedLanguageCode
            : Localization.systemLocale;
    }

(https://github.com/schlagmichdoch/PairDrop/blob/794e6304fe87b59624b0ae9a432e2107ecdc8b2d/public/scripts/localization.js#L14-L18) and afterwords run

Localisation.setInitialTranslation();

[fm-sys]

I think I found the core of the issue. I just set my android device to English (with German region), and Pairdrop appears in German language instead of English even in regular browsers. (en-DE should render English instead of German)

Maybe you are using the second part of the language code instead of the first one?

[schlagmichdoch]

Can you open the browser console on your Android browser in this setup and check what navigator.languages returns?

[fm-sys]

[ 'en-DE', 'de-DE' ]

However, everything is working fine now, in the browser as well in the app. Did you change anything in the last 2 hours? 😅

Maybe mobile browsers cache the navigator.languages and only refresh the value after some time?

[fm-sys]

Anyway, I think we can close this issue as all important strings for Snapdrop are translated and PairDrop provides its own translations.

[schlagmichdoch]

I have not changed pairdrop.net for one month. I also don't think anything is cached in that regard. Not sure what resolved this for you. There is still @artelse 's configuration. I guess changing the language in the settings could also change the language settings on PairDrop.net by setting the localStorage language string accordingly.

[fm-sys]

The webview should already set navigator.languages according to the user's device language. No idea what else to do...

[schlagmichdoch]

I meant the language settings in the snapdrop for Android app:

I guess changing the language in the settings [of the snapdrop for Android app] could also change the language settings on PairDrop.net by setting the localStorage language string accordingly.