feat: add "Automatically Cache Songs" option to settings page

src/store/actions.js

@@ -1,8 +1,9 @@
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
-import { getTrackDetail, scrobble } from "@/api/track";
+import { getTrackDetail, scrobble, getMP3 } from "@/api/track";
 import { isAccountLoggedIn } from "@/utils/auth";
-// import { updateHttps } from "@/utils/common";
+import { updateHttps } from "@/utils/common";
 import localforage from "localforage";
+import store from "@/store";
 import { cacheTrack } from "@/utils/db";
 
 export default {
@@ -46,18 +47,28 @@ export default {
         });
       }
       if (isAccountLoggedIn()) {
-        let tracks = localforage.createInstance({
-          name: "tracks",
-        });
-        tracks.getItem(`${track.id}`).then((t) => {
-          if (t !== null) {
-            commitMP3(URL.createObjectURL(t.mp3));
-          } else {
-            cacheTrack(`${track.id}`).then((t) => {
+        if (store.state.settings.automaticallyCacheSongs === true) {
+          let tracks = localforage.createInstance({
+            name: "tracks",
+          });
+          tracks.getItem(`${track.id}`).then((t) => {
+            if (t !== null) {
               commitMP3(URL.createObjectURL(t.mp3));
-            });
-          }
-        });
+            } else {
+              cacheTrack(`${track.id}`).then((t) => {
+                commitMP3(URL.createObjectURL(t.mp3));
+              });
+            }
+          });
+        } else {
+          getMP3(track.id).then((data) => {
+            // 未知情况下会没有返回数据导致报错，增加防范逻辑
+            if (data.data[0]) {
+              const url = updateHttps(data.data[0].url);
+              commitMP3(url);
+            }
+          });
+        }
       } else {
         commitMP3(`https://music.163.com/song/media/outer/url?id=${track.id}`);
       }

src/views/settings.vue

@@ -74,10 +74,26 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> Automatically Cache Songs </div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="automatically-cache-songs"
+              id="automatically-cache-songs"
+              v-model="automaticallyCacheSongs"
+            />
+            <label for="automatically-cache-songs"></label>
+          </div>
+        </div>
+      </div>
       <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">
@@ -223,6 +239,21 @@ export default {
         });
       },
     },
+    automaticallyCacheSongs: {
+      get() {
+        if (this.settings.automaticallyCacheSongs === undefined) return false;
+        return this.settings.automaticallyCacheSongs;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "automaticallyCacheSongs",
+          value,
+        });
+        if (value === false) {
+          this.clearCache("tracks");
+        }
+      },
+    },
   },
   methods: {
     logout() {