From b856c2b8b5e6df152d85bd361f1cb31e17d4c787 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 30 May 2023 14:44:36 +0700 Subject: [PATCH] update chat message form --- src/app/channel/components/item.tsx | 2 - src/app/channel/components/messages/item.tsx | 4 +- src/app/channel/layout.tsx | 1 - src/app/chat/components/messages/form.tsx | 10 +- src/app/chat/components/messages/item.tsx | 4 +- src/app/chat/components/messages/user.tsx | 2 +- src/app/chat/pages/index.page.tsx | 4 +- src/shared/icons/enter.tsx | 24 +++++ src/shared/icons/index.tsx | 2 + src/shared/icons/media.tsx | 27 ++++++ src/shared/mediaUploader.tsx | 97 ++++++++++++++++++++ src/shared/tooltip.tsx | 2 +- vite.config.ts | 54 +++++------ 13 files changed, 192 insertions(+), 41 deletions(-) create mode 100644 src/shared/icons/enter.tsx create mode 100644 src/shared/icons/media.tsx create mode 100644 src/shared/mediaUploader.tsx diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx index d80504e1..fe1ff685 100644 --- a/src/app/channel/components/item.tsx +++ b/src/app/channel/components/item.tsx @@ -1,7 +1,5 @@ import { useChannelProfile } from "@app/channel/hooks/useChannelProfile"; - import { usePageContext } from "@utils/hooks/usePageContext"; - import { twMerge } from "tailwind-merge"; export function ChannelsListItem({ data }: { data: any }) { diff --git a/src/app/channel/components/messages/item.tsx b/src/app/channel/components/messages/item.tsx index ca50f7bd..1ee59432 100644 --- a/src/app/channel/components/messages/item.tsx +++ b/src/app/channel/components/messages/item.tsx @@ -3,8 +3,8 @@ import { MessageMuteButton } from "@app/channel/components/messages/muteButton"; import { MessageReplyButton } from "@app/channel/components/messages/replyButton"; import { ChannelMessageUser } from "@app/channel/components/messages/user"; import { MentionNote } from "@app/note/components/mentions/note"; -import ImagePreview from "@app/note/components/preview/image"; -import VideoPreview from "@app/note/components/preview/video"; +import { ImagePreview } from "@app/note/components/preview/image"; +import { VideoPreview } from "@app/note/components/preview/video"; import { noteParser } from "@utils/parser"; import { useMemo, useState } from "react"; diff --git a/src/app/channel/layout.tsx b/src/app/channel/layout.tsx index 2acd7224..a2cb7444 100644 --- a/src/app/channel/layout.tsx +++ b/src/app/channel/layout.tsx @@ -1,4 +1,3 @@ -import { AppHeader } from "@shared/appHeader"; import { MultiAccounts } from "@shared/multiAccounts"; import { Navigation } from "@shared/navigation"; diff --git a/src/app/chat/components/messages/form.tsx b/src/app/chat/components/messages/form.tsx index 0871f002..1ac301a7 100644 --- a/src/app/chat/components/messages/form.tsx +++ b/src/app/chat/components/messages/form.tsx @@ -1,3 +1,5 @@ +import { EnterIcon } from "@shared/icons"; +import { MediaUploader } from "@shared/mediaUploader"; import { RelayContext } from "@shared/relayProvider"; import { useChatMessages } from "@stores/chats"; import { WRITEONLY_RELAYS } from "@stores/constants"; @@ -60,7 +62,7 @@ export function ChatMessageForm({ }; return ( -
+
setValue(e.target.value)} @@ -70,12 +72,14 @@ export function ChatMessageForm({ className="relative h-11 w-full resize-none rounded-md px-5 !outline-none bg-zinc-800 placeholder:text-zinc-500" />
-
+
+
diff --git a/src/app/chat/components/messages/item.tsx b/src/app/chat/components/messages/item.tsx index 1d0de5cf..73456eec 100644 --- a/src/app/chat/components/messages/item.tsx +++ b/src/app/chat/components/messages/item.tsx @@ -1,8 +1,8 @@ import { ChatMessageUser } from "@app/chat/components/messages/user"; import { useDecryptMessage } from "@app/chat/hooks/useDecryptMessage"; import { MentionNote } from "@app/note/components/mentions/note"; -import ImagePreview from "@app/note/components/preview/image"; -import VideoPreview from "@app/note/components/preview/video"; +import { ImagePreview } from "@app/note/components/preview/image"; +import { VideoPreview } from "@app/note/components/preview/video"; import { noteParser } from "@utils/parser"; import { memo } from "react"; diff --git a/src/app/chat/components/messages/user.tsx b/src/app/chat/components/messages/user.tsx index acf9dc43..e8f491f4 100644 --- a/src/app/chat/components/messages/user.tsx +++ b/src/app/chat/components/messages/user.tsx @@ -35,7 +35,7 @@ export function ChatMessageUser({
- + {user?.nip05 || user?.name || shortenKey(pubkey)} ยท diff --git a/src/app/chat/pages/index.page.tsx b/src/app/chat/pages/index.page.tsx index 0f96aea5..51d01d74 100644 --- a/src/app/chat/pages/index.page.tsx +++ b/src/app/chat/pages/index.page.tsx @@ -18,11 +18,11 @@ export function Page() { const searchParams: any = pageContext.urlParsed.search; const pubkey = searchParams.pubkey; - const [fetchMessages, addMessage, clear] = useChatMessages((state: any) => [ + const [fetchMessages, clear] = useChatMessages((state: any) => [ state.fetch, - state.add, state.clear, ]); + const addMessage = useChatMessages((state: any) => state.add); useSWRSubscription(account ? ["chat", pubkey] : null, ([, key]) => { const unsubscribe = pool.subscribe( diff --git a/src/shared/icons/enter.tsx b/src/shared/icons/enter.tsx new file mode 100644 index 00000000..cf9acf7b --- /dev/null +++ b/src/shared/icons/enter.tsx @@ -0,0 +1,24 @@ +import { SVGProps } from "react"; + +export function EnterIcon( + props: JSX.IntrinsicAttributes & SVGProps, +) { + return ( + + + + ); +} diff --git a/src/shared/icons/index.tsx b/src/shared/icons/index.tsx index 2dc554b5..421a42f2 100644 --- a/src/shared/icons/index.tsx +++ b/src/shared/icons/index.tsx @@ -9,12 +9,14 @@ export * from "./chevronRight"; export * from "./compose"; export * from "./copy"; export * from "./edit"; +export * from "./enter"; export * from "./eyeOff"; export * from "./eyeOn"; export * from "./heartbeat"; export * from "./hide"; export * from "./like"; export * from "./lume"; +export * from "./media"; export * from "./mute"; export * from "./myspace"; export * from "./navArrowDown"; diff --git a/src/shared/icons/media.tsx b/src/shared/icons/media.tsx new file mode 100644 index 00000000..cf4a57fb --- /dev/null +++ b/src/shared/icons/media.tsx @@ -0,0 +1,27 @@ +import { SVGProps } from "react"; + +export function MediaIcon( + props: JSX.IntrinsicAttributes & SVGProps, +) { + return ( + + + + + ); +} diff --git a/src/shared/mediaUploader.tsx b/src/shared/mediaUploader.tsx new file mode 100644 index 00000000..9a6cda2d --- /dev/null +++ b/src/shared/mediaUploader.tsx @@ -0,0 +1,97 @@ +import { MediaIcon } from "@shared/icons"; +import { Tooltip } from "@shared/tooltip"; +import { open } from "@tauri-apps/api/dialog"; +import { Body, fetch } from "@tauri-apps/api/http"; +import { createBlobFromFile } from "@utils/createBlobFromFile"; +import { useState } from "react"; + +export function MediaUploader({ setState }: { setState: any }) { + const [loading, setLoading] = useState(false); + + const openFileDialog = async () => { + const selected: any = await open({ + multiple: false, + filters: [ + { + name: "Image & Video", + extensions: ["png", "jpeg", "jpg", "gif", "mp4", "mov"], + }, + ], + }); + if (Array.isArray(selected)) { + // user selected multiple files + } else if (selected === null) { + // user cancelled the selection + } else { + // start loading + setLoading(true); + + const filename = selected.split("/").pop(); + const file = await createBlobFromFile(selected); + const buf = await file.arrayBuffer(); + + const res: { data: { file: { id: string } } } = await fetch( + "https://void.cat/upload?cli=false", + { + method: "POST", + timeout: 5, + headers: { + accept: "*/*", + "Content-Type": "application/octet-stream", + "V-Filename": filename, + "V-Description": "Upload from https://lume.nu", + "V-Strip-Metadata": "true", + }, + body: Body.bytes(buf), + }, + ); + + const image = `https://void.cat/d/${res.data.file.id}.webp`; + + // update state + setState((prev: string) => `${prev}\n${image}`); + // stop loading + setLoading(false); + } + }; + + return ( + + + + ); +} diff --git a/src/shared/tooltip.tsx b/src/shared/tooltip.tsx index e7548e1f..b1cdec8d 100644 --- a/src/shared/tooltip.tsx +++ b/src/shared/tooltip.tsx @@ -42,7 +42,7 @@ export function Tooltip({ {isOpen && (
`__tla_${i}`, - }), - ], + clearScreen: false, + server: { + strictPort: true, + }, + envPrefix: ["VITE_", "TAURI_"], + build: { + // Tauri uses Chromium on Windows and WebKit on macOS and Linux + target: process.env.TAURI_PLATFORM === "windows" ? "chrome105" : "safari13", + // don't minify for debug builds + minify: !process.env.TAURI_DEBUG ? "esbuild" : false, + // produce sourcemaps for debug builds + sourcemap: !!process.env.TAURI_DEBUG, + }, + plugins: [ + react(), + ssr({ prerender: true }), + viteTsconfigPaths(), + topLevelAwait({ + promiseExportName: "__tla", + promiseImportName: (i) => `__tla_${i}`, + }), + ], });