Draft: i18n

src/main/frontend/vue-app/components/Call.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="meet">
+    <h1>{{ $t('call.title') }}</h1>
   </div>
 </template>
 
 <script>
 export default {
-  name : "Call",
-  data () {
+  name: "Call",
+  data() {
     return {
-      title: "eXo Jitsi Call",
       backendResponse: [],
       errors: []
     };

src/main/frontend/vue-app/components/ExitScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app id="exit-screen" ref="exitscreen">
-    <img src="/jitsi/images/logo.png " />
-    <p>This call already finished. Now you can close this window.</p>
+    <img :alt="$t('exitScreen.logoAlt')" src="/jitsi/images/logo.png" />
+    <p>{{ $t('exitScreen.message') }}</p>
   </v-app>
 </template>
 

src/main/frontend/vue-app/components/InvitePopup.vue

@@ -2,7 +2,7 @@
   <v-app>
     <v-btn
       id="icon-popup"
-      :title="hoverMsg"
+      :title="$t('invitePopup.hoverMsg')"
       class="subject-text"
       style="margin: 0 4px 4px 4px;border:0px;border-radius:3px;"
       icon
@@ -70,11 +70,15 @@ export default {
 
   methods: {
     displayMessage() {
-      this.$root.$emit("alert-message", this.textLinkMsg, "success");
-      // eslint-disable-next-line no-magic-numbers
+      this.$root.$emit("alert-message", this.$t("invitePopup.linkCopied"), "success");
       const iframe = document.getElementById("jitsiConferenceFrame0");
-      iframe.contentWindow.document.getElementById("inputURL").select();
-      iframe.contentWindow.document.execCommand("copy");
+      if (iframe && iframe.contentWindow && iframe.contentWindow.document) {
+        const input = iframe.contentWindow.document.getElementById("inputURL");
+        if (input) {
+          input.select();
+          iframe.contentWindow.document.execCommand("copy");
+        }
+      }
     }
   }
 };

src/main/frontend/vue-app/components/SignInScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <img src="/jitsi/images/logo.png ">
+    <img :alt="$t('signIn.logoAlt')" src="/jitsi/images/logo.png" />
     <div id="signin-popup" ref="signinpopup">
       <div v-show="showDialog" class="background"></div>
       <v-dialog
@@ -12,35 +12,40 @@
         persistent
         no-click-animation>
         <v-card dark>
-          <v-card-text>Sign In to join the call as eXo user</v-card-text>
+          <v-card-text>{{ $t('signIn.signInMessage') }}</v-card-text>
           <v-card-actions>
             <v-btn
               :elevation="0"
               color="#476A9C"
               large
               class="ui-action"
-              @click="eXoUserJoining">Sign In</v-btn>
+              @click="eXoUserJoining">
+              {{ $t('signIn.signInBtn') }}
+            </v-btn>
           </v-card-actions>
-          <v-card-text class="text-guest">Or request to join as a Guest</v-card-text>
+          <v-card-text class="text-guest">{{ $t('signIn.guestMessage') }}</v-card-text>
           <v-card-actions style="flex-flow: column;">
             <div style="position: relative; width: 100%;">
               <v-text-field
                 ref="textfield"
                 v-model="fullName"
+                :label="$t('signIn.fullNameLabel')"
                 light
                 prepend-inner-icon="$account"
                 type="text"
                 class="ui-action"
-                label="Full name"
                 hide-details
                 color="#999"
                 dense
                 solo
                 flat
-                required></v-text-field>
+                required
+              ></v-text-field>
               <i class="uiIconUser"></i>
             </div>
-            <v-btn class="ui-action" large outlined @click="guestJoining">Join as Guest</v-btn>
+            <v-btn class="ui-action" large outlined @click="guestJoining">
+              {{ $t('signIn.joinAsGuest') }}
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>

src/main/frontend/vue-app/main.js

@@ -7,8 +7,8 @@ import SignInScreen from "./components/SignInScreen.vue";
 import ExitScreen from "./components/ExitScreen.vue";
 import "vuetify/dist/vuetify.min.css";
 
-//Vue.config.productionTip = false
 window.Vue.use(window.Vuetify);
+
 const vuetify = new window.Vuetify({
   dark: true,
   icons: {
@@ -22,89 +22,69 @@ const vuetify = new window.Vuetify({
 });
 
 const lang = window.eXo && eXo.env && eXo.env.portal && eXo.env.portal.language || "en";
-const localePortlet = "locale.jitsi";
-const resourceBundleName = "jitsi";
-const url = `/portal/rest/i18n/bundle/${localePortlet}.${resourceBundleName}-${lang}.json`;
 
-export function init() {
-  // getting locale ressources
-  // return exoi18n.loadLanguageAsync(lang, url).then((i18n) => {
-  return new window.Vue({
-    el: "#app",
-    components: {
-      App,
-    },
-    vuetify,
-    render: function(h) {
-      return h(App);
-    },
-  });
-}
+const langUrl = `/jitsi/api/v1/lang/${lang}`;
 
-export function initCallLink(url) {
-  // getting locale ressources
-  // return exoi18n.loadLanguageAsync(lang, url).then((i18n) => {
-  return new window.Vue({
-    el: "#invite-popup",
-    components: {
-      InvitePopup,
-    },
-    vuetify,
-    render: function(h) {
-      return h(InvitePopup, {
-        props: {
-          url: url,
-        },
-      });
-    },
+// init main app
+export function init(exoi18n) {
+  return exoi18n.loadLanguageAsync(lang, langUrl).then(i18n => {
+    return new window.Vue({
+      el: "#app",
+      components: { App },
+      vuetify,
+      i18n,
+      render: h => h(App),
+    });
   });
 }
 
-export function initSignInScreen(hideLoader, showLoader) {
-  const result = new Promise((resolve, reject) => {
-    new window.Vue({
-      el: "#signin-popup",
-      components: {
-        SignInScreen,
-      },
-      created() {
-        hideLoader();
-      },
+// init invite popup
+export function initCallLink(meetingUrl, exoi18n) {
+  return exoi18n.loadLanguageAsync(lang, langUrl).then(i18n => {
+    return new window.Vue({
+      el: "#invite-popup",
+      components: { InvitePopup },
       vuetify,
-      render: function(h) {
-        const thevue = this;
-        return h(SignInScreen, {
-          on: {
-            exouserjoin: function(){
-              showLoader();
-              resolve();
-              thevue.$destroy();
-            },
-            guestjoin: function($event){
-              showLoader();
-              reject($event);
-              thevue.$destroy();
-            },
-          }
-        });
-      },
+      i18n,
+      render: h => h(InvitePopup, { props: { url: meetingUrl } }),
     });
   });
-  return result;
 }
 
-export function initExitScreen() {
-  const result = new Promise((resolve, reject) => {
-    new window.Vue({
-      el: "#exit-screen",
-      components: {
-        ExitScreen,
-      },
-      vuetify,
-      render: function(h) {
-        return h(ExitScreen);
-      },
+// init sign-in screen
+export function initSignInScreen(hideLoader, showLoader, exoi18n) {
+  return exoi18n.loadLanguageAsync(lang, langUrl).then(i18n => {
+    return new Promise((resolve, reject) => {
+      new window.Vue({
+        el: "#signin-popup",
+        components: { SignInScreen },
+        created() { hideLoader(); },
+        vuetify,
+        i18n,
+        render(h) {
+          return h(SignInScreen, {
+            on: {
+              exouserjoin: () => { showLoader(); resolve(); this.$destroy(); },
+              guestjoin: ($event) => { showLoader(); reject($event); this.$destroy(); },
+            }
+          });
+        },
+      });
     });
   });
-  return result;
 }
+
+// init exit screen
+export function initExitScreen(exoi18n) {
+  return exoi18n.loadLanguageAsync(lang, langUrl).then(i18n => {
+    return new Promise((resolve) => {
+      new window.Vue({
+        el: "#exit-screen",
+        components: { ExitScreen },
+        vuetify,
+        i18n,
+        render: h => h(ExitScreen),
+      });
+    });
+  });
+}

src/main/java/org/exoplatform/jitsi/controller/APIController.java

@@ -16,6 +16,11 @@
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.ResourceBundle;
+
 import org.exoplatform.jitsi.CallInfo;
 import org.exoplatform.jitsi.CallService;
 import org.exoplatform.jitsi.TokenService;
@@ -105,6 +110,17 @@ public ResponseEntity<String> uploadLink(@PathVariable("callId") String callId)
     return ResponseEntity.badRequest().build();
   }
 
+  @GetMapping("/lang/{lang}")
+  public Map<String, String> getMessages(@PathVariable("lang") String lang) {
+    Locale locale = Locale.forLanguageTag(lang);
+    ResourceBundle bundle = ResourceBundle.getBundle("locale.jitsi-call.jitsi-call", locale);
+
+    Map<String, String> messages = new HashMap<>();
+    bundle.keySet().forEach(key -> messages.put(key, bundle.getString(key)));
+
+    return messages;
+  }
+
   /**
    * The Class UserInfoResponse.
    */

src/main/resources/locale/jitsi-call/jitsi-call_en.properties

@@ -0,0 +1,14 @@
+exitScreen.message=This call already finished. Now you can close this window.
+exitScreen.logoAlt=Company Logo
+
+signIn.logoAlt=Company Logo
+signIn.signInMessage=Sign In to join the call as eXo user
+signIn.signInBtn=Sign In
+signIn.guestMessage=Or request to join as a Guest
+signIn.fullNameLabel=Full name
+signIn.joinAsGuest=Join as Guest
+
+invitePopup.linkCopied=Link copied to clipboard
+invitePopup.hoverMsg=Copy meeting link to clipboard
+
+call.title=eXo Jitsi Call

src/main/resources/locale/jitsi-call/jitsi-call_fr.properties

@@ -0,0 +1,14 @@
+exitScreen.message=Cet appel est déjà terminé. Vous pouvez fermer cette fenêtre.
+exitScreen.logoAlt=Logo de l'entreprise
+
+signIn.logoAlt=Logo de l'entreprise
+signIn.signInMessage=Connectez-vous pour rejoindre l'appel en tant qu'utilisateur eXo
+signIn.signInBtn=Se connecter
+signIn.guestMessage=Ou demandez à rejoindre en tant qu'invité
+signIn.fullNameLabel=Nom complet
+signIn.joinAsGuest=Rejoindre en tant qu'invité
+
+invitePopup.linkCopied=Lien copié dans le presse-papiers
+invitePopup.hoverMsg=Copier le lien de la réunion dans le presse-papiers
+
+call.title=Appel Jitsi eXo

src/main/resources/public/js/call.js

@@ -2,8 +2,9 @@ require([
   "SHARED/jquery",
   "SHARED/webConferencing",
   "SHARED/webConferencing_jitsi",
+  "SHARED/eXoVueI18n",
   "app",
-], function($, webConferencing, provider, app) {
+], function($, webConferencing, provider, exoi18n, app) {
 
   /** For debug logging. */
   const log = webConferencing.getLog("jitsi").prefix("call");
@@ -235,7 +236,7 @@ require([
         if (!window.closed) {
           // If not already closed we show the exit message to the user
           console.log('[Jitsi] error: Scripts may not close windows that were not opened by script.');
-          app.initExitScreen();
+          app.initExitScreen(exoi18n);
         }
       }, 250);
       window.close();
@@ -346,7 +347,7 @@ require([
         api.addEventListener("participantRoleChanged", event => {
           provider.getInviteLink(call).then((inviteLink) => {
             if (!isGuest) {
-              app.initCallLink(inviteLink);
+              app.initCallLink(inviteLink, exoi18n);
             }
           });
           api.executeCommand("displayName", name);
@@ -400,7 +401,7 @@ require([
         if (isGuest) {
           log.debug("Cannot get user info for call invitation: " + callId + " (" + inviteId + "), treating the user as a guest", err);
           // Show signIn page: get firstName and lastName
-          app.initSignInScreen(hideLoader, showLoader).then(() => {
+          app.initSignInScreen(hideLoader, showLoader, exoi18n).then(() => {
             showSignInPage(callId, inviteId);
           }).catch(guestData => {
             var guestInfo = {};
@@ -503,5 +504,5 @@ require([
   };
 
   const meetApp = new MeetApp();
-  meetApp.init();
+  meetApp.init(exoi18n);
 });

src/main/resources/public/js/common.js

@@ -9,12 +9,11 @@ var require = {
   waitSeconds : 60,
   paths : {
     "call" : "../../../jitsi/js/call",
-    "app" : "../../../jitsi/jitsi/js/jitsi-app.bundle"
+    "app" : "../../../jitsi/jitsi/js/jitsi-app.bundle",
+    "SHARED/eXoVueI18n" : "/portal/scripts/" + resorcesVersion + "/SHARED/eXoVueI18n"
   }
 };
 
 var bootstrap = document.createElement('script');
 bootstrap.setAttribute('src', require.baseUrl + "/SHARED/bootstrap.js");
-document.head.append(bootstrap);
-
-
+document.head.append(bootstrap);