renderer: Control lyrics scrolling with mouse wheel

Rocket1184 · Jan 14, 2024 · a0a165f · a0a165f
1 parent fcf81d1
commit a0a165f
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/src/renderer/page/Player.vue b/src/renderer/page/Player.vue
@@ -176,7 +176,7 @@
                     <p>歌词加载中 ...</p>
                 </div>
                 <div v-show="!ui.lyricLoading"
-                    class="scroller-wrapper">
+                    class="scroller-wrapper" @mousewheel="handleMouseScroll">
                     <div class="scroller"
                         :style="lyricScrollerStyle">
                         <template v-if="lyricToShow">
@@ -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,25 @@ export default {
                 this.$toast.message('已复制分享内容到粘贴版');
             });
         },
+        handleMouseScroll(e) {
+            if (typeof this.ui.lyric.txtLyric === 'string') {
+                return;
+            }
+            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;
@@ -507,7 +527,10 @@ export default {
         ['ui.lyric']() {
             // reset lyric position
             this.currentLyricIndex = -1;
-        }
+        },
+        ['currentLyricIndex']() {
+            this.lyricScrollOffset = 0;
+        },
     },
     mounted() {
         this.paintBkgCanvas();