优化播放详情页背景显示

publish/changeLog.md

@@ -4,6 +4,10 @@
 - 新增歌词偏移设置，可以在播放详情页歌词右键菜单中使用
 - 新增设置-播放设置-播放错误时自动切换歌曲设置，默认开启（原来的行为），若你不想在遇到音频加载失败、url获取失败等错误时自动切歌可以关闭此设置
 
+### 优化
+
+- 优化播放详情页背景显示，现在有背景图片的主题可以在播放详情页显示它的图片了
+
 ### 修复
 
 - 修复Linux无法全屏的问题

src/renderer/assets/styles/variables.less

@@ -683,7 +683,7 @@
 @color-black-theme-active: fadeout(lighten(@color-black-theme, 8%), 30%);
 @color-black-theme-font: lighten(@color-black-theme, 55%);
 @color-black-theme-font-label: lighten(@color-black-theme, 35%);
-@color-black-theme_2: rgba(19, 19, 19, 0.82);
+@color-black-theme_2: rgba(19, 19, 19, 0.93);
 @color-black-theme_2-background_1: #080808;
 @color-black-theme_2-background_2: #1f1f1f;
 @color-black-theme_2-hover: fadeout(lighten(@color-black-theme, 10%), 80%);
@@ -710,7 +710,7 @@
 @color-black-scrollbar-thumb-hover: fadeout(lighten(@color-black-theme, 10%), 35%);
 @color-black-player-pic-c1: fadeout(@color-black-theme_2, 50%);
 @color-black-player-pic-c2: lighten(@color-black-theme_2, 30%);
-@color-black-player-progress: lighten(@color-black-theme_2, 6%);
+@color-black-player-progress: fadeout(lighten(@color-black-theme, 20%), 80%);
 @color-black-player-progress-bar1: lighten(@color-black-theme_2, 12%);
 @color-black-player-progress-bar2: fadeout(lighten(@color-black-theme, 12%), 20%);
 @color-black-player-status-text: darken(@color-black-theme_2-font, 20%);
@@ -770,7 +770,7 @@
 @color-mid_autumn-scrollbar-thumb-hover: fadeout(lighten(@color-mid_autumn-theme, 10%), 40%);
 @color-mid_autumn-player-pic-c1: fadeout(@color-mid_autumn-theme_2, 50%);
 @color-mid_autumn-player-pic-c2: darken(@color-mid_autumn-theme_2, 30%);
-@color-mid_autumn-player-progress: darken(@color-mid_autumn-theme_2, 10%);
+@color-mid_autumn-player-progress: fadeout(lighten(@color-mid_autumn-theme, 20%), 82%);
 @color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
 @color-mid_autumn-player-progress-bar2: fadeout(lighten(@color-mid_autumn-theme, 12%), 20%);
 @color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
@@ -889,7 +889,7 @@
 @color-naruto-scrollbar-thumb-hover: fadeout(lighten(@color-naruto-theme, 10%), 35%);
 @color-naruto-player-pic-c1: fadeout(@color-naruto-theme_2, 50%);
 @color-naruto-player-pic-c2: darken(@color-naruto-theme_2, 30%);
-@color-naruto-player-progress: darken(@color-naruto-theme_2, 10%);
+@color-naruto-player-progress: fadeout(lighten(@color-naruto-theme, 20%), 70%);
 @color-naruto-player-progress-bar1: darken(@color-naruto-theme_2, 12%);
 @color-naruto-player-progress-bar2: fadeout(lighten(@color-naruto-theme, 12%), 20%);
 @color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 32%);
@@ -948,7 +948,7 @@
 @color-happy_new_year-scrollbar-thumb-hover: fadeout(lighten(@color-happy_new_year-theme, 10%), 35%);
 @color-happy_new_year-player-pic-c1: fadeout(@color-happy_new_year-theme_2, 50%);
 @color-happy_new_year-player-pic-c2: darken(@color-happy_new_year-theme_2, 30%);
-@color-happy_new_year-player-progress: darken(@color-happy_new_year-theme_2, 10%);
+@color-happy_new_year-player-progress: fadeout(lighten(@color-happy_new_year-theme, 20%), 82%);
 @color-happy_new_year-player-progress-bar1: darken(@color-happy_new_year-theme_2, 5%);
 @color-happy_new_year-player-progress-bar2: fadeout(lighten(@color-happy_new_year-theme, 5%), 20%);
 @color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 32%);

src/renderer/components/core/PlayDetail/LyricPlayer.vue

@@ -1,10 +1,12 @@
 <template>
 <div :class="['right', $style.right]" :style="lrcFontSize" @contextmenu.stop="handleShowLyricMenu">
-  <div :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
+  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
-    <div :class="['pre', $style.lyricSpace]"></div>
+    <div v-show="!isShowLrcSelectContent" :class="['lyric', $style.lyric, { [$style.draging]: isMsDown }, { [$style.lrcActiveZoom]: isZoomActiveLrc }]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric">
-    <div ref="dom_lyric_text"></div>
+      <div :class="['pre', $style.lyricSpace]"></div>
-    <div :class="$style.lyricSpace"></div>
+      <div ref="dom_lyric_text"></div>
-  </div>
+      <div :class="$style.lyricSpace"></div>
+    </div>
+  </transition>
   <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
     <div :class="$style.skip" v-if="isShowLyricProgressSetting" v-show="isStopScroll">
       <div :class="$style.line" ref="dom_skip_line"></div>
@@ -159,34 +161,13 @@ export default {
   // padding: 0 30px;
   position: relative;
   transition: flex-basis @transition-theme;
-
-  &:before {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    content: ' ';
-    height: 100px;
-    width: 100%;
-    background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
-    pointer-events: none;
-  }
-  &:after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    content: ' ';
-    height: 100px;
-    width: 100%;
-    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,@color-theme_2-background_1 95%);
-    pointer-events: none;
-  }
 }
 .lyric {
   text-align: center;
   height: 100%;
   overflow: hidden;
   font-size: var(--playDetail-lrc-font-size, 16px);
+  -webkit-mask-image: linear-gradient(transparent 0%, #fff 20%,  #fff 80%, transparent 100%);
   cursor: grab;
   &.draging {
     cursor: grabbing;
@@ -274,9 +255,10 @@ export default {
   pointer-events: none;
   // opacity: .5;
   .line {
-    border-top: 1px dashed @color-player-detail-lyric-active;
+    border-top: 2px dotted @color-player-detail-lyric-active;
     opacity: .15;
     margin-right: 30px;
+    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 15%, #fff 100%);
   }
   .label {
     position: absolute;
@@ -316,7 +298,6 @@ export default {
   height: 100%;
   width: 100%;
   font-size: 16px;
-  background-color: @color-theme_2-background_1;
   z-index: 10;
   color: @color-player-detail-lyric;
 
@@ -341,14 +322,6 @@ export default {
 
 each(@themes, {
   :global(#root.@{value}) {
-    .right {
-      &:before {
-        background-image: linear-gradient(0deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
-      }
-      &:after {
-        background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
-      }
-    }
     .lyric {
       :global {
         .lrc-content {
@@ -381,7 +354,6 @@ each(@themes, {
       }
     }
     .lyricSelectContent {
-      background-color: ~'@{color-@{value}-theme_2-background_1}';
       color: ~'@{color-@{value}-player-detail-lyric}';
       .lrc-active {
         color: ~'@{color-@{value}-theme}';

src/renderer/components/core/PlayDetail/index.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
   div(:class="[$style.container, , { [$style.fullscreen]: isFullscreen }]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
+    div(:class="$style.bg")
     //- div(:class="$style.bg" :style="bgStyle")
     //- div(:class="$style.bg2")
     div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
@@ -173,16 +174,25 @@ export default {
   }
 
 }
-// .bg {
+.bg {
-//   position: absolute;
+  position: absolute;
-//   width: 100%;
+  width: 100%;
-//   height: 100%;
+  height: 100%;
-//   top: 0;
+  top: 0;
-//   left: 0;
+  left: 0;
-//   background-size: 110% 110%;
+  background-image: @color-theme-bgimg;
-//   filter: blur(60px);
+  // background-size: 110% 110%;
-//   z-index: -1;
+  // filter: blur(60px);
-// }
+  opacity: .7;
+  z-index: -1;
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: @color-theme_2;
+  }
+}
 // .bg2 {
 //   position: absolute;
 //   width: 100%;
@@ -377,6 +387,15 @@ each(@themes, {
       background-color: ~'@{color-@{value}-theme_2-background_1}';
       // color: ~'@{color-@{value}-theme_2-font}';
     }
+    .bg {
+      // background-color: ~'@{color-@{value}-theme}';
+      background-image: ~'@{color-@{value}-theme-bgimg}';
+      background-size: ~'@{color-@{value}-theme-bgsize}';
+      background-position: ~'@{color-@{value}-theme-bgposition}';
+      &:after {
+        background-color: ~'@{color-@{value}-theme_2}';
+      }
+    }
     .header {
       &.controlBtnLeft {
         .controBtn {

src/renderer/views/setting/Setting.vue

@@ -98,7 +98,7 @@ export default {
       currentStting.value.player.mediaDeviceId = val
     })
     watch(() => setting.value.playDetail, val => {
-      currentStting.value.playDetail = val
+      currentStting.value.playDetail = JSON.parse(JSON.stringify(val))
     }, { deep: true })
     watch(() => setting.value.player.isMute, val => {
       currentStting.value.player.isMute = val