Merge branch 'dev'

CHANGELOG.md

@@ -6,6 +6,20 @@ Project versioning adheres to [Semantic Versioning](http://semver.org/).
 Commit convention is based on [Conventional Commits](http://conventionalcommits.org).
 Change log format is based on [Keep a Changelog](http://keepachangelog.com/).
 
+## [1.3.0](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.2...v1.3.0) - 2020-11-01
+
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
+### 修复
+
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题
+
 ## [1.2.2](https://github.com/lyswhut/lx-music-desktop/compare/v1.2.1...v1.2.2) - 2020-10-18
 
 ### 修复

README.md

@@ -100,7 +100,7 @@ npm run pack:linux
 5. 由于使用本项目产生的包括由于本协议或由于使用或无法使用本项目而引起的任何性质的任何直接、间接、特殊、偶然或结果性损害（包括但不限于因商誉损失、停工、计算机故障或故障引起的损害赔偿，或任何及所有其他商业损害或损失）由使用者负责。
 6. 本项目完全免费，且开源发布于 GitHub 面向全世界人用作对技术的学习交流，本项目不对项目内的技术可能存在违反当地法律法规的行为作保证，**禁止在违反当地法律法规的情况下使用本项目**，对于使用者在明知或不知当地法律法规不允许的情况下使用本项目所造成的任何违法违规行为由使用者承担，本项目不承担由此造成的任何直接、间接、特殊、偶然或结果性责任。
 
-若你使用了本项目，将代表你接收以上协议。
+若你使用了本项目，将代表你接受以上协议。
 
 音乐平台不易，请尊重版权，支持正版。<br>
 若对此有疑问请 mail to: lyswhut+qq.com (请将`+`替换成`@`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lx-music-desktop",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "一个免费的音乐下载助手",
   "main": "./dist/electron/main.js",
   "productName": "lx-music-desktop",
@@ -176,20 +176,20 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.3.0",
     "del": "^6.0.0",
-    "electron": "^9.3.2",
+    "electron": "^9.3.3",
     "electron-builder": "^22.9.1",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^7.11.0",
+    "eslint": "^7.12.1",
     "eslint-config-standard": "^14.1.1",
     "eslint-formatter-friendly": "^7.0.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-html": "^6.1.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "file-loader": "^6.1.1",
+    "eslint-plugin-standard": "^4.0.2",
+    "file-loader": "^6.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^4.5.0",
     "less": "^3.12.2",
@@ -206,16 +206,16 @@
     "rimraf": "^3.0.2",
     "spinnies": "^0.5.1",
     "stylus": "^0.54.8",
-    "stylus-loader": "^4.1.1",
+    "stylus-loader": "^4.2.0",
     "terser-webpack-plugin": "^4.2.3",
     "url-loader": "^4.1.1",
-    "vue-loader": "^15.9.3",
+    "vue-loader": "^15.9.4",
     "vue-template-compiler": "^2.6.12",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.2.0"
+    "webpack-merge": "^5.3.0"
   },
   "dependencies": {
     "crypto-js": "^4.0.0",
@@ -224,15 +224,15 @@
     "electron-store": "^6.0.1",
     "electron-updater": "^4.3.5",
     "iconv-lite": "^0.6.2",
-    "image-size": "^0.9.1",
+    "image-size": "^0.9.3",
     "js-htmlencode": "^0.3.0",
     "lrc-file-parser": "^1.0.5",
     "needle": "^2.5.2",
-    "node-id3": "^0.1.19",
+    "node-id3": "^0.2.1",
     "request": "^2.88.2",
     "vue": "^2.6.12",
-    "vue-i18n": "^8.22.0",
-    "vue-router": "^3.4.7",
+    "vue-i18n": "^8.22.1",
+    "vue-router": "^3.4.8",
     "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   }

publish/changeLog.md

@@ -1,3 +1,11 @@
+### 新增
+
+- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论）
+
+### 优化
+
+- 修改播放详情页的歌曲图片的显示效果
+
 ### 修复
 
-- 降级 Electron 到 9.x.x 版本修复 Linux 版桌面歌词窗口变白的问题
+- 修复小芸源音乐搜索结果最多只有20条搜索结果的问题

src/main/utils/flacMeta.js

@@ -72,9 +72,9 @@ module.exports = (filePath, meta) => {
       if (respones.statusCode !== 200 && respones.statusCode != 206) return writeMeta(filePath, meta)
       respones
         .pipe(fs.createWriteStream(picPath))
-        .on('finish', () => {
+        .on('finish', async() => {
           if (respones.complete) {
-            writeMeta(filePath, meta, picPath)
+            await writeMeta(filePath, meta, picPath)
           } else {
             writeMeta(filePath, meta)
           }

src/renderer/assets/styles/variables.less

@@ -23,6 +23,7 @@
 @color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
 // @color-theme_2-line: transparent;
 @color-theme_2-line: lighten(@color-theme, 35%);
+@color-reply-floor: fadeout(@color-theme, 95%);
 @color-theme-sidebar: @color-theme;
 @color-btn: lighten(@color-theme, 5%);
 @color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
@@ -91,6 +92,7 @@
 @color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
 // @color-green-theme_2-line: transparent;
 @color-green-theme_2-line: lighten(@color-green-theme, 45%);
+@color-green-reply-floor: fadeout(@color-green-theme, 95%);
 @color-green-theme-sidebar: @color-green-theme;
 @color-green-btn: lighten(@color-green-theme, 5%);
 @color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
@@ -148,6 +150,7 @@
 @color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
 // @color-yellow-theme_2-line: transparent;
 @color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
+@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
 @color-yellow-theme-sidebar: @color-yellow-theme;
 @color-yellow-btn: darken(@color-yellow-theme, 5%);
 @color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 60%);
@@ -204,6 +207,7 @@
 @color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
 // @color-orange-theme_2-line: transparent;
 @color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
+@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
 @color-orange-theme-sidebar: @color-orange-theme;
 @color-orange-btn: lighten(@color-orange-theme, 5%);
 @color-orange-btn-background: fadeout(lighten(@color-orange-theme, 25%), 60%);
@@ -260,6 +264,7 @@
 @color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
 // @color-blue-theme_2-line: transparent;
 @color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
+@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
 @color-blue-theme-sidebar: @color-blue-theme;
 @color-blue-btn: lighten(@color-blue-theme, 5%);
 @color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 50%);
@@ -316,6 +321,7 @@
 @color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
 // @color-red-theme_2-line: transparent;
 @color-red-theme_2-line: lighten(@color-red-theme, 42%);
+@color-red-reply-floor: fadeout(@color-red-theme, 95%);
 @color-red-theme-sidebar: @color-red-theme;
 @color-red-btn: lighten(@color-red-theme, 5%);
 @color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
@@ -374,6 +380,7 @@
 @color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
 // @color-pink-theme_2-line: transparent;
 @color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
+@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
 @color-pink-theme-sidebar: @color-pink-theme;
 @color-pink-btn: darken(@color-pink-theme, 3%);
 @color-pink-btn-background: fadeout(lighten(@color-pink-theme, 20%), 50%);
@@ -430,6 +437,7 @@
 @color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
 // @color-purple-theme_2-line: transparent;
 @color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
+@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
 @color-purple-theme-sidebar: @color-purple-theme;
 @color-purple-btn: lighten(@color-purple-theme, 5%);
 @color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
@@ -486,6 +494,7 @@
 @color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
 // @color-grey-theme_2-line: transparent;
 @color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
+@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
 @color-grey-theme-sidebar: @color-grey-theme;
 @color-grey-btn: lighten(@color-grey-theme, 5%);
 @color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
@@ -543,6 +552,7 @@
 @color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
 // @color-ming-theme_2-line: transparent;
 @color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
+@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
 @color-ming-theme-sidebar: @color-ming-theme;
 @color-ming-btn: lighten(@color-ming-theme, 5%);
 @color-ming-btn-background: fadeout(lighten(@color-ming-theme, 35%), 75%);
@@ -602,6 +612,7 @@
 @color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
 // @color-blue2-theme_2-line: transparent;
 @color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
+@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
 @color-blue2-theme-sidebar: @color-blue2-theme;
 @color-blue2-btn: lighten(@color-blue2-theme, 5%);
 @color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@@ -651,14 +662,15 @@
 @color-mid_autumn-theme-font: rgba(246, 233, 255, 0.9);
 @color-mid_autumn-theme-font-label: fadeout(lighten(@color-mid_autumn-theme, 20%), 20%);
 @color-mid_autumn-theme_2: rgba(255, 255, 255, .9);
-@color-mid_autumn-theme_2-background_1: #e7e7e9;
+@color-mid_autumn-theme_2-background_1: #ececec;
 @color-mid_autumn-theme_2-background_2: fadeout(@color-mid_autumn-theme_2-background_1, 2%);
 @color-mid_autumn-theme_2-hover: fadeout(lighten(@color-mid_autumn-theme, 15%), 80%);
 @color-mid_autumn-theme_2-active: fadeout(lighten(@color-mid_autumn-theme, 15%), 70%);
 @color-mid_autumn-theme_2-font: darken(desaturate(@color-mid_autumn-theme_2, 70%), 90%);
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: lighten(@color-mid_autumn-theme, 61%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: lighten(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -716,6 +728,7 @@
 @color-mid_autumn-theme_2-font-label: desaturate(lighten(@color-mid_autumn-theme, 30%), 45%);
 // @color-mid_autumn-theme_2-line: transparent;
 @color-mid_autumn-theme_2-line: darken(@color-mid_autumn-theme, 18%);
+@color-mid_autumn-reply-floor: fadeout(@color-mid_autumn-theme, 95%);
 @color-mid_autumn-theme-sidebar: rgba(255, 255, 255, 0);
 @color-mid_autumn-btn: darken(@color-mid_autumn-theme, 10%);
 @color-mid_autumn-btn-background: fadeout(lighten(@color-mid_autumn-theme, 35%), 70%);
@@ -772,6 +785,7 @@
 @color-naruto-theme_2-font-label: desaturate(lighten(@color-naruto-theme, 10%), 45%);
 // @color-naruto-theme_2-line: transparent;
 @color-naruto-theme_2-line: fadeout(lighten(@color-naruto-theme, 36%), 70%);
+@color-naruto-reply-floor: fadeout(lighten(@color-naruto-theme, 12%), 90%);
 @color-naruto-theme-sidebar: rgba(255, 255, 255, .3);
 @color-naruto-btn: lighten(@color-naruto-theme, 2%);
 @color-naruto-btn-background: fadeout(lighten(@color-naruto-theme, 35%), 70%);
@@ -828,6 +842,7 @@
 @color-happy_new_year-theme_2-font-label: desaturate(darken(@color-happy_new_year-theme, 5%), 50%);
 // @color-happy_new_year-theme_2-line: transparent;
 @color-happy_new_year-theme_2-line: fadeout(lighten(@color-happy_new_year-theme, 16%), 70%);
+@color-happy_new_year-reply-floor: fadeout(lighten(@color-happy_new_year-theme, 12%), 85%);
 @color-happy_new_year-theme-sidebar: rgba(119, 37, 18, 0.1);
 @color-happy_new_year-btn: desaturate(@color-happy_new_year-theme, 10%);
 @color-happy_new_year-btn-background: fadeout(lighten(@color-happy_new_year-theme, 15%), 60%);

src/renderer/components/core/Icons.vue

@@ -75,8 +75,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       // 0 0 512 512
       path(d='M511.563,434.259c-1.728-142.329-124.42-258.242-277.087-263.419V95.999c0-17.645-14.342-31.999-31.974-31.999 c-7.931,0-15.591,3.042-21.524,8.562c0,0-134.828,124.829-173.609,163.755C2.623,241.109,0,248.088,0,255.994 c0,7.906,2.623,14.885,7.369,19.687c38.781,38.915,173.609,163.745,173.609,163.745c5.933,5.521,13.593,8.562,21.524,8.562 c17.631,0,31.974-14.354,31.974-31.999v-74.591c153.479,2.156,255.792,50.603,255.792,95.924c0,5.896,4.767,10.666,10.658,10.666 c0.167,0.021,0.333,0.01,0.416,0c5.891,0,10.658-4.771,10.658-10.666C512,436.259,511.854,435.228,511.563,434.259z')
     g#icon-refresh(fill='currentColor')
-      // 0 0 512 512
-      path(d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
+      // 0 0 24 24
+      path(d='M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z')
     g#icon-eraser(fill='currentColor')
       // 0 0 512 512
       path(d='M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z')
@@ -206,5 +206,16 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
       path(d='M256,170s-62.469-76.808-141-24C44.762,222.824,84.909,325.08,256,415c21.339-8.361,44-17,44-17,19-6.392,28.155,20.742,16,26-27.589,11.935,5.974-4.141-60,28C-35.524,313.85,43.993,149.031,95,117c86.8-65.89,162,10,162,10s58.158-60.523,140-23c104.032,58.528,64,161.9,45,196-9.152,15.154-39.559-4.159-32-16,20.34-37.888,45.522-107.349-25-150C314.919,103.92,256,170,256,170Z')
       path(d='M383,368c-8.1.01-24.77-.155-40,0-15.713.16-15.282,34.964,0,35,15.1,0.035,40,0,40,0s-0.068,42.8,0,48c0.208,15.961,32.261,15.791,32-1-0.072-4.649,0-47,0-47s38.008-.031,43,0c15.732,0.046,14.947-33.98-1-34-4.884.093-42,0-42,0s-0.053-28.341,0-46c0.046-15.189-32.028-15.512-32,0C383.027,337.74,382.782,365.139,383,368Z')
 
+    g#icon-thumbs-up(fill='currentColor')
+      // 0 0 512 512
+      path(d='M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z')
+
+    g#icon-close(fill='currentColor')
+      // 0 0 24 24
+      path(d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z')
+
+    g#icon-comment(fill='currentColor')
+      // 0 0 24 24
+      path(d='M16 11H8V9H16V11M22 4V16C22 17.11 21.11 18 20 18H13.9L10.2 21.71C10 21.9 9.75 22 9.5 22H9C8.45 22 8 21.55 8 21V18H4C2.9 18 2 17.11 2 16V4C2 2.89 2.9 2 4 2H20C21.11 2 22 2.9 22 4M20 4H4V16H10V19.08L13.08 16H20V4')
 </template>
 

src/renderer/components/core/Player.vue

@@ -17,9 +17,9 @@ div(:class="$style.player")
               div(:class="$style.volumeMask" @mousedown="handleVolumeMsDown" ref="dom_volumeMask" :tips="`${$t('core.player.volume')}${parseInt(volume * 100)}%`")
             div(:class="$style.titleBtn" @click='toggleDesktopLyric' @contextmenu="handleToggleLockDesktopLyric" :tips="toggleDesktopLyricBtnTitle")
               svg(v-if="setting.desktopLyric.enable" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
-                use(xlink:href='#icon-desktop-lyric-off')
-              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
                 use(xlink:href='#icon-desktop-lyric-on')
+              svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 512 512' space='preserve')
+                use(xlink:href='#icon-desktop-lyric-off')
             div(:class="$style.titleBtn" @click='toggleNextPlayMode' :tips="nextTogglePlayName")
               svg(v-if="setting.player.togglePlayMethod == 'listLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='80%' viewBox='0 0 24 24' space='preserve')
                 use(xlink:href='#icon-list-loop')
@@ -63,10 +63,12 @@ div(:class="$style.player")
   //- transition(enter-active-class="animated lightSpeedIn"
   transition(enter-active-class="animated lightSpeedIn"
       leave-active-class="animated slideOutDown")
-    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="musicInfo"
+    core-player-detail(v-if="isShowPlayerDetail" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong"
                       :lyric="lyric" :list="list" :listId="listId"
                       :playInfo="{ nowPlayTimeStr, maxPlayTimeStr, progress, nowPlayTime, status }"
-                      :isPlay="isPlay" @action="handlePlayDetailAction")
+                      :isPlay="isPlay" @action="handlePlayDetailAction"
+                      :nextTogglePlayName="nextTogglePlayName"
+                      @toggle-next-play-mode="toggleNextPlayMode" @add-music-to="addMusicTo")
 
   material-list-add-modal(:show="isShowAddMusicTo" :musicInfo="listId == 'download' ? targetSong.musicInfo : targetSong" @close="isShowAddMusicTo = false")
   svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' style="display: none;")
@@ -767,6 +769,7 @@ export default {
       })
     },
     showPlayerDetail() {
+      if (!this.targetSong) return
       this.visiblePlayerDetail(true)
     },
     handleTransitionEnd(e) {