polish ui

eatgrass · Dec 9, 2023 · a9f1562 · a9f1562
1 parent 0bde260
commit a9f1562
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 24 deletions.
diff --git a/src/LyricsMarkdownRender.ts b/src/LyricsMarkdownRender.ts
@@ -2,7 +2,6 @@ import {
     MarkdownRenderChild,
     MarkdownRenderer,
     type App,
-    MarkdownView,
     type MarkdownPostProcessorContext,
 } from 'obsidian'
 import Player from './Player.svelte'
@@ -11,7 +10,7 @@ import type LyricsPlugin from 'main'
 export default class LyricsMarkdownRender extends MarkdownRenderChild {
     static readonly AUDIO_FILE_REGEX = /^source (?<audio>.*)/i
     static readonly LYRICS_PARSE_REGEX =
-        /^\[(?<time>\d{2}:\d{2}(\.\d{2,})?)\](?<text>.*)/
+        /^\[(?<time>\d{2,}:\d{2}(\.\d{2,})?)\](?<text>.*)/
 
     private audioPath?: string
     private source: string
@@ -125,24 +124,25 @@ export default class LyricsMarkdownRender extends MarkdownRenderChild {
             let markdown = lines
                 .slice(1)
                 .map((line) => {
-                    let lrc = line.match(
-                        LyricsMarkdownRender.LYRICS_PARSE_REGEX,
-                    )
-                    let time = lrc?.groups?.time
-                    let text = lrc?.groups?.text
-                    let timestamp = this.parseTime(time)
-                    let timetag = time
-                        ? `<span class="lyrics-timestamp" data-time="${timestamp}">\\[${time}\\]</span>`
-                        : ``
-                    let texttag = text
-                        ? `<span class="lyrics-text">${text}</span>`
-                        : ''
-                    let mdLine = lrc
-                        ? `<span class="lyrics-wrapper" data-time="${timestamp}">${timetag} ${texttag}</span>`
-                        : line
-                    return mdLine
+                    if (line) {
+                        let lrc = line.match(
+                            LyricsMarkdownRender.LYRICS_PARSE_REGEX,
+                        )
+                        let time = lrc?.groups?.time
+                        let text = lrc?.groups?.text || line
+                        let timestamp = this.parseTime(time)
+                        let timetag = time
+                            ? `<span class="lyrics-timestamp" data-time="${timestamp}">${
+                                  time.split('.')[0]
+                              }</span>`
+                            : `<span class="lyrics-timestamp"> </span>`
+                        let texttag = `<span class="lyrics-text">${text}</span>`
+                        return `<span class="lyrics-wrapper" data-time="${timestamp}">${timetag} ${texttag}</span>`
+                    } else {
+                        return ''
+                    }
                 })
-                .join('\n')
+                .join('')
 
             MarkdownRenderer.render(this.app, markdown, div, this.path, this)
             fragment.append(div)

diff --git a/styles.css b/styles.css
@@ -14,22 +14,34 @@ If your plugin does not need CSS, delete this file.
 .lyrics-timestamp {
     color: var(--text-accent);
     cursor: pointer;
+    width: 5.5rem;
+    display: inline-block;
+    padding: 5px 0;
+}
+
+.lyrics-text {
+    flex: 1;
+    padding: 5px;
 }
 
 .lyrics-timestamp::hover {
     color: var(--text-accent-hover);
     cursor: pointer;
 }
 
-.lyrics-highlighted {
-    background-color: var(--text-selection);
-}
-
 .lyrics-highlighted .lyrics-text {
-    text-decoration: underline 2px dashed var(--text-accent);
+    background-color: var(--text-selection);
 }
 
 .player-wrapper {
     position: sticky;
     top: 0;
 }
+
+.lyrics-wrapper {
+    display: flex;
+	padding: 3px;
+}
+
+.lyrics-timestamp {
+}