支持播放MV

package.json

@@ -13,6 +13,7 @@
     "dayjs": "^1.8.36",
     "howler": "^2.2.0",
     "nprogress": "^0.2.0",
+    "plyr": "^3.6.2",
     "register-service-worker": "^1.7.1",
     "svg-sprite-loader": "^5.0.0",
     "vue": "^2.6.11",

src/App.vue

@@ -8,7 +8,10 @@
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     </main>
     <transition name="slide-up">
-      <BottomBar v-if="this.$store.state.player.enable" ref="player"
+      <BottomBar
+        v-if="this.$store.state.player.enable"
+        ref="player"
+        v-show="this.$route.name !== 'mv'"
     /></transition>
     <GlobalEvents
       :filter="(event, handler, eventName) => event.target.tagName !== 'INPUT'"

src/api/artist.js

@@ -34,3 +34,13 @@ export function toplistOfArtists(type = null) {
     },
   });
 }
+
+export function artistMv(id) {
+  return request({
+    url: "/artist/mv",
+    method: "get",
+    params: {
+      id,
+    },
+  });
+}

src/api/mv.js

@@ -0,0 +1,29 @@
+import request from "@/utils/request";
+
+export function mvDetail(mvid) {
+  return request({
+    url: "/mv/detail",
+    method: "get",
+    params: {
+      mvid,
+    },
+  });
+}
+
+export function mvUrl(params) {
+  // 必选参数 : id: mv id
+  // 可选参数 : r: 分辨率,默认1080,可从 /mv/detail 接口获取分辨率列表
+  return request({
+    url: "/mv/url",
+    method: "get",
+    params,
+  });
+}
+
+export function simiMv(mvid) {
+  return request({
+    url: "/simi/mv",
+    method: "get",
+    params: { mvid },
+  });
+}

src/components/MvRow.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="mv-row">
+    <div class="mv" v-for="mv in mvs" :key="mv.id">
+      <div class="cover-container">
+        <img
+          class="cover"
+          :src="getUrl(mv)"
+          @mouseover="hoverVideoID = mv.id"
+          @mouseleave="hoverVideoID = 0"
+          @click="goToMv(mv.id)"
+        />
+        <transition name="fade">
+          <img
+            class="shadow"
+            v-show="hoverVideoID === mv.id"
+            :src="getUrl(mv)"
+          />
+        </transition>
+      </div>
+      <div class="info">
+        <div class="title">
+          <router-link :to="'/mv/' + mv.id">{{ mv.name }}</router-link>
+        </div>
+        <div class="artist">
+          <router-link
+            v-if="subtitle === 'artist'"
+            :to="'/artist/' + mv.artistId"
+            >{{ mv.artistName }}</router-link
+          >
+          <span v-if="subtitle === 'publishTime'">{{ mv.publishTime }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CoverVideo",
+  props: {
+    mvs: Array,
+    subtitle: {
+      type: String,
+      default: "artist",
+    },
+  },
+  data() {
+    return {
+      hoverVideoID: 0,
+    };
+  },
+  methods: {
+    goToMv(id) {
+      this.$router.push({ path: "/mv/" + id });
+    },
+    getUrl(mv) {
+      if (mv.cover !== undefined) return mv.cover;
+      if (mv.imgurl16v9 !== undefined) return mv.imgurl16v9;
+      if (mv.coverUrl !== undefined) return mv.coverUrl;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mv-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -12px;
+}
+
+.mv {
+  margin: 12px 12px 24px 12px;
+  width: 204px;
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+  .artist {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.68);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.cover-container {
+  position: relative;
+  .cover {
+    position: relative;
+    padding: 0;
+    background-size: cover;
+    transition: 0.3s;
+    width: 200px;
+    border-radius: 10px;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.02);
+      box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  .shadow {
+    position: absolute;
+    filter: blur(16px) opacity(0.6);
+    z-index: -1;
+    width: 200px;
+    top: 6px;
+    left: 0;
+    border-radius: 10px;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

src/router/index.js

@@ -32,6 +32,11 @@ const routes = [
     name: "artist",
     component: () => import("@/views/artist"),
   },
+  {
+    path: "/mv/:id",
+    name: "mv",
+    component: () => import("@/views/mv"),
+  },
   {
     path: "/next",
     name: "next",
@@ -67,7 +72,6 @@ const routes = [
       keepAlive: true,
     },
   },
-
   {
     path: "/library/liked-songs",
     name: "likedSongs",

src/views/artist.vue

@@ -75,6 +75,10 @@
         :showPlayButton="true"
       />
     </div>
+    <div class="mvs" v-if="mvs.length !== 0">
+      <div class="section-title">MVs</div>
+      <MvRow :mvs="mvs" subtitle="publishTime" />
+    </div>
     <div class="eps">
       <div class="section-title">EPs & Singles</div>
       <CoverRow
@@ -89,7 +93,7 @@
 
 <script>
 import { mapMutations, mapActions, mapState } from "vuex";
-import { getArtist, getArtistAlbum } from "@/api/artist";
+import { getArtist, getArtistAlbum, artistMv } from "@/api/artist";
 import { mapTrackPlayableStatus } from "@/utils/common";
 import { playAList } from "@/utils/play";
 import NProgress from "nprogress";
@@ -98,10 +102,11 @@ import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import TrackList from "@/components/TrackList.vue";
 import CoverRow from "@/components/CoverRow.vue";
 import Cover from "@/components/Cover.vue";
+import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Artist",
-  components: { Cover, ButtonTwoTone, TrackList, CoverRow },
+  components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow },
   data() {
     return {
       artist: {
@@ -120,6 +125,7 @@ export default {
       },
       showMorePopTracks: false,
       show: false,
+      mvs: [],
     };
   },
   created() {
@@ -156,6 +162,9 @@ export default {
         this.albumsData = data.hotAlbums;
         this.latestRelease = data.hotAlbums[0];
       });
+      artistMv(id).then((data) => {
+        this.mvs = data.mvs;
+      });
     },
     goToAlbum(id) {
       this.$router.push({
@@ -276,37 +285,4 @@ export default {
     }
   }
 }
-
-.cover-row {
-  &:first-child {
-    margin-top: 0;
-  }
-}
-.covers {
-  display: flex;
-  flex-wrap: wrap;
-  margin: {
-    right: -12px;
-    left: -12px;
-  }
-  .cover {
-    margin: 12px 12px 24px 12px;
-    .text {
-      width: 208px;
-      margin-top: 8px;
-      .name {
-        font-size: 16px;
-        font-weight: 600;
-        color: rgba(0, 0, 0, 0.88);
-        line-height: 20px;
-      }
-      .info {
-        font-size: 12px;
-        color: rgba(0, 0, 0, 0.68);
-        line-height: 18px;
-        // margin-top: 4px;
-      }
-    }
-  }
-}
 </style>

src/views/mv.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="mv">
+    <div class="current-video">
+      <div class="video">
+        <video ref="videoPlayer" class="plyr"></video>
+      </div>
+      <div class="video-info">
+        <div class="title">
+          <router-link :to="'/artist/' + mv.data.artistId">{{
+            mv.data.artistName
+          }}</router-link>
+          -
+          {{ mv.data.name }}
+        </div>
+        <div class="info">
+          {{ mv.data.playCount }} Views · {{ mv.data.publishTime }}
+        </div>
+      </div>
+    </div>
+    <div class="more-video">
+      <div class="section-title">More Videos</div>
+      <MvRow :mvs="simiMvs" />
+    </div>
+  </div>
+</template>
+
+<script>
+import NProgress from "nprogress";
+import { mvDetail, mvUrl, simiMv } from "@/api/mv";
+import Plyr from "plyr";
+import "@/assets/css/plyr.css";
+
+import MvRow from "@/components/MvRow.vue";
+
+export default {
+  name: "mv",
+  components: {
+    MvRow,
+  },
+  data() {
+    return {
+      mv: {
+        url: "",
+        data: {
+          name: "",
+          artistName: "",
+          playCount: "",
+          publishTime: "",
+        },
+      },
+      player: null,
+      simiMvs: [],
+    };
+  },
+  methods: {
+    getData(id) {
+      mvDetail(id).then((data) => {
+        this.mv = data;
+        let requests = data.data.brs.map((br) => {
+          return mvUrl({ id, r: br.br });
+        });
+        Promise.all(requests).then((results) => {
+          let sources = results.map((result) => {
+            return {
+              src: result.data.url,
+              type: "video/mp4",
+              size: result.data.r,
+            };
+          });
+          console.table(sources);
+          this.player.source = {
+            type: "video",
+            title: this.mv.data.name,
+            sources: sources,
+            poster: this.mv.data.cover,
+          };
+          NProgress.done();
+        });
+      });
+      simiMv(id).then((data) => {
+        this.simiMvs = data.mvs;
+      });
+    },
+  },
+  created() {
+    if (this.$route.query.autoplay === "true")
+      this.videoOptions.autoplay = true;
+  },
+  mounted() {
+    let videoOptions = {
+      settings: ["quality"],
+      autoplay: false,
+      quality: {
+        default: 1080,
+        options: [1080, 720, 480, 240],
+      },
+    };
+    this.player = new Plyr(this.$refs.videoPlayer, videoOptions);
+    this.player.volume = this.$store.state.player.volume;
+    this.getData(this.$route.params.id);
+    console.log("网易云你这mv音频码率也太糊了吧🙄");
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.getData(to.params.id);
+    next();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.video {
+  --plyr-color-main: #335eea;
+  --plyr-control-radius: 8px;
+}
+
+.mv {
+  width: 100%;
+}
+.current-video {
+  width: 100%;
+}
+.video {
+  border-radius: 16px;
+  background: transparent;
+  overflow: hidden;
+  max-height: 100vh;
+}
+
+.video-info {
+  margin-top: 12px;
+  .title {
+    font-size: 24px;
+    font-weight: 600;
+  }
+  .artist {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.88);
+    margin-top: 2px;
+    font-weight: 600;
+  }
+  .info {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.68);
+    margin-top: 12px;
+  }
+}
+
+.more-video {
+  margin-top: 48px;
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: rgba(0, 0, 0, 0.88);
+  }
+}
+</style>

src/views/search.vue

@@ -73,6 +73,11 @@
         <TrackList :tracks="tracks" :type="'tracklist'" />
       </div>
 
+      <div class="mvs" v-if="mvs.length > 0">
+        <div class="section-title">MVs</div>
+        <MvRow class="mv-row" :mvs="mvs.slice(0, 5)" />
+      </div>
+
       <div class="playlists" v-if="result.hasOwnProperty('playList')">
         <div class="section-title">Playlists</div>
         <div class="albums-list">
@@ -119,16 +124,19 @@ import { search } from "@/api/others";
 
 import Cover from "@/components/Cover.vue";
 import TrackList from "@/components/TrackList.vue";
+import MvRow from "@/components/MvRow.vue";
 
 export default {
   name: "Search",
   components: {
     Cover,
     TrackList,
+    MvRow,
   },
   data() {
     return {
       result: {},
+      mvs: [],
       type: 1,
       limit: 30,
       offset: 0,
@@ -152,31 +160,28 @@ export default {
       let track = this.tracks.find((t) => t.id === id);
       appendTrackToPlayerList(track, true);
     },
-  },
-  created() {
-    search({ keywords: this.$route.query.keywords, type: 1018 }).then(
-      (data) => {
+    getData(keywords) {
+      search({ keywords: keywords, type: 1018 }).then((data) => {
         this.result = data.result;
         NProgress.done();
-      }
-    );
+      });
+      search({ keywords: keywords, type: 1004 }).then((data) => {
+        this.mvs = data.result.mvs;
+      });
+    },
+  },
+  created() {
+    this.getData(this.$route.query.keywords);
   },
   beforeRouteUpdate(to, from, next) {
+    next();
     NProgress.start();
-    search({ keywords: to.query.keywords, type: 1018 }).then((data) => {
-      this.result = data.result;
-      next();
-      NProgress.done();
-    });
+    this.getData(to.query.keywords);
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.search {
-  width: 78vw;
-}
-
 h1 {
   margin-top: -10px;
   margin-bottom: 0;
@@ -256,4 +261,11 @@ h1 {
   margin-top: 24px;
   font-size: 24px;
 }
+
+.mvs {
+  .mv-row {
+    margin-top: -12px;
+    margin-bottom: -24px;
+  }
+}
 </style>

yarn.lock

@@ -3003,6 +3003,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/cyclist/download/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5275,6 +5280,11 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loadjs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
+  integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -6337,6 +6347,17 @@ pkg-dir@^4.1.0:
   dependencies:
     find-up "^4.0.0"
 
+plyr@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/plyr/-/plyr-3.6.2.tgz#5a55b608acd161262de1cc75ca843aa64355a051"
+  integrity sha512-CjAhRDtzyGqMRte9Phj4FsZFegS9VxW60boOhQsAnZHuiFG3yVBRcodWsGZ79GuXHHelc4DxMHO+z0QggY+9qQ==
+  dependencies:
+    core-js "^3.6.5"
+    custom-event-polyfill "^1.0.7"
+    loadjs "^4.2.0"
+    rangetouch "^2.0.1"
+    url-polyfill "^1.1.8"
+
 pnp-webpack-plugin@^1.6.4:
   version "1.6.4"
   resolved "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz?cache=0&sync_timestamp=1589684269502&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpnp-webpack-plugin%2Fdownload%2Fpnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
@@ -6930,6 +6951,11 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.npm.taobao.org/range-parser/download/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha1-PPNwI9GZ4cJNGlW4SADC8+ZGgDE=
 
+rangetouch@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.1.tgz#c01105110fd3afca2adcb1a580692837d883cb70"
+  integrity sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==
+
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.npm.taobao.org/raw-body/download/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -8353,6 +8379,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-polyfill@^1.1.8:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.10.tgz#fd5bbcf66c9491fa682b0cb6d6a855e1643a9281"
+  integrity sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A==
+
 url-slug@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/url-slug/-/url-slug-2.0.0.tgz#a789d5aed4995c0d95af33377ad1d5c68d4d7027"