From b67095f0fd8fcd2b236521351219e4b4a62f0b1c Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Mon, 21 Oct 2024 20:42:22 +0300 Subject: [PATCH] web/timeline: reorganize components slightly --- web/src/ui/timeline/ReplyBody.tsx | 2 +- web/src/ui/timeline/TimelineEvent.tsx | 5 +-- web/src/ui/timeline/content/EncryptedBody.tsx | 2 +- web/src/ui/timeline/content/HiddenEvent.tsx | 2 +- .../ui/timeline/content/MediaMessageBody.tsx | 36 +++++++++++++++++++ web/src/ui/timeline/content/MemberBody.tsx | 2 +- .../{MessageBody.tsx => TextMessageBody.tsx} | 27 +++----------- .../timeline/content/UnknownMessageBody.tsx | 24 +++++++++++++ .../content/{getBodyType.ts => index.ts} | 15 ++++++-- web/src/ui/timeline/content/props.ts | 2 +- 10 files changed, 83 insertions(+), 34 deletions(-) create mode 100644 web/src/ui/timeline/content/MediaMessageBody.tsx rename web/src/ui/timeline/content/{MessageBody.tsx => TextMessageBody.tsx} (66%) create mode 100644 web/src/ui/timeline/content/UnknownMessageBody.tsx rename web/src/ui/timeline/content/{getBodyType.ts => index.ts} (62%) diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx index d35c870..8fb4426 100644 --- a/web/src/ui/timeline/ReplyBody.tsx +++ b/web/src/ui/timeline/ReplyBody.tsx @@ -18,7 +18,7 @@ import { getAvatarURL } from "@/api/media.ts" import { RoomStateStore, useRoomEvent } from "@/api/statestore" import type { EventID, MemDBEvent, MemberEventContent } from "@/api/types" import { ClientContext } from "../ClientContext.ts" -import getBodyType from "./content/getBodyType.ts" +import getBodyType from "./content" import CloseButton from "@/icons/close.svg?react" import "./ReplyBody.css" diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx index 13f7205..abd4836 100644 --- a/web/src/ui/timeline/TimelineEvent.tsx +++ b/web/src/ui/timeline/TimelineEvent.tsx @@ -21,10 +21,7 @@ import { isEventID } from "@/util/validation.ts" import { ClientContext } from "../ClientContext.ts" import { LightboxContext } from "../Lightbox.tsx" import { ReplyIDBody } from "./ReplyBody.tsx" -import HiddenEvent from "./content/HiddenEvent.tsx" -import MemberBody from "./content/MemberBody.tsx" -import getBodyType from "./content/getBodyType.ts" -import { EventContentProps } from "./content/props.ts" +import getBodyType, { EventContentProps, HiddenEvent, MemberBody } from "./content" import ErrorIcon from "../../icons/error.svg?react" import PendingIcon from "../../icons/pending.svg?react" import SentIcon from "../../icons/sent.svg?react" diff --git a/web/src/ui/timeline/content/EncryptedBody.tsx b/web/src/ui/timeline/content/EncryptedBody.tsx index 32da177..4906043 100644 --- a/web/src/ui/timeline/content/EncryptedBody.tsx +++ b/web/src/ui/timeline/content/EncryptedBody.tsx @@ -13,7 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { EventContentProps } from "./props.ts" +import EventContentProps from "./props.ts" import LockIcon from "../../../icons/lock.svg?react" import LockClockIcon from "../../../icons/lock.svg?react" diff --git a/web/src/ui/timeline/content/HiddenEvent.tsx b/web/src/ui/timeline/content/HiddenEvent.tsx index eb58bf4..16f9f18 100644 --- a/web/src/ui/timeline/content/HiddenEvent.tsx +++ b/web/src/ui/timeline/content/HiddenEvent.tsx @@ -13,7 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { EventContentProps } from "./props.ts" +import EventContentProps from "./props.ts" const HiddenEvent = ({ event }: EventContentProps) => { return {`{ "type": "${event.type}" }`} diff --git a/web/src/ui/timeline/content/MediaMessageBody.tsx b/web/src/ui/timeline/content/MediaMessageBody.tsx new file mode 100644 index 0000000..4fd6b8d --- /dev/null +++ b/web/src/ui/timeline/content/MediaMessageBody.tsx @@ -0,0 +1,36 @@ +// gomuks - A Matrix client written in Go. +// Copyright (C) 2024 Tulir Asokan +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +import { MediaMessageEventContent } from "@/api/types" +import TextMessageBody from "./TextMessageBody.tsx" +import EventContentProps from "./props.ts" +import { useMediaContent } from "./useMediaContent.tsx" + +const MediaMessageBody = ({ event, room }: EventContentProps) => { + const content = event.content as MediaMessageEventContent + let caption = null + if (content.body && content.filename && content.body !== content.filename) { + caption = + } + const [mediaContent, containerClass, containerStyle] = useMediaContent(content, event.type) + return <> +
+ {mediaContent} +
+ {caption} + +} + +export default MediaMessageBody diff --git a/web/src/ui/timeline/content/MemberBody.tsx b/web/src/ui/timeline/content/MemberBody.tsx index 4c27504..89779a9 100644 --- a/web/src/ui/timeline/content/MemberBody.tsx +++ b/web/src/ui/timeline/content/MemberBody.tsx @@ -17,7 +17,7 @@ import React, { use } from "react" import { getAvatarURL } from "@/api/media.ts" import { MemberEventContent, UserID } from "@/api/types" import { LightboxContext } from "../../Lightbox.tsx" -import { EventContentProps } from "./props.ts" +import EventContentProps from "./props.ts" function useChangeDescription( sender: UserID, target: UserID, content: MemberEventContent, prevContent?: MemberEventContent, diff --git a/web/src/ui/timeline/content/MessageBody.tsx b/web/src/ui/timeline/content/TextMessageBody.tsx similarity index 66% rename from web/src/ui/timeline/content/MessageBody.tsx rename to web/src/ui/timeline/content/TextMessageBody.tsx index 0991248..5eb8f8f 100644 --- a/web/src/ui/timeline/content/MessageBody.tsx +++ b/web/src/ui/timeline/content/TextMessageBody.tsx @@ -13,9 +13,8 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { MediaMessageEventContent, MemberEventContent, MessageEventContent } from "@/api/types" -import { EventContentProps } from "./props.ts" -import { useMediaContent } from "./useMediaContent.tsx" +import { MemberEventContent, MessageEventContent } from "@/api/types" +import EventContentProps from "./props.ts" const onClickHTML = (evt: React.MouseEvent) => { if ((evt.target as HTMLElement).closest("span.hicli-spoiler")?.classList.toggle("spoiler-revealed")) { @@ -24,7 +23,7 @@ const onClickHTML = (evt: React.MouseEvent) => { } } -export const TextMessageBody = ({ event, room }: EventContentProps) => { +const TextMessageBody = ({ event, room }: EventContentProps) => { const content = event.content as MessageEventContent const classNames = ["message-text"] let eventSenderName: string | undefined @@ -51,22 +50,4 @@ export const TextMessageBody = ({ event, room }: EventContentProps) => { return
{content.body}
} -export const MediaMessageBody = ({ event, room }: EventContentProps) => { - const content = event.content as MediaMessageEventContent - let caption = null - if (content.body && content.filename && content.body !== content.filename) { - caption = - } - const [mediaContent, containerClass, containerStyle] = useMediaContent(content, event.type) - return <> -
- {mediaContent} -
- {caption} - -} - -export const UnknownMessageBody = ({ event }: EventContentProps) => { - const content = event.content as MessageEventContent - return {`{ "type": "${event.type}", "content": { "msgtype": "${content.msgtype}" } }`} -} +export default TextMessageBody diff --git a/web/src/ui/timeline/content/UnknownMessageBody.tsx b/web/src/ui/timeline/content/UnknownMessageBody.tsx new file mode 100644 index 0000000..172150c --- /dev/null +++ b/web/src/ui/timeline/content/UnknownMessageBody.tsx @@ -0,0 +1,24 @@ +// gomuks - A Matrix client written in Go. +// Copyright (C) 2024 Tulir Asokan +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +import { MessageEventContent } from "@/api/types" +import EventContentProps from "./props.ts" + +const UnknownMessageBody = ({ event }: EventContentProps) => { + const content = event.content as MessageEventContent + return {`{ "type": "${event.type}", "content": { "msgtype": "${content.msgtype}" } }`} +} + +export default UnknownMessageBody diff --git a/web/src/ui/timeline/content/getBodyType.ts b/web/src/ui/timeline/content/index.ts similarity index 62% rename from web/src/ui/timeline/content/getBodyType.ts rename to web/src/ui/timeline/content/index.ts index d640938..0eca18c 100644 --- a/web/src/ui/timeline/content/getBodyType.ts +++ b/web/src/ui/timeline/content/index.ts @@ -2,10 +2,21 @@ import React from "react" import { MemDBEvent } from "@/api/types" import EncryptedBody from "./EncryptedBody.tsx" import HiddenEvent from "./HiddenEvent.tsx" +import MediaMessageBody from "./MediaMessageBody.tsx" import MemberBody from "./MemberBody.tsx" -import { MediaMessageBody, TextMessageBody, UnknownMessageBody } from "./MessageBody.tsx" import RedactedBody from "./RedactedBody.tsx" -import { EventContentProps } from "./props.ts" +import TextMessageBody from "./TextMessageBody.tsx" +import UnknownMessageBody from "./UnknownMessageBody.tsx" +import EventContentProps from "./props.ts" + +export { default as EncryptedBody } from "./EncryptedBody.tsx" +export { default as HiddenEvent } from "./HiddenEvent.tsx" +export { default as MediaMessageBody } from "./MediaMessageBody.tsx" +export { default as MemberBody } from "./MemberBody.tsx" +export { default as RedactedBody } from "./RedactedBody.tsx" +export { default as TextMessageBody } from "./TextMessageBody.tsx" +export { default as UnknownMessageBody } from "./UnknownMessageBody.tsx" +export type { default as EventContentProps } from "./props.ts" export default function getBodyType(evt: MemDBEvent, forReply = false): React.FunctionComponent { if (evt.relation_type === "m.replace") { diff --git a/web/src/ui/timeline/content/props.ts b/web/src/ui/timeline/content/props.ts index 64701c4..93da6cb 100644 --- a/web/src/ui/timeline/content/props.ts +++ b/web/src/ui/timeline/content/props.ts @@ -16,7 +16,7 @@ import { RoomStateStore } from "@/api/statestore" import { MemDBEvent } from "@/api/types" -export interface EventContentProps { +export default interface EventContentProps { room: RoomStateStore event: MemDBEvent sender?: MemDBEvent