media_player_client/src/components/AboutDialog.vue

<template>
  <q-dialog
    v-model="show_dialog"
    @keydown="
      (evt) => {
        if (evt.keyCode == 27) {
          show_dialog = false;
        }
      }
    "
  >
    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 35vw">
      <q-card-section class="q-ma-none q-pa-sm">
        <div class="row">
          <div class="col-auto text-h6" @click="click_count++">
            {{ $t("about") }}
          </div>
          <q-space />
          <div>
            <q-btn 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 v-if="false">
            <q-item-section>
              {{ $t("product name") }}: {{ $t("TV splicing box") }}
            </q-item-section>
          </q-item>
          <q-item v-if="false">
            <q-item-section>
              {{ $t("copyright") }}: {{ $t("guangdong chuangxian jishu") }} LTD.
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section
              >{{ $t("client version") }}:
              {{ client_version.version }}</q-item-section
            >
          </q-item>
          <q-item>
            <q-item-section
              >{{ $t("server version") }}: {{ server_version }}</q-item-section
            >
          </q-item>
          <q-item
            v-if="
              click_count > target_click_count || $store.state.advanced_debug
            "
          >
            <q-item-section
              >{{ $t("server commit hash") }}:
              {{ server_commit_hash }}</q-item-section
            >
          </q-item>
          <div
            v-if="
              click_count > target_click_count || $store.state.advanced_debug
            "
          >
            <q-item>
              <q-item-section
                >{{ $t("server branch name") }}:
                {{ server_branch_name }}</q-item-section
              >
            </q-item>
            <q-item>
              <q-item-section
                >{{ $t("server build date") }}:
                {{ server_build_date }}</q-item-section
              >
            </q-item>
            <q-item>
              <q-item-section
                >{{ $t("kernel version") }}:
                {{ kernel_version }}</q-item-section
              >
            </q-item>
            <q-item>
              <q-item-section
                >{{ $t("rootfs version") }}:
                {{ rootfs_version }}</q-item-section
              >
            </q-item>
          </div>
          <q-item>
            <q-item-section></q-item-section>
            <q-item-section>
              <div class="fit text-right">
                {{ product_name }}
              </div>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
    </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 version from "../../package.json";
import GlobalData from "src/common/GlobalData";
import { EProductNames } from "src/entities/ProductNames";

export default defineComponent({
  name: "ComponentAboutDialog",

  setup() {
    let $store = useStore();
    let $q = useQuasar();
    let $t = useI18n();

    let show_dialog = ref(false);
    let click_count = ref(0);
    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);
    let server_version = ref("unknow");
    let server_commit_hash = ref("unknow");
    let server_build_date = ref("unknow");
    let server_branch_name = ref("unknow");
    let kernel_version = ref("unknow");
    let rootfs_version = ref("unknow");

    return {
      show_dialog,
      click_count,
      target_click_count,
      client_version,
      server_version,
      server_commit_hash,
      server_build_date,
      server_branch_name,
      kernel_version,
      rootfs_version,
      product,
      product_name,

      async showDialog() {
        click_count.value = 0;
        show_dialog.value = true;

        try {
          const build_info = await GlobalData.getInstance()
            .getCurrentClient()
            ?.getBuildInfo();
          // console.log(build_info);
          if (build_info) {
            server_version.value = build_info.version;
            server_commit_hash.value = build_info.commit_hash;
            server_build_date.value = build_info.build_date;
            server_branch_name.value = build_info.branch_name;
            kernel_version.value = build_info.kernel_version;
            rootfs_version.value = build_info.rootfs_version;
          }
        } catch {}
      },
    };
  },
});
</script>