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

Merge branch 'images' into 'master'

Browse source 
replace js image scaling with css for message attatchments

See merge request revolt/revite!3
This commit is contained in:
insert 2021-07-04 17:53:55 +00:00
commit fbad5aef92
3 changed files with 12 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -2,6 +2,13 @@
border-radius: 6px; border-radius: 6px;
margin: .125rem 0 .125rem; margin: .125rem 0 .125rem;
height: auto;
max-height: 640px;
max-width: min(480px, 100%);
object-fit: contain;
&[data-spoiler="true"] { &[data-spoiler="true"] {
filter: blur(30px); filter: blur(30px);
pointer-events: none; pointer-events: none;

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

@ -15,60 +15,33 @@ interface Props {
} }
const MAX_ATTACHMENT_WIDTH = 480; const MAX_ATTACHMENT_WIDTH = 480;
const MAX_ATTACHMENT_HEIGHT = 640;
export default function Attachment({ attachment, hasContent }: Props) { export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext); const client = useContext(AppContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_")); const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true); const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
let width = 0,
height = 0;
if (metadata.type === 'Image' || metadata.type === 'Video') {
let limitingWidth = Math.min(
maxWidth,
metadata.width
);
let limitingHeight = Math.min(
MAX_ATTACHMENT_HEIGHT,
metadata.height
);
// Calculate smallest possible WxH.
width = Math.min(
limitingWidth,
limitingHeight * (metadata.width / metadata.height)
);
height = Math.min(
limitingHeight,
limitingWidth * (metadata.height / metadata.width)
);
}
switch (metadata.type) { switch (metadata.type) {
case "Image": { case "Image": {
return ( return (
<div <div
style={{ width }}
className={styles.container} className={styles.container}
onClick={() => spoiler && setSpoiler(false)} onClick={() => spoiler && setSpoiler(false)}
> >
{spoiler && ( {spoiler && (
<div className={styles.overflow}> <div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span> <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div> </div>
</div>
)} )}
<img <img
src={url} src={url}
alt={filename} alt={filename}
width={metadata.width}
height={metadata.height}
data-spoiler={spoiler} data-spoiler={spoiler}
data-has-content={hasContent} data-has-content={hasContent}
className={classNames(styles.attachment, styles.image)} className={classNames(styles.attachment, styles.image)}
@ -79,7 +52,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 && ev.button === 1 &&
window.open(url, "_blank") window.open(url, "_blank")
} }
style={{ width, height }}
/> />
</div> </div>
); );
@ -102,13 +74,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => spoiler && setSpoiler(false)}> onClick={() => spoiler && setSpoiler(false)}>
{spoiler && ( {spoiler && (
<div className={styles.overflow}> <div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span> <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div> </div>
</div>
)} )}
<div <div
style={{ width }}
data-spoiler={spoiler} data-spoiler={spoiler}
data-has-content={hasContent} data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)} className={classNames(styles.attachment, styles.video)}
@ -117,7 +86,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
<video <video
src={url} src={url}
controls controls
style={{ width, height }}
onMouseDown={ev => onMouseDown={ev =>
ev.button === 1 && ev.button === 1 &&
window.open(url, "_blank") window.open(url, "_blank")

1
src/components/common/messaging/bars/FilePreview.tsx
View file

@ -101,6 +101,7 @@ const PreviewBox = styled.div`
.icon { .icon {
height: 100px; height: 100px;
width: 100%;
margin-bottom: 4px; margin-bottom: 4px;
object-fit: contain; object-fit: contain;
} }