highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-09-19 05:40:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

merged messageImage preview to image preview

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-17 10:47:14 +07:00
parent 0786ad6915
commit 8b67253c0a
7 changed files with 11 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/note/comment.tsx
View File

@@ -1,4 +1,4 @@
import NoteMetadata from '@components/note/metadata';
import { NoteMetadata } from '@components/note/metadata';
import { ImagePreview } from '@components/note/preview/image';
import { VideoPreview } from '@components/note/preview/video';
import { NoteQuote } from '@components/note/quote';
@@ -18,7 +18,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
return <ImagePreview key={match + i} url={match} size="large" />;
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;

2
src/components/note/extend.tsx
View File

@@ -18,7 +18,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
return <ImagePreview key={match + i} url={match} size="large" />;
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;

6
src/components/note/preview/image.tsx
View File

@@ -1,9 +1,11 @@
import Image from 'next/image';
import { memo } from 'react';
export const ImagePreview = memo(function ImagePreview({ url }: { url: string }) {
export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
return (
<div className="relative mb-2 mt-3 h-full w-full rounded-lg border border-zinc-800 xl:w-2/3">
<div
className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
>
<Image
src={url}
alt={url}

2
src/components/note/preview/link.tsx
View File

@@ -6,7 +6,7 @@ export default function LinkCard({ data }: { data: any }) {
<Link
href={data['url']}
target={'_blank'}
className="relative mt-2 flex flex-col overflow-hidden rounded-lg border border-zinc-700"
className="relative flex flex-col overflow-hidden rounded-lg border border-zinc-700"
>
<div className="relative aspect-video h-auto w-full">
<Image src={data['image']} alt="image preview" fill={true} className="object-cover" />

18
src/components/note/preview/messageImage.tsx
View File

@@ -1,18 +0,0 @@
import Image from 'next/image';
import { memo } from 'react';
export const MessageImagePreview = memo(function MesssageImagePreview({ url }: { url: string }) {
return (
<div className="relative mb-2 mt-3 h-full w-2/3 rounded-lg border border-zinc-800 xl:w-2/3">
<Image
src={url}
alt={url}
width="0"
height="0"
sizes="100vw"
className="h-auto w-full rounded-lg object-cover"
priority
/>
</div>
);
});

2
src/components/note/preview/video.tsx
View File

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
return (
<div onClick={(e) => e.stopPropagation()} className="relative mt-3 flex flex-col overflow-hidden rounded-lg">
<div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
<ReactPlayer
url={url}
controls={true}

5
src/utils/parser.tsx
View File

@@ -1,5 +1,4 @@
import { ImagePreview } from '@components/note/preview/image';
import { MessageImagePreview } from '@components/note/preview/messageImage';
import { VideoPreview } from '@components/note/preview/video';
import { NoteQuote } from '@components/note/quote';
import { UserMention } from '@components/user/mention';
@@ -16,7 +15,7 @@ export const contentParser = (noteContent, noteTags) => {
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} />;
return <ImagePreview key={match + i} url={match} size="large" />;
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;
@@ -62,7 +61,7 @@ export const messageParser = (noteContent) => {
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <MessageImagePreview key={match + i} url={match} />;
return <ImagePreview key={match + i} url={match} size="small" />;
} else if (match.match(/(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i)) {
// youtube
return <VideoPreview key={match + i} url={match} />;