From 66d3e9cac146918b650266e0638d96970ad91747 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Wed, 20 Apr 2022 08:25:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B1=8F=E5=B9=95=E6=97=8B?=
 =?UTF-8?q?=E8=BD=AC=E4=BB=A3=E7=A0=81,=E4=BF=AE=E5=A4=8D=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E5=88=B0=E7=AA=97=E5=8F=A3=E6=A0=87=E9=A2=98=E4=B8=8A?=
 =?UTF-8?q?=E4=B8=8D=E6=9B=BF=E6=8D=A2=E7=AA=97=E5=8F=A3=E7=9A=84BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  26 ++-
 src/RedirectPage.vue                          |  11 +-
 src/pad/BottomBar.vue                         | 177 ++++++++++++++++--
 src/pad/ContentWall.vue                       |  70 +++++--
 src/store/index.ts                            |   9 +-
 .../vue3-resize-drag/func/renderData.ts       |   2 +-
 src/third_lib/vuedraggable/vuedraggable.js    |   2 -
 7 files changed, 258 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 33bca7a..415c2c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,11 +6,10 @@
   </div>
 </template>
 <script lang="ts">
-import { SessionStorage, Cookies } from "quasar";
+import { SessionStorage, Cookies, useQuasar } from "quasar";
 import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
-import GlobalData from "./common/GlobalData";
 import { useStore } from "src/store";
 
 import VConsole from "vconsole";
@@ -27,7 +26,8 @@ export default defineComponent({
 
   setup() {
     const $t = useI18n();
-    const $q = useStore();
+    const $store = useStore();
+    const $q = useQuasar();
 
     document.title = $t.t("title");
 
@@ -70,6 +70,26 @@ export default defineComponent({
       window.location.reload();
     };
 
+    const landspace = () => {
+      let landspace = false;
+      if ($q.platform.is.desktop) {
+        landspace = window.innerWidth > innerHeight;
+      } else {
+        landspace = window.screen.width > window.screen.height;
+      }
+      if (Math.abs(window.orientation) == 90) {
+        landspace = !landspace;
+      }
+      return landspace;
+    };
+    (<any>window).landspace = landspace;
+
+    window.onorientationchange = () => {
+      $store.commit("updateLandspace", landspace());
+    };
+
+    $store.commit("updateLandspace", landspace());
+
     return {};
   },
 });
diff --git a/src/RedirectPage.vue b/src/RedirectPage.vue
index dc99dbb..1a76050 100644
--- a/src/RedirectPage.vue
+++ b/src/RedirectPage.vue
@@ -4,6 +4,7 @@
 import { defineComponent, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { useStore } from "src/store";
 
 export default defineComponent({
   name: "RedirectPage",
@@ -13,11 +14,19 @@ export default defineComponent({
   setup() {
     let $q = useQuasar();
     let $router = useRouter();
+    const $store = useStore();
+
+    let landspace = $store.state.landspace;
+
+    try {
+      landspace = (<any>window).landspace();
+    } catch {}
+
     if (
       ($q.platform.is.mobile && $q.platform.has.touch) ||
       $q.platform.is.ipad
     ) {
-      if (window.innerWidth > window.innerHeight) {
+      if (landspace) {
         $router.push("/pad");
       } else {
         // TODO route to mobile
diff --git a/src/pad/BottomBar.vue b/src/pad/BottomBar.vue
index 0e8b3a6..5a45f07 100644
--- a/src/pad/BottomBar.vue
+++ b/src/pad/BottomBar.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="row full-width" style="height: 35vh">
-    <div class="col-9">
+  <div
+    class="row full-width"
+    style="height: 35vh"
+    @touchstart="$event.stopPropagation()"
+  >
+    <div :class="'col-' + ($store.state.landspace ? '9' : '8')">
       <div class="q-ma-md bg-primary">
         <div class="row bg-primary">
           <q-tabs
             v-model="tab"
             dense
             inline-label
-            class="text-white bg-accent col-8"
+            class="text-white bg-accent"
+            :class="'col-' + ($store.state.landspace ? '8' : '12')"
             style="border: none"
             active-color="secondary"
             indicator-color="secondary"
@@ -87,59 +92,76 @@
       </div>
     </div>
 
-    <div class="full-height col-3">
+    <div
+      class="full-height"
+      :class="'col-' + ($store.state.landspace ? '3' : '4')"
+    >
       <div>
-        <div class="row q-my-lg"></div>
-        <div class="row q-my-md"></div>
-        <div class="row q-my-sm q-mt-lg">
+        <div class="row q-my-lg" style="width: 1px; height: 1px"></div>
+        <div class="row q-my-md" style="width: 1px; height: 1px"></div>
+        <div class="row">
           <q-space />
           <q-btn
+            :disable="!can_next_prev_window || plan_running"
             icon="img:pad/play_control/play_prev_icon.png"
             flat
             size="1.2rem"
             class="col-auto"
+            @click="playPrev($event)"
           />
           <q-btn
+            :disable="!can_pause_window || plan_running"
             :icon="
-              paused
-                ? 'img:pad/play_control/pause_icon.png'
-                : 'img:pad/play_control/play_icon.png'
+              selected_window?.paused
+                ? 'img:pad/play_control/play_icon.png'
+                : 'img:pad/play_control/pause_icon.png'
             "
             flat
             size="2.4rem"
-            class="col-auto q-mx-xs"
+            class="col-auto"
+            @click="selected_window?.paused ? play($event) : pause($event)"
           />
           <q-btn
+            :disable="!can_next_prev_window || plan_running"
             icon="img:pad/play_control/play_next_icon.png"
             flat
             size="1.2rem"
             class="col-auto"
+            @click="playNext($event)"
           />
           <q-space />
         </div>
         <div class="row q-my-sm">
           <q-space />
           <q-btn
+            :disable="plan_running"
             icon="img:pad/play_control/volume_down_icon.png"
             flat
             size="1.2rem"
             class="col-auto"
+            @click="volumeDown($event)"
           />
           <q-btn
+            :disable="plan_running"
             :icon="
-              muted
+              selected_window?.muted
                 ? 'img:pad/play_control/unmute_icon.png'
                 : 'img:pad/play_control/mute_icon.png'
             "
             flat
             size="1.2rem"
-            class="col-auto q-mx-xs"
+            class="col-auto"
+            @click="
+              selected_window?.muted ? unmuteWindow($event) : muteWindow($event)
+            "
           />
           <q-btn
+            :disable="plan_running"
             icon="img:pad/play_control/volume_up_icon.png"
             flat
             size="1.2rem"
             class="col-auto"
+            @click="volumeUp($event)"
           />
           <q-space />
         </div>
@@ -164,6 +186,8 @@ import draggable from "src/third_lib/vuedraggable/vuedraggable";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import { Common } from "src/common/Common";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import GlobalData from "src/common/GlobalData";
+import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
 
 export default defineComponent({
   name: "PadBottomBarPage",
@@ -173,9 +197,6 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
-    const paused = ref(false);
-    const muted = ref(false);
-
     const signal_sources = computed({
       get: () => $store.state.signal_sources,
       set: (val) => null,
@@ -197,14 +218,61 @@ export default defineComponent({
     });
 
     const tab = ref("signal_source");
+
+    let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
+    let is_multimedia_window = ref(false);
+
+    let can_pause_window = ref(false);
+    let can_next_prev_window = ref(false);
+
+    const plan_running = computed(
+      () => $store.state.current_running_plan.trim() != ""
+    );
+
+    watch(
+      () => $store.state.selected_window,
+      (newValue, oldValue) => {
+        const window = $store.state.windows.find(
+          (element) => element && element.uuid == newValue
+        );
+        if (window) {
+          selected_window.value = window;
+          const signal_source = GlobalData.getInstance().signal_source.find(
+            (element) =>
+              element && element.uuid == window.signal_source_table_uuid
+          );
+          if (signal_source) {
+            const type = window.polling
+              ? window.polling_window_type
+              : signal_source.window_type;
+            is_multimedia_window.value =
+              type == "EwindowType::Multimedia" ||
+              type == "EwindowType::Rtsp" ||
+              type == "EwindowType::HdmiIn";
+
+            can_pause_window.value =
+              type == "EwindowType::Multimedia" ||
+              type == "EwindowType::HdmiIn";
+            can_next_prev_window.value = type == "EwindowType::Multimedia";
+          }
+        } else {
+          selected_window.value = null;
+          is_multimedia_window.value = false;
+        }
+      }
+    );
+
     return {
       tab,
-      paused,
-      muted,
       signal_sources,
       modes,
       pollings,
       plans,
+      selected_window,
+      is_multimedia_window,
+      can_pause_window,
+      can_next_prev_window,
+      plan_running,
       loga(a: any) {
         console.log(a);
       },
@@ -212,7 +280,6 @@ export default defineComponent({
         return Common.getSignalSourceIcon(item_type);
       },
       onSignalSourceDrop(evt: any) {
-        console.log(evt);
         if (
           evt.data &&
           evt.event &&
@@ -231,6 +298,78 @@ export default defineComponent({
           });
         }
       },
+      volumeUp(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          let volume = selected_window.value.volume + 5;
+          if (volume > 100) {
+            volume = 100;
+          }
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setWindowVolume(selected_window.value.window_id, volume);
+        }
+      },
+      muteWindow(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.muteWindow(selected_window.value.window_id);
+        }
+      },
+      unmuteWindow(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.unmuteWindow(selected_window.value.window_id);
+        }
+      },
+      volumeDown(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          let volume = selected_window.value.volume - 5;
+          if (volume < 0) {
+            volume = 0;
+          }
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setWindowVolume(selected_window.value.window_id, volume);
+        }
+      },
+      playNext(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.windowPlayNext(selected_window.value.window_id);
+        }
+      },
+      play(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.playWindow(selected_window.value.window_id);
+        }
+      },
+      pause(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.pauseWindow(selected_window.value.window_id);
+        }
+      },
+      playPrev(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.windowPlayPrev(selected_window.value.window_id);
+        }
+      },
     };
   },
 });
diff --git a/src/pad/ContentWall.vue b/src/pad/ContentWall.vue
index 6034282..4fd7107 100644
--- a/src/pad/ContentWall.vue
+++ b/src/pad/ContentWall.vue
@@ -13,19 +13,20 @@
     >
       <div id="windows" ref="dom_windows" style="position: absolute">
         <vue3-resize-drag
-          :w="item.width * ($refs.wall_content?.clientWidth ?? 0)"
-          :h="item.height * ($refs.wall_content?.clientHeight ?? 0)"
+          :w="item.width * wall_content_client_width"
+          :h="item.height * wall_content_client_height"
           :x="
             $refs.wall?.parentElement?.offsetLeft +
             $refs.wall_content?.offsetLeft +
-            item.x * ($refs.wall_content?.clientWidth ?? 0)
+            item.x * wall_content_client_width
           "
           :y="
             $refs.wall?.parentElement?.offsetTop +
             $refs.wall_content?.offsetTop +
-            item.y * ($refs.wall_content?.clientHeight ?? 0)
+            item.y * wall_content_client_height
           "
           :zIndex="
+            1 +
             $store.state.windows_sort.findIndex(
               (element) => element == item.uuid
             )
@@ -191,6 +192,9 @@ export default defineComponent({
     const wall_content: Ref<any> = ref(null);
     const dom_windows: Ref<any> = ref(null);
 
+    const wall_content_client_width = ref(0);
+    const wall_content_client_height = ref(0);
+
     const file_manage_dialog: Ref<any> = ref(null);
 
     const wall_width = ref(0);
@@ -447,7 +451,6 @@ export default defineComponent({
           wall_parent,
           (element: HTMLElement) => {
             if (element) {
-              console.log();
               let height = wall_parent.offsetHeight * 0.9;
               let width = height / 0.56;
 
@@ -468,6 +471,21 @@ export default defineComponent({
         console.error("dom error");
         console.error((wall.value as HTMLElement).parentElement);
       }
+
+      if (wall.value && wall.value.parentElement) {
+        elementResizeDetectorMaker().listenTo(
+          wall_content.value,
+          (element: HTMLElement) => {
+            if (element) {
+              wall_content_client_height.value = element.clientHeight;
+              wall_content_client_width.value = element.clientWidth;
+            }
+          }
+        );
+      } else {
+        console.error("dom error");
+        console.error((wall.value as HTMLElement).parentElement);
+      }
     });
 
     interface __Rect {
@@ -535,6 +553,25 @@ export default defineComponent({
       }
     };
 
+    const find_parent_dom = (dom: HTMLElement, classess: string[]) => {
+      let parent: HTMLElement | null = dom;
+      while (parent) {
+        if (parent) {
+          for (const clazz of classess) {
+            if (clazz) {
+              if (parent.classList.contains(clazz)) {
+                return parent;
+              }
+            }
+          }
+          parent = parent.parentElement;
+        } else {
+          break;
+        }
+      }
+      return parent;
+    };
+
     interface _IDropToWall {
       data: any;
       type: string;
@@ -556,7 +593,7 @@ export default defineComponent({
           //   (wall.value.parentElement?.offsetTop ?? 0) -
           //   wall_content.value.offsetTop;
 
-          const dom = document.elementFromPoint(
+          let dom = document.elementFromPoint(
             evt.pos.x,
             evt.pos.y
           ) as HTMLElement;
@@ -565,16 +602,23 @@ export default defineComponent({
             (item) => (item as any)?.uuid == evt.data.uuid
           );
 
+          // 有可能是窗口的子节点收到了拖拽信息，需要找到真正的窗口节点来判断
+          if (dom) {
+            const temp = find_parent_dom(dom, [
+              "wall_item_flag",
+              "window_flag",
+            ]);
+            if (temp) {
+              dom = temp;
+            }
+          }
+
           if (dom) {
             if (dom.classList.contains("wall_item_flag")) {
               // 开窗
               // 不知道为什么有1像素的差别
-              const x =
-                (dom.offsetLeft - wall_content.value.offsetLeft - 1) /
-                wall_content.value.clientWidth;
-              const y =
-                (dom.offsetTop - wall_content.value.offsetTop - 1) /
-                wall_content.value.clientHeight;
+              const x = dom.offsetLeft / wall_content.value.clientWidth;
+              const y = dom.offsetTop / wall_content.value.clientHeight;
               const width = dom.offsetWidth / wall_content.value.clientWidth;
               const height = dom.offsetHeight / wall_content.value.clientHeight;
 
@@ -717,6 +761,8 @@ export default defineComponent({
       windows,
       wall_content,
       dom_windows,
+      wall_content_client_width,
+      wall_content_client_height,
 
       // functions
       moveWindow,
diff --git a/src/store/index.ts b/src/store/index.ts
index b9e2f6d..c37538a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -59,6 +59,7 @@ export interface StateInterface {
   plans: PlanEntity[];
   pollings: PollingEntity[];
   signal_sources: SignalSourceEntity[];
+  landspace: boolean;
 }
 
 // provide typings for `this.$store`
@@ -304,12 +305,18 @@ export default store(function (/* { ssrContext } */) {
       plans: [],
       pollings: [],
       signal_sources: [],
+      landspace: false,
     },
 
     mutations: {
-      setInitialized(state: StateInterface, playload?: any[]) {
+      setInitialized(state: StateInterface, playload?: any) {
         state.initialized = true;
       },
+      updateLandspace(state: StateInterface, playload?: any) {
+        if (typeof playload == "boolean") {
+          state.landspace = playload;
+        }
+      },
       setArrayValue(state: StateInterface, playload?: any) {
         if (Array.isArray(playload.value)) {
           const arr: Array<any> = (<any>state)[playload.name];
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
index d71a254..0510765 100644
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
+++ b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/renderData.ts
@@ -34,7 +34,7 @@ function render(props: any) {
   // pad 放大拖拽的点
   let targetResizeIconSize = props.resizeIconSize;
   if ((<any>window).isPad) {
-    targetResizeIconSize *= 1.5;
+    targetResizeIconSize *= 1.8;
   }
   const dragElResizeIcon = computed(() => {
     return [
diff --git a/src/third_lib/vuedraggable/vuedraggable.js b/src/third_lib/vuedraggable/vuedraggable.js
index 6014054..a8e1d20 100644
--- a/src/third_lib/vuedraggable/vuedraggable.js
+++ b/src/third_lib/vuedraggable/vuedraggable.js
@@ -144,8 +144,6 @@ const draggableComponent = defineComponent({
 
       AfxTest.prototype = {
         dropGlobal: function dropGlobal(evt) {
-          console.log("oooooooooooooooooooo");
-          console.log(evt);
           try {
             self.$emit("drop", {
               data: evt.dragEl.__draggable_context.element,