Compare commits

..

2 commits

Author SHA1 Message Date
thislight
143ecf6278
ReplyEditor: supports reply 2024-09-28 14:39:20 +08:00
thislight
2c0978b572
ReplyEditor: only show toolbar when active 2024-09-28 12:43:12 +08:00
4 changed files with 163 additions and 46 deletions

View file

@ -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}`;
};
}

View file

@ -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>;

View file

@ -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}
@ -229,51 +279,74 @@ const ReplyEditor: Component<{
onClick={(e) => inputRef.focus()}
>
<div class={tootComposers.replyInput}>
<Avatar src={props.profile.inf?.avatar} sx={{marginLeft: '-0.25em'}} />
<Avatar
src={props.profile.inf?.avatar}
sx={{ marginLeft: "-0.25em" }}
/>
<textarea
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>
<div
style={{
display: "flex",
"justify-content": "flex-end",
"margin-top": "8px",
gap: "16px",
"flex-flow": "row wrap",
}}
>
<Button onClick={[setLangPickerOpen, true]}>
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
{iso639_1.getNativeName(language())}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
<Button onClick={[setPermPicker, true]}>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
{visibilityText()}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
</div>
<Show when={typing()}>
<div
style={{
display: "flex",
"justify-content": "flex-end",
"margin-top": "8px",
gap: "16px",
"flex-flow": "row wrap",
}}
>
<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]} disabled={sending()}>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
{visibilityText()}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
</div>
<TootVisibilityPickerDialog
open={permPicker()}
onClose={() => setPermPicker(false)}
visibility={visibility()}
onVisibilityChange={setVisibility}
/>
<TootVisibilityPickerDialog
open={permPicker()}
onClose={() => setPermPicker(false)}
visibility={visibility()}
onVisibilityChange={setVisibility}
/>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
</Show>
</div>
);
};

View file

@ -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>
@ -270,6 +286,7 @@ const TootBottomSheet: Component = (props) => {
)}
</For>
</TimeSourceProvider>
<div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
</Scaffold>
);
};