Support image clips/gifs (#3583)

Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
This commit is contained in:
yoshnopa
2023-05-17 01:30:51 +02:00
committed by GitHub
parent 0e199a525f
commit a2e477e1a7
62 changed files with 999 additions and 363 deletions

View File

@@ -425,20 +425,25 @@ export const LightboxComponent: React.FC<IProps> = ({
}
}
const navItems = images.map((image, i) => (
<img
src={image.paths.thumbnail ?? ""}
alt=""
className={cx(CLASSNAME_NAVIMAGE, {
const navItems = images.map((image, i) =>
React.createElement(image.paths.preview != "" ? "video" : "img", {
loop: image.paths.preview != "",
autoPlay: image.paths.preview != "",
src:
image.paths.preview != ""
? image.paths.preview ?? ""
: image.paths.thumbnail ?? "",
alt: "",
className: cx(CLASSNAME_NAVIMAGE, {
[CLASSNAME_NAVSELECTED]: i === index,
})}
onClick={(e: React.MouseEvent) => selectIndex(e, i)}
role="presentation"
loading="lazy"
key={image.paths.thumbnail}
onLoad={imageLoaded}
/>
));
}),
onClick: (e: React.MouseEvent) => selectIndex(e, i),
role: "presentation",
loading: "lazy",
key: image.paths.thumbnail,
onLoad: imageLoaded,
})
);
const onDelayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let numberValue = Number.parseInt(e.currentTarget.value, 10);
@@ -845,6 +850,7 @@ export const LightboxComponent: React.FC<IProps> = ({
scrollAttemptsBeforeChange={scrollAttemptsBeforeChange}
setZoom={(v) => setZoom(v)}
resetPosition={resetPosition}
isVideo={image.visual_files?.[0]?.__typename == "VideoFile"}
/>
) : undefined}
</div>