ReplyEditor: supports reply
This commit is contained in:
thislight
parent
baf0ed1447
commit
74770649c3
4 changed files with 126 additions and 15 deletions
|
|
@ -2,7 +2,21 @@
|
|||
//! It recommended to include the module by <script> tag.
|
||||
if (!document.body.animate) {
|
||||
// @ts-ignore: this file is polyfill, no exposed decls
|
||||
import("web-animations-js").then(() => {
|
||||
import("web-animations-js").then(() => { // all target platforms supported, prepared to remove
|
||||
console.warn("web animation polyfill is included");
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.crypto.randomUUID) { // Chrome/Edge 92+
|
||||
// https://stackoverflow.com/a/2117523/2800218
|
||||
// LICENSE: https://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
window.crypto.randomUUID =
|
||||
function randomUUID(): `${string}-${string}-${string}-${string}-${string}` {
|
||||
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
|
||||
(
|
||||
+c ^
|
||||
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
|
||||
).toString(16),
|
||||
) as `${string}-${string}-${string}-${string}-${string}`;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const MediaAttachmentGrid: Component<{
|
|||
>
|
||||
<For each={props.attachments}>
|
||||
{(item, index) => {
|
||||
const [loaded, setLoaded] = createSignal(false)
|
||||
const [loaded, setLoaded] = createSignal(false);
|
||||
const width = item.meta?.small?.width;
|
||||
const height = item.meta?.small?.height;
|
||||
const aspectRatio = item.meta?.small?.aspect;
|
||||
|
|
@ -74,10 +74,13 @@ const MediaAttachmentGrid: Component<{
|
|||
width && height && height > maxHeight
|
||||
? maxHeight / (aspectRatio ?? 1)
|
||||
: width;
|
||||
const style = () => loaded() ? undefined : {
|
||||
width: realWidth ? `${realWidth}px` : undefined,
|
||||
height: realHeight ? `${realHeight}px` : undefined,
|
||||
};
|
||||
const style = () =>
|
||||
loaded()
|
||||
? undefined
|
||||
: {
|
||||
width: realWidth ? `${realWidth}px` : undefined,
|
||||
height: realHeight ? `${realHeight}px` : undefined,
|
||||
};
|
||||
switch (item.type) {
|
||||
case "image":
|
||||
return (
|
||||
|
|
@ -100,7 +103,17 @@ const MediaAttachmentGrid: Component<{
|
|||
controls
|
||||
/>
|
||||
);
|
||||
case "gifv":
|
||||
case "gifv": // Later we can handle the preview
|
||||
return (
|
||||
<video
|
||||
src={item.url || undefined}
|
||||
style={style()}
|
||||
onLoadedMetadata={[setLoaded, true]}
|
||||
autoplay={true}
|
||||
controls
|
||||
/>
|
||||
);
|
||||
|
||||
case "audio":
|
||||
case "unknown":
|
||||
return <div></div>;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
createEffect,
|
||||
createSignal,
|
||||
createUniqueId,
|
||||
onMount,
|
||||
Show,
|
||||
type Component,
|
||||
|
|
@ -18,6 +19,7 @@ import {
|
|||
Radio,
|
||||
Switch,
|
||||
Divider,
|
||||
CircularProgress,
|
||||
} from "@suid/material";
|
||||
import {
|
||||
ArrowDropDown,
|
||||
|
|
@ -36,6 +38,7 @@ import BottomSheet from "../material/BottomSheet";
|
|||
import { useLanguage } from "../platform/i18n";
|
||||
import iso639_1 from "iso-639-1";
|
||||
import ChooseTootLang from "./ChooseTootLang";
|
||||
import type { mastodon } from "masto";
|
||||
|
||||
type TootVisibility = "public" | "unlisted" | "private" | "direct";
|
||||
|
||||
|
|
@ -177,13 +180,19 @@ const TootLanguagePickerDialog: Component<{
|
|||
const ReplyEditor: Component<{
|
||||
profile: Account;
|
||||
replyToDisplayName: string;
|
||||
mentions?: readonly string[];
|
||||
isTyping?: boolean;
|
||||
onTypingChange: (value: boolean) => void;
|
||||
client?: mastodon.rest.Client;
|
||||
inReplyToId?: string;
|
||||
onSent?: (status: mastodon.v1.Status) => void;
|
||||
}> = (props) => {
|
||||
let inputRef: HTMLTextAreaElement;
|
||||
let sendKey: string | undefined;
|
||||
|
||||
const typing = () => props.isTyping;
|
||||
const setTyping = (v: boolean) => props.onTypingChange(v);
|
||||
const [sending, setSending] = createSignal(false);
|
||||
const [visibility, setVisibility] = createSignal<TootVisibility>("public");
|
||||
const [permPicker, setPermPicker] = createSignal(false);
|
||||
const [language, setLanguage] = createSignal("en");
|
||||
|
|
@ -199,6 +208,14 @@ const ReplyEditor: Component<{
|
|||
makeEventListener(inputRef, "focus", () => setTyping(true));
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (inputRef.value !== "") return;
|
||||
if (props.mentions) {
|
||||
const prepText = props.mentions.join(" ") + " ";
|
||||
inputRef.value = prepText;
|
||||
}
|
||||
});
|
||||
|
||||
const containerStyle = () =>
|
||||
typing() || permPicker()
|
||||
? {
|
||||
|
|
@ -222,6 +239,39 @@ const ReplyEditor: Component<{
|
|||
}
|
||||
};
|
||||
|
||||
const getOrGenSendKey = () => {
|
||||
if (sendKey === undefined) {
|
||||
sendKey = window.crypto.randomUUID();
|
||||
}
|
||||
return sendKey;
|
||||
};
|
||||
|
||||
const send = async () => {
|
||||
setSending(true);
|
||||
try {
|
||||
const status = await props.client!.v1.statuses.create(
|
||||
{
|
||||
status: inputRef.value,
|
||||
language: language(),
|
||||
visibility: visibility(),
|
||||
inReplyToId: props.inReplyToId,
|
||||
},
|
||||
{
|
||||
requestInit: {
|
||||
headers: {
|
||||
["Idempotency-Key"]: getOrGenSendKey(),
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
props.onSent?.(status);
|
||||
inputRef.value = "";
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class={tootComposers.composer}
|
||||
|
|
@ -237,10 +287,28 @@ const ReplyEditor: Component<{
|
|||
ref={inputRef!}
|
||||
placeholder={`Reply to ${props.replyToDisplayName}...`}
|
||||
style={{ width: "100%", border: "none" }}
|
||||
disabled={sending()}
|
||||
></textarea>
|
||||
<IconButton sx={{ marginRight: "-0.5em" }}>
|
||||
<Send />
|
||||
</IconButton>
|
||||
<Show when={props.client}>
|
||||
<Show
|
||||
when={!sending()}
|
||||
fallback={
|
||||
<div style={{ padding: "8px" }}>
|
||||
<CircularProgress
|
||||
sx={{
|
||||
marginRight: "-0.5em",
|
||||
width: "1.5rem",
|
||||
height: "1.5rem",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<IconButton sx={{ marginRight: "-0.5em" }} onClick={send}>
|
||||
<Send />
|
||||
</IconButton>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<Show when={typing()}>
|
||||
|
|
@ -253,12 +321,12 @@ const ReplyEditor: Component<{
|
|||
"flex-flow": "row wrap",
|
||||
}}
|
||||
>
|
||||
<Button onClick={[setLangPickerOpen, true]}>
|
||||
<Button onClick={[setLangPickerOpen, true]} disabled={sending()}>
|
||||
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
|
||||
{iso639_1.getNativeName(language())}
|
||||
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
|
||||
</Button>
|
||||
<Button onClick={[setPermPicker, true]}>
|
||||
<Button onClick={[setPermPicker, true]} disabled={sending()}>
|
||||
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
|
||||
{visibilityText()}
|
||||
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const TootBottomSheet: Component = (props) => {
|
|||
return tootId;
|
||||
});
|
||||
|
||||
const [tootContext] = createResource(
|
||||
const [tootContext, {refetch: refetchContext}] = createResource(
|
||||
() => [session().client, params.id] as const,
|
||||
async ([client, id]) => {
|
||||
return await client.v1.statuses.$select(id).context.fetch();
|
||||
|
|
@ -171,6 +171,18 @@ const TootBottomSheet: Component = (props) => {
|
|||
});
|
||||
};
|
||||
|
||||
const defaultMentions = () => {
|
||||
const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account
|
||||
if (!tootAcct) {
|
||||
return
|
||||
}
|
||||
|
||||
const others = ancestors().map(x => x.account)
|
||||
|
||||
const values = [tootAcct, ...others].map(x => `@${x.acct}`)
|
||||
return Array.from(new Set(values).keys())
|
||||
}
|
||||
|
||||
css`
|
||||
.name :global(img) {
|
||||
max-height: 1em;
|
||||
|
|
@ -237,12 +249,16 @@ const TootBottomSheet: Component = (props) => {
|
|||
</Show>
|
||||
</article>
|
||||
|
||||
<Show when={profile()}>
|
||||
<Show when={session()!.account}>
|
||||
<ReplyEditor
|
||||
isTyping={isInTyping()}
|
||||
onTypingChange={setInTyping}
|
||||
profile={profile()!}
|
||||
mentions={defaultMentions()}
|
||||
profile={session().account!}
|
||||
replyToDisplayName={toot()?.account?.displayName || ""}
|
||||
client={session().client}
|
||||
onSent={() => refetchContext()}
|
||||
inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue