From 60989a25729e7df14f9777772915d039856a57ce Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Wed, 9 Dec 2020 16:00:38 +0800
Subject: [PATCH] feat: add toast component

---
 src/App.vue                  |  3 +++
 src/components/Toast.vue     | 51 ++++++++++++++++++++++++++++++++++++
 src/components/TrackList.vue | 12 +++++----
 src/store/actions.js         | 17 ++++++++++++
 src/store/mutations.js       |  3 +++
 src/store/state.js           |  5 ++++
 6 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Toast.vue

diff --git a/src/App.vue b/src/App.vue
index b1e0142..76e2897 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,7 @@
           ) === false
         "
     /></transition>
+    <Toast />
     <GlobalEvents :filter="globalEventFilter" @keydown.space="play" />
   </div>
 </template>
@@ -24,6 +25,7 @@
 <script>
 import Navbar from "./components/Navbar.vue";
 import Player from "./components/Player.vue";
+import Toast from "./components/Toast.vue";
 import GlobalEvents from "vue-global-events";
 import { ipcRenderer } from "./electron/ipcRenderer";
 
@@ -33,6 +35,7 @@ export default {
     Navbar,
     Player,
     GlobalEvents,
+    Toast,
   },
   data() {
     return {
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
new file mode 100644
index 0000000..d67da0a
--- /dev/null
+++ b/src/components/Toast.vue
@@ -0,0 +1,51 @@
+<template>
+  <transition name="fade">
+    <div class="toast" v-show="toast.show">{{ toast.text }}</div>
+  </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "Toast",
+  computed: {
+    ...mapState(["toast"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.toast {
+  position: fixed;
+  bottom: 64px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14px;
+  color: var(--color-text);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+  box-sizing: border-box;
+  padding: 6px 12px;
+  z-index: 100;
+}
+
+[data-theme="dark"] {
+  .toast {
+    background: rgba(46, 46, 46, 0.68);
+    backdrop-filter: blur(16px) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
index 1da3a8d..33394e8 100644
--- a/src/components/TrackList.vue
+++ b/src/components/TrackList.vue
@@ -9,21 +9,21 @@
         </div>
       </div>
       <hr />
-      <div class="item" @click="play">Play</div>
-      <div class="item" @click="playNext">Play Next</div>
+      <div class="item" @click="play">{{ $t("contextMenu.play") }}</div>
+      <div class="item" @click="playNext">{{ $t("contextMenu.playNext") }}</div>
       <div
         class="item"
         @click="like"
         v-show="!isRightClickedTrackLiked && accountLogin"
       >
-        Save to my Liked Songs
+        {{ $t("contextMenu.saveToMyLikedSongs") }}
       </div>
       <div
         class="item"
         @click="like"
         v-show="isRightClickedTrackLiked && accountLogin"
       >
-        Remove from my Liked Songs
+        {{ $t("contextMenu.removeFromMyLikedSongs") }}
       </div>
     </ContextMenu>
     <TrackListItem
@@ -105,7 +105,7 @@ export default {
   },
   methods: {
     ...mapMutations(["updateLikedSongs"]),
-    ...mapActions(["nextTrack", "playTrackOnListByID"]),
+    ...mapActions(["nextTrack", "playTrackOnListByID", "showToast"]),
     openMenu(e, track) {
       if (!track.playable) {
         return;
@@ -158,8 +158,10 @@ export default {
       likeATrack({ id, like }).then((data) => {
         if (data.code !== 200) return;
         if (like === false) {
+          this.showToast(this.$t("toast.removedFromMyLikedSongs"));
           this.updateLikedSongs(likedSongs.filter((d) => d !== id));
         } else {
+          this.showToast(this.$t("toast.savedToMyLikedSongs"));
           likedSongs.push(id);
           this.updateLikedSongs(likedSongs);
         }
diff --git a/src/store/actions.js b/src/store/actions.js
index de32368..76305b7 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -143,4 +143,21 @@ export default {
       dispatch("nextTrack");
     });
   },
+  showToast({ state, commit }, text) {
+    if (state.toast.timer !== null) {
+      clearTimeout(state.toast.timer);
+      commit("updateToast", { show: false, text: "", timer: null });
+    }
+    commit("updateToast", {
+      show: true,
+      text,
+      timer: setTimeout(() => {
+        commit("updateToast", {
+          show: false,
+          text: state.toast.text,
+          timer: null,
+        });
+      }, 3200),
+    });
+  },
 };
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 1dcd342..0c56d6a 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -120,4 +120,7 @@ export default {
       }
     );
   },
+  updateToast(state, toast) {
+    state.toast = toast;
+  },
 };
diff --git a/src/store/state.js b/src/store/state.js
index 469f361..00d1202 100644
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -7,6 +7,11 @@ export default {
     clickObjectID: 0,
     showMenu: false,
   },
+  toast: {
+    show: false,
+    text: "",
+    timer: null,
+  },
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
   data: JSON.parse(localStorage.getItem("data")),