csgowtf/src/components/TranslateChatButton.vue

<template>
  <div class="toggle-btn text-muted">
    <div class="d-flex" @click.prevent="$emit('translated', handleBtnClick())">
      <span class="text-center mx-2">
        <i id="toggle-off" class="fa fa-toggle-off show" />
        <i id="toggle-on" class="fa fa-toggle-on" />
      </span>
      <div>
        <span
          :class="toggle === 'translated' ? 'text-warning' : ''"
          class="float-start"
        >
          <span class="text-uppercase"
            >Translate to {{ data.browserLang }}</span
          >
          <span class="loading-icon ms-2" title="Translating..">
            <i class="fa fa-spinner fa-pulse fa-fw" />
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import ISO6391 from "iso-639-1";
import { GetChatHistoryTranslated } from "/src/utils";
import { useStore } from "vuex";

export default {
  name: "TranslateChatButton",
  props: {
    translated: {
      type: Boolean,
      required: true,
    },
  },
  setup() {
    const store = useStore();

    const data = reactive({
      browserIsoCode: "",
      browserLangCode: "",
      browserLang: "",
    });

    const toggle = ref("original");

    const setLanguageVariables = () => {
      const navLangs = navigator.languages;

      data.browserIsoCode = navLangs.find((l) => l.length === 5);
      data.browserLangCode = navLangs[0];

      if (ISO6391.validate(data.browserLangCode)) {
        data.browserLang = ISO6391.getNativeName(data.browserLangCode);
      } else {
        data.browserIsoCode = "en-US";
        data.browserLangCode = "en";
        data.browserLang = "English";
      }
    };

    const handleBtnClick = async () => {
      let response;

      const refreshButton = document.querySelector(".loading-icon .fa-spinner");
      refreshButton.classList.add("show");

      toggleShow();

      response = await GetChatHistoryTranslated(
        store,
        store.state.matchDetails.match_id
      );

      if (refreshButton.classList.contains("show"))
        refreshButton.classList.remove("show");

      return [response, toggle.value];
    };

    const toggleShow = () => {
      const offBtn = document.getElementById("toggle-off");
      const onBtn = document.getElementById("toggle-on");

      if (offBtn.classList.contains("show")) {
        offBtn.classList.remove("show");
        onBtn.classList.add("show");
        toggle.value = "translated";
      } else if (onBtn.classList.contains("show")) {
        onBtn.classList.remove("show");
        offBtn.classList.add("show");
        toggle.value = "original";
      }
    };

    onMounted(() => {
      setLanguageVariables();
    });
    return { data, toggle, handleBtnClick };
  },
};
</script>

<style lang="scss" scoped>
.toggle-btn {
  margin: 0 auto;
  cursor: pointer;
  width: 100%;

  .fa {
    display: none;
    font-size: 1.2rem;
    vertical-align: middle;

    &.show {
      display: inline-block;
    }
  }
}
</style>