The GNOME client's chatview lacks proper i18n support.

Related bug report: https://git.ring.cx/savoirfairelinux/ring-client-gnome/issues/900

first ideas:

• i18n functions provided by separate js library
• i18n not trivial, overhead of custom code extremely high => use existing js lib
• library will be embedded into the client => code base should be as mature as possible
• ideally the translation process would be exactly the same as for the C++ code

in short

(1) either

C++ tells JS code which language is currently used and JS code loads translations

or

C++ loads translations and passes them to JS code together with info about currently used language

review exisiting js i18n libs

i18next

The good

• very mature
• huge user base
• lots of documentation
• No runtime dependencies

The bad

• huge, overkill ?
• uses own JSON format not gettext .mo

This will require translation of .po files to JSON format (using i18next-gettext-converter).

The ugly

• keys do not have the same meaning as gettext keys (see this thread), this might be very confusing for the translators
• i18next-gettext-converter requires nodeJS as build dependency

jed

The good

• looks quite mature
• good user base
• provides gettext API (will be very intuitive to translators)
• No runtime dependencies

The bad

• not very active currently (but it might very well just be stable)
• uses own JSON format not gettext .mo

This will require translation of .po files to JSON format (e.g. using po2json). po2json also requires nodeJS as dependency, but it is available as Debian package, which makes it slightly less annoying

Source: Internationalization in JavaScript

Polyglot

The good

• developed by airbnb, well maintained
• good user base

The bad

• uses own JSON format not gettext .mo

The ugly

• runtime dependency on nodeJS

using Jed (WiP)

• rough patch draft

diff --git a/src/webkitchatcontainer.cpp b/src/webkitchatcontainer.cpp
index 7cc73d4..ad82be4 100644
--- a/src/webkitchatcontainer.cpp
+++ b/src/webkitchatcontainer.cpp
@@ -349,6 +349,15 @@ webview_script_dialog(WebKitWebView      *self,
     return true;
 }

+static void
+init_js_i18n(WebKitChatContainer *view)
+{
+    // TODO load locale data
+    gchar* function_call = g_strdup_printf("init_i18n(%s)", locale_data.constData());
+    webkit_chat_container_execute_js(view, function_call);
+    g_free(function_call);
+}
+
 static void
 javascript_library_loaded(WebKitWebView *webview_chat,
                           GAsyncResult *result,
@@ -385,6 +394,10 @@ javascript_library_loaded(WebKitWebView *webview_chat,
     }
     else
     {
+         /* load i18n before setting js_libs_loaded to make sure no js function
+            calls are executed in between */
+         init_js_i18n(self);
+
          priv->js_libs_loaded = TRUE;
          g_signal_emit(G_OBJECT(self), webkit_chat_container_signals[READY], 0);

@@ -400,6 +413,7 @@ load_javascript_libs(WebKitWebView *webview_chat,
     WebKitChatContainerPrivate *priv = WEBKIT_CHAT_CONTAINER_GET_PRIVATE(self);

     /* Create the list of libraries to load */
+    priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/cx/ring/RingGnome/jed.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/cx/ring/RingGnome/linkify.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/cx/ring/RingGnome/linkify-string.js");
     priv->js_libs_to_load = g_list_append(priv->js_libs_to_load, (gchar*) "/cx/ring/RingGnome/linkify-html.js");
diff --git a/web/chatview.html b/web/chatview.html
index ff1317d..b8071d3 100644
--- a/web/chatview.html
+++ b/web/chatview.html
@@ -134,6 +134,15 @@ var isAccountEnabled = true
 var isInitialLoading = false
 var imagesLoadingCounter = 0

+/* i18n manager */
+var i18n = Null
+
+function init_i18n(locale_data) {
+    i18n = new Jed({
+        "locale_data" : locale_data
+    })
+}
+
 function onScrolled_() {
     if (messages.scrollTop == 0 && historyBufferIndex != historyBuffer.length) {
         /* At the top and there's something to print */
@@ -1163,7 +1172,7 @@ function buildMessageDropdown(message_id) {

     const remove = document.createElement("div")
     remove.setAttribute("class", "delete")
-    remove.innerHTML = "Delete"
+    remove.innerHTML = i18n.translate("Delete")
     remove.msg_id = message_id
     remove.onclick = function() {
         window.prompt(`DELETE_INTERACTION:${this.msg_id}`)
diff --git a/web/web.gresource.xml b/web/web.gresource.xml
index a701e51..bd4afca 100644
--- a/web/web.gresource.xml
+++ b/web/web.gresource.xml
@@ -8,6 +8,7 @@
       <file>linkify.js</file>
       <file>linkify-string.js</file>
       <file>linkify-html.js</file>
+      <file>jed.js</file>

       <!-- CSS -->
       <file>chatview.css</file>

• Strings can be retrieved using:

xgettext -o chatview.pot -L Javascript --keyword=translate --from-code=utf-8 chatview.html

• Translate strings:

mv chatview.pot en.po
cp en.po fr.po
# translate ...

• Install po2json:

apt-get install node-po2json

• Convert .po to JSON:

po2json en.po en.json
po2json fr.po fr.json