VueTube/NUXT/pages/mods/about.vue

<template>
  <div style="padding: 1rem">
    <center>
      <div class="d-flex justify-center pa-4">
        <div>
          <v-img
            width="27px"
            src="/icon.svg"
            style="transform: rotate(90deg); filter: drop-shadow(0.1px 0.1px 0px #fff) drop-shadow(0.1px -0.1px 0px #fff);"
            :class="$vuetify.theme.dark ? '' : 'invert'"
          />
        </div>
        <h1 style="font-size: 2rem; margin-left: -1px; margin-top: -9px">
          ueTube
        </h1>
      </div>
    </center>

    <!--   App Information   -->
    <v-card
      flat
      class="obj"
      :class="
        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
      "
      :style="{ borderRadius: `${roundTweak / 2}rem` }"
    >
      <v-card-title>App Information</v-card-title>
      <v-card-text>
        <h3>App Version</h3>
        {{ version.substring(0, 7) || "Unknown" }}
      </v-card-text>
    </v-card>
    <!--   End App Information   -->

    <!--   Device Information   -->
    <v-card
      flat
      class="obj"
      :class="
        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
      "
      :style="{ borderRadius: `${roundTweak / 2}rem` }"
    >
      <v-card-title>Device Information</v-card-title>
      <v-card-text>
        <h3>Platform</h3>
        {{ deviceInfo.platform || "Unknown" }}<br />
        <h3>Operating System</h3>
        {{ deviceInfo.operatingSystem || "Unknown" }} ({{
          deviceInfo.osVersion || "Unknown"
        }})<br />
        <h3>Model</h3>
        {{ deviceInfo.model || "Unknown" }}<br />
        <h3>Manufacturer</h3>
        {{ deviceInfo.manufacturer || "Unknown" }}<br />
        <h3>Emulator</h3>
        {{ deviceInfo.isVirtual ? "yes" : "no" }}
      </v-card-text>
    </v-card>
    <!--   End Device Information   -->

    <!--   App Links   --->
    <div class="obj d-flex flex-row gap-1">
      <v-btn
        depressed
        class="action col"
        :class="
          $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
        "
        :style="{ borderRadius: `${roundTweak / 2}rem` }"
        @click="openExternal('https://github.com/Frontesque/VueTube')"
      >
        <v-icon x-large class="actionIcon">mdi-github</v-icon>
        Github
      </v-btn>
      <v-btn
        depressed
        class="action col ml-4"
        :class="
          $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
        "
        :style="{ borderRadius: `${roundTweak / 2}rem` }"
        @click="openExternal('https://discord.gg/7P8KJrdd5W')"
      >
        <v-icon x-large class="actionIcon">mdi-discord</v-icon>
        Discord
      </v-btn>
    </div>
  </div>
</template>

<script>
import { Browser } from "@capacitor/browser";
import { Device } from "@capacitor/device";

export default {
  data() {
    return {
      version: process.env.appVersion,
      deviceInfo: "",
    };
  },
  computed: {
    roundTweak() {
      return this.$store.state.tweaks.roundTweak;
    },
  },

  async mounted() {
    const info = await Device.getInfo();
    this.deviceInfo = info;
  },
  methods: {
    async openExternal(url) {
      await Browser.open({ url: url });
    },
  },
};
</script>

<style scoped>
.obj {
  margin-top: 1em;
}
.action {
  min-height: 5em;
  padding: 1rem;
}
.actionIcon {
  margin-right: 0.5em;
}
</style>