Merge branch 'master' of github.com:qier222/YesPlayMusic

src/App.vue

@@ -31,7 +31,7 @@ export default {
   components: {
     Navbar,
     Player,
-    GlobalEvents,
+    GlobalEvents
   },
   methods: {
     play(e) {
@@ -42,8 +42,8 @@ export default {
       if (event.target.tagName === "INPUT") return false;
       if (this.$route.name === "mv") return false;
       return true;
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -72,6 +72,7 @@ main {
 }
 
 button {
+  font-family: inherit;
   background: none;
   border: none;
   cursor: pointer;

src/components/CoverRow.vue

@@ -35,7 +35,7 @@
           /></span>
           <span
             class="lock-icon"
-            v-if="type === 'playlist' && item.privacy !== 0"
+            v-if="type === 'playlist' && item.privacy === 10"
           >
             <svg-icon icon-class="lock"
           /></span>

src/components/Player.vue

@@ -31,8 +31,8 @@
               :key="ar.id"
               @click="goToArtist(ar.id)"
             >
-              {{ ar.name }}
+              <span class="ar">{{ ar.name }}</span
-              <span v-if="index !== currentTrack.ar.length - 1">, </span>
+              ><span v-if="index !== currentTrack.ar.length - 1">, </span>
             </span>
           </div>
         </div>
@@ -356,7 +356,7 @@ export default {
       -webkit-line-clamp: 1;
       overflow: hidden;
       word-break: break-all;
-      span {
+      span.ar {
         cursor: pointer;
         &:hover {
           text-decoration: underline;

src/components/TrackListItem.vue

@@ -182,9 +182,9 @@ button.play-button {
 .track {
   display: flex;
   align-items: center;
-
   padding: 8px;
   border-radius: 12px;
+  user-select: none;
 
   .no {
     display: flex;

src/locale/lang/en.js

@@ -30,7 +30,7 @@ export default {
     popularSongs: "Popular Songs",
     showMore: "SHOW MORE",
     showLess: "SHOW LESS",
-    EPSingle: "EPs & Singles",
+    EPsSingles: "EPs & Singles",
     albums: "Albums"
   },
   album: {
@@ -42,7 +42,7 @@ export default {
   },
   login: {
     accessToAll: "Access to all data",
-    loginText: "Login in Netease",
+    loginText: "Login to Netease",
     search: "Search account",
     readonly: "Only access to public data",
     usernameLogin: "Username Login",
@@ -58,8 +58,8 @@ export default {
     loginWithEmail: "Login with Email",
     loginWithPhone: "Login with Phone",
     // TODO
-    agreement: `YesPlayMusic promises not to save any of your account information to the cloud.
+    notice: `YesPlayMusic promises not to save any of your account information to the cloud.<br />
-      Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.
+      Your password will be MD5 encrypted locally and then transmitted to NetEase Cloud API.<br />
       YesPlayMusic is not the official website of NetEase Cloud Music, please consider carefully before entering account information. You can also go to <a href="https://github.com/qier222/YesPlayMusic">YesPlayMusic's GitHub repository</a> to build and use the self-hosted NetEase Cloud Music API.`
   },
   mv: {

src/locale/lang/zh-CN.js

@@ -30,7 +30,7 @@ export default {
     popularSongs: "热门歌曲",
     showMore: "显示更多",
     showLess: "收起",
-    EPSingle: "EP和单曲",
+    EPsSingles: "EP和单曲",
     albums: "专辑"
   },
   album: {
@@ -55,10 +55,11 @@ export default {
     email: "邮箱",
     password: "密码",
     login: "登录",
-    usingEmail: "使用邮箱登录",
+    loginWithEmail: "使用邮箱登录",
-    usingPhone: "使用手机号登录",
+    loginWithPhone: "使用手机号登录",
     // TODO
-    agreement: `YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
+    notice: `
+      YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
       你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
       YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往
       <a href="https://github.com/qier222/YesPlayMusic"

src/views/artist.vue

@@ -13,13 +13,13 @@
         </div>
         <div class="buttons">
           <ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
-            {{ $t('play') }}
+            {{ $t("play") }}
           </ButtonTwoTone>
         </div>
       </div>
     </div>
     <div class="latest-release">
-      <div class="section-title">{{ $t('artist.latestRelease') }}</div>
+      <div class="section-title">{{ $t("artist.latestRelease") }}</div>
       <div class="release">
         <div class="container">
           <Cover
@@ -53,7 +53,7 @@
       </div>
     </div>
     <div class="popular-tracks">
-      <div class="section-title">{{ $t('artist.popularSongs') }}</div>
+      <div class="section-title">{{ $t("artist.popularSongs") }}</div>
       <TrackList
         :tracks="popularTracks.slice(0, showMorePopTracks ? 24 : 12)"
         :type="'tracklist'"
@@ -61,13 +61,13 @@
 
       <div class="show-more">
         <button @click="showMorePopTracks = !showMorePopTracks">
-          <span v-show="!showMorePopTracks">{{ $t('artist.showMore') }}</span>
+          <span v-show="!showMorePopTracks">{{ $t("artist.showMore") }}</span>
-          <span v-show="showMorePopTracks">{{ $t('artist.showLess') }}</span>
+          <span v-show="showMorePopTracks">{{ $t("artist.showLess") }}</span>
         </button>
       </div>
     </div>
     <div class="albums" v-if="albums.length !== 0">
-      <div class="section-title">{{ $t('artist.album') }}</div>
+      <div class="section-title">{{ $t("artist.albums") }}</div>
       <CoverRow
         :type="'album'"
         :items="albums"
@@ -80,7 +80,7 @@
       <MvRow :mvs="mvs" subtitle="publishTime" />
     </div>
     <div class="eps">
-      <div class="section-title">{{ $t('artist.EPSingle') }}</div>
+      <div class="section-title">{{ $t("artist.EPsSingles") }}</div>
       <CoverRow
         :type="'album'"
         :items="eps"
@@ -112,7 +112,7 @@ export default {
       show: false,
       artist: {
         img1v1Url:
-          "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
+          "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg"
       },
       popularTracks: [],
       albumsData: [],
@@ -122,28 +122,28 @@ export default {
         id: 0,
         name: "",
         type: "",
-        size: "",
+        size: ""
       },
       showMorePopTracks: false,
-      mvs: [],
+      mvs: []
     };
   },
   computed: {
     ...mapState(["player"]),
     albums() {
-      return this.albumsData.filter((a) => a.type === "专辑");
+      return this.albumsData.filter(a => a.type === "专辑");
     },
     eps() {
-      return this.albumsData.filter((a) =>
+      return this.albumsData.filter(a =>
         ["EP/Single", "EP", "Single"].includes(a.type)
       );
-    },
+    }
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
     ...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
     loadData(id, next = undefined) {
-      getArtist(id).then((data) => {
+      getArtist(id).then(data => {
         this.artist = data.artist;
         this.popularTracks = data.hotSongs;
         this.popularTracks = mapTrackPlayableStatus(this.popularTracks);
@@ -151,24 +151,24 @@ export default {
         NProgress.done();
         this.show = true;
       });
-      getArtistAlbum({ id: id, limit: 200 }).then((data) => {
+      getArtistAlbum({ id: id, limit: 200 }).then(data => {
         this.albumsData = data.hotAlbums;
         this.latestRelease = data.hotAlbums[0];
       });
-      artistMv(id).then((data) => {
+      artistMv(id).then(data => {
         this.mvs = data.mvs;
       });
     },
     goToAlbum(id) {
       this.$router.push({
         name: "album",
-        params: { id },
+        params: { id }
       });
     },
     playPopularSongs(trackID = "first") {
-      let trackIDs = this.popularTracks.map((t) => t.id);
+      let trackIDs = this.popularTracks.map(t => t.id);
       playAList(trackIDs, this.artist.id, "artist", trackID);
-    },
+    }
   },
   created() {
     this.loadData(this.$route.params.id);
@@ -187,7 +187,7 @@ export default {
     this.artist.img1v1Url =
       "https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg";
     this.loadData(to.params.id, next);
-  },
+  }
 };
 </script>
 

src/views/loginAccount.vue

@@ -11,7 +11,9 @@
           <div class="inputs">
             <input
               id="countryCode"
-              :placeholder="inputFocus === 'phone' ? '' : $t('login.countrycode')"
+              :placeholder="
+                inputFocus === 'phone' ? '' : $t('login.countrycode')
+              "
               v-model="countryCode"
               @focus="inputFocus = 'phone'"
               @blur="inputFocus = ''"
@@ -48,7 +50,9 @@
             <input
               type="password"
               id="password"
-              :placeholder="inputFocus === 'password' ? '' : $t('login.password')"
+              :placeholder="
+                inputFocus === 'password' ? '' : $t('login.password')
+              "
               v-model="password"
               @focus="inputFocus = 'password'"
               @blur="inputFocus = ''"
@@ -58,7 +62,9 @@
       </div>
     </div>
     <div class="confirm">
-      <button @click="login" v-show="!processing">{{ $t('login.login') }}</button>
+      <button @click="login" v-show="!processing">
+        {{ $t("login.login") }}
+      </button>
       <button v-show="processing" class="loading" disabled>
         <span></span>
         <span></span>
@@ -66,18 +72,14 @@
       </button>
     </div>
     <div class="other-login">
-      <a v-show="mode === 'phone'" @click="mode = 'email'">{{ $t('login.usingEmail') }}</a>
+      <a v-show="mode === 'phone'" @click="mode = 'email'">{{
-      <a v-show="mode === 'email'" @click="mode = 'phone'">{{ $t('login.usingPhone') }}</a>
+        $t("login.loginWithEmail")
-    </div>
+      }}</a>
-    <div class="notice">
+      <a v-show="mode === 'email'" @click="mode = 'phone'">{{
-      YesPlayMusic 承诺不会保存你的任何账号信息到云端。<br />
+        $t("login.loginWithPhone")
-      你的密码会在本地进行 MD5 加密后再传输到网易云 API。<br />
+      }}</a>
-      YesPlayMusic 并非网易云官方网站，输入账号信息前请慎重考虑。 你也可以前往
-      <a href="https://github.com/qier222/YesPlayMusic"
-        >YesPlayMusic 的 GitHub 源代码仓库</a
-      >
-      自行构建并使用自托管的网易云 API。
     </div>
+    <div class="notice" v-html="$t('login.notice')"></div>
   </div>
 </template>
 
@@ -100,7 +102,7 @@ export default {
       email: "",
       password: "",
       smsCode: "",
-      inputFocus: "",
+      inputFocus: ""
     };
   },
   created() {
@@ -116,11 +118,11 @@ export default {
       Cookies.set("loginMode", "account", { expires: 3650 });
       userPlaylist({
         uid: this.$store.state.settings.user.userId,
-        limit: 1,
+        limit: 1
-      }).then((data) => {
+      }).then(data => {
         this.updateUserInfo({
           key: "likedSongPlaylistID",
-          value: data.playlist[0].id,
+          value: data.playlist[0].id
         });
         this.$router.push({ path: "/library" });
       });
@@ -133,44 +135,55 @@ export default {
           this.phone === "" ||
           this.password === ""
         ) {
-          alert("请输入完整的信息");
+          alert("国家区号、手机或密码不正确");
           this.processing = false;
           return;
         }
         loginWithPhone({
-          countrycode: this.countryCode.replace("+", "").replace(/\s/g, ''),
+          countrycode: this.countryCode.replace("+", "").replace(/\s/g, ""),
-          phone: this.phoneNumber.replace(/\s/g, ''),
+          phone: this.phoneNumber.replace(/\s/g, ""),
           password: "fakePassword",
-          md5_password: md5(this.password).toString(),
+          md5_password: md5(this.password).toString()
         })
-          .then((data) => {
+          .then(data => {
+            if (data.code !== 502) {
               this.updateUser(data.profile);
               this.afterLogin();
+            }
           })
-          .catch(() => {
+          .catch(error => {
             this.processing = false;
+            alert(error);
           });
       } else {
-        if (this.email === "" || this.password === "") {
+        let emailReg = /^[A-Za-z0-9]+([_][A-Za-z0-9]+)*@([A-Za-z0-9]+\.)+[A-Za-z]{2,6}$/;
-          alert("请输入完整的信息");
+        if (
+          this.email === "" ||
+          this.password === "" ||
+          !emailReg.test(this.email)
+        ) {
+          alert("邮箱或密码不正确");
           this.processing = false;
           return;
         }
         loginWithEmail({
-          email: this.email.replace(/\s/g, ''),
+          email: this.email.replace(/\s/g, ""),
           password: "fakePassword",
-          md5_password: md5(this.password).toString(),
+          md5_password: md5(this.password).toString()
         })
-          .then((data) => {
+          .then(data => {
+            if (data.code !== 502) {
               this.updateUser(data.profile);
               this.afterLogin();
+            }
           })
-          .catch(() => {
+          .catch(error => {
             this.processing = false;
+            alert(error);
           });
       }
-    },
+    }
-  },
+  }
 };
 </script>
 
@@ -235,13 +248,14 @@ export default {
 
   .inputs {
     display: flex;
+    width: 85%;
   }
 
   input {
     font-size: 20px;
     border: none;
     background: transparent;
-    width: 96%;
+    width: 100%;
     font-weight: 600;
     margin-top: -1px;
     color: rgba(0, 0, 0, 0.88);
@@ -251,7 +265,7 @@ export default {
     flex: 2;
   }
   input#phoneNumber {
-    flex: 14;
+    flex: 12;
   }
 
   .active {

src/views/next.vue

@@ -24,11 +24,11 @@ import TrackList from "@/components/TrackList.vue";
 export default {
   name: "Next",
   components: {
-    TrackList,
+    TrackList
   },
   data() {
     return {
-      tracks: [],
+      tracks: []
     };
   },
   computed: {
@@ -48,50 +48,51 @@ export default {
         };
       }
       return this.tracks
-        .filter((t) => t.sort > this.player.currentTrack.sort)
+        .filter(t => this.player.list.find(t2 => t2.id === t.id) !== undefined)
+        .filter(t => t.sort > this.player.currentTrack.sort)
         .sort(compare("sort"));
-    },
+    }
   },
   watch: {
     currentTrack() {
       this.loadTracks();
     },
     playerShuffle() {
-      this.tracks = this.tracks.map((t) => {
+      this.tracks = this.tracks.map(t => {
-        t.sort = this.player.list.find((t2) => t.id === t2.id).sort;
+        t.sort = this.player.list.find(t2 => t.id === t2.id).sort;
         return t;
       });
-    },
+    }
   },
   methods: {
     ...mapActions(["playTrackOnListByID"]),
     loadTracks() {
       console.time("loadTracks");
-      let loadedTrackIDs = this.tracks.map((t) => t.id);
+      let loadedTrackIDs = this.tracks.map(t => t.id);
       let basicTracks = this.player.list
         .filter(
-          (t) =>
+          t =>
             t.sort > this.player.currentTrack.sort &&
             t.sort <= this.player.currentTrack.sort + 100
         )
-        .filter((t) => loadedTrackIDs.includes(t.id) === false);
+        .filter(t => loadedTrackIDs.includes(t.id) === false);
 
-      let trackIDs = basicTracks.map((t) => t.id);
+      let trackIDs = basicTracks.map(t => t.id);
       if (trackIDs.length > 0) {
-        getTrackDetail(trackIDs.join(",")).then((data) => {
+        getTrackDetail(trackIDs.join(",")).then(data => {
-          let newTracks = data.songs.map((t) => {
+          let newTracks = data.songs.map(t => {
-            t.sort = this.player.list.find((t2) => t2.id == t.id).sort;
+            t.sort = this.player.list.find(t2 => t2.id == t.id).sort;
             return t;
           });
           this.tracks.push(...newTracks);
         });
       }
       console.timeEnd("loadTracks");
-    },
+    }
   },
   activated() {
     this.loadTracks();
-  },
+  }
 };
 </script>