From cc6562913c4fad64fa527f741878de48ab543dc2 Mon Sep 17 00:00:00 2001
From: Huang Jing <eatgrass@live.cn>
Date: Fri, 26 Jan 2024 10:35:08 +0800
Subject: [PATCH] feat: only show marked lines

---
 manifest.json               |  2 +-
 src/LyricsMarkdownRender.ts | 32 ++++++++++++++++++++++++++++++--
 src/Settings.ts             |  2 ++
 src/main.ts                 |  4 ++++
 src/renderers/index.ts      |  4 ++--
 src/renderers/renderer.ts   |  3 +++
 styles.css                  | 14 +++++++++-----
 7 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/manifest.json b/manifest.json
index 2b73f07..85e10c2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "lyrics",
 	"name": "Lyrics",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"minAppVersion": "0.15.0",
 	"description": "Enhance the audio player with interacive lyrics",
 	"author": "eatgrass",
diff --git a/src/LyricsMarkdownRender.ts b/src/LyricsMarkdownRender.ts
index 5d2de3f..98813b3 100644
--- a/src/LyricsMarkdownRender.ts
+++ b/src/LyricsMarkdownRender.ts
@@ -21,10 +21,12 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
     private currentHL: number = -1
     private path: string
     private plugin: LyricsPlugin
-    private autoScroll: boolean
-    private sentenceMode: boolean
     private lyricsRenderer: LyricsRenderer
     private pauseHl: boolean = false
+    private sentenceMode: boolean
+
+    private autoScroll: boolean
+    private onlyShowMarked: boolean = false
 
     constructor(
         plugin: LyricsPlugin,
@@ -40,6 +42,7 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
         this.path = ctx.sourcePath
         this.autoScroll = this.plugin.getSettings().autoScroll
         this.sentenceMode = this.plugin.getSettings().sentenceMode
+        this.onlyShowMarked = this.plugin.getSettings().onlyShowMarked
         this.lyricsRenderer = new LyricsRenderer(plugin.app)
     }
 
@@ -244,6 +247,7 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
                         })
                     }
                     this.autoScroll = !this.autoScroll
+                    this.plugin.updateSettings({ autoScroll: this.autoScroll })
                 })
         })
 
@@ -252,12 +256,35 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
                 .setChecked(this.sentenceMode)
                 .onClick(async () => {
                     this.sentenceMode = !this.sentenceMode
+                    this.plugin.updateSettings({
+                        sentenceMode: this.sentenceMode,
+                    })
+                })
+        })
+
+        menu.addItem((item) => {
+            item.setTitle('Only show marked')
+                .setChecked(this.onlyShowMarked)
+                .onClick(async () => {
+                    this.onlyShowMarked = !this.onlyShowMarked
+                    this.plugin.updateSettings({
+                        onlyShowMarked: this.onlyShowMarked,
+                    })
+                    this.applyOnlyShowMarked()
                 })
         })
 
         menu.showAtMouseEvent(e)
     }
 
+    private applyOnlyShowMarked() {
+        if (this.onlyShowMarked) {
+            this.container.addClass('lyrics-show-marked')
+        } else {
+            this.container.removeClass('lyrics-show-marked')
+        }
+    }
+
     async onload() {
         let eol = this.source.indexOf('\n')
 
@@ -338,6 +365,7 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
             }
 
             this.container.append(fragment)
+            this.applyOnlyShowMarked()
         }
     }
 
diff --git a/src/Settings.ts b/src/Settings.ts
index f90f84a..c3f5be9 100644
--- a/src/Settings.ts
+++ b/src/Settings.ts
@@ -4,10 +4,12 @@ import LyrcisPlugin from 'main'
 export interface Settings {
     autoScroll: boolean
     sentenceMode: boolean
+    onlyShowMarked: boolean
 }
 export const DEFAULT_SETTINGS: Settings = {
     autoScroll: true,
     sentenceMode: false,
+    onlyShowMarked: false,
 }
 
 export default class LyricsSettings extends PluginSettingTab {
diff --git a/src/main.ts b/src/main.ts
index b8cabe6..5299915 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,10 @@ export default class LyricsPlugin extends Plugin {
         return this.settings?.getSettings() || DEFAULT_SETTINGS
     }
 
+    public updateSettings(newSettings: Partial<Settings>) {
+        this.settings?.updateSettings(newSettings)
+    }
+
     async onload() {
         const settings = { ...DEFAULT_SETTINGS, ...(await this.loadData()) }
         this.settings = new LyricsSettings(this, settings)
diff --git a/src/renderers/index.ts b/src/renderers/index.ts
index 5095dbd..3eef480 100644
--- a/src/renderers/index.ts
+++ b/src/renderers/index.ts
@@ -24,9 +24,9 @@ export default class LyricsRenderer extends AbstractLyricsRenderer {
     ) {
         let parser = this.resolveParser(content)
         if (parser[0]) {
-            parser[0].render(content, container, path, component)
+            await parser[0].render(content, container, path, component)
         } else {
-            MarkdownRenderer.render(
+            await MarkdownRenderer.render(
                 this.app,
                 content,
                 container,
diff --git a/src/renderers/renderer.ts b/src/renderers/renderer.ts
index 276b266..6f8fb3d 100644
--- a/src/renderers/renderer.ts
+++ b/src/renderers/renderer.ts
@@ -56,6 +56,9 @@ export abstract class AbstractLyricsRenderer {
                 path,
                 component,
             )
+
+            const mark = lineEl.find('mark')
+            lineEl.dataset.mark = mark ? 'true' : 'false'
         }
 
         return lineEl
diff --git a/styles.css b/styles.css
index df3c134..8753120 100644
--- a/styles.css
+++ b/styles.css
@@ -38,13 +38,17 @@ If your plugin does not need CSS, delete this file.
 }
 
 .lyrics-text {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	padding: 0 0.8rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0 0.8rem;
 }
 
-.lyrics-highlighted .lyrics-text{
+.lyrics-highlighted .lyrics-text {
     background-color: var(--text-selection);
     border-radius: 5px;
 }
+
+.lyrics-show-marked .lyrics-line[data-mark='false'] {
+    display: none;
+}