File size: 1,232 Bytes
7e3630c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { Text } from "src/ink";
import React, { useMemo } from "react";
import { useImage } from "../../hooks/useImage.js";
import { useMeasuredSize } from "../../hooks/useMeasuredSize.js";
import { renderHalfBlock } from "../../renderers/halfBlock.js";
import ImageBox from "../ImageBox.js";
import type { ImageProps } from "./protocol.js";
function HalfBlockImage(props: ImageProps) {
const { src, width, height, alt } = props;
const { containerRef, resolvedWidth, resolvedHeight } = useMeasuredSize(
width,
height,
);
const { imageData, error } = useImage({
src,
pixelWidth: resolvedWidth,
pixelHeight: resolvedHeight * 2,
mode: "pixels",
});
const imageOutput = useMemo(() => {
if (!imageData) return null;
return renderHalfBlock(imageData);
}, [imageData]);
return (
<ImageBox
ref={containerRef}
width={width}
height={height}
alt={alt}
error={error}
loaded={!!imageOutput}
>
{imageOutput?.split("\n").map((line, idx) => (
// biome-ignore lint/suspicious/noArrayIndexKey: static content, won't change
<Text key={`${line}-${idx}`}>{line}</Text>
))}
</ImageBox>
);
}
export default HalfBlockImage;
|