Lyric line duration, back button hide

HeHang0 · Nov 7, 2023 · 995ff29 · 995ff29
1 parent 68af357
commit 995ff29
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
@@ -44,7 +44,7 @@ onUnmounted(unWatch);
     <el-scrollbar :class="webView2Services.enabled ? 'wide-scrollbar' : ''">
       <div class="music-header-content">
         <el-button
-          :disabled="!canBack"
+          v-show="canBack"
           class="music-header-back music-button-pure music-icon"
           @click="back">
           <span style="opacity: 0.8">左</span>
@@ -100,6 +100,7 @@ onUnmounted(unWatch);
     width: 100%;
   }
   &-back {
+    margin-right: 9px;
     &:hover {
       span {
         opacity: 1 !important;
@@ -109,7 +110,7 @@ onUnmounted(unWatch);
   &-search {
     width: 320px;
     height: 37px;
-    margin-left: 10px;
+    margin-left: 1px;
     :deep(.el-input__wrapper) {
       background: var(--music-search-background);
       &.is-focus {

diff --git a/web/src/utils/lyric.ts b/web/src/utils/lyric.ts
@@ -4,7 +4,11 @@ import { clearArray, parseLyric, webView2Services } from './utils';
 import { musicOperate } from './http';
 
 export type LyricChange = (lines: string[]) => void;
-export type LyricLineChange = (index: number, text: string) => void;
+export type LyricLineChange = (
+  index: number,
+  text: string,
+  duration?: number
+) => void;
 
 export class LyricManager {
   private static lyricOption = {};
@@ -170,9 +174,18 @@ export class LyricManager {
   }
 
   private publishLyricLine() {
-    const text = this.lyricList[this.index]?.text;
-    if (!text) return;
-    this.lyricLineChanges.forEach(m => m.call(this, this.index, text));
+    const line = this.lyricList[this.index];
+    if (!line || !line.text) return;
+    this.lyricLineChanges.forEach(m =>
+      m.call(
+        this,
+        this.index,
+        line.text,
+        webView2Services?.enabled
+          ? (this.length * (line.max - line.progress)) / 1000
+          : undefined
+      )
+    );
   }
 
   private drawCanvas = (_index: number, text: string) => {
@@ -181,8 +194,8 @@ export class LyricManager {
     this.canvasContext.fillText(text || this.title || '', 300, 60, 600);
   };
 
-  private setWebviewLine(_index: number, text: string) {
-    musicOperate('/lyricline', text);
+  private setWebviewLine(_index: number, text: string, duration?: number) {
+    musicOperate('/lyricline?duration=' + (duration || ''), text);
   }
 
   public showInDesktop(

diff --git a/web/src/views/setting.vue b/web/src/views/setting.vue
@@ -1004,14 +1004,14 @@ onUnmounted(unWatch);
     &-item {
       display: flex;
       align-items: center;
-      margin: 5px 0;
+      margin-top: 15px;
+      &:first-child {
+        margin-top: 0;
+      }
       &-title {
         font-weight: bold;
         margin-right: 20px;
       }
-      .el-select.short {
-        width: 80px;
-      }
       &-fix-color {
         margin-left: 20px;
         display: flex;
@@ -1025,6 +1025,15 @@ onUnmounted(unWatch);
           background-color: var(--fix-color);
         }
       }
+      .el-select.short {
+        width: 80px;
+      }
+      .el-checkbox {
+        height: 24px;
+      }
+      :deep(.el-input__inner) {
+        height: 26px;
+      }
     }
   }
   &-about {