根据服务端返回的产品来显示界面

package.json

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

public/media_control_client_language.js

@@ -1 +1,2 @@
+// window.media_control_client_language = "en-US";
 window.media_control_client_language = "zh-CN";

public/media_control_client_product.js

@@ -0,0 +1,2 @@
+// window.media_control_client_product = "LED_PLAYER";
+window.media_control_client_product = "SPECIAL_VIDEO";

src/App.vue

@@ -12,6 +12,8 @@ import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { useStore } from "src/store";
 import GlobalData from "./common/GlobalData";
+import { EProductNames } from "./entities/ProductNames";
+import { api } from "./boot/axios";
 
 export default defineComponent({
   name: "App",
@@ -39,6 +41,28 @@ export default defineComponent({
       });
     }
 
+    // 设置产品
+    if (
+      !(
+        (<any>window).media_control_client_product ==
+          EProductNames.LED_PLAYER ||
+        (<any>window).media_control_client_product ==
+          EProductNames.SPECIAL_VIDEO
+      )
+    ) {
+      console.error("can't get product, use default led_player");
+      (<any>window).media_control_client_product = EProductNames.LED_PLAYER;
+    }
+    console.log((<any>window).media_control_client_product);
+    $store.commit("setProductName", (<any>window).media_control_client_product);
+
+    // 设置 AXIOS 默认请求头
+    {
+      api.defaults.headers.common["X-Product-Name"] = (<any>(
+        window
+      )).media_control_client_product;
+    }
+
     // 导入对应的quasar 语言包
     try {
       {

src/boot/axios.ts

@@ -17,7 +17,6 @@ const api = axios.create({
   baseURL: window.location.origin,
   timeout: 15000,
 });
-api.defaults.headers.common["X-Product-Name"] = "RK_3568";
 
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api

src/components/BackgroundImageDialog.vue

@@ -134,7 +134,7 @@ export default defineComponent({
           return [
             {
               name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.kHeaderDefaultValueXProductName,
+              value: HttpProtocol.getProductName($store),
             },
             {
               name: HttpProtocol.kHeaderXFileLength,

src/components/FileManageDialog.vue

@@ -873,7 +873,7 @@ export default defineComponent({
           return [
             {
               name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.kHeaderDefaultValueXProductName,
+              value: HttpProtocol.getProductName($store),
             },
             {
               name: HttpProtocol.kHeaderXFileLength,

src/components/RecoveryDatabaseDialog.vue

@@ -123,7 +123,7 @@ export default defineComponent({
           return [
             {
               name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.kHeaderDefaultValueXProductName,
+              value: HttpProtocol.getProductName($store),
             },
             {
               name: HttpProtocol.kHeaderXFileLength,

src/components/UpgradeDialog.vue

@@ -159,7 +159,7 @@ export default defineComponent({
           return [
             {
               name: HttpProtocol.kHeaderXProductName,
-              value: HttpProtocol.kHeaderDefaultValueXProductName,
+              value: HttpProtocol.getProductName($store),
             },
             {
               name: HttpProtocol.kHeaderXFileLength,

src/entities/HttpProtocol.ts

@@ -22,5 +22,12 @@ export namespace HttpProtocol {
   export const kHeaderXFileLength = "X-File-Length";
   export const kHeaderXFileMD5 = "X-File-MD5";
   export const kHeaderXProductName = "X-Product-Name";
-  export const kHeaderDefaultValueXProductName = "RK_3568";
+  const kHeaderDefaultValueXProductName = "LED_PLAYER";
+
+  export const getProductName = ($store: any): String => {
+    if ($store && $store.state && $store.state.product_name) {
+      return $store.state.product_name;
+    }
+    return kHeaderDefaultValueXProductName;
+  };
 }

src/entities/ProductNames.ts

@@ -0,0 +1,4 @@
+export enum EProductNames {
+  LED_PLAYER = "LED_PLAYER",
+  SPECIAL_VIDEO = "SPECIAL_VIDEO",
+}

src/entities/WSProtocol.ts

@@ -2596,26 +2596,42 @@ export namespace Protocol {
   }
 
   export enum EDeviceAttribute {
-    None_All = 0x0000,
+    None_UnKNow = 0x0000,
 
-    None = 0x0001,
-    OutputBoard = 0x0002,
-    CenterControl = 0x0004,
-    MirroringOutput = 0x0008,
-    CustomISV = 0x0010,
-    Reserve4 = 0x0020,
-    Reserve5 = 0x0040,
-    Reserve6 = 0x0080,
-    Reserve7 = 0x0100,
-    Reserve8 = 0x0200,
-    Reserve9 = 0x0400,
-    Reserve10 = 0x0800,
-    Reserve11 = 0x1000,
-    Reserve12 = 0x2000,
-    Reserve13 = 0x4000,
-    Reserve14 = 0x8000,
+    None = 0x00000001,
+    OutputBoard = 0x00000002,
+    CenterControl = 0x00000004,
+    MirroringOutput = 0x00000008,
+    CustomISV = 0x00000010,
+    Reserve5 = 0x00000020,
+    Reserve6 = 0x00000040,
+    Reserve7 = 0x00000080,
+    Reserve8 = 0x00000100,
+    Reserve9 = 0x00000200,
+    Reserve10 = 0x00000400,
+    Reserve11 = 0x00000800,
+    Reserve12 = 0x00001000,
+    Reserve13 = 0x00002000,
+    Reserve14 = 0x00004000,
+    Reserve15 = 0x00008000,
+    Reserve16 = 0x00010000,
+    Reserve17 = 0x00020000,
+    Reserve18 = 0x00040000,
+    Reserve19 = 0x00080000,
+    Reserve20 = 0x00100000,
+    Reserve21 = 0x00200000,
+    Reserve22 = 0x00400000,
+    Reserve23 = 0x00800000,
+    Reserve24 = 0x01000000,
+    Reserve25 = 0x02000000,
+    Reserve26 = 0x04000000,
+    Reserve27 = 0x08000000,
+    Reserve28 = 0x10000000,
+    Reserve29 = 0x20000000,
+    Reserve30 = 0x40000000,
+    Reserve31 = 0x80000000,
 
-    All = 0xffff,
+    All = 0xffffffff,
   }
 
   export class GetDeviceAttributeRequestEntity extends PacketEntity {

src/index.template.html

@@ -54,7 +54,10 @@
     />
     <link rel="icon" type="image/ico" href="favicon.ico" />
   </head>
+
+  <script src="./media_control_client_product.js"></script>
   <script src="./media_control_client_language.js"></script>
+
   <script type="text/javascript">
     function parseSearch() {
       window.user_search = {};

src/pages/WallPage.vue

@@ -288,11 +288,25 @@ export default defineComponent({
       item_witdh.value =
         wall?.value?.parentElement?.offsetWidth ?? 0 / wall_cols.value;
       if (wall.value && wall.value.parentElement) {
-        const wv_scaler =
-          /*$store.state.device_screen_width / $store.state.device_screen_height*/ 1920 /
-          1080;
-        item_height.value =
-          wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
+        if ($store.state.isSpecialVideo()) {
+          const DESKTOP_WIDTH = 3840;
+          const DESKTOP_HEIGHT = 2160;
+          const desktp_row = Math.ceil(
+            Math.sqrt(wall_rows.value * wall_cols.value)
+          );
+          const desktp_col = desktp_row;
+          const unit_width = DESKTOP_WIDTH / desktp_col;
+          const unit_height = DESKTOP_HEIGHT / desktp_row;
+          const wv_scaler = unit_width / unit_height;
+          item_height.value =
+            wall.value.parentElement.offsetWidth / wv_scaler / desktp_row;
+        } else {
+          const wv_scaler =
+            /*$store.state.device_screen_width / $store.state.device_screen_height*/ 1920 /
+            1080;
+          item_height.value =
+            wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
+        }
       } else {
         item_height.value = 0;
       }

src/store/index.ts

@@ -66,6 +66,10 @@ export interface StateInterface {
   landspace: boolean;
   device_attribute: number;
   power_state: boolean;
+  product_name: string;
+
+  isLedPlayer: () => boolean;
+  isSpecialVideo: () => boolean;
 }
 
 // provide typings for `this.$store`
@@ -281,11 +285,12 @@ export const storeKey: InjectionKey<VuexStore<StateInterface>> =
   Symbol("vuex-key");
 
 import window_color_list from "./window_color_list.js";
+import { EProductNames } from "src/entities/ProductNames";
 export const NullSignalSource =
   "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF";
 
 export default store(function (/* { ssrContext } */) {
-  const Store = createStore<StateInterface>({
+  const Store: VuexStore<StateInterface> = createStore<StateInterface>({
     modules: {
       // example
     },
@@ -322,6 +327,14 @@ export default store(function (/* { ssrContext } */) {
       landspace: window.innerWidth > window.innerHeight,
       device_attribute: 0,
       power_state: false,
+      product_name: EProductNames.LED_PLAYER,
+
+      isLedPlayer: () => {
+        return Store.state.product_name == EProductNames.LED_PLAYER;
+      },
+      isSpecialVideo: () => {
+        return Store.state.product_name == EProductNames.SPECIAL_VIDEO;
+      },
     },
 
     mutations: {
@@ -336,6 +349,14 @@ export default store(function (/* { ssrContext } */) {
       setPowerState(state: StateInterface, playload: boolean) {
         state.power_state = playload;
       },
+      setProductName(state: StateInterface, playload?: any) {
+        if (
+          playload == EProductNames.LED_PLAYER ||
+          playload == EProductNames.SPECIAL_VIDEO
+        ) {
+          state.product_name = playload;
+        }
+      },
       setDeviceAttribute(state: StateInterface, playload?: any) {
         const num = parseInt(playload);
         if (!isNaN(num) && num >= 0) {