From 2a73d6b946700d96ba8c6bbb429d6c2c6afe3b08 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Thu, 4 Aug 2022 17:10:52 +0800
Subject: [PATCH] =?UTF-8?q?special=5Fvideo=20=E7=9A=84Layout=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=A1=86=E6=94=B9=E4=B8=BA=E5=9B=BA=E5=AE=9A1*3,1*4,3?=
 =?UTF-8?q?*1,4*1=20special=5Fvideo=20=E4=B8=8A=E4=BC=A0=E5=BA=95=E5=9B=BE?=
 =?UTF-8?q?=E5=90=8E=E7=BC=80=E6=94=B9=E4=B8=BAsvdoj?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   2 +-
 src/components/AboutDialog.vue                |   7 +-
 src/components/BackgroundImageDialog.vue      |   3 +-
 .../SpecialVideoGridSettingDialog.vue         | 159 ++++++++++++++++++
 src/pages/TopToolBar.vue                      |  18 +-
 src/pages/WallPage.vue                        |   5 +-
 6 files changed, 188 insertions(+), 6 deletions(-)
 create mode 100644 src/components/SpecialVideoGridSettingDialog.vue

diff --git a/src/App.vue b/src/App.vue
index e884948..87f1ef8 100644
--- a/src/App.vue
+++ b/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 默认请求头
diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
index 0cc721f..387fdcd 100644
--- a/src/components/AboutDialog.vue
+++ b/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;
diff --git a/src/components/BackgroundImageDialog.vue b/src/components/BackgroundImageDialog.vue
index 31ed1a0..7ebcdb6 100644
--- a/src/components/BackgroundImageDialog.vue
+++ b/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"
diff --git a/src/components/SpecialVideoGridSettingDialog.vue b/src/components/SpecialVideoGridSettingDialog.vue
new file mode 100644
index 0000000..164fc8b
--- /dev/null
+++ b/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>
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 5647047..26998eb 100644
--- a/src/pages/TopToolBar.vue
+++ b/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,
diff --git a/src/pages/WallPage.vue b/src/pages/WallPage.vue
index 3c61b08..f2354d0 100644
--- a/src/pages/WallPage.vue
+++ b/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;
       }