renderer: Control lyrics scrolling with mouse wheel

Rocket1184 · Jan 13, 2024 · 4abed78 · 4abed78
1 parent fcf81d1
commit 4abed78
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/src/renderer/page/Player.vue b/src/renderer/page/Player.vue
@@ -176,8 +176,8 @@
                     <p>歌词加载中 ...</p>
                 </div>
                 <div v-show="!ui.lyricLoading"
-                    class="scroller-wrapper">
-                    <div class="scroller"
+                    class="scroller-wrapper" @mousewheel="handleMouseScroll">
+                    <div class="scroller" 
                         :style="lyricScrollerStyle">
                         <template v-if="lyricToShow">
                             <div v-for="(line, index) of lyricToShow.lyrics"
@@ -259,7 +259,8 @@ export default {
             commentCount: '...',
             currentLyricIndex: -1,
             moreMenuOpen: false,
-            dlgShareOpen: false
+            dlgShareOpen: false,
+            lyricScrollOffset: 0,
         };
     },
     computed: {
@@ -327,7 +328,7 @@ export default {
                 return 'transform: translateY(164px)';
             }
             const currentLyricElem = this.$refs.lyric[this.currentLyricIndex];
-            const offset = 150 - currentLyricElem.offsetTop - currentLyricElem.clientHeight;
+            const offset = 150 - currentLyricElem.offsetTop - currentLyricElem.clientHeight + this.lyricScrollOffset;
             return `transform: translateY(${offset}px);`;
         }
     },
@@ -459,6 +460,19 @@ export default {
                 this.$toast.message('已复制分享内容到粘贴版');
             });
         },
+        handleMouseScroll(e) {
+            if (typeof this.ui.lyric.txtLyric === 'string') {
+                return 'height: 100%; overflow: auto;';
+            }
+            const currentLyricElem = this.$refs.lyric[this.currentLyricIndex];
+            const lastElem = this.$refs.lyric[this.$refs.lyric.length - 1]
+            const currentToTopOffset = 14 + currentLyricElem.offsetTop + currentLyricElem.clientHeight
+            const currentToBottomOffset = currentLyricElem.offsetTop + currentLyricElem.clientHeight - lastElem.offsetTop - lastElem.clientHeight
+            const willingOffset = this.lyricScrollOffset - 0.3 * e.deltaY
+            if (willingOffset > currentToTopOffset) this.lyricScrollOffset = currentToTopOffset
+            else if (willingOffset < currentToBottomOffset) this.lyricScrollOffset = currentToBottomOffset
+            else this.lyricScrollOffset = willingOffset
+        },
         async handleDownload() {
             if (this.ui.downloaded) {
                 return;
@@ -493,6 +507,9 @@ export default {
         }
     },
     watch: {
+        currentLyricIndex() {
+            this.lyricScrollOffset = 0
+        },
         ['playing.id']() {
             if (!this.isActive) return;
             this.refreshThreadInfo();