use Link and img elements for media grid
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
da93d3bdf6
commit
e4a4a1553a
@ -7,7 +7,7 @@ import { ReactNode } from "react";
|
|||||||
import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
|
import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
|
||||||
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
import { transformTextCached } from "@/Hooks/useTextTransformCache";
|
||||||
import useImgProxy from "@/Hooks/useImgProxy";
|
import useImgProxy from "@/Hooks/useImgProxy";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
|
||||||
|
|
||||||
export interface TimelineRendererProps {
|
export interface TimelineRendererProps {
|
||||||
@ -27,7 +27,6 @@ export interface TimelineRendererProps {
|
|||||||
export function TimelineRenderer(props: TimelineRendererProps) {
|
export function TimelineRenderer(props: TimelineRendererProps) {
|
||||||
const { ref, inView } = useInView();
|
const { ref, inView } = useInView();
|
||||||
const { proxy } = useImgProxy();
|
const { proxy } = useImgProxy();
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const renderNotes = () => {
|
const renderNotes = () => {
|
||||||
return props.frags.map(frag => (
|
return props.frags.map(frag => (
|
||||||
@ -41,13 +40,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
|||||||
));
|
));
|
||||||
};
|
};
|
||||||
|
|
||||||
const noteOnClick =
|
|
||||||
props.noteOnClick ||
|
|
||||||
((ev: TaggedNostrEvent) => {
|
|
||||||
const noteId = NostrLink.fromEvent(ev).encode(CONFIG.eventLinkPrefix);
|
|
||||||
navigate(`/${noteId}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
const renderGrid = () => {
|
const renderGrid = () => {
|
||||||
// TODO Hide images from notes with a content warning, unless otherwise configured
|
// TODO Hide images from notes with a content warning, unless otherwise configured
|
||||||
const noteImageRenderer = (e: TaggedNostrEvent) => {
|
const noteImageRenderer = (e: TaggedNostrEvent) => {
|
||||||
@ -59,15 +51,16 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
|||||||
if (media.length === 0) return null;
|
if (media.length === 0) return null;
|
||||||
|
|
||||||
const isVideo = media[0].mimeType?.startsWith("video/");
|
const isVideo = media[0].mimeType?.startsWith("video/");
|
||||||
|
const noteId = NostrLink.fromEvent(e).encode(CONFIG.eventLinkPrefix);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<Link
|
||||||
className="aspect-square bg-center bg-cover cursor-pointer hover:opacity-80 relative"
|
to={`/${noteId}`}
|
||||||
key={e.id}
|
className="aspect-square cursor-pointer hover:opacity-80 relative"
|
||||||
style={{ backgroundImage: `url(${proxy(media[0].content, 256)})` }}
|
onClick={() => props.noteOnClick?.(e)}>
|
||||||
onClick={() => noteOnClick(e)}>
|
<img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
|
||||||
{isVideo && <Icon name="play-square-outline" className="absolute right-2 top-2 text-white opacity-80" />}
|
{isVideo && <Icon name="play-square-outline" className="absolute right-2 top-2 text-white opacity-80" />}
|
||||||
</div>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user