diff --git a/package.json b/package.json index bd609886..d0a1a5da 100644 --- a/package.json +++ b/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", diff --git a/publish/changeLog.md b/publish/changeLog.md index dffcaabf..df42ba36 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -1,3 +1,7 @@ +### 新增 + +- 播放详情页新增歌曲评论加载显示（某些平台暂不支持显示子评论） + ### 优化 - 修改播放详情页的歌曲图片的显示效果 diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index ba2a8e4f..1957fa74 100644 --- a/src/renderer/assets/styles/variables.less +++ b/src/renderer/assets/styles/variables.less @@ -92,7 +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: 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%); @@ -150,7 +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: 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%); @@ -207,7 +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: 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%); @@ -264,7 +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: 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%); @@ -321,7 +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: 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%); @@ -380,7 +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: 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%); @@ -437,7 +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: 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%); @@ -494,7 +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: 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%); @@ -552,7 +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: 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%); @@ -612,7 +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: 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%); @@ -662,7 +662,7 @@ @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%); @@ -670,7 +670,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: lighten(@color-mid_autumn-theme, 61%); -@color-mid_autumn-reply-floor: 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%); @@ -728,7 +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: 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%); @@ -785,7 +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, 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%); @@ -842,7 +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, 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%); diff --git a/src/renderer/components/core/Icons.vue b/src/renderer/components/core/Icons.vue index e765f0c2..cef053fd 100644 --- a/src/renderer/components/core/Icons.vue +++ b/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') @@ -209,5 +209,13 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19 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') diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue index 4cdb2237..b9aa6405 100644 --- a/src/renderer/components/core/Player.vue +++ b/src/renderer/components/core/Player.vue @@ -66,7 +66,9 @@ div(:class="$style.player") 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;") diff --git a/src/renderer/components/core/PlayerDetail.vue b/src/renderer/components/core/PlayerDetail.vue index d697ae8e..7dea972a 100644 --- a/src/renderer/components/core/PlayerDetail.vue +++ b/src/renderer/components/core/PlayerDetail.vue @@ -21,7 +21,7 @@ //- div(:class="$style.info") div(:class="$style.info") img(:class="$style.img" :src="musicInfo.img" v-if="musicInfo.img") - div(:class="$style.description" @click="handleShowComment") + div(:class="$style.description") p {{$t('core.player.name')}}{{musicInfo.name}} p {{$t('core.player.singer')}}{{musicInfo.singer}} p(v-if="musicInfo.album") {{$t('core.player.album')}}{{musicInfo.album}} @@ -32,21 +32,28 @@ p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}} div(:class="$style.lyricSpace") - div(:class="$style.comment") - div(:class="$style.commentHeader" @click="isShowComment = false") - h3 {{title}} - div.scroll(:class="$style.commentMain" ref="dom_comment") - div(v-if="comment.page == 1") - h2(:class="$style.commentType") 热门评论 - material-comment-floor(v-if="comment.hotComments.length" :class="$style.reply_floor" :comments="comment.hotComments") - div - h2(:class="$style.commentType") 最新评论 - material-comment-floor(v-if="comment.comments.length" :class="$style.reply_floor" :comments="comment.comments") - div(:class="$style.pagination") - material-pagination(:count="comment.total" :btnLength="5" :limit="comment.limit" :page="comment.page" @btn-click="handleToggleCommentPage") + material-music-comment(:class="$style.comment" :titleFormat="this.setting.download.fileName" :musicInfo="musicInfo" v-model="isShowComment") div(:class="$style.footer") - div(:class="$style.left") + div(:class="$style.footerLeft") + div(:class="$style.footerLeftControlBtns") + div(:class="[$style.footerLeftControlBtn, isShowComment ? $style.active : null]" @click="isShowComment = !isShowComment" :tips="$t('core.player.comment_show')") + svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='95%' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-comment') + div(:class="$style.footerLeftControlBtn" @click="$emit('toggle-next-play-mode')" :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' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-list-loop') + svg(v-else-if="setting.player.togglePlayMethod == 'random'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-list-random') + svg(v-else-if="setting.player.togglePlayMethod == 'list'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-list-order') + svg(v-else-if="setting.player.togglePlayMethod == 'singleLoop'" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='110%' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-single-loop') + svg(v-else version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='120%' viewBox='0 0 24 24' space='preserve') + use(xlink:href='#icon-single') + div(:class="$style.footerLeftControlBtn" @click="$emit('add-music-to', musicInfo)" :tips="$t('core.player.add_music_to')") + svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' space='preserve') + use(xlink:href='#icon-add-2') div(:class="$style.progressContainer") div(:class="$style.progressContent") div(:class="$style.progress") @@ -80,7 +87,6 @@ import { mapGetters, mapMutations } from 'vuex' import { base as eventBaseName } from '../../event/names' import { scrollTo } from '../../utils' -import music from '../../utils/music' let cancelScrollFn = null @@ -137,6 +143,7 @@ export default { type: Boolean, default: false, }, + nextTogglePlayName: String, }, watch: { // 'musicInfo.img': { @@ -219,47 +226,6 @@ export default { lyricLines: [], isSetedLines: false, isShowComment: false, - comment: { - musicInfo: { - name: '', - singer: '', - }, - page: 1, - total: 10, - maxPage: 1, - limit: 20, - comments: [ - // { - // text: ['123123hhh'], - // userName: 'dsads', - // avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', - // time: '2020-10-22 22:14:17', - // timeStr: '2020-10-22 22:14:17', - // likedCount: 100, - // reply: [], - // }, - ], - hotComments: [ - // { - // text: ['123123hhh'], - // userName: 'dsads', - // avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', - // time: '2020-10-22 22:14:17', - // timeStr: '2020-10-22 22:14:17', - // likedCount: 100, - // reply: [ - // { - // text: ['123123hhh'], - // userName: 'dsads', - // avatar: 'http://img4.kuwo.cn/star/userhead/39/52/1602393411654_512039239s.jpg', - // time: '2020-10-22 22:14:17', - // timeStr: '2020-10-22 22:14:17', - // likedCount: 100, - // }, - // ], - // }, - ], - }, } }, mounted() { @@ -279,11 +245,6 @@ export default { computed: { ...mapGetters(['setting']), ...mapGetters('player', ['isShowPlayerDetail']), - title() { - return this.comment.musicInfo.name - ? this.setting.download.fileName.replace('歌名', this.comment.musicInfo.name).replace('歌手', this.comment.musicInfo.singer) - : '^-^' - }, }, methods: { ...mapMutations('player', [ @@ -385,41 +346,6 @@ export default { close() { window.eventHub.$emit(eventBaseName.close) }, - handleShowComment() { - if (!this.musicInfo.songmid || !music[this.musicInfo.source].comment) return - if (this.musicInfo.songmid != this.comment.musicInfo.songmid) { - this.comment.page = 1 - this.comment.total = 0 - this.comment.maxPage = 1 - } - this.isShowComment = true - this.comment.musicInfo = this.musicInfo - music[this.comment.musicInfo.source].comment.getComment(this.comment.musicInfo, this.comment.page, this.comment.limit).then(comment => { - this.comment.comments = comment.comments - this.comment.total = comment.total - this.comment.maxPage = comment.maxPage - this.$nextTick(() => { - scrollTo(this.$refs.dom_comment, 0, 300, () => { - this.comment.comments = comment.comments - }) - }) - }) - music[this.comment.musicInfo.source].comment.getHotComment(this.comment.musicInfo, this.comment.page, this.comment.limit).then(hotComment => { - this.comment.hotComments = hotComment.comments - }) - }, - handleToggleCommentPage(page) { - music[this.comment.musicInfo.source].comment.getComment(this.comment.musicInfo, page, this.comment.limit).then(comment => { - this.comment.page = page - this.comment.total = comment.total - this.comment.maxPage = comment.maxPage - this.$nextTick(() => { - scrollTo(this.$refs.dom_comment, 0, 300, () => { - this.comment.comments = comment.comments - }) - }) - }) - }, }, } @@ -660,36 +586,8 @@ export default { .comment { flex: 0 0 0; - display: flex; - flex-flow: column nowrap; - transition: @transition-theme; - transition-property: flex-basis opacity; - overflow: hidden; opacity: 0; - -} -.commentHeader { - flex: none; - padding-bottom: 10px; - // border-bottom: 1px solid #eee; - h3 { - font-size: 14px; - } -} -.commentMain { - flex: auto; - padding-left: 15px; - padding-right: 10px; - background-color: @color-reply-floor; - border-radius: 4px; -} -.commentType { - padding: 10px 0; - font-size: 13px; - color: @color-theme_2-font; -} -.pagination { - padding: 10px 0; + margin-left: 10px; } .footer { @@ -698,7 +596,39 @@ export default { display: flex; align-items: center; } +.footerLeft { + flex: auto; + display: flex; + flex-flow: column nowrap; + padding: 13px; + overflow: hidden; +} +.footerLeftControlBtns { + color: @color-theme_2-font; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; +} +.footerLeftControlBtn { + width: 18px; + height: 18px; + opacity: .5; + cursor: pointer; + transition: opacity @transition-theme; + &:hover { + opacity: .9; + } + + +.footerLeftControlBtn { + margin-left: 6px; + } + + &.active { + color: @color-theme; + opacity: .8; + } +} .progress-container { width: 100%; position: relative; @@ -757,6 +687,7 @@ export default { } .time-label { width: 100%; + height: 18px; display: flex; justify-content: space-between; span { @@ -806,6 +737,9 @@ each(@themes, { border-left-color: ~'@{color-@{value}-theme}'; background-color: ~'@{color-@{value}-theme_2-background_1}'; } + .leftControlBtns { + color: ~'@{color-@{value}-theme_2-font}'; + } .right { &:before { background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%); diff --git a/src/renderer/components/material/CommentFloor.vue b/src/renderer/components/material/CommentFloor.vue index 1c6cf26c..8abfbf31 100644 --- a/src/renderer/components/material/CommentFloor.vue +++ b/src/renderer/components/material/CommentFloor.vue @@ -85,6 +85,7 @@ export default { flex-flow: row nowrap; align-items: flex-end; min-width: 0; + color: @color-theme_2-font-label; } .name { flex: 0 1 auto; @@ -93,14 +94,12 @@ export default { } .time { flex: none; - color: @color-theme_2-font-label; font-size: 11px; margin-left: 5px; } .likes { flex: 1 0 auto; margin-left: 10px; - color: @color-theme_2-font-label; font-size: 11px; align-self: flex-end; text-align: right; @@ -138,4 +137,25 @@ export default { background-color: @color-reply-floor; } + +each(@themes, { + :global(#container.@{value}) { + .listItem { + border-bottom-color: ~'@{color-@{value}-theme_2-active}'; + } + .content { + color: ~'@{color-@{value}-theme_2-font}'; + } + .info { + color: ~'@{color-@{value}-theme_2-font-label}'; + } + .likesIcon { + color: ~'@{color-@{value}-theme-active}'; + } + .reply_floor { + background-color: ~'@{color-@{value}-reply-floor}'; + } + } +}) + diff --git a/src/renderer/components/material/MusicComment.vue b/src/renderer/components/material/MusicComment.vue new file mode 100644 index 00000000..b45e66a6 --- /dev/null +++ b/src/renderer/components/material/MusicComment.vue @@ -0,0 +1,268 @@ + + + + + diff --git a/src/renderer/lang/en-us/base.json b/src/renderer/lang/en-us/base.json new file mode 100644 index 00000000..09199968 --- /dev/null +++ b/src/renderer/lang/en-us/base.json @@ -0,0 +1,5 @@ +{ + "date_format_second": "{num} seconds ago", + "date_format_minute": "{num} minutes ago", + "date_format_hour": "{num} hours ago" +} diff --git a/src/renderer/lang/en-us/core/player.json b/src/renderer/lang/en-us/core/player.json index 64cc68c1..2de3604c 100644 --- a/src/renderer/lang/en-us/core/player.json +++ b/src/renderer/lang/en-us/core/player.json @@ -27,5 +27,16 @@ "play_toggle_mode_random": "List Random", "play_toggle_mode_list": "Play in order", "play_toggle_mode_single_loop": "Single Loop", - "play_toggle_mode_off": "Disable" + "play_toggle_mode_off": "Disable", + + "comment_show": "Show song comments", + "comment_hot_loading": "Hot comments are loading", + "comment_new_loading": "Latest comments are loading", + "comment_hot_load_error": "Hot comments failed to load, click to try to reload", + "comment_new_load_error": "The latest comment failed to load, click to try to reload", + "comment_refresh": "Refresh comments", + "comment_no_content": "No comments yet", + "comment_hot_title": "Hot Comment", + "comment_new_title": "Latest comment", + "comment_title": "{name} comment" } diff --git a/src/renderer/lang/zh-cn/base.json b/src/renderer/lang/zh-cn/base.json new file mode 100644 index 00000000..6a12f4bf --- /dev/null +++ b/src/renderer/lang/zh-cn/base.json @@ -0,0 +1,5 @@ +{ + "date_format_second": "{num}秒前", + "date_format_minute": "{num}分钟前", + "date_format_hour": "{num}小时前" +} diff --git a/src/renderer/lang/zh-cn/core/player.json b/src/renderer/lang/zh-cn/core/player.json index 31be9f68..bcdf2b7e 100644 --- a/src/renderer/lang/zh-cn/core/player.json +++ b/src/renderer/lang/zh-cn/core/player.json @@ -27,5 +27,16 @@ "play_toggle_mode_random": "列表随机", "play_toggle_mode_list": "顺序播放", "play_toggle_mode_single_loop": "单曲循环", - "play_toggle_mode_off": "禁用" + "play_toggle_mode_off": "禁用", + + "comment_show": "显示歌曲评论", + "comment_hot_loading": "热门评论加载中", + "comment_new_loading": "最新评论加载中", + "comment_hot_load_error": "热门评论加载失败，点击尝试重新加载", + "comment_new_load_error": "最新评论加载失败，点击尝试重新加载", + "comment_refresh": "刷新评论", + "comment_no_content": "暂无评论", + "comment_hot_title": "热门评论", + "comment_new_title": "最新评论", + "comment_title": "{name} 的评论" } diff --git a/src/renderer/lang/zh-tw/base.json b/src/renderer/lang/zh-tw/base.json new file mode 100644 index 00000000..8c323e89 --- /dev/null +++ b/src/renderer/lang/zh-tw/base.json @@ -0,0 +1,5 @@ +{ + "date_format_second": "{num}秒前", + "date_format_minute": "{num}分鐘前", + "date_format_hour": "{num}小時前" +} diff --git a/src/renderer/lang/zh-tw/core/player.json b/src/renderer/lang/zh-tw/core/player.json index c727ccb0..05eaa62c 100644 --- a/src/renderer/lang/zh-tw/core/player.json +++ b/src/renderer/lang/zh-tw/core/player.json @@ -27,5 +27,16 @@ "play_toggle_mode_random": "列表隨機", "play_toggle_mode_list": "順序播放", "play_toggle_mode_single_loop": "單曲循環", - "play_toggle_mode_off": "禁用" + "play_toggle_mode_off": "禁用", + + "comment_show": "顯示歌曲評論", + "comment_hot_loading": "熱門評論加載中", + "comment_new_loading": "最新評論加載中", + "comment_hot_load_error": "熱門評論加載失敗，點擊嘗試重新加載", + "comment_new_load_error": "最新評論加載失敗，點擊嘗試重新加載", + "comment_refresh": "刷新評論", + "comment_no_content": "暫無評論", + "comment_hot_title": "熱門評論", + "comment_new_title": "最新評論", + "comment_title": "{name} 的評論" } diff --git a/src/renderer/utils/index.js b/src/renderer/utils/index.js index ad84275e..2c73e0fd 100644 --- a/src/renderer/utils/index.js +++ b/src/renderer/utils/index.js @@ -43,11 +43,11 @@ export const dateFormat = (date = new Date(), format = 'YYYY-MM-DD hh:mm:ss') => export const dateFormat2 = time => { let differ = parseInt((Date.now() - time) / 1000) if (differ < 60) { - return differ + '秒前' + return window.i18n.t('base.date_format_second', { num: differ }) } else if (differ < 3600) { - return parseInt(differ / 60) + '分钟前' + return window.i18n.t('base.date_format_minute', { num: parseInt(differ / 60) }) } else if (differ < 86400) { - return parseInt(differ / 3600) + '小时前' + return window.i18n.t('base.date_format_hour', { num: parseInt(differ / 3600) }) } else { return dateFormat(time) } diff --git a/src/renderer/utils/music/kg/comment.js b/src/renderer/utils/music/kg/comment.js index 44f2fb8d..71515fc1 100644 --- a/src/renderer/utils/music/kg/comment.js +++ b/src/renderer/utils/music/kg/comment.js @@ -15,10 +15,10 @@ export default { const { body, statusCode } = await _requestObj.promise // console.log(body) if (statusCode != 200 || body.err_code !== 0) throw new Error('获取评论失败') - return { source: 'kg', comments: this.filterComment(body.list), total: body.count, page, limit, maxPage: Math.ceil(body.count / limit) || 1 } + return { source: 'kg', comments: this.filterComment(body.list || []), total: body.count, page, limit, maxPage: Math.ceil(body.count / limit) || 1 } }, async getHotComment({ hash, songmid }, page = 1, limit = 100) { - console.log(songmid) + // console.log(songmid) if (this._requestObj2) this._requestObj2.cancelHttp() const _requestObj2 = httpFetch(`http://comment.service.kugou.com/index.php?r=commentsv2/getCommentWithLike&code=fc4be23b4e972707f36b8a828a93ba8a&extdata=${hash}&p=${page}&pagesize=${limit}&ver=1.01&clientver=8373&appid=1001&kugouid=687373022`, { @@ -29,7 +29,7 @@ export default { const { body, statusCode } = await _requestObj2.promise // console.log(body) if (statusCode != 200 || body.err_code !== 0) throw new Error('获取热门评论失败') - return { source: 'kg', comments: this.filterComment(body.weightList) } + return { source: 'kg', comments: this.filterComment(body.weightList || []) } }, async getReplyComment({ songmid }, replyId, page = 1, limit = 100) { if (this._requestObj2) this._requestObj2.cancelHttp() @@ -42,7 +42,7 @@ export default { const { body, statusCode } = await _requestObj2.promise // console.log(body) if (statusCode != 200 || body.err_code !== 0) throw new Error('获取回复评论失败') - return { source: 'kg', comments: this.filterComment(body.list) } + return { source: 'kg', comments: this.filterComment(body.list || []) } }, filterComment(rawList) { return rawList.map(item => { diff --git a/src/renderer/utils/music/tx/comment.js b/src/renderer/utils/music/tx/comment.js index 31874017..23c3a4e7 100644 --- a/src/renderer/utils/music/tx/comment.js +++ b/src/renderer/utils/music/tx/comment.js @@ -161,7 +161,7 @@ export default { return { id: item.subcommentid, rootId: item.rootcommentid, - text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).split('\n') : [], + text: item.rootcommentcontent ? this.replaceEmoji(item.rootcommentcontent).replace(/\\\n/g, '\n').split('\n') : [], time, timeStr: time ? dateFormat2(time) : null, userName: item.rootcommentnick ? item.rootcommentnick.substring(1) : '', @@ -172,7 +172,7 @@ export default { let index = c.subcommentid.lastIndexOf('_') return { id: c.subcommentid, - text: this.replaceEmoji(c.subcommentcontent).split('\n'), + text: this.replaceEmoji(c.subcommentcontent).replace(/\\\n/g, '\n').split('\n'), time: parseInt(c.subcommentid.substring(index + 1) + '000'), timeStr: dateFormat2(parseInt(c.subcommentid.substring(index + 1) + '000')), userName: c.replynick.substring(1),