media_player_client/src/pages/Index.vue

<template>
  <q-page class="row items-center justify-evenly">
    <wall-page />
    <media-control-page />
  </q-page>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from "vue";
import WallPage from "src/pages/WallPage.vue";
import MediaControlPage from "src/pages/MediaControlPage.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { useStore } from "src/store";
import Initializer from "src/common/Initializer";
import GlobalData from "src/common/GlobalData";
import RemoteDataExangeProcesser from "src/common/RemoteDataExangeProcesser";

export default defineComponent({
  name: "PageIndex",
  components: { WallPage, MediaControlPage },
  setup() {
    const $store = useStore();
    const $q = useQuasar();
    const $t = useI18n();

    const options = {
      $t,
      $store,
      $q,
    };

    new Initializer(options).initialize().then(() => {
      $store.commit("setInitialized");
    });

    const remote_data_exange_processer = new RemoteDataExangeProcesser(options);
    remote_data_exange_processer.enable();

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectDisconnect, () => {
      $q.loading.show({
        html: true,
        message:
          $t.t("network disconnect!") +
          $t.t("wait reconnection") +
          "..." +
          "<br />" +
          "<a href='javascript:void(0);' OnClick='window.controlLogout()'>" +
          $t.t("back to login page") +
          "</a>",
      });
    });

    EventBus.getInstance().on(EventNamesDefine.CurrentConnectConnected, () => {
      $q.loading.hide();
      setTimeout(() => {
        new Initializer(options).initialize().then(() => {
          $store.commit("setInitialized");
        });
      }, 500);
    });

    $store.commit(
      "setDeviceIpAddress",
      GlobalData.getInstance().getCurrentClientName()
    );

    EventBus.getInstance().on(EventNamesDefine.CurrentClientChanged, () => {
      new Initializer(options).initialize();
    });

    return {};
  },
});
</script>