Skip to content
Snippets Groups Projects
Commit fbad5aef authored by insert's avatar insert
Browse files

Merge branch 'images' into 'master'

replace js image scaling with css for message attatchments

See merge request !3
parents 1c80d567 b4294359
1 merge request!3replace js image scaling with css for message attatchments
......@@ -2,6 +2,13 @@
border-radius: 6px;
margin: .125rem 0 .125rem;
height: auto;
max-height: 640px;
max-width: min(480px, 100%);
object-fit: contain;
&[data-spoiler="true"] {
filter: blur(30px);
pointer-events: none;
......
......@@ -15,60 +15,33 @@ interface Props {
}
const MAX_ATTACHMENT_WIDTH = 480;
const MAX_ATTACHMENT_HEIGHT = 640;
export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
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);
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) {
case "Image": {
return (
<div
style={{ width }}
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}
>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<img
src={url}
alt={filename}
width={metadata.width}
height={metadata.height}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.image)}
......@@ -79,7 +52,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 &&
window.open(url, "_blank")
}
style={{ width, height }}
/>
</div>
);
......@@ -102,13 +74,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
<div style={{ width, height }}>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<div
style={{ width }}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}
......@@ -117,7 +86,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
<video
src={url}
controls
style={{ width, height }}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
......
......@@ -101,6 +101,7 @@ const PreviewBox = styled.div`
.icon {
height: 100px;
width: 100%;
margin-bottom: 4px;
object-fit: contain;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment