@everymatrix/player-account-menu 0.0.197 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-menu",
-  "version": "0.0.197",
+  "version": "0.0.201",
   "main": "dist/player-account-menu.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "89d693d3429e3dc0d6e642537452c8faa0ca008a"
+  "gitHead": "71051531499cfea745b53a0f7c0a77a252990ae7"
 }

package/src/PlayerAccountMenu.svelte

@@ -4,11 +4,14 @@
   import { getDevice } from 'rvhelper';
   import { onMount } from "svelte";
   import { generalIcon } from './../icons/iconService';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerMyAccountTranslations } from './translations';
   import '@everymatrix/general-logout';
 
   export let endpoint:string = '';
   export let session:string = '';
   export let playerid:string = '';
+  export let lang:string = 'en';
 
   let isLoading:boolean = false;
 
@@ -25,6 +28,11 @@
 
   const mediaQuery = window.matchMedia('(min-width: 768px)');
 
+  Object.keys(PlayerMyAccountTranslations).forEach((item) => {
+    addNewMessages(item, PlayerMyAccountTranslations[item]);
+  });
+
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
@@ -104,11 +112,12 @@
   }
 
   const initialLoad = () => {
+    setLocale(lang);
     adjustContentToDevice();
     getPlayerInfo();
   }
 
-  $: endpoint && session && playerid && initialLoad();
+  $: endpoint && session && playerid && lang && initialLoad();
 
 </script>
 
@@ -118,7 +127,7 @@
 <div class="PlayerAccountMenuContainer {isMobile ? 'PlayerAccountMobileContainer' : ''} {mediaQuery.matches && isMobile ? 'PlayerAccountTabletContainer' : ''}">
     <div class="PlayerAccountMenuHeader">
       {#if isMobile}
-        <h3 class="PlayerAccountMenuCategoryTitle">My Account</h3>
+        <h3 class="PlayerAccountMenuCategoryTitle">{$_('myAccount.title')}</h3>
       {/if}
       <p class="PlayerAccountMenuUser">{profileUsername}</p>
       <p class="PlayerAccountMenuEmail">{profileEmail}</p>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,12 @@
+export const PlayerMyAccountTranslations = {
+  en: {
+    myAccount: {
+      title: `My Account`,
+    }
+  },
+  ro: {
+    myAccount: {
+      title: `My Account`,
+    }
+  }
+};