media_player_client/src/pages/WallPage.vue

<template>
  <div
    ref="wall"
    class="fit items-center justify-evenly wall"
    @dragenter="onDragEnter"
    @dragleave="onDragLeave"
    @dragover="onDragOver"
    @drop="onDrop"
  >
    <div id="windows" style="position: absolute">
      <window
        @reset_geometry_offset="resetGeometryOffset"
        @commit_geometry="commitGeometry"
        @close_this_window="closeWindow"
        @close_other_windows="closeOtherWindows"
        @close_all_windows="closeAllWindows"
        @window_fouse_in="windowFocusIn"
        :ref="'window_' + item.window_id"
        :id="'window_' + item.window_id"
        v-for="(item, index) in windows"
        :uuid="item.uuid"
        :key="index"
        class="window"
        :signal_source_table_uuid="item.signal_source_table_uuid"
        :window="item"
        :style="{
          top: item.y / wall_height_scaler + 'px',
          left: item.x / wall_width_scaler + 'px',
          width: item.width / wall_width_scaler + 'px',
          height: item.height / wall_height_scaler + 'px',
        }"
      >
        {{ wall_height_scaler }}
        {{ wall_width_scaler }}
      </window>
    </div>
    <div ref="wall_grids" @click="onWallGridsClick">
      <div
        v-for="row in wall_rows"
        :key="row"
        class="row"
        :style="{
          height: item_height + 'px',
        }"
      >
        <div
          :ref="'item' + (row - 1) * wall_cols * col"
          v-for="col in wall_cols"
          :key="col"
          class="col wall_item wall_item_flag"
          :style="{
            width: item_witdh + 'px',
            height: item_height + 'px',
          }"
        >
          <q-popup-proxy context-menu>
            <q-popup-proxy context-menu />
            <q-list>
              <q-item clickable v-close-popup @click="closeAllWindows">
                <q-item-section avatar>
                  <q-icon name="close" color="red" />
                </q-item-section>
                <q-item-section> {{ $t("close all windwos") }} </q-item-section>
              </q-item>
            </q-list>
          </q-popup-proxy>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wall {
  border: 1px solid black;
}

.wall_item {
  border: 1px solid gray;
}

.window {
  position: absolute;
}

.wall_item_flag {
}
</style>

<script lang="ts">
import GlobalData from "src/common/GlobalData";
import {
  defineComponent,
  ref,
  Ref,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
} from "vue";
const elementResizeDetectorMaker = require("element-resize-detector");
import { Common } from "src/common/Common";
import { Protocol } from "src/entities/WSProtocol";
import Window from "src/components/Window.vue";

import { useI18n } from "vue-i18n";
import { useStore } from "src/store";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import {
  WindowOpenNotifyEntity,
  WindowStates,
} from "src/entities/MultimediaWindowEntity";
import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";

interface _OptionsType {
  $t: any;
  $store: ReturnType<typeof useStore> | undefined | null;
}

const _getSignalSources = async () => {
  const global_data = GlobalData.getInstance();
  return (await global_data
    .getCurrentClient()
    ?.getSignalSources()) as Protocol.GetSignalSourcesResponse;
};

const _initSignalSourceTree = async (options: _OptionsType) => {
  const $store = options?.$store;
  if ($store) {
    try {
      let response = await _getSignalSources();
      if (response) {
        $store.commit("buildSignalSourceTree", { options, response });
        GlobalData.getInstance().signal_source = response.signal_sources;
      }
    } catch (e) {
      console.error(e);
    }
  }
};

const _getApplicationConfig = async (options: _OptionsType) => {
  const global_data = GlobalData.getInstance();
  global_data.applicationConfig = (
    await global_data.getCurrentClient()?.getApplicationSettins()
  )?.config;

  let $store = options.$store;
  if (global_data.applicationConfig && $store) {
    $store.commit("setWallCol", global_data.applicationConfig.wall_col);
    $store.commit("setWallRow", global_data.applicationConfig.wall_row);
    $store.commit(
      "setDeviceScreenWidth",
      global_data.applicationConfig.screen_width
    );
    $store.commit(
      "setDeviceScreenHeight",
      global_data.applicationConfig.screen_height
    );
  }
};

const _getWindows = async (options: _OptionsType) => {
  const global_data = GlobalData.getInstance();
  let windows = (await global_data.getCurrentClient()?.getWindows())?.windows;
  let $store = options.$store;
  if (windows && $store) {
    $store.commit("setWindows", windows);
  }
};

const _initialize = async (options: _OptionsType) => {
  const global_data = GlobalData.getInstance();
  let client = global_data.getCurrentClient();
  if (client) {
    while (!client.is_login) {
      await Common.waitFor(100);
    }

    await _getApplicationConfig(options);

    await _initSignalSourceTree(options).then(() => {
      _getWindows(options);
    });
  }
};

export default defineComponent({
  name: "PageWall",

  components: { Window },
  setup() {
    const $store = useStore();
    const $t = useI18n();

    const windows = computed({
      get: () => $store.state.windows,
      set: (val) => $store.commit("setWindows", val),
    });

    const wall_rows = computed({
      get: () => $store.state.wall_row,
      set: (val) => $store.commit("setWallRow", val),
    });

    const wall_cols = computed({
      get: () => $store.state.wall_col,
      set: (val) => $store.commit("setWallCol", val),
    });

    const wall: Ref<HTMLElement | null> = ref(null);

    let item_witdh = ref(0);
    const item_height = ref(0);

    const wall_width_scaler = ref(0);
    const wall_height_scaler = ref(0);

    const calcWallVWScaler = () => {
      if (wall.value && wall.value.parentElement) {
        wall_height_scaler.value =
          $store.state.device_screen_height /
          (item_height.value * wall_rows.value);
        wall_width_scaler.value =
          $store.state.device_screen_width /
          wall.value.parentElement.offsetWidth;

        wall_height_scaler.value += 0.1;
        wall_width_scaler.value += 0.05;
      }
    };

    const calcWallItemWH = () => {
      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;
        item_height.value =
          wall.value.parentElement.offsetWidth / wv_scaler / wall_rows.value;
      } else {
        item_height.value = 0;
      }
    };

    interface _ResponseMessage {
      packet: Protocol.PacketEntity;
      data: string;
    }
    EventBus.getInstance().on(
      EventNamesDefine.ResponseMessage,
      (response: _ResponseMessage) => {
        try {
          if ((response.packet.flag = Protocol.PacketEntity.FLAG_NOTIFY)) {
            switch (response.packet.command) {
              case Protocol.Commands.kCloseWindow:
                {
                  const temp = JSON.parse(response.data);
                  if (temp && temp.window_id) {
                    $store.commit("removeWindow", {
                      window_id: temp.window_id,
                    });
                  }
                }
                break;
              case Protocol.Commands.kMoveWindow:
                {
                  const temp = JSON.parse(response.data);
                  if (temp && temp.window_id) {
                    const window = $store.state.windows.find(
                      (item) => item.window_id == temp.window_id
                    );
                    if (window) {
                      $store.commit("setWindowPropertys", [
                        {
                          window,
                          property_name: "x",
                          value: temp.x ?? 0,
                        },
                        {
                          window,
                          property_name: "y",
                          value: temp.y ?? 0,
                        },
                      ]);
                    }
                  }
                }
                break;
              case Protocol.Commands.kResizeWindow:
                {
                  const temp = JSON.parse(response.data);
                  if (temp && temp.window_id) {
                    const window = $store.state.windows.find(
                      (item) => item.window_id == temp.window_id
                    );
                    if (window) {
                      $store.commit("setWindowPropertys", [
                        {
                          window,
                          property_name: "width",
                          value: temp.width ?? 0,
                        },
                        {
                          window,
                          property_name: "height",
                          value: temp.height ?? 0,
                        },
                      ]);
                    }
                  }
                }
                break;
              case Protocol.Commands.kOpenWindow:
                {
                  const temp = JSON.parse(
                    response.data
                  ) as WindowOpenNotifyEntity;
                  if (temp) {
                    $store.commit("pushWindow", temp);
                  }
                }
                break;
              case Protocol.Commands.kWindowOtherStateChanged:
                {
                  const temp = JSON.parse(
                    response.data
                  ) as WindowOtherStateChangeNotifyEntity;
                  if (temp && temp.window_id) {
                    const window = $store.state.windows.find(
                      (item) => item.window_id == temp.window_id
                    );
                    if (window) {
                      window.window_state; //
                      $store.commit("setWindowProperty", {
                        window,
                        property_name: "window_state",
                        value: new WindowStates(
                          temp.playing,
                          temp.focus,
                          temp.muted
                        ),
                      });
                    }
                  }
                }
                break;
              default:
                console.log(response.packet);
                break;
            }
          }
        } catch {}
      }
    );

    _initialize({
      $t,
      $store,
    });

    onMounted(() => {
      if (wall.value) {
        elementResizeDetectorMaker().listenTo(
          wall.value,
          (element: HTMLElement) => {
            if (element) {
              calcWallItemWH();
              calcWallVWScaler();
            }
          }
        );
      }
    });

    return {
      windows,
      wall,
      wall_rows,
      wall_cols,
      item_witdh,
      item_height,
      wall_width_scaler,
      wall_height_scaler,
      loga(a: any) {
        console.log(a);
      },
      onDrop(e: DragEvent) {
        e.preventDefault();
        let target = e.target as any;
        if (target) {
          target.classList.remove("drag-enter");
        }

        let uuid = e.dataTransfer?.getData("uuid");
        console.log(uuid);
        if (uuid) {
          let signal_sources = GlobalData.getInstance().signal_source.filter(
            (item) => (item as any)?.uuid == uuid
          );

          if (signal_sources.length) {
            let signal_source = signal_sources[0];
            if (signal_source) {
              let dom: HTMLElement | null = e.target as HTMLElement;
              if (wall.value && dom) {
                if (dom.classList.contains("wall_item_flag")) {
                  console.log(wall.value.offsetTop);
                  console.log(wall.value.offsetLeft);
                  GlobalData.getInstance()
                    .getCurrentClient()
                    ?.openWindow(
                      new Protocol.OpenWindowRequestEntity(
                        signal_source.uuid,
                        dom.offsetLeft * wall_width_scaler.value,
                        dom.offsetTop * wall_height_scaler.value,
                        dom.offsetWidth * wall_width_scaler.value,
                        dom.offsetHeight * wall_height_scaler.value
                      )
                    );
                } else if (dom.classList.contains("window_flag")) {
                  let uuid = dom.getAttribute("uuid");
                  if (uuid) {
                    let window = $store.state.windows.find(
                      (item) => item.uuid == uuid
                    );
                    if (window) {
                      let client = GlobalData.getInstance().getCurrentClient();
                      if (client) {
                        let x = window.x;
                        let y = window.y;
                        let width = window.width;
                        let height = window.height;

                        client.closeWindow(window.window_id);
                        setTimeout(() => {
                          client?.openWindow(
                            new Protocol.OpenWindowRequestEntity(
                              signal_source.uuid,
                              x,
                              y,
                              width,
                              height
                            )
                          );
                        }, 100);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },

      onDragEnter(e: DragEvent) {
        let target: HTMLElement | null = e.target as HTMLElement;
        if (target && target.draggable !== true) {
          while (
            target &&
            !target.classList.contains("window_flag") &&
            !target.classList.contains("wall_item_flag")
          ) {
            target = target.parentElement;
          }

          target?.classList.add("drag-enter");
        }
      },

      onDragLeave(e: DragEvent) {
        let target: HTMLElement = e.target as HTMLElement;
        target?.classList.remove("drag-enter");
      },

      onDragOver(e: DragEvent) {
        e.preventDefault();
      },

      onWallGridsClick(e: MouseEvent) {
        EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
      },
      resetGeometryOffset(
        window: any,
        offset_x: number,
        offset_y: number,
        offset_width: number,
        offset_height: number
      ) {
        $store.commit("setWindowPropertys", [
          {
            window,
            property_name: "x",
            value: window.x + offset_x * wall_width_scaler.value,
          },
          {
            window,
            property_name: "y",
            value: window.y + offset_y * wall_height_scaler.value,
          },
          {
            window,
            property_name: "width",
            value: Math.max(
              window.width + offset_width * wall_height_scaler.value,
              32
            ),
          },
          {
            window,
            property_name: "height",
            value: Math.max(
              window.height + offset_height * wall_height_scaler.value,
              32
            ),
          },
        ]);
      },
      commitGeometry(window: any) {
        const win = window as WindowOpenNotifyEntity;
        if (win) {
          GlobalData.getInstance()
            .getCurrentClient()
            ?.moveWindow(win.window_id, win.x, win.y);
          GlobalData.getInstance()
            .getCurrentClient()
            ?.resizeWindow(win.window_id, win.width, win.height);
        }
      },
      closeAllWindows() {
        for (const window of $store.state.windows) {
          if (window) {
            GlobalData.getInstance()
              .getCurrentClient()
              ?.closeWindow(window.window_id);
          }
        }
      },
      windowFocusIn(window_id: number) {
        GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
      },
      closeOtherWindows(window_id: number) {
        for (const window of $store.state.windows) {
          if (window && window.window_id != window_id) {
            GlobalData.getInstance()
              .getCurrentClient()
              ?.closeWindow(window.window_id);
          }
        }
      },
      closeWindow(window_id: number) {
        GlobalData.getInstance().getCurrentClient()?.closeWindow(window_id);
      },
    };
  },
});
</script>