special_video 的Layout对话框改为固定1*3,1*4,3*1,4*1

special_video 上传底图后缀改为svdoj

src/App.vue

@@ -64,7 +64,7 @@ export default defineComponent({
     } else if (
       (<any>window).media_control_client_product == EProductNames.SPECIAL_VIDEO
     ) {
-      document.title = $t.t("SpecialVideo") + "WebApp";
+      document.title = $t.t("SuperVPlayer") + "WebApp";
     }
 
     // 设置 AXIOS 默认请求头

src/components/AboutDialog.vue

@@ -95,7 +95,7 @@
             <q-item-section></q-item-section>
             <q-item-section>
               <div class="fit text-right">
-                {{ product }}
+                {{ product_name }}
               </div>
             </q-item-section>
           </q-item>
@@ -130,14 +130,18 @@ export default defineComponent({
     const target_click_count = ref(30);
 
     const product = ref("");
+    const product_name = ref("LedPlayer");
+
     if (
       (<any>window).media_control_client_product == EProductNames.LED_PLAYER
     ) {
       product.value = "LedPlayer";
+      product_name.value = "LedPlayer";
     } else if (
       (<any>window).media_control_client_product == EProductNames.SPECIAL_VIDEO
     ) {
       product.value = "SpecialVideo";
+      product_name.value = "SuperVPlayer";
     }
 
     let client_version = ref(version);
@@ -160,6 +164,7 @@ export default defineComponent({
       kernel_version,
       rootfs_version,
       product,
+      product_name,
 
       async showDialog() {
         click_count.value = 0;

src/components/BackgroundImageDialog.vue

@@ -48,7 +48,7 @@
                   method="post"
                   :headers="generatorFileUploadHeaders"
                   :label="$t('select background image') + ':'"
-                  accept="image/*"
+                  :accept="$store.state.isSpecialVideo() ? '.svdoj' : 'image/*'"
                   :hide-upload-btn="true"
                   @uploaded="onUploaded"
                   @failed="onFailed"
@@ -64,6 +64,7 @@
 
         <q-card-actions align="left">
           <q-btn
+            v-if="$store.state.isLedPlayer()"
             flat
             no-caps
             :loading="loading"

src/components/SpecialVideoGridSettingDialog.vue

@@ -0,0 +1,159 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (!loading && evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("grid setting") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="max-height: 50vh; width: 35vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-select
+                  :label="$t('layout')"
+                  :options="select_options"
+                  v-model="layout"
+                >
+                </q-select>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Cancel')"
+            no-caps
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            ref="accept"
+            flat
+            :label="$t('Accept')"
+            no-caps
+            :loading="loading"
+            type="submit"
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed } from "vue";
+import { useStore } from "src/store";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import GlobalData from "src/common/GlobalData";
+
+export default defineComponent({
+  name: "ComponentSpecialVideoGridSettingDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    let loading = ref(false);
+    let layout = ref("1X3");
+
+    const select_options = ["1X3", "1X4", "3X1", "4X1"];
+    const row_values = [1, 1, 3, 4];
+    const col_values = [3, 4, 1, 1];
+
+    return {
+      show_dialog,
+      loading,
+      layout,
+      select_options,
+      showDialog() {
+        show_dialog.value = true;
+
+        let col = parseInt(
+          (GlobalData.getInstance().applicationConfig?.wall_col ?? 1).toString()
+        );
+        if (isNaN(col)) {
+          col = 1;
+        }
+
+        let row = parseInt(
+          (GlobalData.getInstance().applicationConfig?.wall_row ?? 4).toString()
+        );
+        if (isNaN(row)) {
+          row = 4;
+        }
+
+        layout.value = row + "X" + col;
+        const v = select_options.find(
+          (element) => element && element == layout.value
+        );
+        if (!v) {
+          layout.value = "1X4";
+        }
+      },
+      resetData() {
+        loading.value = false;
+      },
+
+      async onSubmit() {
+        loading.value = true;
+        try {
+          const index = select_options.findIndex((e) => e && e == layout.value);
+          if (index != -1) {
+            // console.log(row_values[index] + "X" + col_values[index]);
+            GlobalData.getInstance()
+              .getCurrentClient()
+              ?.setWallRowCol(row_values[index], col_values[index]);
+          }
+
+          show_dialog.value = false;
+        } catch {}
+        loading.value = false;
+      },
+    };
+  },
+});
+</script>

src/pages/TopToolBar.vue

@@ -105,7 +105,12 @@
         :icon="/*grid_on*/ 'img:new_icon/grid_setting.png'"
         :label="$t('grid setting')"
         class="q-mr-sm"
-        @click="$refs.grid_setting_dialog.showDialog()"
+        @click="
+          ($store.state.isSpecialVideo()
+            ? $refs.special_video_grid_setting_dialog
+            : $refs.grid_setting_dialog
+          )?.showDialog()
+        "
       />
 
       <q-btn
@@ -370,7 +375,14 @@
       </q-item>
     </q-toolbar>
   </div>
-  <grid-setting-dialog ref="grid_setting_dialog" />
+  <grid-setting-dialog
+    v-if="$store.state.isLedPlayer()"
+    ref="grid_setting_dialog"
+  />
+  <special-video-grid-setting-dialog
+    v-if="$store.state.isSpecialVideo()"
+    ref="special_video_grid_setting_dialog"
+  />
   <background-image-dialog ref="background_image_dialog" />
   <subtitle-dialog ref="subtitle_dialog" />
   <recovery-database-dialog ref="recovery_database_dialog" />
@@ -406,6 +418,7 @@ import { defineComponent, ref, Ref, computed, watch } from "vue";
 import { useStore } from "src/store";
 
 import GridSettingDialog from "src/components/GridSettingDialog.vue";
+import SpecialVideoGridSettingDialog from "src/components/SpecialVideoGridSettingDialog.vue";
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
 import RecoveryDatabaseDialog from "src/components/RecoveryDatabaseDialog.vue";
 import UpgradeDialog from "src/components/UpgradeDialog.vue";
@@ -434,6 +447,7 @@ export default defineComponent({
 
   components: {
     GridSettingDialog,
+    SpecialVideoGridSettingDialog,
     BackgroundImageDialog,
     RecoveryDatabaseDialog,
     UpgradeDialog,

src/pages/WallPage.vue

@@ -7,7 +7,7 @@
     @dragleave="onDragLeave"
     @dragover="onDragOver"
     @drop="onDrop"
-    style="background-color: #bce0f0"
+    style="background-color: #bce0f0; margin-bottom: 10%"
   >
     <div
       id="windows"
@@ -307,6 +307,9 @@ export default defineComponent({
           item_height.value =
             wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
         }
+        if (wall_rows.value > wall_cols.value) {
+          item_height.value *= 0.85;
+        }
       } else {
         item_height.value = 0;
       }