feat: cache track details, lyrics and album

src/api/album.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request';
 import { mapTrackPlayableStatus } from '@/utils/common';
+import { cacheAlbum, getAlbumFromCache } from '@/utils/db';
 
 /**
  * 获取专辑内容
@@ -7,15 +8,23 @@ import { mapTrackPlayableStatus } from '@/utils/common';
  * @param {number} id
  */
 export function getAlbum(id) {
-  return request({
-    url: '/album',
-    method: 'get',
-    params: {
-      id,
-    },
-  }).then(data => {
-    data.songs = mapTrackPlayableStatus(data.songs);
-    return data;
+  const fetchLatest = () => {
+    return request({
+      url: '/album',
+      method: 'get',
+      params: {
+        id,
+      },
+    }).then(data => {
+      cacheAlbum(id, data);
+      data.songs = mapTrackPlayableStatus(data.songs);
+      return data;
+    });
+  };
+  fetchLatest();
+
+  return getAlbumFromCache(id).then(result => {
+    return result ?? fetchLatest();
   });
 }
 

src/api/track.js

@@ -1,6 +1,13 @@
 import store from '@/store';
 import request from '@/utils/request';
 import { mapTrackPlayableStatus } from '@/utils/common';
+import {
+  cacheTrackDetail,
+  getTrackDetailFromCache,
+  cacheLyric,
+  getLyricFromCache,
+} from '@/utils/db';
+
 /**
  * 获取音乐 url
  * 说明 : 使用歌单详情接口后 , 能得到的音乐的 id, 但不能得到的音乐 url, 调用此接口, 传入的音乐 id( 可多个 , 用逗号隔开 ), 可以获取对应的音乐的 url,
@@ -21,38 +28,70 @@ export function getMP3(id) {
     },
   });
 }
+
 /**
  * 获取歌曲详情
  * 说明 : 调用此接口 , 传入音乐 id(支持多个 id, 用 , 隔开), 可获得歌曲详情(注意:歌曲封面现在需要通过专辑内容接口获取)
  * @param {string} ids - 音乐 id, 例如 ids=405998841,33894312
  */
 export function getTrackDetail(ids) {
-  return request({
-    url: '/song/detail',
-    method: 'get',
-    params: {
-      ids,
-    },
-  }).then(data => {
-    data.songs = mapTrackPlayableStatus(data.songs, data.privileges);
-    return data;
+  const fetchLatest = () => {
+    return request({
+      url: '/song/detail',
+      method: 'get',
+      params: {
+        ids,
+      },
+    }).then(data => {
+      data.songs.map(song => {
+        const privileges = data.privileges.find(t => t.id === song.id);
+        cacheTrackDetail(song, privileges);
+      });
+      data.songs = mapTrackPlayableStatus(data.songs, data.privileges);
+      return data;
+    });
+  };
+  fetchLatest();
+
+  let idsInArray = [String(ids)];
+  if (typeof ids === 'string') {
+    idsInArray = ids.split(',');
+  }
+
+  return getTrackDetailFromCache(idsInArray).then(result => {
+    if (result) {
+      result.songs = mapTrackPlayableStatus(result.songs, result.privileges);
+    }
+    return result ?? fetchLatest();
   });
 }
+
 /**
  * 获取歌词
  * 说明 : 调用此接口 , 传入音乐 id 可获得对应音乐的歌词 ( 不需要登录 )
  * @param {number} id - 音乐 id
  */
-
 export function getLyric(id) {
-  return request({
-    url: '/lyric',
-    method: 'get',
-    params: {
-      id,
-    },
+  const fetchLatest = () => {
+    return request({
+      url: '/lyric',
+      method: 'get',
+      params: {
+        id,
+      },
+    }).then(result => {
+      cacheLyric(id, result);
+      return result;
+    });
+  };
+
+  fetchLatest();
+
+  return getLyricFromCache(id).then(result => {
+    return result ?? fetchLatest();
   });
 }
+
 /**
  * 新歌速递
  * 说明 : 调用此接口 , 可获取新歌速递
@@ -67,6 +106,7 @@ export function topSong(type) {
     },
   });
 }
+
 /**
  * 喜欢音乐
  * 说明 : 调用此接口 , 传入音乐 id, 可喜欢该音乐

src/utils/db.js

@@ -5,6 +5,12 @@ import store from '@/store';
 
 const db = new Dexie('yesplaymusic');
 
+db.version(4).stores({
+  trackDetail: '&id, updateTime',
+  lyric: '&id, updateTime',
+  album: '&id, updateTime',
+});
+
 db.version(3)
   .stores({
     trackSources: '&id, createTime',
@@ -78,6 +84,65 @@ export function getTrackSource(id) {
   });
 }
 
+export function cacheTrackDetail(track, privileges) {
+  db.trackDetail.put({
+    id: track.id,
+    detail: track,
+    privileges: privileges,
+    updateTime: new Date().getTime(),
+  });
+}
+
+export function getTrackDetailFromCache(ids) {
+  return db.trackDetail
+    .filter(track => {
+      return ids.includes(String(track.id));
+    })
+    .toArray()
+    .then(tracks => {
+      const result = { songs: [], privileges: [] };
+      ids.map(id => {
+        const one = tracks.find(t => String(t.id) === id);
+        result.songs.push(one?.detail);
+        result.privileges.push(one?.privileges);
+      });
+      if (result.songs.includes(undefined)) {
+        return undefined;
+      }
+      return result;
+    });
+}
+
+export function cacheLyric(id, lyrics) {
+  db.lyric.put({
+    id,
+    lyrics,
+    updateTime: new Date().getTime(),
+  });
+}
+
+export function getLyricFromCache(id) {
+  return db.lyric.get(Number(id)).then(result => {
+    if (!result) return undefined;
+    return result.lyrics;
+  });
+}
+
+export function cacheAlbum(id, album) {
+  db.album.put({
+    id,
+    album,
+    updateTime: new Date().getTime(),
+  });
+}
+
+export function getAlbumFromCache(id) {
+  return db.album.get(Number(id)).then(result => {
+    if (!result) return undefined;
+    return result.album;
+  });
+}
+
 export function countDBSize() {
   const trackSizes = [];
   return db.trackSources