Bugfix: No Image Upscale for Clips (#4569)

This commit is contained in:
yoshnopa
2024-02-16 02:21:36 +01:00
committed by GitHub
parent 15aac68a14
commit aaf3114194
2 changed files with 7 additions and 30 deletions

View File

@@ -855,6 +855,8 @@ export const LightboxComponent: React.FC<IProps> = ({
{i >= currentIndex - 1 && i <= currentIndex + 1 ? ( {i >= currentIndex - 1 && i <= currentIndex + 1 ? (
<LightboxImage <LightboxImage
src={image.paths.image ?? ""} src={image.paths.image ?? ""}
width={image.visual_files?.[0]?.width ?? 0}
height={image.visual_files?.[0]?.height ?? 0}
displayMode={displayMode} displayMode={displayMode}
scaleUp={lightboxSettings?.scaleUp ?? false} scaleUp={lightboxSettings?.scaleUp ?? false}
scrollMode={ scrollMode={

View File

@@ -52,6 +52,8 @@ function calculateDefaultZoom(
interface IProps { interface IProps {
src: string; src: string;
width: number;
height: number;
displayMode: GQL.ImageLightboxDisplayMode; displayMode: GQL.ImageLightboxDisplayMode;
scaleUp: boolean; scaleUp: boolean;
scrollMode: GQL.ImageLightboxScrollMode; scrollMode: GQL.ImageLightboxScrollMode;
@@ -74,6 +76,8 @@ interface IProps {
export const LightboxImage: React.FC<IProps> = ({ export const LightboxImage: React.FC<IProps> = ({
src, src,
width,
height,
displayMode, displayMode,
scaleUp, scaleUp,
scrollMode, scrollMode,
@@ -94,8 +98,6 @@ export const LightboxImage: React.FC<IProps> = ({
const [moving, setMoving] = useState(false); const [moving, setMoving] = useState(false);
const [positionX, setPositionX] = useState(0); const [positionX, setPositionX] = useState(0);
const [positionY, setPositionY] = useState(0); const [positionY, setPositionY] = useState(0);
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const [boxWidth, setBoxWidth] = useState(0); const [boxWidth, setBoxWidth] = useState(0);
const [boxHeight, setBoxHeight] = useState(0); const [boxHeight, setBoxHeight] = useState(0);
@@ -135,24 +137,6 @@ export const LightboxImage: React.FC<IProps> = ({
}, 250); }, 250);
}, [container]); }, [container]);
useEffect(() => {
let mounted = true;
const img = new Image();
function onLoad() {
if (mounted) {
setWidth(img.width);
setHeight(img.height);
}
}
img.onload = onLoad;
img.src = src;
return () => {
mounted = false;
};
}, [src]);
const minMaxY = useCallback( const minMaxY = useCallback(
(appliedZoom: number) => { (appliedZoom: number) => {
let minY, maxY: number; let minY, maxY: number;
@@ -528,15 +512,6 @@ export const LightboxImage: React.FC<IProps> = ({
} }
const ImageView = isVideo ? "video" : "img"; const ImageView = isVideo ? "video" : "img";
const customStyle = isVideo
? {
touchAction: "none",
display: "flex",
margin: "auto",
width: "100%",
"max-height": "90vh",
}
: { touchAction: "none" };
return ( return (
<div <div
@@ -559,7 +534,7 @@ export const LightboxImage: React.FC<IProps> = ({
src={src} src={src}
alt="" alt=""
draggable={false} draggable={false}
style={customStyle} style={{ touchAction: "none" }}
onWheel={current ? (e) => onImageScroll(e) : undefined} onWheel={current ? (e) => onImageScroll(e) : undefined}
onMouseDown={onImageMouseDown} onMouseDown={onImageMouseDown}
onMouseUp={onImageMouseUp} onMouseUp={onImageMouseUp}