<template>
   <!-- <div class="currentlyPlayingDiv">
      <div class="textWrapper">
         <transition-group name="displayingInfo" appear>
            <p v-if="currentTrackHidden" :key="1">????????</p>
            <p v-else :key="2">{{ currentGame }}</p>
            <p v-if="currentTrackHidden" :key="3">??????</p>
            <p v-else :key="4">{{ currentTrack }}</p>
         </transition-group>
      </div>
   </div> -->
   <div class="currentlyPlayingDiv">
      <transition name="displayingInfo">
         <div v-if="currentTrackHidden" class="textWrapper">
            <p>????????</p>
            <p>??????</p>
         </div>
         <div v-else class="textWrapper">
            <p>{{ currentGame }}</p>
            <p>{{ currentTrack }}</p>
         </div>
      </transition>
   </div>
</template>

<script>
import { mapState } from "vuex";
export default {
   computed: {
      ...mapState(["currentGame", "currentTrack", "currentTrackHidden"]),
   },
};
</script>

<style scoped>
.displayingInfo-enter-from,
.displayingInfo-leave-to {
   opacity: 0;
}
.displayingInfo-enter-to,
.displayingInfo-leave-from {
   opacity: 1;
}
.displayingInfo-enter-active {
   transition: opacity 0.7s ease-out;
}

.displayingInfo-leave-active {
   display: none;
}

.currentlyPlayingDiv {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 60vw;
   height: 27vh;
   margin-right: 0.5vw;
   color: #ff8800;
   background-color: #333;
   border-radius: 10px;
   text-align: center;
   overflow: hidden;
}
.currentlyPlayingDiv .textWrapper {
   padding: 0.75vw;
}
.currentlyPlayingDiv .textWrapper p {
   width: 100%;
   font-size: 2.3em;
}

.currentlyPlayingDiv p:first-child {
   margin-top: 1.5vw;
   margin-bottom: 1.5vw;
   font-size: 2.8em;
}

@media only screen and (max-width: 1000px) {
   .currentlyPlayingDiv {
      width: 100vw;
      height: 35vw;
      margin-right: 0;
      border-radius: 0px;
      align-content: center;
   }
   .currentlyPlayingDiv .textWrapper p {
      font-size: 1.1em;
   }
   .currentlyPlayingDiv p:first-child {
      margin-bottom: 2vw;
      font-size: 1.4em;
   }
}
</style>
