Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cf22fd8501 | ||
|
|
022e5e6987 | ||
|
|
5c765925d2 | ||
|
|
747714b2f3 | ||
|
|
68f44f0f1c |
@@ -37,6 +37,7 @@ import {
|
||||
} from '../../../types/matrix/common';
|
||||
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
|
||||
import { parseGeoUri, scaleYDimension } from '../../utils/common';
|
||||
import { formatAccuracy } from '../../utils/geoShare';
|
||||
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
|
||||
import { FileHeader, FileDownloadButton } from './FileHeader';
|
||||
|
||||
@@ -732,6 +733,8 @@ export function MLocation({ content }: MLocationProps) {
|
||||
const lon = parseFloat(location.longitude);
|
||||
if (!isFinite(lat) || !isFinite(lon)) return <BrokenContent />;
|
||||
const description = typeof msc3488?.description === 'string' ? msc3488.description : undefined;
|
||||
// RFC 5870 `;u=` uncertainty (meters), sent by Lotus since Gitea #340.
|
||||
const accuracyLabel = formatAccuracy(Number(/;u=([\d.]+)/.exec(geoUri)?.[1]));
|
||||
const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${
|
||||
lat - 0.004
|
||||
},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
|
||||
@@ -772,6 +775,7 @@ export function MLocation({ content }: MLocationProps) {
|
||||
)}
|
||||
<Text size="T300" priority="300">
|
||||
{`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
|
||||
{accuracyLabel && ` (${accuracyLabel})`}
|
||||
</Text>
|
||||
<Button
|
||||
as="a"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
import { GIF_PREVIEW_MAX_HEIGHT } from '../../utils/gifPreviewSize';
|
||||
|
||||
export const UrlPreview = style([
|
||||
DefaultReset,
|
||||
@@ -955,12 +956,14 @@ export const PortraitSideLayout = style([
|
||||
// GIF card (Giphy / Tenor)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Full card width; a GIF narrower than the card (portrait, square, small) is
|
||||
// centred on the surface colour instead of being stretched and cropped.
|
||||
export const GifThumbnailWrapper = style([
|
||||
DefaultReset,
|
||||
{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
maxHeight: toRem(200),
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
backgroundColor: color.Surface.Container,
|
||||
@@ -972,14 +975,26 @@ export const GifThumbnailWrapper = style([
|
||||
},
|
||||
]);
|
||||
|
||||
// Wraps just the GIF so the "GIF" badge sits on the GIF's own corner.
|
||||
export const GifFrame = style([
|
||||
DefaultReset,
|
||||
{
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
},
|
||||
]);
|
||||
|
||||
// The inline width/aspect-ratio (from og:image:width/height) sets the size;
|
||||
// max-width lets a phone's narrower card shrink it, keeping the ratio.
|
||||
export const GifThumbnailImg = style([
|
||||
DefaultReset,
|
||||
{
|
||||
width: '100%',
|
||||
maxHeight: toRem(200),
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
maxHeight: toRem(GIF_PREVIEW_MAX_HEIGHT),
|
||||
height: 'auto',
|
||||
objectFit: 'contain',
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
as,
|
||||
color,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import { ImageOverlay } from '../ImageOverlay';
|
||||
import { MobileTouchTarget } from '../../styles/mobile.css';
|
||||
@@ -48,6 +49,11 @@ import {
|
||||
tiktokOembedUrl,
|
||||
tiktokPlayerEmbedUrl,
|
||||
} from '../../utils/videoEmbed';
|
||||
import {
|
||||
GIF_PREVIEW_MAX_HEIGHT,
|
||||
GIF_PREVIEW_MAX_WIDTH,
|
||||
gifPreviewBox,
|
||||
} from '../../utils/gifPreviewSize';
|
||||
|
||||
const linkStyles = { color: color.Success.Main };
|
||||
|
||||
@@ -2277,6 +2283,9 @@ function GifCard({
|
||||
}) {
|
||||
const title = (prev['og:title'] as string | undefined) ?? '';
|
||||
const mxcImage = prev['og:image'] as string | undefined;
|
||||
// Size the GIF from its own dimensions (Giphy and Tenor publish them) rather
|
||||
// than forcing every GIF into one cropped band.
|
||||
const box = gifPreviewBox(prev['og:image:width'], prev['og:image:height']);
|
||||
|
||||
// A GIF card exists to show a moving GIF, so request the original rather than
|
||||
// a thumbnail — the thumbnail endpoint would return a frozen first frame.
|
||||
@@ -2284,7 +2293,15 @@ function GifCard({
|
||||
const thumbSrc = mxcImage
|
||||
? shouldServeGifOriginal(url, prev)
|
||||
? mxcUrlToHttp(mx, mxcImage, useAuthentication)
|
||||
: mxcUrlToHttp(mx, mxcImage, useAuthentication, 400, 200, 'scale', false)
|
||||
: mxcUrlToHttp(
|
||||
mx,
|
||||
mxcImage,
|
||||
useAuthentication,
|
||||
GIF_PREVIEW_MAX_WIDTH * 2,
|
||||
GIF_PREVIEW_MAX_HEIGHT * 2,
|
||||
'scale',
|
||||
false,
|
||||
)
|
||||
: null;
|
||||
|
||||
// If there's no image, fall back to a generic-style layout
|
||||
@@ -2316,7 +2333,9 @@ function GifCard({
|
||||
|
||||
return (
|
||||
<Box direction="Column" style={{ width: '100%' }}>
|
||||
{/* GIF thumbnail — full width */}
|
||||
{/* The whole GIF at its own aspect ratio, centred; never cropped. With a
|
||||
known size the box is reserved before it loads (no layout jump);
|
||||
without one it shows at its natural size, capped by the card. */}
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
@@ -2324,8 +2343,22 @@ function GifCard({
|
||||
className={previewCss.GifThumbnailWrapper}
|
||||
aria-label={`View GIF on ${siteBadgeLabel}: ${title}`}
|
||||
>
|
||||
<img className={previewCss.GifThumbnailImg} src={thumbSrc} alt={title} loading="lazy" />
|
||||
<span className={previewCss.GifBadge}>GIF</span>
|
||||
<span className={previewCss.GifFrame}>
|
||||
<img
|
||||
className={previewCss.GifThumbnailImg}
|
||||
src={thumbSrc}
|
||||
alt={title}
|
||||
loading="lazy"
|
||||
width={box?.width}
|
||||
height={box?.height}
|
||||
style={
|
||||
box
|
||||
? { width: toRem(box.width), aspectRatio: `${box.width} / ${box.height}` }
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
<span className={previewCss.GifBadge}>GIF</span>
|
||||
</span>
|
||||
</a>
|
||||
{/* Footer row */}
|
||||
<UrlPreviewContent>
|
||||
|
||||
@@ -153,6 +153,9 @@ import { useRoomUnverifiedDeviceCount } from '../../hooks/useDeviceVerificationS
|
||||
import { ScheduleMessageModal } from './ScheduleMessageModal';
|
||||
import { ScheduledMessagesTray } from './ScheduledMessagesTray';
|
||||
import { DraftIndicator } from './DraftIndicator';
|
||||
import { PendingLocation, ShareLocationDialog } from './ShareLocationDialog';
|
||||
import { buildGeoUri } from '../../utils/geoShare';
|
||||
import { useLocalRoomName } from '../../hooks/useRoomMeta';
|
||||
import { scheduledMessagesAtom } from '../../state/scheduledMessages';
|
||||
import { createErrorToast, toastQueueAtom } from '../../state/toast';
|
||||
import { getThreadDraftKey } from '../../state/room/thread';
|
||||
@@ -356,6 +359,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
() => normalizeComposerToolbarOrder(composerToolbarButtons?.order),
|
||||
[composerToolbarButtons?.order],
|
||||
);
|
||||
const displayRoomName = useLocalRoomName(room);
|
||||
const [locating, setLocating] = React.useState(false);
|
||||
const [locationError, setLocationError] = React.useState<string | null>(null);
|
||||
const handleShareLocation = useCallback(() => {
|
||||
@@ -368,21 +372,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
setLocating(false);
|
||||
const { latitude, longitude } = pos.coords;
|
||||
const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
|
||||
const ts = Date.now();
|
||||
// MSC3488 extensible location: send the geo_uri (legacy) alongside the
|
||||
// m.location/m.asset/m.ts blocks so Element and other clients render a
|
||||
// proper "shared location" pin instead of falling back to plain text.
|
||||
sendRoomMessage(mx, roomId, threadRootId ?? null, {
|
||||
msgtype: 'm.location',
|
||||
body: `Shared a location: ${geoUri}`,
|
||||
geo_uri: geoUri,
|
||||
'org.matrix.msc3488.location': { uri: geoUri },
|
||||
'org.matrix.msc3488.asset': { type: 'm.self' },
|
||||
'org.matrix.msc3488.ts': ts,
|
||||
'm.ts': ts,
|
||||
});
|
||||
// [Gitea #340] Don't send straight away: confirm first (ShareLocationDialog).
|
||||
const { latitude, longitude, accuracy } = pos.coords;
|
||||
setPendingLocation({ latitude, longitude, accuracy });
|
||||
},
|
||||
(err) => {
|
||||
setLocating(false);
|
||||
@@ -397,7 +389,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
},
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
}, [mx, roomId, threadRootId]);
|
||||
}, []);
|
||||
const [pendingLocation, setPendingLocation] = React.useState<PendingLocation | null>(null);
|
||||
const handleSendLocation = useCallback(
|
||||
(approximate: boolean) => {
|
||||
if (!pendingLocation) return;
|
||||
const { latitude, longitude, accuracy } = pendingLocation;
|
||||
setPendingLocation(null);
|
||||
const geoUri = buildGeoUri(latitude, longitude, accuracy, approximate);
|
||||
const ts = Date.now();
|
||||
// MSC3488 extensible location: send the geo_uri (legacy) alongside the
|
||||
// m.location/m.asset/m.ts blocks so Element and other clients render a
|
||||
// proper "shared location" pin instead of falling back to plain text.
|
||||
sendRoomMessage(mx, roomId, threadRootId ?? null, {
|
||||
msgtype: 'm.location',
|
||||
body: `Shared ${approximate ? 'an approximate' : 'a'} location: ${geoUri}`,
|
||||
geo_uri: geoUri,
|
||||
'org.matrix.msc3488.location': { uri: geoUri },
|
||||
'org.matrix.msc3488.asset': { type: 'm.self' },
|
||||
'org.matrix.msc3488.ts': ts,
|
||||
'm.ts': ts,
|
||||
});
|
||||
},
|
||||
[pendingLocation, mx, roomId, threadRootId],
|
||||
);
|
||||
|
||||
const handleVoiceSend = useCallback(
|
||||
async (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => {
|
||||
@@ -1538,11 +1553,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
style={touchTarget}
|
||||
className={MobileTouchTarget}
|
||||
>
|
||||
{locating ? (
|
||||
<Spinner variant="Secondary" size="400" />
|
||||
) : (
|
||||
<Icon src={Icons.SpaceGlobe} />
|
||||
)}
|
||||
{locating ? <Spinner variant="Secondary" size="400" /> : <Icon src={Icons.Pin} />}
|
||||
</IconButton>
|
||||
) : null;
|
||||
|
||||
@@ -1751,6 +1762,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
onClose={() => setPollOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{pendingLocation && (
|
||||
<ShareLocationDialog
|
||||
location={pendingLocation}
|
||||
roomName={displayRoomName}
|
||||
onSend={handleSendLocation}
|
||||
requestClose={() => setPendingLocation(null)}
|
||||
/>
|
||||
)}
|
||||
{scheduleOpen && (
|
||||
<ScheduleMessageModal
|
||||
roomId={roomId}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
config,
|
||||
Dialog,
|
||||
Header,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Overlay,
|
||||
OverlayBackdrop,
|
||||
OverlayCenter,
|
||||
Text,
|
||||
} from 'folds';
|
||||
import { useModalStyle } from '../../hooks/useModalStyle';
|
||||
import { stopPropagation } from '../../utils/keyboard';
|
||||
import { formatAccuracy } from '../../utils/geoShare';
|
||||
|
||||
export type PendingLocation = { latitude: number; longitude: number; accuracy?: number };
|
||||
|
||||
type ShareLocationDialogProps = {
|
||||
location: PendingLocation;
|
||||
roomName: string;
|
||||
onSend: (approximate: boolean) => void;
|
||||
requestClose: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* [Gitea #340] Confirm step before an m.location is posted: the toolbar button
|
||||
* used to send the exact position from a single click. Shows what will be
|
||||
* shared (coordinates + the fix's accuracy) and offers an approximate share.
|
||||
*/
|
||||
export function ShareLocationDialog({
|
||||
location,
|
||||
roomName,
|
||||
onSend,
|
||||
requestClose,
|
||||
}: ShareLocationDialogProps) {
|
||||
const modalStyle = useModalStyle(420);
|
||||
const { latitude, longitude, accuracy } = location;
|
||||
const accuracyLabel = formatAccuracy(accuracy);
|
||||
const mapUrl = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=16/${latitude}/${longitude}`;
|
||||
|
||||
return (
|
||||
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: '#share-location-cancel',
|
||||
onDeactivate: requestClose,
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Dialog
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="share-location-title"
|
||||
variant="Surface"
|
||||
style={modalStyle}
|
||||
>
|
||||
<Header
|
||||
style={{
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
}}
|
||||
variant="Surface"
|
||||
size="500"
|
||||
>
|
||||
<Box grow="Yes">
|
||||
<Text id="share-location-title" as="h2" size="H4">
|
||||
Share your location?
|
||||
</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||
<Text>
|
||||
Everyone in <b>{roomName}</b> will see this position, and it can't be taken
|
||||
back from their devices once sent.
|
||||
</Text>
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="T400">
|
||||
<b>
|
||||
{latitude.toFixed(5)}, {longitude.toFixed(5)}
|
||||
</b>
|
||||
{accuracyLabel && ` (${accuracyLabel})`}
|
||||
</Text>
|
||||
<Text size="T200" priority="300">
|
||||
{accuracyLabel
|
||||
? 'The ± is how sure your device is of this position.'
|
||||
: 'Your device did not say how accurate this position is.'}{' '}
|
||||
<a href={mapUrl} target="_blank" rel="noreferrer noopener">
|
||||
Check on OpenStreetMap
|
||||
</a>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box gap="200" justifyContent="End" wrap="Wrap">
|
||||
<Button
|
||||
id="share-location-cancel"
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
onClick={requestClose}
|
||||
>
|
||||
<Text size="B400">Cancel</Text>
|
||||
</Button>
|
||||
<Button variant="Secondary" fill="Soft" onClick={() => onSend(true)}>
|
||||
<Text size="B400">Send approximate (~1 km)</Text>
|
||||
</Button>
|
||||
<Button variant="Primary" onClick={() => onSend(false)}>
|
||||
<Text size="B400">Send</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Dialog>
|
||||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { buildGeoUri, formatAccuracy } from './geoShare';
|
||||
import { parseGeoUri } from './common';
|
||||
|
||||
test('buildGeoUri: exact share keeps 6 decimals and adds the accuracy as u=', () => {
|
||||
assert.equal(buildGeoUri(40.748817, -73.985428, 12.4), 'geo:40.748817,-73.985428;u=12');
|
||||
assert.equal(buildGeoUri(40.748817, -73.985428), 'geo:40.748817,-73.985428');
|
||||
assert.equal(buildGeoUri(40.748817, -73.985428, Number.NaN), 'geo:40.748817,-73.985428');
|
||||
});
|
||||
|
||||
test('buildGeoUri: approximate share rounds to ~1 km and never claims better than 1 km', () => {
|
||||
assert.equal(buildGeoUri(40.748817, -73.985428, 12, true), 'geo:40.75,-73.99;u=1000');
|
||||
assert.equal(buildGeoUri(40.748817, -73.985428, 3500, true), 'geo:40.75,-73.99;u=3500');
|
||||
});
|
||||
|
||||
test('buildGeoUri output still parses with the renderer', () => {
|
||||
const loc = parseGeoUri(buildGeoUri(51.5, -0.12, 30));
|
||||
assert.ok(loc);
|
||||
assert.equal(parseFloat(loc.latitude), 51.5);
|
||||
assert.equal(parseFloat(loc.longitude), -0.12);
|
||||
});
|
||||
|
||||
test('formatAccuracy', () => {
|
||||
assert.equal(formatAccuracy(12.4), '±12 m');
|
||||
assert.equal(formatAccuracy(3500), '±3.5 km');
|
||||
assert.equal(formatAccuracy(25000), '±25 km');
|
||||
assert.equal(formatAccuracy(undefined), undefined);
|
||||
assert.equal(formatAccuracy(0), undefined);
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* [Gitea #340] Helpers for the "Share location" confirm step: the geo URI to
|
||||
* send (RFC 5870, with the fix's accuracy as `u=` so receivers can draw a
|
||||
* radius) and a human accuracy label, so a ±3 km Wi-Fi/IP fix isn't presented
|
||||
* — or sent — as if it were exact.
|
||||
*/
|
||||
|
||||
/** Decimals kept for an "approximate" share: 2 → ~1.1 km of latitude. */
|
||||
export const APPROXIMATE_DECIMALS = 2;
|
||||
/** Uncertainty reported for an approximate share (half a 0.01° cell, rounded up). */
|
||||
export const APPROXIMATE_UNCERTAINTY_M = 1000;
|
||||
|
||||
const validAccuracy = (accuracy?: number): number | undefined =>
|
||||
typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy > 0
|
||||
? Math.round(accuracy)
|
||||
: undefined;
|
||||
|
||||
export const buildGeoUri = (
|
||||
latitude: number,
|
||||
longitude: number,
|
||||
accuracy?: number,
|
||||
approximate = false,
|
||||
): string => {
|
||||
const decimals = approximate ? APPROXIMATE_DECIMALS : 6;
|
||||
const u = approximate
|
||||
? Math.max(APPROXIMATE_UNCERTAINTY_M, validAccuracy(accuracy) ?? 0)
|
||||
: validAccuracy(accuracy);
|
||||
const base = `geo:${latitude.toFixed(decimals)},${longitude.toFixed(decimals)}`;
|
||||
return u ? `${base};u=${u}` : base;
|
||||
};
|
||||
|
||||
/** "±12 m", "±3.5 km", or undefined when the browser gave no accuracy. */
|
||||
export const formatAccuracy = (accuracy?: number): string | undefined => {
|
||||
const m = validAccuracy(accuracy);
|
||||
if (m === undefined) return undefined;
|
||||
if (m < 1000) return `±${m} m`;
|
||||
const km = m / 1000;
|
||||
return `±${km < 10 ? km.toFixed(1) : Math.round(km)} km`;
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { gifPreviewBox } from './gifPreviewSize';
|
||||
|
||||
test('gifPreviewBox: a landscape GIF wider than the card fills its width', () => {
|
||||
assert.deepEqual(gifPreviewBox(480, 270), { width: 400, height: 225 });
|
||||
assert.deepEqual(gifPreviewBox(480, 200), { width: 400, height: 167 });
|
||||
});
|
||||
|
||||
test('gifPreviewBox: square and portrait GIFs keep their shape instead of being cropped', () => {
|
||||
assert.deepEqual(gifPreviewBox(300, 300), { width: 320, height: 320 });
|
||||
assert.deepEqual(gifPreviewBox(480, 480), { width: 320, height: 320 });
|
||||
assert.deepEqual(gifPreviewBox(240, 480), { width: 160, height: 320 });
|
||||
});
|
||||
|
||||
test('gifPreviewBox: a small GIF is enlarged at most 2×', () => {
|
||||
assert.deepEqual(gifPreviewBox(100, 80), { width: 200, height: 160 });
|
||||
assert.deepEqual(gifPreviewBox(150, 150), { width: 300, height: 300 });
|
||||
});
|
||||
|
||||
test('gifPreviewBox: extreme aspect ratios stay inside the box and never collapse to 0', () => {
|
||||
assert.deepEqual(gifPreviewBox(2000, 50), { width: 400, height: 10 });
|
||||
assert.deepEqual(gifPreviewBox(1, 10000), { width: 1, height: 320 });
|
||||
});
|
||||
|
||||
test('gifPreviewBox: accepts numeric strings and rejects unknown sizes', () => {
|
||||
assert.deepEqual(gifPreviewBox('480', '270'), { width: 400, height: 225 });
|
||||
assert.equal(gifPreviewBox(undefined, 270), undefined);
|
||||
assert.equal(gifPreviewBox(480, 0), undefined);
|
||||
assert.equal(gifPreviewBox('wide', 270), undefined);
|
||||
assert.equal(gifPreviewBox(Number.NaN, 270), undefined);
|
||||
});
|
||||
|
||||
test('gifPreviewBox: custom limits', () => {
|
||||
assert.deepEqual(gifPreviewBox(480, 270, 200, 200, 1), { width: 200, height: 113 });
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* Display size for a Giphy / Tenor link-preview GIF. The card used to force
|
||||
* every GIF into a full-width × 200px band with `object-fit: cover`, so square
|
||||
* and portrait GIFs lost most of their height and small ones were blown up.
|
||||
* Fit the GIF inside `maxWidth × maxHeight` keeping its aspect ratio, and
|
||||
* enlarge a small GIF at most `maxUpscale`× so it stays sharp.
|
||||
*/
|
||||
|
||||
/** The GIF card's width (UrlPreview is 25rem); a phone shrinks it further via CSS. */
|
||||
export const GIF_PREVIEW_MAX_WIDTH = 400;
|
||||
export const GIF_PREVIEW_MAX_HEIGHT = 320;
|
||||
export const GIF_PREVIEW_MAX_UPSCALE = 2;
|
||||
|
||||
export type GifPreviewBox = { width: number; height: number };
|
||||
|
||||
// og:image:width / og:image:height are numbers from Synapse, but some sites
|
||||
// publish them as strings; anything else (missing, 0, NaN) means "unknown".
|
||||
const dimension = (value: unknown): number | undefined => {
|
||||
const n = typeof value === 'string' ? Number(value) : value;
|
||||
return typeof n === 'number' && Number.isFinite(n) && n > 0 ? n : undefined;
|
||||
};
|
||||
|
||||
/** The box to render the GIF in, or `undefined` when its size isn't known. */
|
||||
export const gifPreviewBox = (
|
||||
rawWidth: unknown,
|
||||
rawHeight: unknown,
|
||||
maxWidth = GIF_PREVIEW_MAX_WIDTH,
|
||||
maxHeight = GIF_PREVIEW_MAX_HEIGHT,
|
||||
maxUpscale = GIF_PREVIEW_MAX_UPSCALE,
|
||||
): GifPreviewBox | undefined => {
|
||||
const width = dimension(rawWidth);
|
||||
const height = dimension(rawHeight);
|
||||
if (!width || !height) return undefined;
|
||||
const scale = Math.min(maxWidth / width, maxHeight / height, maxUpscale);
|
||||
return {
|
||||
width: Math.max(1, Math.round(width * scale)),
|
||||
height: Math.max(1, Math.round(height * scale)),
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user