highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-10 12:49:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix media uploads in reply form and stream chat

Browse Source
This commit is contained in:
hzrd149 2024-07-19 12:09:40 -05:00
parent 7a486bbe4f
commit 4f62750e7f
3 changed files with 13 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/notifications/components/notification-item.tsx
View File

@ -80,7 +80,7 @@ const ReactionNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>((
return (
<NotificationIconEntry ref={ref} icon={<Heart boxSize={8} color="red.400" />}>
<Flex gap="2" alignItems="center">
<Flex gap="2" alignItems="center" pl="2">
<AvatarGroup size="sm">
<UserAvatarLink pubkey={event.pubkey} />
</AvatarGroup>
@ -123,7 +123,7 @@ const ZapNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ eve
return (
<NotificationIconEntry ref={ref} icon={<LightningIcon boxSize={8} color="yellow.400" />}>
<Flex gap="2" alignItems="center">
<Flex gap="2" alignItems="center" pl="2">
<AvatarGroup size="sm">
<UserAvatarLink pubkey={zap.request.pubkey} />
</AvatarGroup>

32
src/views/streams/stream/stream-chat/stream-chat-form.tsx
View File

@ -1,19 +1,18 @@
import { useCallback, useMemo, useRef } from "react";
import { useMemo, useRef } from "react";
import { Box, Button, Flex, useToast } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { ParsedStream, buildChatMessage } from "../../../../helpers/nostr/stream";
import { unique } from "../../../../helpers/array";
import { useSigningContext } from "../../../../providers/global/signing-provider";
import { createEmojiTags, ensureNotifyContentMentions } from "../../../../helpers/nostr/post";
import { useContextEmojis } from "../../../../providers/global/emoji-provider";
import { MagicInput, RefType } from "../../../../components/magic-textarea";
import StreamZapButton from "../../components/stream-zap-button";
import { nostrBuildUploadImage } from "../../../../helpers/media-upload/nostr-build";
import { useUserInbox } from "../../../../hooks/use-user-mailboxes";
import { usePublishEvent } from "../../../../providers/global/publish-provider";
import { useReadRelays } from "../../../../hooks/use-client-relays";
import { useAdditionalRelayContext } from "../../../../providers/local/additional-relay-context";
import { useTextAreaUploadFileWithForm } from "../../../../hooks/use-textarea-upload-file";
export default function ChatMessageForm({ stream, hideZapButton }: { stream: ParsedStream; hideZapButton?: boolean }) {
const toast = useToast();
@ -24,7 +23,6 @@ export default function ChatMessageForm({ stream, hideZapButton }: { stream: Par
const relays = useMemo(() => unique([...streamRelays, ...hostReadRelays]), [hostReadRelays, streamRelays]);
const { requestSignature } = useSigningContext();
const { setValue, handleSubmit, formState, reset, getValues, watch } = useForm({
defaultValues: { content: "" },
});
@ -37,25 +35,7 @@ export default function ChatMessageForm({ stream, hideZapButton }: { stream: Par
});
const textAreaRef = useRef<RefType | null>(null);
const uploadImage = useCallback(
async (imageFile: File) => {
try {
if (!imageFile.type.includes("image")) throw new Error("Only images are supported");
const response = await nostrBuildUploadImage(imageFile, requestSignature);
const imageUrl = response.url;
const content = getValues().content;
const position = textAreaRef.current?.getCaretPosition();
if (position !== undefined) {
setValue("content", content.slice(0, position) + imageUrl + content.slice(position), { shouldDirty: true });
} else setValue("content", content + imageUrl, { shouldDirty: true });
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
},
[setValue, getValues],
);
const { onPaste } = useTextAreaUploadFileWithForm(textAreaRef, getValues, setValue);
watch("content");
@ -70,10 +50,8 @@ export default function ChatMessageForm({ stream, hideZapButton }: { stream: Par
isRequired
value={getValues().content}
onChange={(e) => setValue("content", e.target.value, { shouldDirty: true })}
onPaste={(e) => {
const file = Array.from(e.clipboardData.files).find((f) => f.type.includes("image"));
if (file) uploadImage(file);
}}
// @ts-expect-error
onPaste={onPaste}
/>
<Button colorScheme="primary" type="submit" isLoading={formState.isSubmitting}>
Send

47
src/views/thread/components/reply-form.tsx
View File

@ -1,5 +1,5 @@
import { useCallback, useMemo, useRef, useState } from "react";
import { Box, Button, ButtonGroup, Flex, IconButton, VisuallyHiddenInput, useToast } from "@chakra-ui/react";
import { useMemo, useRef } from "react";
import { Box, Button, ButtonGroup, Flex, IconButton, VisuallyHiddenInput } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { useThrottle } from "react-use";
import { kinds } from "nostr-tools";
@ -16,16 +16,15 @@ import {
getPubkeysMentionedInContent,
} from "../../../helpers/nostr/post";
import useCurrentAccount from "../../../hooks/use-current-account";
import { useSigningContext } from "../../../providers/global/signing-provider";
import MagicTextArea, { RefType } from "../../../components/magic-textarea";
import { useContextEmojis } from "../../../providers/global/emoji-provider";
import { TrustProvider } from "../../../providers/local/trust-provider";
import { nostrBuildUploadImage } from "../../../helpers/media-upload/nostr-build";
import { UploadImageIcon } from "../../../components/icons";
import { unique } from "../../../helpers/array";
import { usePublishEvent } from "../../../providers/global/publish-provider";
import { TextNoteContents } from "../../../components/note/timeline-note/text-note-contents";
import useCacheForm from "../../../hooks/use-cache-form";
import { useTextAreaUploadFileWithForm } from "../../../hooks/use-textarea-upload-file";
export type ReplyFormProps = {
item: ThreadItem;
@ -35,11 +34,9 @@ export type ReplyFormProps = {
};
export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = kinds.ShortTextNote }: ReplyFormProps) {
const toast = useToast();
const publish = usePublishEvent();
const account = useCurrentAccount();
const emojis = useContextEmojis();
const { requestSignature } = useSigningContext();
const threadMembers = useMemo(() => getThreadMembers(item, account?.pubkey), [item, account?.pubkey]);
const { setValue, getValues, watch, handleSubmit, formState, reset } = useForm({
@ -57,28 +54,7 @@ export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = kin
const textAreaRef = useRef<RefType | null>(null);
const imageUploadRef = useRef<HTMLInputElement | null>(null);
const [uploading, setUploading] = useState(false);
const uploadImage = useCallback(
async (imageFile: File) => {
try {
if (!imageFile.type.includes("image")) throw new Error("Only images are supported");
setUploading(true);
const response = await nostrBuildUploadImage(imageFile, requestSignature);
const imageUrl = response.url;
const content = getValues().content;
const position = textAreaRef.current?.getCaretPosition();
if (position !== undefined) {
setValue("content", content.slice(0, position) + imageUrl + content.slice(position), { shouldDirty: true });
} else setValue("content", content + imageUrl, { shouldDirty: true });
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
setUploading(false);
},
[setValue, getValues],
);
const { onPaste, onFileInputChange, uploading } = useTextAreaUploadFileWithForm(textAreaRef, getValues, setValue);
const draft = useMemo(() => {
let updated = finalizeNote({ kind: replyKind, content: getValues().content, created_at: dayjs().unix(), tags: [] });
@ -109,24 +85,13 @@ export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = kin
value={getValues().content}
onChange={(e) => setValue("content", e.target.value, { shouldDirty: true })}
instanceRef={(inst) => (textAreaRef.current = inst)}
onPaste={(e) => {
const imageFile = Array.from(e.clipboardData.files).find((f) => f.type.includes("image"));
if (imageFile) uploadImage(imageFile);
}}
onPaste={onPaste}
onKeyDown={(e) => {
if (e.ctrlKey && e.key === "Enter" && formRef.current) formRef.current.requestSubmit();
}}
/>
<Flex gap="2" alignItems="center">
<VisuallyHiddenInput
type="file"
accept="image/*"
ref={imageUploadRef}
onChange={(e) => {
const img = e.target.files?.[0];
if (img) uploadImage(img);
}}
/>
<VisuallyHiddenInput type="file" accept="image/*" ref={imageUploadRef} onChange={onFileInputChange} />
<IconButton
icon={<UploadImageIcon />}
aria-label="Upload Image"