From f4ecaa7bd544ef95099e8a3e1497f24ec3aed97b Mon Sep 17 00:00:00 2001 From: jooooock Date: Thu, 26 Sep 2024 10:37:02 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=86=85=E5=B5=8C=E9=9F=B3?= =?UTF-8?q?=E9=A2=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/custom-elements/mp-common-mpaudio.js | 8 ++ utils/index.ts | 114 +++++++++++++++++++- 2 files changed, 121 insertions(+), 1 deletion(-) diff --git a/public/custom-elements/mp-common-mpaudio.js b/public/custom-elements/mp-common-mpaudio.js index 2b4d5f1..bacb0f2 100644 --- a/public/custom-elements/mp-common-mpaudio.js +++ b/public/custom-elements/mp-common-mpaudio.js @@ -208,9 +208,17 @@ class MpCommonMpaudio extends HTMLElement { const audio = this.shadow.querySelector('audio') audio.src = 'https://res.wx.qq.com/voice/getvoice?mediaid=' + this.fileid + audio.addEventListener('play', () => { + this.shadow.querySelector('#audio_progress_bar').style.display = 'block' + this.shadow.querySelector('.js_duration1').style.display = 'none' + this.shadow.querySelector('.js_duration2').style.display = 'block' + }) audio.addEventListener('ended', () => { this.stopped = true this.playing = false + this.shadow.querySelector('#audio_progress_bar').style.display = 'none' + this.shadow.querySelector('.js_duration1').style.display = 'block' + this.shadow.querySelector('.js_duration2').style.display = 'none' }) audio.addEventListener('timeupdate', () => { this.shadow.querySelector('.js_duration2 .start').textContent = formatTimeGap(Math.round(audio.currentTime)) diff --git a/utils/index.ts b/utils/index.ts index 22a15a4..1f8375b 100644 --- a/utils/index.ts +++ b/utils/index.ts @@ -139,12 +139,15 @@ export async function packHTMLAssets(html: string, title: string, zip?: JSZip) { $jsArticleContent.querySelector('#js_content')?.removeAttribute('style') // 删除无用dom元素 + $jsArticleContent.querySelector('#js_top_ad_area')?.remove() $jsArticleContent.querySelector('#js_tags_preview_toast')?.remove() $jsArticleContent.querySelector('#content_bottom_area')?.remove() $jsArticleContent.querySelector('#js_temp_bottom_area')?.remove() $jsArticleContent.querySelectorAll('script').forEach(el => { el.remove() }) + $jsArticleContent.querySelector('#js_pc_qr_code')?.remove() + $jsArticleContent.querySelector('#wx_stream_article_slide_tip')?.remove() // 渲染发布时间 @@ -295,7 +298,7 @@ export async function packHTMLAssets(html: string, title: string, zip?: JSZip) { const uuid = new Date().getTime() + Math.random().toString() zip.file(`assets/${uuid}.css`, stylesheetFile) - localLinks += `` + localLinks += `\n` return stylesheetFile.size } @@ -307,6 +310,113 @@ export async function packHTMLAssets(html: string, title: string, zip?: JSZip) { }) } + // 处理自定义组件 + const hasMpAudio = $jsArticleContent.querySelector('mp-common-mpaudio') !== null + const mpAudioTemplate = ` + + ` + let customElementTemplate = '' + if (hasMpAudio) { + customElementTemplate += mpAudioTemplate + customElementTemplate += '' + const url = '/custom-elements/mp-common-mpaudio.js?v=1' + let scriptFile: Blob | null + const mpCommonMpAudioJsCache = await getAssetCache(url) + if (mpCommonMpAudioJsCache) { + scriptFile = mpCommonMpAudioJsCache.file + } else { + scriptFile = await $fetch(url, {retryDelay: 500}) + } + zip.file(`assets/mp-common-mpaudio.js`, scriptFile) + } + const indexHTML = ` @@ -327,6 +437,8 @@ export async function packHTMLAssets(html: string, title: string, zip?: JSZip) { +${customElementTemplate} + ${pageContentHTML} `