Merge pull request #458 from kamiya10/master

feat: Localization

.gitignore

@@ -259,6 +259,3 @@ paket-files/
 # Python Tools for Visual Studio (PTVS)
 __pycache__/
 *.pyc
-
-# Visual Studio Code config directory
-.vscode/

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,8 @@
+languageIds:
+  - jade
+  - javascript
+  - vue
+
+usageMatchRegex: "\\$t\\(['\"`]({key})['\"`]"
+
+monoonly: true

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "i18n-ally.localesPaths": ["html/src/localization/strings"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en"
+}

AppApi.cs

@@ -5,26 +5,26 @@
 // For a copy, see <https://opensource.org/licenses/MIT>.
 
 using CefSharp;
-using Microsoft.Win32;
-using System;
-using System.Diagnostics;
-using System.Linq;
-using System.Management;
-using System.Text.RegularExpressions;
-using System.Windows.Forms;
-using System.IO;
-using System.Security.Cryptography;
-using System.Net;
-using Windows.UI.Notifications;
-using Windows.Data.Xml.Dom;
 using librsync.net;
-using System.Net.Sockets;
+using Microsoft.Win32;
-using System.Text;
-using System.Collections.Generic;
-using System.Threading;
-using System.IO.Pipes;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Globalization;
+using System.IO;
+using System.IO.Pipes;
+using System.Linq;
+using System.Net;
+using System.Net.Sockets;
+using System.Security.Cryptography;
+using System.Text;
+using System.Text.RegularExpressions;
+using System.Threading;
+using System.Windows.Forms;
+using Windows.Data.Xml.Dom;
+using Windows.UI.Notifications;
 
 namespace VRCX
 {
@@ -410,7 +410,12 @@ namespace VRCX
 
         public string CurrentCulture()
         {
-            return System.Globalization.CultureInfo.CurrentCulture.ToString();
+            return CultureInfo.CurrentCulture.ToString();
+        }
+
+        public string CurrentLanguage()
+        {
+            return CultureInfo.InstalledUICulture.Name;
         }
 
         public string GetVersion()

html/.eslintrc.json

@@ -1,83 +1,91 @@
 {
-  "root": true,
+    "root": true,
-  "extends": ["eslint:all", "prettier"],
+    "extends": ["eslint:all", "prettier"],
-  "env": {
+    "env": {
-    "browser": true,
+        "browser": true,
-    "commonjs": true,
+        "commonjs": true,
-    "es2021": true
+        "es2021": true
-  },
+    },
-  "parserOptions": {
+    "parser": "@babel/eslint-parser",
-    "ecmaVersion": "latest",
+    "parserOptions": {
-    "sourceType": "module",
+        "ecmaVersion": "latest",
-    "ecmaFeatures": {
+        "sourceType": "module",
-      "impliedStrict": true,
+        "ecmaFeatures": {
-      "jsx": true
+            "impliedStrict": true,
+            "jsx": true
+        },
+        "requireConfigFile": false,
+        "babelOptions": {
+            "presets": ["@babel/preset-env"],
+            "parserOpts": {
+                "plugins": ["importAssertions"]
+            }
+        }
+    },
+    "globals": {
+        "CefSharp": "readonly",
+        "VRCX": "readonly",
+        "VRCXStorage": "readonly",
+        "SQLite": "readonly",
+        "LogWatcher": "readonly",
+        "Discord": "readonly",
+        "AppApi": "readonly",
+        "SharedVariable": "readonly",
+        "WebApi": "readonly",
+        "AssetBundleCacher": "readonly"
+    },
+    "rules": {
+        "arrow-body-style": 0,
+        "block-scoped-var": 0,
+        "camelcase": 0,
+        "capitalized-comments": 0,
+        "class-methods-use-this": 0,
+        "complexity": 0,
+        "default-case": 0,
+        "func-names": 0,
+        "func-style": 0,
+        "guard-for-in": 0,
+        "id-length": 0,
+        "line-comment-position": 0,
+        "max-depth": 0,
+        "max-lines": 0,
+        "max-lines-per-function": 0,
+        "max-params": 0,
+        "max-statements": 0,
+        "multiline-comment-style": 0,
+        "new-cap": 0,
+        "no-await-in-loop": 0,
+        "no-console": 0,
+        "no-continue": 0,
+        "no-control-regex": 0,
+        "no-empty": [
+            "error",
+            {
+                "allowEmptyCatch": true
+            }
+        ],
+        "no-inline-comments": 0,
+        "no-invalid-this": 0,
+        "no-magic-numbers": 0,
+        "no-negated-condition": 0,
+        "no-plusplus": 0,
+        "no-redeclare": 0,
+        "no-ternary": 0,
+        "no-throw-literal": 0,
+        "no-underscore-dangle": 0,
+        "no-var": 0,
+        "no-void": 0,
+        "no-warning-comments": 0,
+        "one-var": 0,
+        "prefer-arrow-callback": 0,
+        "prefer-const": 0,
+        "prefer-destructuring": 0,
+        "prefer-named-capture-group": 0,
+        "require-unicode-regexp": 0,
+        "sort-imports": 0,
+        "sort-keys": 0,
+        "sort-vars": 0,
+        "strict": 0,
+        "vars-on-top": 0
     }
-  },
-  "globals": {
-    "CefSharp": "readonly",
-    "VRCX": "readonly",
-    "VRCXStorage": "readonly",
-    "SQLite": "readonly",
-    "LogWatcher": "readonly",
-    "Discord": "readonly",
-    "AppApi": "readonly",
-    "SharedVariable": "readonly",
-    "WebApi": "readonly",
-    "AssetBundleCacher": "readonly"
-  },
-  "rules": {
-    "arrow-body-style": 0,
-    "block-scoped-var": 0,
-    "camelcase": 0,
-    "capitalized-comments": 0,
-    "class-methods-use-this": 0,
-    "complexity": 0,
-    "default-case": 0,
-    "func-names": 0,
-    "func-style": 0,
-    "guard-for-in": 0,
-    "id-length": 0,
-    "line-comment-position": 0,
-    "max-depth": 0,
-    "max-lines": 0,
-    "max-lines-per-function": 0,
-    "max-params": 0,
-    "max-statements": 0,
-    "multiline-comment-style": 0,
-    "new-cap": 0,
-    "no-await-in-loop": 0,
-    "no-console": 0,
-    "no-continue": 0,
-    "no-control-regex": 0,
-    "no-empty": [
-      "error",
-      {
-        "allowEmptyCatch": true
-      }
-    ],
-    "no-inline-comments": 0,
-    "no-invalid-this": 0,
-    "no-magic-numbers": 0,
-    "no-negated-condition": 0,
-    "no-plusplus": 0,
-    "no-redeclare": 0,
-    "no-ternary": 0,
-    "no-throw-literal": 0,
-    "no-underscore-dangle": 0,
-    "no-var": 0,
-    "no-void": 0,
-    "no-warning-comments": 0,
-    "one-var": 0,
-    "prefer-arrow-callback": 0,
-    "prefer-const": 0,
-    "prefer-destructuring": 0,
-    "prefer-named-capture-group": 0,
-    "require-unicode-regexp": 0,
-    "sort-imports": 0,
-    "sort-keys": 0,
-    "sort-vars": 0,
-    "strict": 0,
-    "vars-on-top": 0
-  }
 }

html/package.json

@@ -22,6 +22,9 @@
   },
   "homepage": "https://github.com/pypy-vrc/VRCX#readme",
   "devDependencies": {
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-import-assertions": "^7.20.0",
+    "@babel/preset-env": "^7.20.2",
     "@fontsource/noto-sans-jp": "^4.5.12",
     "@fontsource/noto-sans-kr": "^4.5.12",
     "animate.css": "^4.1.1",
@@ -44,6 +47,7 @@
     "uuid": "^9.0.0",
     "vue": "^2.6.14",
     "vue-data-tables": "^3.4.5",
+    "vue-i18n": "^8.28.2",
     "vue-lazyload": "^1.3.4",
     "vue-marquee-text-component": "^1.2.0",
     "webpack": "^5.75.0",

html/src/localization/localizedStrings.js

@@ -0,0 +1,10 @@
+import en from './strings/en.json' assert {type: 'JSON'};
+import elements_en from 'element-ui/lib/locale/lang/en';
+// import ja from './strings/ja.json' assert { type: 'JSON' };
+import zh_TW from './strings/zh_TW.json' assert {type: 'JSON'};
+import elements_zh_TW from 'element-ui/lib/locale/lang/zh-TW';
+
+const localized_en = {...en, ...elements_en};
+const localized_zh_TW = {...zh_TW, ...elements_zh_TW};
+
+export {localized_en as en, localized_zh_TW as zh_TW};

html/src/vr.js

@@ -8,10 +8,11 @@ import '@fontsource/noto-sans-kr';
 import '@fontsource/noto-sans-jp';
 import Noty from 'noty';
 import Vue from 'vue';
+import VueI18n from 'vue-i18n';
 import ElementUI from 'element-ui';
-import locale from 'element-ui/lib/locale/lang/en';
 import * as workerTimers from 'worker-timers';
 import MarqueeText from 'vue-marquee-text-component';
+import * as localizedStrings from './localization/localizedStrings.js';
 Vue.component('marquee-text', MarqueeText);
 
 (async function () {
@@ -29,8 +30,18 @@ Vue.component('marquee-text', MarqueeText);
         timeout: 3000
     });
 
+    Vue.use(VueI18n);
+
+    var i18n = new VueI18n({
+        locale: 'en',
+        fallbackLocale: 'en',
+        messages: localizedStrings
+    });
+
+    var $t = i18n.t.bind(i18n);
+
     Vue.use(ElementUI, {
-        locale
+        i18n: (key, value) => i18n.t(key, value)
     });
 
     var escapeTag = (s) =>
@@ -163,10 +174,12 @@ Vue.component('marquee-text', MarqueeText);
     };
 
     var $app = {
+        i18n,
         data: {
             // 1 = 대시보드랑 손목에 보이는거
             // 2 = 항상 화면에 보이는 거
             appType: location.href.substr(-1),
+            appLanguage: 'en',
             currentTime: new Date().toJSON(),
             cpuUsage: 0,
             pcUptime: '',
@@ -310,6 +323,7 @@ Vue.component('marquee-text', MarqueeText);
         this.hudFeed = [];
         this.hudTimeout = [];
         this.setDatetimeFormat();
+        this.setAppLanguage(this.config.appLanguage);
     };
 
     $app.methods.updateOnlineFriendCount = function (count) {
@@ -699,6 +713,16 @@ Vue.component('marquee-text', MarqueeText);
         Vue.filter('formatDate', formatDate);
     };
 
+    $app.methods.setAppLanguage = function (appLanguage) {
+        if (!appLanguage) {
+            return;
+        }
+        if (appLanguage !== this.appLanguage) {
+            this.appLanguage = appLanguage;
+            i18n.locale = this.appLanguage;
+        }
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();

html/src/vr.pug

@@ -32,12 +32,12 @@ html
                                             span.time {{ feed.created_at | formatDate }}
                                             | #[span.name(v-text="feed.displayName")] ✔
                                             template(v-if="feed.worldName")
-                                                | #[location(:location="feed.location" :hint="feed.worldName")]
+                                                | #[location(:location="feed.location" :hint="feed.worldName" style="margin-left:5px")]
                                 div(v-else-if="feed.type === 'Status'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] 
+                                            | #[span.name(v-text="feed.displayName" style="margin-right:5px")]
                                             template(v-if="feed.statusDescription === feed.previousStatusDescription")
                                                 i.x-user-status(:class="statusClass(feed.previousStatus)")
                                                 i.el-icon-right
@@ -69,7 +69,7 @@ html
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | 🎵 #[span.name(v-text="feed.displayName")] 
+                                            | 🎵 #[span.name(v-text="feed.displayName" style="margin-right:5px")]
                                             template(v-if="feed.videoName")
                                                 | #[span(v-text="feed.videoName")]
                                             template(v-else)
@@ -144,7 +144,7 @@ html
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
                                             template(v-if="feed.displayName")
-                                                | ✨ #[span.name(v-text="feed.displayName")]  
+                                                | ✨ #[span.name(v-text="feed.displayName" style="margin-right:5px")]
                                                 | #[location(:location="feed.instanceId" :hint="feed.worldName")]
                                             template(v-else)
                                                 | ✨ User has spawned a portal
@@ -152,7 +152,7 @@ html
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | 🧍 #[span.name(v-text="feed.displayName")]  
+                                            | 🧍 #[span.name(v-text="feed.displayName" style="margin-right:5px")]
                                             template(v-if="feed.releaseStatus === 'public'")
                                                 | #[i.x-user-status.online]
                                             template(v-else)
@@ -229,14 +229,15 @@ html
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] has logged in  
+                                            | #[span.name(v-text="feed.displayName")]
+                                            span(style="margin-left:5px;margin-right:5px") has logged in
                                             template(v-if="feed.worldName")
                                                 | to #[location(:location="feed.location" :hint="feed.worldName")]
                                 div(v-else-if="feed.type === 'Status'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] 
+                                            | #[span.name(v-text="feed.displayName" style="margin-right:5px")]
                                             template(v-if="feed.statusDescription === feed.previousStatusDescription")
                                                 i.x-user-status(:class="statusClass(feed.previousStatus)")
                                                 i.el-icon-right
@@ -267,7 +268,8 @@ html
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] changed video to 
+                                            | #[span.name(v-text="feed.displayName")]
+                                            span(style="margin-left:5px;margin-right:5px") changed video to
                                             template(v-if="feed.videoName")
                                                 | #[span(v-text="feed.videoName")]
                                             template(v-else)
@@ -343,14 +345,15 @@ html
                                             span.time {{ feed.created_at | formatDate }}
                                             template(v-if="feed.displayName")
                                                 | #[span.name(v-text="feed.displayName")] has spawned a portal to
-                                                | #[location(:location="feed.instanceId" :hint="feed.worldName")]
+                                                | #[location(:location="feed.instanceId" :hint="feed.worldName" style="margin-left:5px")]
                                             template(v-else)
                                                 | User has spawned a portal
                                 div(v-else-if="feed.type === 'AvatarChange'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
                                     .detail
                                         span.extra
                                             span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] changed into avatar  
+                                            | #[span.name(v-text="feed.displayName")]
+                                            span(style="margin-left:5px;margin-right:5px") changed into avatar
                                             template(v-if="feed.releaseStatus === 'public'")
                                                 | #[i.x-user-status.online]
                                             template(v-else)
@@ -415,12 +418,12 @@ html
                                 img(v-if="device[1] !== 'connected'" src="images/controller_status_off.png" class="tracker-device")
                                 img(v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" class="tracker-device")
                                 img(v-else src="images/controller_status_ready.png" class="tracker-device")
-                                span L:{{ device[2] }}%
+                                span {{ $t('vr.status.devices.left') }}{{ device[2] }}%
                             template(v-else-if="device[0] === 'rightController'")
                                 img(v-if="device[1] !== 'connected'" src="images/controller_status_off.png" class="tracker-device")
                                 img(v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" class="tracker-device")
                                 img(v-else src="images/controller_status_ready.png" class="tracker-device")
-                                span R:{{ device[2] }}%
+                                span {{ $t('vr.status.devices.right') }}{{ device[2] }}%
                             template(v-else-if="device[0] === 'controller'")
                                 img(v-if="device[1] !== 'connected'" src="images/controller_status_off.png" class="tracker-device")
                                 img(v-else-if="device[2] < 20" src="images/controller_status_ready_low.png" class="tracker-device")
@@ -454,17 +457,17 @@ html
                             span(style="display:inline-block") {{ lastLocation.playerList.length }}
                             span(style="display:inline-block;font-weight:bold") {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : ''}}
                         template(v-else)
-                            span(style="float:right") Timer: {{ lastLocationTimer }}
+                            span(style="float:right") {{ $t('vr.status.timer') }} {{ lastLocationTimer }}
                                 template(v-if="onlineForTimer")
                                     |&nbsp;/ {{ onlineForTimer }}
                                 template(v-if="pcUptime")
                                     |&nbsp;/ {{ pcUptime }}
-                            span(style="display:inline-block") Players: {{ lastLocation.playerList.length }} 
+                            span(style="display:inline-block") {{ $t('vr.status.players') }} {{ lastLocation.playerList.length }}
                             span(style="display:inline-block;font-weight:bold") {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : ''}}
                     br
                     span(style="float:right") {{ currentTime }}
-                    span(v-if="config && !config.hideCpuUsageFromFeed" style="display:inline-block;margin-right:5px") CPU: {{ cpuUsage }}%
+                    span(v-if="config && !config.hideCpuUsageFromFeed" style="display:inline-block;margin-right:5px") {{ $t('vr.status.cpu') }} {{ cpuUsage }}%
-                    span(style="display:inline-block") Online: {{ onlineFriendCount }}
+                    span(style="display:inline-block") {{ $t('vr.status.online') }} {{ onlineFriendCount }}
             template(v-else)
                 svg(class="np-progress-circle")
                     circle(class="np-progress-circle-stroke" cx="60" cy="60" stroke="white" r="30" fill="transparent" stroke-width="60")