feat: add 'Show unavailable song in grey style' to settings #74

src/components/TrackListItem.vue

@@ -84,6 +84,7 @@ import { isAccountLoggedIn } from "@/utils/auth";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "TrackListItem",
@@ -95,6 +96,7 @@ export default {
     return { hover: false, trackStyle: {} };
   },
   computed: {
+    ...mapState(["settings"]),
     imgUrl() {
       if (this.track.al !== undefined) return this.track.al.picUrl;
       if (this.track.album !== undefined) return this.track.album.picUrl;
@@ -125,7 +127,8 @@ export default {
     },
     trackClass() {
       let trackClass = [this.type];
-      if (!this.track.playable) trackClass.push("disable");
+      if (!this.track.playable && this.settings.showUnavailableSongGrey)
+        trackClass.push("disable");
       if (this.isPlaying) trackClass.push("playing");
       if (this.focus) trackClass.push("focus");
       return trackClass;

src/store/initLocalStorage.js

@@ -23,6 +23,7 @@ export default {
     musicQuality: 320000,
     showGithubIcon: true,
     showPlaylistsByAppleMusic: true,
+    showUnavailableSongInGreyStyle: true,
   },
   data: {
     user: {},

src/utils/updateApp.js

@@ -5,6 +5,8 @@ const updateSetting = () => {
   const parsedSettings = JSON.parse(localStorage.getItem("settings"));
   const setting = {
     playlistCategories: initLocalStorage?.settings?.playlistCategories,
+    showUnavailableSongInGreyStyle:
+      initLocalStorage?.settings?.showUnavailableSongInGreyStyle,
     ...parsedSettings,
   };
 

src/views/playlist.vue

@@ -91,8 +91,11 @@
           :iconClass="playlist.subscribed ? 'heart-solid' : 'heart'"
           :iconButton="true"
           :horizontalPadding="0"
-          color="grey"
+          :color="playlist.subscribed ? 'blue' : 'grey'"
           :textColor="playlist.subscribed ? '#335eea' : ''"
+          :backgroundColor="
+            playlist.subscribed ? 'var(--color-secondary-bg)' : ''
+          "
           @click.native="likePlaylist"
         >
         </ButtonTwoTone>

src/views/settings.vue

@@ -76,7 +76,7 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Automatically Cache Songs </div>
+          <div class="title"> Automatically cache songs </div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -93,7 +93,7 @@
       <div class="item">
         <div class="left">
           <div class="title"
-            >Cached {{ tracksCache.length }} Songs ({{ tracksCache.size }})</div
+            >Cached {{ tracksCache.length }} songs ({{ tracksCache.size }})</div
           >
         </div>
         <div class="right">
@@ -102,7 +102,7 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Show Github Icon </div>
+          <div class="title"> Show Github icon </div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -118,7 +118,23 @@
       </div>
       <div class="item">
         <div class="left">
-          <div class="title"> Show Playlists by Apple Music</div>
+          <div class="title"> Show unavailable song in grey style</div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="show-unavailable-song-grey"
+              id="show-unavailable-song-grey"
+              v-model="showUnavailableSongInGreyStyle"
+            />
+            <label for="show-unavailable-song-grey"></label>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> Show playlists by Apple Music</div>
         </div>
         <div class="right">
           <div class="toggle">
@@ -215,6 +231,17 @@ export default {
         });
       },
     },
+    showUnavailableSongInGreyStyle: {
+      get() {
+        return this.settings.showUnavailableSongInGreyStyle;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "showUnavailableSongInGreyStyle",
+          value,
+        });
+      },
+    },
     showPlaylistsByAppleMusic: {
       get() {
         if (this.settings.showPlaylistsByAppleMusic === undefined) return true;
@@ -450,7 +477,7 @@ h2 {
   -webkit-transition: 0.4s ease;
   transition: 0.4s ease;
   height: 32px;
-  width: 68px;
+  width: 52px;
   background: var(--color-secondary-bg);
   border-radius: 8px;
 }
@@ -461,7 +488,7 @@ h2 {
   -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
   transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
   height: 32px;
-  width: 68px;
+  width: 52px;
   top: 0;
   left: 0;
   border-radius: 8px;
@@ -476,7 +503,7 @@ h2 {
   transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
   background: #fff;
   height: 20px;
-  width: 28px;
+  width: 20px;
   top: 6px;
   left: 6px;
   border-radius: 6px;
@@ -487,6 +514,6 @@ h2 {
   transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
 }
 .toggle input:checked + label:after {
-  left: 34px;
+  left: 26px;
 }
 </style>