feat: only show marked lines

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",

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()
         }
     }
 

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 {

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)

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,

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

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;
+}