forked from Kieran/snort
replied note auto height, resized feed imgs
This commit is contained in:
parent
21e1202b97
commit
76d3c78c0a
@ -11,6 +11,7 @@ interface MediaElementProps {
|
||||
url: string;
|
||||
meta?: IMeta;
|
||||
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
interface AudioElementProps {
|
||||
@ -25,6 +26,7 @@ interface VideoElementProps {
|
||||
interface ImageElementProps {
|
||||
url: string;
|
||||
meta?: IMeta;
|
||||
size?: number;
|
||||
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
||||
}
|
||||
|
||||
@ -32,7 +34,7 @@ const AudioElement = ({ url }: AudioElementProps) => {
|
||||
return <audio key={url} src={url} controls />;
|
||||
};
|
||||
|
||||
const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
||||
const ImageElement = ({ url, meta, onMediaClick, size }: ImageElementProps) => {
|
||||
const imageRef = useRef<HTMLImageElement | null>(null);
|
||||
const style = useMemo(() => {
|
||||
const style = {} as CSSProperties;
|
||||
@ -51,6 +53,7 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => {
|
||||
<ProxyImg
|
||||
key={url}
|
||||
src={url}
|
||||
size={size}
|
||||
sha256={meta?.sha256}
|
||||
onClick={onMediaClick}
|
||||
className={classNames("max-h-[80vh] w-full h-full object-contain object-center", {
|
||||
@ -102,7 +105,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
|
||||
|
||||
export function MediaElement(props: MediaElementProps) {
|
||||
if (props.mime.startsWith("image/")) {
|
||||
return <ImageElement url={props.url} meta={props.meta} onMediaClick={props.onMediaClick} />;
|
||||
return <ImageElement url={props.url} meta={props.meta} onMediaClick={props.onMediaClick} size={props.size} />;
|
||||
} else if (props.mime.startsWith("audio/")) {
|
||||
return <AudioElement url={props.url} />;
|
||||
} else if (props.mime.startsWith("video/")) {
|
||||
|
@ -612,7 +612,7 @@ export function NoteCreator() {
|
||||
<h4>
|
||||
<FormattedMessage defaultMessage="Reply To" id="8ED/4u" />
|
||||
</h4>
|
||||
<div className="h-64 overflow-y-auto">
|
||||
<div className="max-h-64 overflow-y-auto">
|
||||
<Note data={note.replyTo} options={replyToNoteOptions} />
|
||||
</div>
|
||||
<hr className="border-border-color border-1 -mx-6" />
|
||||
@ -623,7 +623,7 @@ export function NoteCreator() {
|
||||
<h4>
|
||||
<FormattedMessage defaultMessage="Quote Repost" id="C7642/" />
|
||||
</h4>
|
||||
<div className="h-64 overflow-y-auto">
|
||||
<div className="max-h-64 overflow-y-auto">
|
||||
<Note data={note.quote} options={quoteNoteOptions} />
|
||||
</div>
|
||||
<hr className="border-border-color border-1 -mx-6" />
|
||||
|
@ -12,6 +12,7 @@ interface RevealMediaProps {
|
||||
link: string;
|
||||
onMediaClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
|
||||
meta?: IMeta;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export default function RevealMedia(props: RevealMediaProps) {
|
||||
@ -73,6 +74,7 @@ export default function RevealMedia(props: RevealMediaProps) {
|
||||
url={url.toString()}
|
||||
onMediaClick={props.onMediaClick}
|
||||
meta={props.meta}
|
||||
size={props.size}
|
||||
/>
|
||||
</Reveal>
|
||||
);
|
||||
@ -83,6 +85,7 @@ export default function RevealMedia(props: RevealMediaProps) {
|
||||
url={url.toString()}
|
||||
onMediaClick={props.onMediaClick}
|
||||
meta={props.meta}
|
||||
size={props.size}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -30,6 +30,8 @@ export interface TextProps {
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const baseImageWidth = 910;
|
||||
|
||||
const gridConfigMap = new Map<number, number[][]>([
|
||||
[1, [[4, 3]]],
|
||||
[
|
||||
@ -137,14 +139,16 @@ export default function Text({
|
||||
</a>
|
||||
);
|
||||
|
||||
const RevealMediaInstance = ({ content, data }: { content: string; data?: object }) => {
|
||||
const RevealMediaInstance = ({ content, data, size }: { content: string; data?: object; size?: number }) => {
|
||||
const imeta = data as IMeta | undefined;
|
||||
|
||||
return (
|
||||
<RevealMedia
|
||||
key={content}
|
||||
link={content}
|
||||
creator={creator}
|
||||
meta={imeta}
|
||||
size={size}
|
||||
onMediaClick={e => {
|
||||
if (!disableMediaSpotlight) {
|
||||
e.stopPropagation();
|
||||
@ -196,7 +200,13 @@ export default function Text({
|
||||
}
|
||||
}
|
||||
if (galleryImages.length === 1) {
|
||||
chunks.push(<RevealMediaInstance content={galleryImages[0].content} data={galleryImages[0].data} />);
|
||||
chunks.push(
|
||||
<RevealMediaInstance
|
||||
content={galleryImages[0].content}
|
||||
data={galleryImages[0].data}
|
||||
size={baseImageWidth}
|
||||
/>,
|
||||
);
|
||||
} else {
|
||||
// We build a grid layout to render the grouped images
|
||||
const imagesWithGridConfig = galleryImages.map((gi, index) => {
|
||||
@ -215,6 +225,7 @@ export default function Text({
|
||||
height,
|
||||
};
|
||||
});
|
||||
const size = Math.floor(baseImageWidth / Math.min(4, Math.floor(Math.sqrt(galleryImages.length))));
|
||||
const gallery = (
|
||||
<div className="-mx-4 md:mx-0 my-2 gallery">
|
||||
{imagesWithGridConfig.map(img => (
|
||||
@ -226,7 +237,7 @@ export default function Text({
|
||||
gridColumn: `span ${img.gridColumn}`,
|
||||
gridRow: `span ${img.gridRow}`,
|
||||
}}>
|
||||
<RevealMediaInstance content={img.content} data={img.data} />
|
||||
<RevealMediaInstance content={img.content} data={img.data} size={size} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -243,7 +254,7 @@ export default function Text({
|
||||
if (disableMedia ?? false) {
|
||||
chunks.push(<DisableMedia content={element.content} />);
|
||||
} else {
|
||||
chunks.push(<RevealMediaInstance content={element.content} data={element.data} />);
|
||||
chunks.push(<RevealMediaInstance content={element.content} data={element.data} size={baseImageWidth} />);
|
||||
}
|
||||
}
|
||||
if (element.type === "invoice") {
|
||||
|
@ -69,7 +69,7 @@ export default function FollowedBy({ pubkey }: { pubkey: HexKey }) {
|
||||
<FormattedMessage defaultMessage="Not followed by anyone you follow" id="IgsWFG" />
|
||||
</div>
|
||||
)}
|
||||
{followDistance === 3 && (
|
||||
{followDistance === 3 && ( // TODO "followed by friends of {n} friends"
|
||||
<div className="text-gray-light">
|
||||
<FormattedMessage defaultMessage="Followed by friends of friends" id="2oCF7O" />
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user