Compare commits

..

No commits in common. "143ecf62786bd5a13d6647f31122efafa52aef98" and "5c2ebada28ae2d4d30b4d7cba768cae927c00c19" have entirely different histories.

4 changed files with 46 additions and 163 deletions

View file

@ -2,21 +2,7 @@
//! 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(() => { // all target platforms supported, prepared to remove
import("web-animations-js").then(() => {
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,13 +74,10 @@ 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 (
@ -103,17 +100,7 @@ const MediaAttachmentGrid: Component<{
controls
/>
);
case "gifv": // Later we can handle the preview
return (
<video
src={item.url || undefined}
style={style()}
onLoadedMetadata={[setLoaded, true]}
autoplay={true}
controls
/>
);
case "gifv":
case "audio":
case "unknown":
return <div></div>;

View file

@ -1,7 +1,6 @@
import {
createEffect,
createSignal,
createUniqueId,
onMount,
Show,
type Component,
@ -19,7 +18,6 @@ import {
Radio,
Switch,
Divider,
CircularProgress,
} from "@suid/material";
import {
ArrowDropDown,
@ -38,7 +36,6 @@ 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";
@ -180,19 +177,13 @@ 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");
@ -208,14 +199,6 @@ 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()
? {
@ -239,39 +222,6 @@ 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}
@ -279,74 +229,51 @@ 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>
<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>
<IconButton sx={{marginRight: '-0.5em'}}>
<Send />
</IconButton>
</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>
<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>
<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}
/>
</Show>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
</div>
);
};

View file

@ -84,7 +84,7 @@ const TootBottomSheet: Component = (props) => {
return tootId;
});
const [tootContext, {refetch: refetchContext}] = createResource(
const [tootContext] = createResource(
() => [session().client, params.id] as const,
async ([client, id]) => {
return await client.v1.statuses.$select(id).context.fetch();
@ -171,18 +171,6 @@ 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;
@ -249,16 +237,12 @@ const TootBottomSheet: Component = (props) => {
</Show>
</article>
<Show when={session()!.account}>
<Show when={profile()}>
<ReplyEditor
isTyping={isInTyping()}
onTypingChange={setInTyping}
mentions={defaultMentions()}
profile={session().account!}
profile={profile()!}
replyToDisplayName={toot()?.account?.displayName || ""}
client={session().client}
onSent={() => refetchContext()}
inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
/>
</Show>
@ -286,7 +270,6 @@ const TootBottomSheet: Component = (props) => {
)}
</For>
</TimeSourceProvider>
<div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
</Scaffold>
);
};