first commit

src/store/actions.js

@@ -0,0 +1,65 @@
+// import { getMP3 } from "@/api/track";
+import { updateMediaSessionMetaData } from "@/utils/mediaSession";
+
+export default {
+  switchTrack({ state, dispatch, commit }, track) {
+    commit("updateCurrentTrack", track);
+    commit("updatePlayingStatus", true);
+
+    if (track.playable === false) {
+      dispatch("nextTrack");
+      return;
+    }
+
+    updateMediaSessionMetaData(track);
+    document.title = `${track.name} · ${track.artists[0].name} - YesPlayMusic`;
+
+    commit(
+      "replaceMP3",
+      `https://music.163.com/song/media/outer/url?id=${track.id}`
+    );
+    state.howler.once("end", () => {
+      dispatch("nextTrack");
+    });
+  },
+  playFirstTrackOnList({ state, dispatch }) {
+    dispatch("switchTrack", state.player.list[0]);
+  },
+  playTrackOnListByID(context, trackID) {
+    let track = context.state.player.list.find((t) => t.id === trackID);
+    if (track.playable === false) return;
+    context.dispatch("switchTrack", track);
+  },
+  nextTrack({ state, dispatch, commit }, realNext = false) {
+    let nextTrack = state.player.list.find(
+      (track) => track.sort === state.player.currentTrack.sort + 1
+    );
+
+    if (state.player.repeat === "on" && nextTrack === undefined) {
+      nextTrack = state.player.list.find((t) => t.sort === 0);
+    }
+
+    if (state.player.repeat === "one" && realNext === false) {
+      nextTrack = state.player.currentTrack;
+    }
+
+    if (state.player.repeat === "off" && nextTrack === undefined) {
+      commit("updatePlayingStatus", false);
+      state.howler.stop();
+      return;
+    }
+
+    dispatch("switchTrack", nextTrack);
+  },
+  previousTrack({ state, dispatch }) {
+    let previousTrack = state.player.list.find(
+      (track) => track.sort === state.player.currentTrack.sort - 1
+    );
+
+    previousTrack =
+      previousTrack === null || previousTrack === undefined
+        ? state.player.list[-1]
+        : previousTrack;
+    dispatch("switchTrack", previousTrack);
+  },
+};

src/store/index.js

@@ -0,0 +1,40 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import state from "./state";
+import mutations from "./mutations";
+import actions from "./actions";
+import initState from "./initState";
+import { Howl } from "howler";
+
+if (localStorage.getItem("appVersion") === null) {
+  localStorage.setItem("player", JSON.stringify(initState.player));
+  localStorage.setItem("settings", JSON.stringify(initState.settings));
+  localStorage.setItem("appVersion", "0.1");
+  window.location.reload();
+}
+
+Vue.use(Vuex);
+const saveToLocalStorage = (store) => {
+  store.subscribe((mutation, state) => {
+    // console.log(mutation);
+    localStorage.setItem("player", JSON.stringify(state.player));
+    localStorage.setItem("settings", JSON.stringify(state.settings));
+  });
+};
+
+const store = new Vuex.Store({
+  state: state,
+  mutations,
+  actions,
+  plugins: [saveToLocalStorage],
+});
+
+store.state.howler = new Howl({
+  src: [
+    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`,
+  ],
+  html5: true,
+  format: ["mp3"],
+});
+
+export default store;

src/store/initState.js

@@ -0,0 +1,91 @@
+import { Howler } from "howler";
+
+const initState = {
+  loading: true,
+  Howler: Howler,
+  howler: null,
+  contextMenu: {
+    clickObjectID: 0,
+    showMenu: false,
+  },
+  player: {
+    enable: false,
+    show: true,
+    playing: false,
+    shuffle: false,
+    volume: 1,
+    repeat: "off", // on | off | one
+    currentTrack: {
+      sort: 0,
+      name: "Happiness",
+      id: 1478005597,
+      artists: [{ id: 12931567, name: "John K", tns: [], alias: [] }],
+      album: {
+        id: 95187944,
+        name: "Happiness",
+        picUrl:
+          "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
+        tns: [],
+        pic_str: "109951165306614548",
+        pic: 109951165306614540,
+      },
+      time: 196022,
+      playable: true,
+    },
+    notShuffledList: [],
+    list: [],
+    listInfo: {
+      type: "",
+      id: "",
+    },
+  },
+  settings: {
+    playlistCategories: [
+      {
+        name: "全部",
+        enable: true,
+      },
+      {
+        name: "推荐歌单",
+        enable: true,
+      },
+      {
+        name: "精品歌单",
+        enable: true,
+      },
+      {
+        name: "官方",
+        enable: true,
+      },
+      {
+        name: "流行",
+        enable: true,
+      },
+      {
+        name: "电子",
+        enable: true,
+      },
+      {
+        name: "摇滚",
+        enable: true,
+      },
+      {
+        name: "ACG",
+        enable: true,
+      },
+      // {
+      //   name: "最新专辑",
+      //   enable: true,
+      // },
+      {
+        name: "排行榜",
+        enable: true,
+      },
+    ],
+    user: {
+      id: 1,
+    },
+  },
+};
+
+export default initState;

src/store/mutations.js

@@ -0,0 +1,92 @@
+import { Howl } from "howler";
+import state from "./state";
+
+export default {
+  updatePlayerState(state, { key, value }) {
+    state.player[key] = value;
+  },
+  updatePlayingStatus(state, status) {
+    state.player.playing = status;
+  },
+  updateCurrentTrack(state, track) {
+    state.player.currentTrack = track;
+  },
+  replaceMP3(state, mp3) {
+    state.Howler.unload();
+    state.howler = new Howl({
+      src: [mp3],
+      autoplay: true,
+      html5: true,
+    });
+    state.howler.play();
+  },
+  updatePlayerList(state, list) {
+    state.player.list = list;
+    if (state.player.enable !== true) state.player.enable = true;
+  },
+  updateListInfo(state, info) {
+    state.player.listInfo = info;
+  },
+  updateShuffleStatus(state, status) {
+    state.player.shuffle = status;
+  },
+  updateRepeatStatus(state, status) {
+    state.player.repeat = status;
+  },
+  appendTrackToPlayerList(state, { track, playNext = false }) {
+    let existTrack = state.player.list.find((t) => t.id === track.id);
+    if (
+      (existTrack === null || existTrack === undefined) &&
+      playNext === false
+    ) {
+      state.player.list.push(track);
+      return;
+    }
+
+    // 把track加入到正在播放歌曲的下一首位置
+    state.player.list = state.player.list.map((t) => {
+      if (t.sort > state.player.currentTrack.sort) {
+        t.sort = t.sort + 1;
+      }
+      return t;
+    });
+    track.sort = state.player.currentTrack.sort + 1;
+    state.player.list.push(track);
+  },
+  shuffleTheList(state) {
+    let getOneRandomly = (arr) => arr[Math.floor(Math.random() * arr.length)];
+    state.player.notShuffledList = JSON.parse(
+      JSON.stringify(state.player.list)
+    );
+
+    let sorts = Array.from(new Array(state.player.list.length).keys());
+    sorts = sorts.filter((no) => no != 0);
+    let shuffledList = state.player.list.map((track) => {
+      if (track.id === state.player.currentTrack.id) {
+        // 确保正在播放的歌的sort是第一个
+        track.sort = 0;
+        return track;
+      }
+      let sortNo = getOneRandomly(sorts);
+      sorts = sorts.filter((no) => no != sortNo);
+      track.sort = sortNo;
+      return track;
+    });
+
+    state.player.list = shuffledList;
+
+    // 更新当前播放歌曲的sort
+    let currentTrack = state.player.list.find(
+      (t) => t.id === state.player.currentTrack.id
+    );
+    state.player.currentTrack.sort = currentTrack.sort;
+
+    state.player.shuffle = true;
+  },
+  updateUser(state, user) {
+    state.settings.user = user;
+  },
+  updateUserInfo(sate, { key, value }) {
+    state.settings.user[key] = value;
+  },
+};

src/store/state.js

@@ -0,0 +1,12 @@
+import { Howler } from "howler";
+
+export default {
+  Howler: Howler,
+  howler: null,
+  contextMenu: {
+    clickObjectID: 0,
+    showMenu: false,
+  },
+  player: JSON.parse(localStorage.getItem("player")),
+  settings: JSON.parse(localStorage.getItem("settings")),
+};