Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/mediasize: don't allow images to be too small

Browse source
This commit is contained in:
Tulir Asokan 2024-12-05 18:27:59 +02:00
parent 7f30963f5e
commit b166302d1e
1 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/util/mediasize.ts
View file

@ -28,6 +28,9 @@ export interface ImageContainerSize {
export const defaultImageContainerSize: ImageContainerSize = { width: 320, height: 240 } export const defaultImageContainerSize: ImageContainerSize = { width: 320, height: 240 }
export const defaultVideoContainerSize: ImageContainerSize = { width: 400, height: 320 } export const defaultVideoContainerSize: ImageContainerSize = { width: 400, height: 320 }
const minHeight = 40
const minWidth = 40
export function calculateMediaSize( export function calculateMediaSize(
width?: number, width?: number,
height?: number, height?: number,
@ -64,6 +67,19 @@ export function calculateMediaSize(
height = imageContainerHeight height = imageContainerHeight
} }
} }
const extraMediaStyle: CSSProperties = {}
// For very small images, force them to be bigger, but crop the result using object-fit
// The full image can always be viewed by clicking.
if (height < minHeight) {
height = minHeight
extraMediaStyle.objectFit = "cover"
extraMediaStyle.height = "100%"
}
if (width < minWidth) {
width = minWidth
extraMediaStyle.objectFit = "cover"
extraMediaStyle.width = "100%"
}
return { return {
container: { container: {
width: `${width}px`, width: `${width}px`,
@ -75,6 +91,7 @@ export function calculateMediaSize(
}, },
media: { media: {
aspectRatio: `${origWidth} / ${origHeight}`, aspectRatio: `${origWidth} / ${origHeight}`,
...extraMediaStyle,
}, },
} }
} }