cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 07:22:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #209 from brecert/image-fixes

Browse source
This commit is contained in:
Paul Makles 2021-09-09 20:43:26 +01:00 committed by GitHub
commit 4bf3140f22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -41,7 +41,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
[styles.margin]: hasContent, [styles.margin]: hasContent,
spoiler, spoiler,
})}> })}>
<ImageFile attachment={attachment} /> <ImageFile attachment={attachment} width={metadata.width} height={metadata.height} />
{spoiler && <Spoiler set={setSpoiler} />} {spoiler && <Spoiler set={setSpoiler} />}
</SizedGrid> </SizedGrid>
); );

15
src/components/common/messaging/attachments/Grid.tsx
View file

@ -3,16 +3,14 @@ import styled from "styled-components";
import { Children } from "../../../../types/Preact"; import { Children } from "../../../../types/Preact";
const Grid = styled.div<{ width: number; height: number }>` const Grid = styled.div<{ width: number; height: number }>`
--width: ${props => props.width}px;
--height: ${props => props.height}px;
display: grid; display: grid;
aspect-ratio: ${(props) => props.width} / ${(props) => props.height}; aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
max-width: min( max-width: min(var(--width), var(--attachment-max-width));
100%, max-height: min(var(--height), var(--attachment-max-height));
${(props) => props.width}px,
var(--attachment-max-width)
);
max-height: min(${(props) => props.height}px, var(--attachment-max-height));
// This is a hack for browsers not supporting aspect-ratio. // This is a hack for browsers not supporting aspect-ratio.
// Stolen from https://codepen.io/una/pen/BazyaOM. // Stolen from https://codepen.io/una/pen/BazyaOM.
@ -44,6 +42,9 @@ const Grid = styled.div<{ width: number; height: number }>`
overflow: hidden; overflow: hidden;
object-fit: contain; object-fit: contain;
// It's something
object-position: left;
} }
video { video {

10
src/components/common/messaging/attachments/ImageFile.tsx
View file

@ -7,25 +7,24 @@ import {useContext, useState} from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient"; import { AppContext } from "../../../../context/revoltjs/RevoltClient";
enum ImageLoadingState enum ImageLoadingState {
{
Loading, Loading,
Loaded, Loaded,
Error Error
} }
interface Props { type Props = JSX.HTMLAttributes<HTMLImageElement> & {
attachment: Attachment; attachment: Attachment;
} }
export default function ImageFile({ attachment }: Props) export default function ImageFile({ attachment, ...props }: Props) {
{
const [loading, setLoading] = useState(ImageLoadingState.Loading); const [loading, setLoading] = useState(ImageLoadingState.Loading);
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const url = client.generateFileURL(attachment)!; const url = client.generateFileURL(attachment)!;
return <img return <img
{...props}
src={url} src={url}
alt={attachment.filename} alt={attachment.filename}
loading="lazy" loading="lazy"
@ -44,6 +43,5 @@ export default function ImageFile({ attachment }: Props)
onError={() => onError={() =>
setLoading(ImageLoadingState.Error) setLoading(ImageLoadingState.Error)
} }
/> />
} }