fix: possible flickering of plugin component for file-show
Massimo Melina committed
Dec 15, 2024 at 12:20 UTC
f601f805092ba34c0f792e009d91fa529289ebf4
1 file changed
+4
-3
frontend/src/show.ts
+4
-3
@@ -1,5 +1,5 @@
1
import { DirEntry, DirList, ext2type, state, useSnapState } from './state'
2
-import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
2
+import { createElement as h, Fragment, useEffect, useMemo, useRef, useState } from 'react'
3
import {
4
basename, dirname, domOn, hfsEvent, hIcon, isMac, newDialog, pathEncode, restartAnimation, useStateMounted,
5
isNumeric,
@@ -83,7 +83,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false, startShuffle=fal
83
}
84
})
85
const [showNav, setShowNav] = useState(false)
86
- const component = getShowComponent(cur)
86
+ const component = useMemo(() => getShowComponent(cur), [cur])
87
const isAudio = component === Audio
88
useEffect(() => setShowNav(isAudio), [isAudio])
89
const timerRef = useRef(0)
@@ -239,6 +239,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false, startShuffle=fal
239
playMsgOnce = false
240
const el = getShowElement()
241
if (!(el instanceof HTMLMediaElement)) return
242
+ const mel = el as HTMLMediaElement
243
const dlg = newDialog({ // so we offer
244
onClose: () => playMsgOnce = true,
245
Content: () => h(Btn, {
@@ -246,7 +247,7 @@ export function fileShow(entry: DirEntry, { startPlaying=false, startShuffle=fal
247
icon: 'play',
248
label: "Click here to play",
249
onClick: () => {
249
- el.play().catch(curFailed)
250
+ mel.play().catch(curFailed)
251
dlg.close()
252
}
253
})