Merge pull request #458 from kamiya10/master

feat: Localization
2026-04-12 11:23:52 +02:00 · 2023-01-01 21:55:05 +13:00
parent b5edf2a37b e2481ef442
commit 0fc9dc8dcb
14 changed files with 8214 additions and 1801 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -258,7 +258,4 @@ paket-files/

 # Python Tools for Visual Studio (PTVS)
 __pycache__/
-*.pyc
-
-# Visual Studio Code config directory
-.vscode/
+*.pyc
--- a/.vscode/i18n-ally-custom-framework.yml
+++ b/.vscode/i18n-ally-custom-framework.yml
@@ -0,0 +1,8 @@
+languageIds:
+  - jade
+  - javascript
+  - vue
+
+usageMatchRegex: "\\$t\\(['\"`]({key})['\"`]"
+
+monoonly: true
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "i18n-ally.localesPaths": ["html/src/localization/strings"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en"
+}
--- a/AppApi.cs
+++ b/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 System.Text;
-using System.Collections.Generic;
-using System.Threading;
-using System.IO.Pipes;
+using Microsoft.Win32;
 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()
--- a/html/.eslintrc.json
+++ b/html/.eslintrc.json
@@ -1,83 +1,91 @@
 {
-  "root": true,
-  "extends": ["eslint:all", "prettier"],
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "es2021": true
-  },
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "impliedStrict": true,
-      "jsx": true
+    "root": true,
+    "extends": ["eslint:all", "prettier"],
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "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
-  }
 }
--- a/html/package-lock.json
+++ b/html/package-lock.json
--- a/html/package.json
+++ b/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",
--- a/html/src/app.js
+++ b/html/src/app.js
--- a/html/src/index.pug
+++ b/html/src/index.pug
--- a/html/src/localization/localizedStrings.js
+++ b/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};
--- a/html/src/localization/strings/en.json
+++ b/html/src/localization/strings/en.json
--- a/html/src/localization/strings/zh_TW.json
+++ b/html/src/localization/strings/zh_TW.json
--- a/html/src/vr.js
+++ b/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;
 })();
--- a/html/src/vr.pug
+++ b/html/src/vr.pug
@@ -30,14 +30,14 @@ html
                                    .detail
                                        span.extra
                                            span.time {{ feed.created_at | formatDate }}
-                                            | #[span.name(v-text="feed.displayName")] ✔  
+                                            | #[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)
@@ -342,15 +344,16 @@ html
                                        span.extra
                                            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")]
+                                                | #[span.name(v-text="feed.displayName")] has spawned a portal to
+                                                | #[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(style="display:inline-block") Online: {{ onlineFriendCount }}
+                    span(v-if="config && !config.hideCpuUsageFromFeed" style="display:inline-block;margin-right:5px") {{ $t('vr.status.cpu') }} {{ cpuUsage }}%
+                    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")