keanu-weblite/src/components/QuoteView.vue

<template>
  <div>
    <transition name="slow-fade">
      <div
        v-if="mounted"
        class="text-center d-flex flex-column goodbye-wrapper"
      >
        <div v-if="roomWasPurged">
          <v-icon>$vuetify.icons.trash</v-icon>
        </div>
        <h2 v-if="roomWasPurged" class="text-white mt-2 mb-8">
          {{ $t("goodbye.room_deleted") }}
        </h2>
        <div class="quote text-white">{{ quote }}</div>
        <div class="author text-white mt-4">- {{ author }}</div>

        <v-btn
          v-if="joinedToAnyRoom"
          id="btn-goodbye-view-other"
          color="white"
          variant="text"
          class="close"
          @click.stop="viewOtherRooms"
          >{{ $t("goodbye.view_other_rooms") }}</v-btn
        >
        <v-btn
          v-else
          id="btn-goodbye-close"
          color="white"
          variant="text"
          class="close"
          @click.stop="closeBrowserTab"
          >{{ $t("goodbye.close_tab") }}</v-btn
        >
      </div>
    </transition>

    <!-- PROFILE INFO IN TOP RIGHT -->
    <transition name="slow-fade">
      <div
        v-if="mounted"
        class="goodbye-profile clickable"
        @click.stop="viewOtherRooms"
      >
        <div class="d-inline-block me-2 text-white">
          {{ $t("profile_info_popup.you_are") }}
        </div>

        <div
          v-if="$matrix.currentUser.is_guest"
          class="d-inline-block me-2 text-white"
        >
          <i18n-t keypath="profile_info_popup.identity_temporary" tag="span">
            <template v-slot:displayName>
              <b>{{ displayName }}</b>
            </template>
          </i18n-t>
        </div>
        <div v-else class="d-inline-block me-2 text-white">
          <i18n-t keypath="profile_info_popup.identity" tag="span">
            <template v-slot:displayName>
              <b>{{ displayName }}</b>
            </template>
          </i18n-t>
        </div>
        <v-avatar
          class="avatar-32 d-inline-block"
          size="32"
          color="#e0e0e0"
        >
          <AuthedImage v-if="userAvatar" :src="userAvatar" />
          <span v-else class="text-white">{{ userAvatarLetter }}</span>
        </v-avatar>
      </div>
    </transition>
  </div>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import AuthedImage from "./AuthedImage.vue";

export default {
  name: "QuoteView",
  mixins: [profileInfoMixin],
  components: { AuthedImage },
  props: {
    roomWasPurged: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      mounted: false,
      quote: "",
      author: "",
    };
  },
  mounted() {
    try {
      const quotes = import.meta.glob('@/assets/quotes/*/*.json', {eager: false});
      let quoteImport = undefined;
      Object.keys(quotes).forEach(path => {
        // Remove"./"
        const parts = path.split("/");
        const locale = parts[parts.length - 2];
        if (locale == this.$i18n.locale) {
          quoteImport = quotes[path];
        }
      });
      if (quoteImport) {
        quoteImport().then((quotes) => this.selectQuote(quotes));
        return;
      }
    } catch (error) {
      console.error("No quotes for language");
    }
    import("@/assets/quotes/en/quotes") // Default fallback
      .then((quotes) => this.selectQuote(quotes));
  },

  computed: {
    /**
     * Return true if we are still joined to any rooms
     */
    joinedToAnyRoom() {
      const joinedRooms = this.$matrix.joinedRooms;
      return joinedRooms.length > 0;
    },
  },

  methods: {
    selectQuote(quotes) {
      const n = quotes.quotes.length;
      if (n > 0) {
        const quote = quotes.quotes[Math.floor(Math.random() * n)];
        this.quote = quote.quote;
        this.author = quote.author;
        this.mounted = true;
      } else {
        this.mounted = true;
      }
    },
    closeBrowserTab() {
      window.location.href = "about:blank";
    },
    viewOtherRooms() {
      this.$navigation.push({ name: "Home" }, -1);
    },
  },
};
</script>

<style lang="scss">
  @use "@/assets/css/chat.scss" as *;

  .author {
    font-size: 80%;
  }

  .close {
    position: absolute;
    bottom: 40px;
  }

  .slow-fade-enter-active,
  .slow-fade-leave-active {
    transition: opacity 2.5s;
  }
  .slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .goodbye-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: black;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .goodbye-profile {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 101;
    padding: 10px 20px;
    height: 50px;
    border-radius: 25px;
    background-color: #242424;
  }
</style>