feat: implement audio preload management with IntersectionObserver

src/renderer/plugins/markdown-link/lib.ts

@@ -125,6 +125,7 @@ export function convertResourceState (currentFile: PathItem, state: StateCore, b
     } else if (RE_AUDIO.test(fileName)) {
       token.tag = 'audio'
       token.type = 'media'
+      token.attrSet('preload', 'none')
     } else {
       token.attrSet(DOM_ATTR_NAME.LOCAL_IMAGE, 'true')
     }

src/renderer/plugins/media-player.ts

@@ -6,7 +6,6 @@ import { getAttachmentURL } from '@fe/services/base'
 import { sleep } from '@fe/utils'
 import type { Doc } from '@fe/types'
 
-import 'viewerjs/dist/viewer.css'
 import { isElectron } from '@fe/support/env'
 
 function isMediaFile (doc?: Doc | null): 'video' | 'audio' | false {
@@ -87,5 +86,43 @@ export default {
       },
       component: MediaPlayer,
     })
+
+    type XHTMLMediaElement = HTMLMediaElement & { _setAudioPreload?: (isInView: boolean) => void }
+
+    let observer: IntersectionObserver | null = null
+
+    function setAudioPreload (this: XHTMLMediaElement, isInView: boolean) {
+      if (isInView && this._setAudioPreload) {
+        this.preload = 'metadata'
+        delete this._setAudioPreload
+        observer?.unobserve(this)
+      }
+    }
+
+    function cleanObserver () {
+      observer?.disconnect()
+      observer = null
+    }
+
+    ctx.registerHook('VIEW_RENDERED', () => {
+      cleanObserver()
+
+      const medias = ctx.view.getViewDom()?.querySelectorAll<HTMLMediaElement>('audio')
+      if (medias && medias.length > 0) {
+        observer = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            const el = entry.target as XHTMLMediaElement
+            el._setAudioPreload?.(entry.isIntersecting)
+          })
+        })
+
+        medias.forEach((media: XHTMLMediaElement) => {
+          if (media.preload === 'none') {
+            media._setAudioPreload = ctx.lib.lodash.debounce(setAudioPreload, 400, { leading: false, trailing: true })
+            observer!.observe(media)
+          }
+        })
+      }
+    })
   }
 } as Plugin

src/renderer/services/view.ts

@@ -237,6 +237,10 @@ export async function getContentHtml (options: BuildInHookTypes['VIEW_ON_GET_HTM
         node.removeAttribute('target')
       }
 
+      if (node.tagName === 'AUDIO') {
+        node.removeAttribute('preload')
+      }
+
       const len = node.children.length
       for (let i = len - 1; i >= 0; i--) {
         const ele = node.children[i]