隐藏菜单添加语言设置

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/App.vue

@@ -42,6 +42,16 @@ export default defineComponent({
       console.log(e);
     }
 
+    {
+      const user_search = (<any>window).user_search || {};
+      if (typeof user_search == "object") {
+        $store.commit(
+          "setAvancedDebug",
+          typeof user_search["debug"] != "undefined"
+        );
+      }
+    }
+
     window.onresize = (evt: any) =>
       EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
 

src/components/AdvancedDebugDialog.vue

@@ -39,7 +39,7 @@
         <q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
           <q-list>
             <q-item>
-              <q-item-section avatar>{{ $t("function") }}:</q-item-section>
+              <q-item-section avatar>{{ $t("function") }}</q-item-section>
               <q-item-section>
                 <q-checkbox
                   v-model="function_output_board"
@@ -68,7 +68,7 @@
                   :disable="loading"
                 />
               </q-item-section>
-              <q-item-section>
+              <q-item-section avatar>
                 <q-btn
                   @click="setDeviceAttribute"
                   :label="$t('commit')"
@@ -77,8 +77,51 @@
                 />
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-item-section avatar>
+                {{ $t("language") }}
+              </q-item-section>
+              <q-item-section>
+                <div class="row q-gutter-sm">
+                  <q-radio
+                    color="cyan"
+                    :loading="loading"
+                    :disable="loading"
+                    class="offset-md-1 col"
+                    v-model="target_language"
+                    val="zh-CN"
+                    :label="$t('chinese')"
+                  />
+                  <q-radio
+                    color="cyan"
+                    :loading="loading"
+                    :disable="loading"
+                    class="offset-md-1 col"
+                    v-model="target_language"
+                    val="en-US"
+                    :label="$t('english')"
+                  />
+                </div>
+              </q-item-section>
+              <q-item-section avatar>
+                <q-btn
+                  @click="setSystemLanguage"
+                  :label="$t('commit')"
+                  outline
+                  color="primary"
+                />
+              </q-item-section>
+            </q-item>
+
             <q-separator class="q-mt-md" />
+
             <q-item class="q-mt-md">
+              <q-item-section>
+                <q-btn @click="showDeviceInfo"> {{ $t("device info") }} </q-btn>
+              </q-item-section>
+            </q-item>
+
+            <q-item class="q-mt-xs">
               <q-item-section>
                 <q-btn @click="restartDevice"> {{ $t("restart") }} </q-btn>
               </q-item-section>
@@ -107,7 +150,7 @@
 <script lang="ts">
 import { defineComponent, ref, watch, computed, nextTick } from "vue";
 import { useStore } from "src/store";
-import { useQuasar } from "quasar";
+import { useQuasar, date as $date } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import { Protocol } from "src/entities/WSProtocol";
@@ -126,6 +169,7 @@ export default defineComponent({
     const function_center_control = ref(false);
     const function_output_board = ref(false);
     const function_mirroring_output = ref(false);
+    const target_language = ref("zh-CN");
 
     return {
       show_dialog,
@@ -133,6 +177,7 @@ export default defineComponent({
       function_center_control,
       function_output_board,
       function_mirroring_output,
+      target_language,
 
       showDialog() {
         show_dialog.value = true;
@@ -171,6 +216,78 @@ export default defineComponent({
       restartDevice() {
         GlobalData.getInstance().getCurrentClient()?.restartDevice();
       },
+      async showDeviceInfo() {
+        const get_time_text = (s: number, show_ss: boolean = true) => {
+          console.log(s);
+          var time = "";
+          var second = s % 60;
+          var minute = parseInt((parseInt(s.toString()) / 60).toString()) % 60;
+          if (show_ss) {
+            time = second + $t.t("SS");
+          }
+          if (minute >= 1) {
+            time = minute + $t.t("MM") + time;
+          }
+          var hour =
+            parseInt((parseInt((s / 60).toString()) / 60).toString()) % 24;
+          if (hour >= 1) {
+            time = hour + $t.t("HH") + time;
+          }
+          var day = parseInt(
+            (
+              parseInt((parseInt((s / 60).toString()) / 60).toString()) / 24
+            ).toString()
+          );
+          if (day >= 1) {
+            time = day + $t.t("DD") + time;
+          }
+          return time;
+        };
+
+        let system_run_time = 0;
+        let system_idle_time = 0;
+        let current_system_time = 0;
+        let server_run_time = 0;
+        let server_all_run_time = 0;
+
+        try {
+          const response = await GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getSystemTimes();
+          if (response) {
+            system_run_time = response.system_run_time;
+            system_idle_time = response.system_idle_time;
+            current_system_time = response.current_system_time;
+            server_run_time = response.server_run_time;
+            server_all_run_time = response.server_all_run_time;
+          }
+        } catch (e) {
+          console.log(e);
+        }
+        $q.dialog({
+          html: true,
+          title: "<div class='text-h4'>" + $t.t("device info") + "</div>",
+          message: `<div class="text-h6">
+          ${$t.t("device resolution")} : ${$store.state.device_screen_width}X${
+            $store.state.device_screen_height
+          }@${$store.state.device_screen_refresh_rate}<br />
+          ${$t.t("system run time")} :  ${get_time_text(system_run_time)} <br />
+          ${$t.t("system idle rate")} :  ${(
+            (system_idle_time / (system_run_time * 4)) *
+            100
+          ).toFixed(0)} % <br />
+          ${$t.t("server run time")} :  ${get_time_text(server_run_time)} <br />
+          ${$t.t("server all run time")} :  ${get_time_text(
+            server_all_run_time,
+            false
+          )} <br />
+          ${$t.t("current server system time")} : ${$date.formatDate(
+            new Date(current_system_time),
+            "YYYY-MM-DD HH:mm:ss"
+          )}<br />
+          </div>`,
+        });
+      },
       setDeviceAttribute() {
         let attribute = Protocol.EDeviceAttribute.None;
         if (function_center_control.value) {
@@ -194,6 +311,18 @@ export default defineComponent({
           timeout: 1500,
         });
       },
+      setSystemLanguage() {
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.setServerLanguage(target_language.value);
+        $q.notify({
+          color: "positive",
+          icon: "done",
+          message: $t.t("set language") + $t.t("success") + "!",
+          position: "top",
+          timeout: 1500,
+        });
+      },
     };
   },
 });

src/i18n/en-US/index.ts

@@ -3,8 +3,8 @@
 
 export default {
   title: "MediaPlayerWebAPP",
-  failed: "Action failed",
+  failed: " failed",
-  success: "Action was successful",
+  success: " successful",
   CN_BERWEEN_SUFFIX: "",
   "clean screen": "Clear",
   "full screen window": "Maximize",

src/index.template.html

@@ -53,6 +53,24 @@
     <link rel="icon" type="image/ico" href="favicon.ico" />
   </head>
   <script src="./media_control_client_language.js"></script>
+  <script type="text/javascript">
+    window.user_search = {};
+    var search = window.location.search;
+    if (search.indexOf("?") != -1) {
+      search = search.substr(1);
+      var temp = search.split("&");
+      for (var i = 0; i < temp.length; i++) {
+        var info = temp[i].split("=");
+        if (info) {
+          if (info.length >= 2) {
+            window.user_search[info[0]] = decodeURI(info[1]);
+          } else if (info.length >= 1) {
+            window.user_search[info[0]] = null;
+          }
+        }
+      }
+    }
+  </script>
 
   <body>
     <!-- DO NOT touch the following DIV -->

src/pages/TopToolBar.vue

@@ -292,15 +292,6 @@
               {{ $t("CN/EN switch") }}
             </q-item-section>
           </q-item>
-          <q-item clickable v-close-popup @click="showDeviceInfo">
-            <q-item-section avatar>
-              <!-- <q-icon name="devices" /> -->
-              <q-icon name="img:new_icon/device_info.png" />
-            </q-item-section>
-            <q-item-section>
-              {{ $t("device info") }}
-            </q-item-section>
-          </q-item>
           <q-item
             clickable
             v-close-popup
@@ -408,13 +399,7 @@ import { Protocol } from "src/entities/WSProtocol";
 import GlobalData from "src/common/GlobalData";
 import { api } from "boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
-import {
+import { SessionStorage, Cookies, openURL, useQuasar } from "quasar";
-  SessionStorage,
-  Cookies,
-  openURL,
-  useQuasar,
-  date as $date,
-} from "quasar";
 import { useI18n } from "vue-i18n";
 import { ConnectTableEntity } from "src/entities/ConnectTableEntity";
 import ClientConnection from "src/common/ClientConnection";
@@ -453,44 +438,12 @@ export default defineComponent({
         0
     );
 
-    let system_run_time = 0;
-    let system_idle_time = 0;
-    let current_system_time = 0;
-    let server_run_time = 0;
-    let server_all_run_time = 0;
-
     const window_rect_edit_dialog: Ref<any> = ref(null);
 
     const plan_running = computed(
       () => $store.state.current_running_plan.trim() != ""
     );
 
-    const get_time_text = (s: number, show_ss: boolean = true) => {
-      console.log(s);
-      var time = "";
-      var second = s % 60;
-      var minute = parseInt((parseInt(s.toString()) / 60).toString()) % 60;
-      if (show_ss) {
-        time = second + $t.t("SS");
-      }
-      if (minute >= 1) {
-        time = minute + $t.t("MM") + time;
-      }
-      var hour = parseInt((parseInt((s / 60).toString()) / 60).toString()) % 24;
-      if (hour >= 1) {
-        time = hour + $t.t("HH") + time;
-      }
-      var day = parseInt(
-        (
-          parseInt((parseInt((s / 60).toString()) / 60).toString()) / 24
-        ).toString()
-      );
-      if (day >= 1) {
-        time = day + $t.t("DD") + time;
-      }
-      return time;
-    };
-
     const checkRegistered = () => {
       if (
         GlobalData.getInstance().getCurrentClient()?.is_connected &&
@@ -666,45 +619,6 @@ export default defineComponent({
           window.location.reload();
         }
       },
-      async showDeviceInfo() {
-        try {
-          const response = await GlobalData.getInstance()
-            .getCurrentClient()
-            ?.getSystemTimes();
-          if (response) {
-            system_run_time = response.system_run_time;
-            system_idle_time = response.system_idle_time;
-            current_system_time = response.current_system_time;
-            server_run_time = response.server_run_time;
-            server_all_run_time = response.server_all_run_time;
-          }
-        } catch (e) {
-          console.log(e);
-        }
-        $q.dialog({
-          html: true,
-          title: "<div class='text-h4'>" + $t.t("device info") + "</div>",
-          message: `<div class="text-h6">
-          ${$t.t("device resolution")} : ${$store.state.device_screen_width}X${
-            $store.state.device_screen_height
-          }@${$store.state.device_screen_refresh_rate}<br />
-          ${$t.t("system run time")} :  ${get_time_text(system_run_time)} <br />
-          ${$t.t("system idle rate")} :  ${(
-            (system_idle_time / (system_run_time * 4)) *
-            100
-          ).toFixed(0)} % <br />
-          ${$t.t("server run time")} :  ${get_time_text(server_run_time)} <br />
-          ${$t.t("server all run time")} :  ${get_time_text(
-            server_all_run_time,
-            false
-          )} <br />
-          ${$t.t("current server system time")} : ${$date.formatDate(
-            new Date(current_system_time),
-            "YYYY-MM-DD HH:mm:ss"
-          )}<br />
-          </div>`,
-        });
-      },
       async powerOff() {
         let success = false;
         try {

src/store/index.ts

@@ -284,7 +284,7 @@ export default store(function (/* { ssrContext } */) {
     state: {
       // state
       initialized: false,
-      advanced_debug: window.location.href.indexOf("advanced_debug=1") != -1,
+      advanced_debug: false,
       signal_source_tree: [],
       polling_tree: [],
       mode_tree: [],
@@ -332,6 +332,12 @@ export default store(function (/* { ssrContext } */) {
           state.device_attribute = num;
         }
       },
+      setAvancedDebug(state: StateInterface, playload?: any) {
+        if (playload || playload == "true") {
+          console.log("debug", playload);
+        }
+        state.advanced_debug = playload;
+      },
       setArrayValue(state: StateInterface, playload?: any) {
         if (Array.isArray(playload.value)) {
           const arr: Array<any> = (<any>state)[playload.name];