diff --git a/.changeset/sour-ears-run.md b/.changeset/sour-ears-run.md new file mode 100644 index 0000000..4bcd5ca --- /dev/null +++ b/.changeset/sour-ears-run.md @@ -0,0 +1,5 @@ +--- +'novel-speech-synthesis': patch +--- + +fix: refresh paragragh diff --git a/packages/novel-speech-synthesis/src/adapter/index.ts b/packages/novel-speech-synthesis/src/adapter/index.ts index 472535a..bc23ce5 100644 --- a/packages/novel-speech-synthesis/src/adapter/index.ts +++ b/packages/novel-speech-synthesis/src/adapter/index.ts @@ -1,5 +1,5 @@ import { Route, RouterOptions } from 'shared' -import { SpeechOptions } from '../speech' +import Speech, { SpeechOptions } from '../speech' type Adapter = Omit & { routes: (Partial & { speech?: SpeechOptions })[] @@ -54,6 +54,21 @@ export const adapters: Adapter[] = [ ?.click() }, }, + run() { + const speech = new Speech(this.speech!) + + const ob = new MutationObserver(() => { + if ( + speech.paragraphList.length !== speech.opts.getParagraph().length + ) { + speech.setupParagraph() + } + }) + + ob.observe(document.querySelector('.read-content')!, { + childList: true, + }) + }, }, ], }, @@ -77,6 +92,21 @@ export const adapters: Adapter[] = [ ?.click() }, }, + run() { + const speech = new Speech(this.speech!) + + const ob = new MutationObserver(() => { + if ( + speech.paragraphList.length !== speech.opts.getParagraph().length + ) { + speech.setupParagraph() + } + }) + + ob.observe(document.querySelector('#acontentz')!, { + childList: true, + }) + }, }, ], }, diff --git a/packages/novel-speech-synthesis/src/index.ts b/packages/novel-speech-synthesis/src/index.ts index 2797e23..42cacf0 100644 --- a/packages/novel-speech-synthesis/src/index.ts +++ b/packages/novel-speech-synthesis/src/index.ts @@ -9,8 +9,9 @@ adapters.forEach((adapter) => { return { ...route, run: () => { - route.run?.() - if (route.speech) new Speech(route.speech) + if (route.run) { + route.run() + } else if (route.speech) new Speech(route.speech) }, } }), diff --git a/packages/novel-speech-synthesis/src/speech/index.ts b/packages/novel-speech-synthesis/src/speech/index.ts index b1bda7c..39e09e2 100644 --- a/packages/novel-speech-synthesis/src/speech/index.ts +++ b/packages/novel-speech-synthesis/src/speech/index.ts @@ -30,23 +30,29 @@ export default class Speech { disabled: false, } private voices: SpeechSynthesisVoice[] = [] - private paragraphList = [] as HTMLElement[] + paragraphList: HTMLElement[] = [] + private paragraphDisposeList: (() => void)[] = [] private speakDispose: (() => void) | null = null - drag!: Drag + private drag!: Drag - constructor(private opts: SpeechOptions) { + constructor(public opts: SpeechOptions) { this.loadUtterance() - this.washContent() + this.setupParagraph() this.createUI() } - private washContent() { + setupParagraph() { + if (this.paragraphDisposeList.length) { + this.paragraphDisposeList.forEach((fn) => fn()) + this.paragraphDisposeList = [] + } + this.paragraphList = this.opts.getParagraph() - this.paragraphList.forEach((p, idx) => { + this.paragraphDisposeList = this.paragraphList.map((p, idx) => { p.setAttribute('data-speech-idx', idx.toString()) - p.addEventListener('click', () => { + const fn = () => { if (this.utterance.disabled) return let current = idx @@ -66,7 +72,14 @@ export default class Speech { cancel = true } speak() - }) + } + + p.addEventListener('click', fn) + + return () => { + p.removeAttribute('data-speech-idx') + p.removeEventListener('click', fn) + } }) }