PlayFishies/fishies-ui
1
0
Fork 0
Code Issues Releases Activity

Fishies 0.8.2

Browse source
This commit is contained in:
CRTkafa 2026-10-07 22:32:19 +03:00
parent 004fbdc97e
commit 4d52068149
14 changed files with 42 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/FishiesImg.tsx
View file

@ -6,13 +6,6 @@ import './loader.css'
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
/** The one way Fishies puts a picture on screen: a drop-in `<img>` that shows the Fishies
* spinner on a glass placeholder in its own box until the file is fully downloaded and
* decoded, then fades it in. Same element, same attributes, same box as the bare `<img>` it
* replaces, so no surface's selectors or layout move. See fx-image.ts for the states.
*
* Give it a size (width/height, or a CSS box) wherever you can: that box is the placeholder,
* and it is what keeps the layout still while the picture is on its way. */
export default function FishiesImg({ ref, decoding, ...props }: ImgHTMLAttributes<HTMLImageElement> & { ref?: Ref<HTMLImageElement> }) {
const own = useRef<HTMLImageElement | null>(null)
const mounted = useRef(false)
@ -24,8 +17,7 @@ export default function FishiesImg({ ref, decoding, ...props }: ImgHTMLAttribute
useIsomorphicLayoutEffect(() => {
const img = own.current
if (!img) return
// A new address waits again; the document's listener (FX_IMAGE_SCRIPT) or this effect
// reveals it. A picture already complete at first mount was in memory: no fade.
if (mounted.current) img.setAttribute('data-fx', 'wait')
const first = !mounted.current
mounted.current = true
@ -38,9 +30,6 @@ export default function FishiesImg({ ref, decoding, ...props }: ImgHTMLAttribute
return <img {...props} ref={setRef} decoding={decoding ?? 'async'} data-fx="wait" suppressHydrationWarning/>
}
/** A `<video>` with a poster: render it with `data-fx={poster ? 'wait' : undefined}` and
* `suppressHydrationWarning`, and pass its ref here. The same placeholder as FishiesImg holds
* its box until the poster is decoded (or the first frame arrives, whichever is first). */
export function useFxPoster(video: { current: HTMLVideoElement | null }, poster: string | null | undefined) {
const decoded = useDecodedUrl(poster)
useIsomorphicLayoutEffect(() => {
@ -53,8 +42,6 @@ export function useFxPoster(video: { current: HTMLVideoElement | null }, poster:
}, [video, poster, decoded])
}
/** For a picture drawn as a CSS background: the address once it is downloaded and decoded,
* `null` until then (show a FishiesSpinner meanwhile). */
export function useDecodedUrl(url: string | null | undefined): string | null {
const [ready, setReady] = useState<string | null>(null)
useEffect(() => {