From 3e7c5bb415682d545c9ffb3e2917e3bb2745de4a Mon Sep 17 00:00:00 2001 From: Zhou Hua Date: Mon, 10 Mar 2025 14:13:45 +0800 Subject: [PATCH] fix cr issues --- README.md | 2 +- main.css | 8 +++---- src/main.ts | 62 +++++++++++++++++++++++++++++------------------------ 3 files changed, 39 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index c4005fe..329a164 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Obsidian Waveform Audio Player +# Waveform Audio Player Plugin A plugin that enhances the display of audio files in Obsidian, supporting both audio attachments and recorded audio files. diff --git a/main.css b/main.css index 9638bf9..c679b4a 100644 --- a/main.css +++ b/main.css @@ -10,7 +10,7 @@ } /* 隐藏默认音频元素 */ -.internal-embed audio { +.internal-embed.audio-embed { display: none; } @@ -20,7 +20,6 @@ overflow: hidden; display: block; width: 100%; - background: var(--background-secondary); margin: 0.5em 0; } @@ -64,7 +63,8 @@ /* 统一播放器样式 */ .wa-obsidian-player { - background: var(--background-secondary); border-radius: 8px; - padding: 0.5em; + padding: 16px; + background: transparent; + --wa-text-color: var(--text-normal); } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 192748c..6296faf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,7 +9,7 @@ import { createElement } from 'react'; import { createRoot } from 'react-dom/client'; const PLAYER_CLASS = 'waveform-player-widget'; -const AUDIO_LINK_PATTERN = '!\\[([^\\]]*)\\]\\(([^)]+\\.(?:mp3|wav|ogg|m4a|webm))\\)'; +const AUDIO_LINK_PATTERN = '!\\[([^\\]]*)\\]\\(([^)]+\\.(?:mp3|wav|ogg|m4a|webm))\\)|!\\[\\[([^\\]]+\\.(?:mp3|wav|ogg|m4a|webm))\\]\\]'; class AudioPlayerWidget extends WidgetType { private static counter = 0; @@ -80,7 +80,6 @@ class AudioPlayerWidget extends WidgetType { } const audioUrl = this.plugin.app.vault.getResourcePath(audioFile); - console.log("audioUrl", audioUrl); const decodedUrl = decodeURIComponent(audioUrl); try { @@ -93,11 +92,12 @@ class AudioPlayerWidget extends WidgetType { src: decodedUrl, styles: { controls: { - paddingBottom: 0, width: '156px', + padding: 0, }, - root: { - padding: '0.5em', + header: { + padding: 0, + paddingBottom: 8, }, title: { fontSize: '14px', @@ -174,7 +174,7 @@ export default class WaveformPlayerPlugin extends Plugin { const viewportPlugin = ViewPlugin.fromClass(class { private updateScheduled = false; - private timeout: NodeJS.Timeout | null = null; + private timeout: number | null = null; constructor(private readonly view: EditorView) { this.scheduleUpdate(); @@ -202,7 +202,7 @@ export default class WaveformPlayerPlugin extends Plugin { clearTimeout(this.timeout); } - this.timeout = setTimeout(() => { + this.timeout = window.setTimeout(() => { this.updateScheduled = false; this.view.dispatch({ effects: updateAudioPlayers.of(undefined), @@ -215,22 +215,23 @@ export default class WaveformPlayerPlugin extends Plugin { } getAudioFile(src: string): null | TFile { - const decodedSrc = decodeURIComponent(src); - let audioFile = this.app.vault.getAbstractFileByPath(decodedSrc); - if (!audioFile || !(audioFile instanceof TFile)) { - const attachPath = this.app.vault.config.attachmentFolderPath; - if (!attachPath) { - return null; - } + // const decodedSrc = decodeURIComponent(src); + // let audioFile = this.app.vault.getAbstractFileByPath(decodedSrc); + const audioFile = this.app.metadataCache.getFirstLinkpathDest(src, ''); + // if (!audioFile || !(audioFile instanceof TFile)) { + // const attachPath = this.app.vault.config.attachmentFolderPath; + // if (!attachPath) { + // return null; + // } - audioFile = this.app.vault.getAbstractFileByPath(`${attachPath}/${decodedSrc}`); - if (!audioFile || !(audioFile instanceof TFile)) { - audioFile = this.app.vault.getAbstractFileByPath(`${attachPath}/${src}`); - if (!audioFile || !(audioFile instanceof TFile)) { - return null; - } - } - } + // audioFile = this.app.vault.getAbstractFileByPath(`${attachPath}/${decodedSrc}`); + // if (!audioFile || !(audioFile instanceof TFile)) { + // audioFile = this.app.vault.getAbstractFileByPath(`${attachPath}/${src}`); + // if (!audioFile || !(audioFile instanceof TFile)) { + // return null; + // } + // } + // } return audioFile instanceof TFile ? audioFile : null; } @@ -244,6 +245,7 @@ export default class WaveformPlayerPlugin extends Plugin { audioElements.forEach((div) => { const src = div.getAttribute('src'); + console.log('src', src); if (!src || !/\.(?:mp3|wav|ogg|m4a|webm)$/i.test(src)) { return; } @@ -274,11 +276,12 @@ export default class WaveformPlayerPlugin extends Plugin { src: decodedUrl, styles: { controls: { - paddingBottom: 0, width: '156px', + padding: 0, }, - root: { - padding: '0.5em', + header: { + padding: 0, + paddingBottom: 8, }, title: { fontSize: '14px', @@ -310,9 +313,12 @@ export default class WaveformPlayerPlugin extends Plugin { // 每次创建新的正则表达式实例 const regex = new RegExp(AUDIO_LINK_PATTERN, 'gi'); - // 使用 matchAll 替代 while 循环 Array.from(lineText.matchAll(regex)).forEach((match) => { - const [, title, src] = match; + const [_, title, mdSrc, obsidianSrc] = match; + // 如果是 Obsidian 格式的链接，使用 obsidianSrc 作为源和标题 + const src = obsidianSrc || mdSrc; + const effectiveTitle = obsidianSrc ? obsidianSrc.split('/').pop()?.replace(/\.[^.]+$/, '') || '' : (title || ''); + if (!src) { return; } @@ -326,7 +332,7 @@ export default class WaveformPlayerPlugin extends Plugin { block: true, // 添加 block 属性 persistent: true, side: 1, // 在匹配文本后面插入 - widget: new AudioPlayerWidget(src, title || '', this), + widget: new AudioPlayerWidget(src, effectiveTitle, this), }).range(matchEnd), ); });