From 59061a067260d1d4de741d8d6473e4e773c020d5 Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Sat, 19 Nov 2022 18:05:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=92=AD=E6=94=BE=E6=A0=8F?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/PlayBar/PlayProgress.vue           |  97 ++++++++++++++---
 .../components/layout/PlayBar/index.vue       | 100 +++++++++---------
 2 files changed, 131 insertions(+), 66 deletions(-)

diff --git a/src/renderer/components/layout/PlayBar/PlayProgress.vue b/src/renderer/components/layout/PlayBar/PlayProgress.vue
index 5ba82320..2208faf0 100644
--- a/src/renderer/components/layout/PlayBar/PlayProgress.vue
+++ b/src/renderer/components/layout/PlayBar/PlayProgress.vue
@@ -1,20 +1,25 @@
 <template>
-  <div ref="dom_btn" :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
-    <span>{{ nowPlayTimeStr }}</span>
-    <span style="margin: 0 1px;">/</span>
-    <span>{{ maxPlayTimeStr }}</span>
-    <base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave" @transitionend="handleTranEnd">
+  <div :class="$style.content" @click="handleShowPopup" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave">
+    <div ref="dom_btn" :class="$style.timeContent">
+      <span>{{ nowPlayTimeStr }}</span>
+      <span style="margin: 0 1px;">/</span>
+      <span>{{ maxPlayTimeStr }}</span>
       <div :class="$style.progress">
-        <common-progress-bar v-if="visibleProgress" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+        <div :class="[$style.progressBar, {[$style.barTransition]: isActiveTransition}]" :style="{ transform: `scaleX(${progress || 0})` }" @transitionend="handleTransitionEnd" />
       </div>
-    </base-popup>
+      <base-popup v-model:visible="visible" :btn-el="dom_btn" @mouseenter="handlMsEnter" @mouseleave="handlMsLeave" @transitionend="handleTranEnd">
+        <div :class="$style.popupProgress">
+          <common-progress-bar v-if="visibleProgress" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
+        </div>
+      </base-popup>
+    </div>
   </div>
 </template>
 
 <script>
 import { ref, onMounted } from '@common/utils/vueTools'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
-
+import { isShowPlayerDetail } from '@renderer/store/player/state'
 
 export default {
   setup() {
@@ -83,6 +88,7 @@ export default {
       handlMsLeave,
       handlMsEnter,
       handleTranEnd,
+      isShowPlayerDetail,
     }
   },
 }
@@ -92,22 +98,80 @@ export default {
 
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
+// .content {
+//   flex: none;
+//   position: relative;
+//   // display: inline-block;
+//   padding: 5px 0;
+//   color: var(--color-300);
+//   font-size: 13px;
+//   cursor: pointer;
+//   transition: opacity @transition-fast;
+
+//   &:hover {
+//     opacity: .7;
+//   }
+// }
 .content {
   flex: none;
   position: relative;
-  // display: inline-block;
-  padding: 5px 0;
+  padding: 15px 0;
+  &:hover {
+    .progress {
+      opacity: 1;
+    }
+  }
+}
+.timeContent {
+  // width: 30%;
+  position: relative;
+  // flex: none;
   color: var(--color-300);
   font-size: 13px;
-  cursor: pointer;
-  transition: opacity @transition-fast;
-
-  &:hover {
-    opacity: .7;
-  }
+  // padding-left: 10px;
+  // display: flex;
+  // flex-flow: column nowrap;
+  // align-items: center;
+  padding-bottom: 3px;
 }
 
 .progress {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  flex: auto;
+  margin-top: 2px;
+  // width: 160px;
+  // position: relative;
+  // padding-bottom: 6px;
+  // margin: 0 8px;
+  height: 2px;
+  opacity: .24;
+  overflow: hidden;
+  transition: @transition-normal;
+  transition-property: background-color, opacity;
+  background-color: var(--color-primary-light-100-alpha-800);
+
+  .progressBar {
+    height: 100%;
+    width: 100%;
+    // position: absolute;
+    background-color: var(--color-primary-light-100-alpha-400);
+    // left: 0;
+    // top: 0;
+    transform-origin: 0;
+    will-change: transform;
+  }
+
+  .bar-transition {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 0.2s;
+  }
+}
+
+.popupProgress {
   position: relative;
   width: 300px;
   height: 15px;
@@ -115,4 +179,5 @@ export default {
   padding: 5px;
 }
 
+
 </style>
diff --git a/src/renderer/components/layout/PlayBar/index.vue b/src/renderer/components/layout/PlayBar/index.vue
index 41ecaf16..54c07cd0 100644
--- a/src/renderer/components/layout/PlayBar/index.vue
+++ b/src/renderer/components/layout/PlayBar/index.vue
@@ -10,7 +10,7 @@
       </div>
       <div :class="$style.status">{{ statusText }}</div>
     </div>
-    <div :class="$style.timeContainer">
+    <!-- <div :class="$style.timeContainer">
       <div :class="$style.timeContent">
         <span>{{ nowPlayTimeStr }}</span>
         <span style="margin: 0 1px;">/</span>
@@ -19,8 +19,8 @@
           <common-progress-bar v-if="!isShowPlayerDetail" :class-name="$style.progressBar" :progress="progress" :handle-transition-end="handleTransitionEnd" :is-active-transition="isActiveTransition" />
         </div>
       </div>
-    </div>
-    <!-- <play-progress /> -->
+    </div> -->
+    <play-progress />
     <control-btns />
     <div :class="$style.playBtnContent">
       <div :class="$style.playBtn" :aria-label="$t('player__prev')" @click="playPrev()">
@@ -50,7 +50,7 @@ import { computed } from '@common/utils/vueTools'
 import { useRouter } from '@common/utils/vueRouter'
 import { clipboardWriteText } from '@common/utils/electron'
 import ControlBtns from './ControlBtns'
-// import PlayProgress from './PlayProgress'
+import PlayProgress from './PlayProgress'
 import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 // import { lyric } from '@renderer/core/share/lyric'
 import {
@@ -72,7 +72,7 @@ export default {
   name: 'CorePlayBar',
   components: {
     ControlBtns,
-    // PlayProgress,
+    PlayProgress,
   },
   setup() {
     const router = useRouter()
@@ -255,52 +255,52 @@ export default {
   max-width: 100%;
 }
 
-.timeContainer {
-  flex: none;
-  padding: 15px 0;
-  &:hover {
-    .progress {
-      opacity: 1;
-    }
-  }
-}
-.timeContent {
-  // width: 30%;
-  position: relative;
-  // flex: none;
-  color: var(--color-300);
-  font-size: 13px;
-  // padding-left: 10px;
-  // display: flex;
-  // flex-flow: column nowrap;
-  // align-items: center;
-  padding-bottom: 3px;
-}
-.progress {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  flex: auto;
-  // width: 160px;
-  // position: relative;
-  // padding-bottom: 6px;
-  // margin: 0 8px;
-  padding: 2px 0;
-  height: 8px;
-  transition: opacity @transition-normal;
-  opacity: .24;
+// .timeContainer {
+//   flex: none;
+//   padding: 15px 0;
+//   &:hover {
+//     .progress {
+//       opacity: 1;
+//     }
+//   }
+// }
+// .timeContent {
+//   // width: 30%;
+//   position: relative;
+//   // flex: none;
+//   color: var(--color-300);
+//   font-size: 13px;
+//   // padding-left: 10px;
+//   // display: flex;
+//   // flex-flow: column nowrap;
+//   // align-items: center;
+//   padding-bottom: 3px;
+// }
+// .progress {
+//   position: absolute;
+//   top: 100%;
+//   left: 0;
+//   width: 100%;
+//   flex: auto;
+//   // width: 160px;
+//   // position: relative;
+//   // padding-bottom: 6px;
+//   // margin: 0 8px;
+//   padding: 2px 0;
+//   height: 8px;
+//   transition: opacity @transition-normal;
+//   opacity: .24;
 
-  .progressBar {
-    height: 2px;
-    border-radius: 0;
-  }
-}
-.time {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-}
+//   .progressBar {
+//     height: 2px;
+//     border-radius: 0;
+//   }
+// }
+// .time {
+//   display: flex;
+//   flex-flow: row nowrap;
+//   justify-content: space-between;
+// }
 
 .playBtnContent {
   height: 100%;