Merge pull request 'composing toots' (#21) from feat-toot-composer into master
Reviewed-on: https://code.lightstands.xyz///Rubicon/tutu/pulls/21
This commit is contained in:
commit
6506a60022
13 changed files with 708 additions and 87 deletions
|
|
@ -1,5 +1,7 @@
|
|||
.bottomSheet {
|
||||
composes: surface from "material.module.css";
|
||||
composes: surface from "./material.module.css";
|
||||
composes: cardGutSkip from "./cards.module.css";
|
||||
composes: cardNoPad from "./cards.module.css";
|
||||
border: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -42,9 +44,21 @@
|
|||
&.animated {
|
||||
position: absolute;
|
||||
transform: none;
|
||||
overflow: hidden;
|
||||
will-change: width, height, top, left;
|
||||
|
||||
&::backdrop {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& * {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
top: unset;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,12 @@ import {
|
|||
} from "solid-js";
|
||||
import styles from "./BottomSheet.module.css";
|
||||
import { useHeroSignal } from "../platform/anim";
|
||||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
|
||||
export type BottomSheetProps = {
|
||||
open?: boolean;
|
||||
bottomUp?: boolean;
|
||||
onClose?(reason: "backdrop"): void;
|
||||
};
|
||||
|
||||
export const HERO = Symbol("BottomSheet Hero Symbol");
|
||||
|
|
@ -52,7 +55,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
|
|||
createEffect(() => {
|
||||
if (props.open) {
|
||||
if (!element.open && !pending()) {
|
||||
animatedOpen();
|
||||
requestAnimationFrame(animatedOpen);
|
||||
setCache(ochildren());
|
||||
}
|
||||
} else {
|
||||
|
|
@ -63,15 +66,16 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
|
|||
}
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
element.close();
|
||||
setHero();
|
||||
};
|
||||
|
||||
const animatedClose = () => {
|
||||
const endRect = hero();
|
||||
if (endRect) {
|
||||
const startRect = element.getBoundingClientRect();
|
||||
const animation = animateHero(startRect, endRect, element, true);
|
||||
const onClose = () => {
|
||||
element.close();
|
||||
setHero();
|
||||
};
|
||||
animation.addEventListener("finish", onClose);
|
||||
animation.addEventListener("cancel", onClose);
|
||||
} else {
|
||||
|
|
@ -123,8 +127,29 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
|
|||
}
|
||||
});
|
||||
|
||||
const onDialogClick = (
|
||||
event: MouseEvent & { currentTarget: HTMLDialogElement },
|
||||
) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const isInDialog =
|
||||
rect.top <= event.clientY &&
|
||||
event.clientY <= rect.top + rect.height &&
|
||||
rect.left <= event.clientX &&
|
||||
event.clientX <= rect.left + rect.width;
|
||||
if (!isInDialog) {
|
||||
props.onClose?.("backdrop");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<dialog class={styles.bottomSheet} ref={element!}>
|
||||
<dialog
|
||||
classList={{
|
||||
[styles.bottomSheet]: true,
|
||||
[styles.bottom]: props.bottomUp,
|
||||
}}
|
||||
onClick={onDialogClick}
|
||||
ref={element!}
|
||||
>
|
||||
{ochildren() ?? cache()}
|
||||
</dialog>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { css } from "solid-styled";
|
|||
interface ScaffoldProps {
|
||||
topbar?: JSX.Element;
|
||||
fab?: JSX.Element;
|
||||
bottom?: JSX.Element;
|
||||
}
|
||||
|
||||
const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
|
||||
|
|
@ -36,6 +37,16 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
|
|||
right: 40px;
|
||||
z-index: var(--tutu-zidx-nav, auto);
|
||||
}
|
||||
|
||||
.bottom-dock {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: var(--tutu-zidx-nav, auto);
|
||||
padding-bottom: var(--safe-area-inset-bottom, 0);
|
||||
|
||||
}
|
||||
`;
|
||||
return (
|
||||
<>
|
||||
|
|
@ -48,6 +59,9 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
|
|||
<div class="fab-dock">{props.fab}</div>
|
||||
</Show>
|
||||
<div class="scaffold-content">{props.children}</div>
|
||||
<Show when={props.bottom}>
|
||||
<div class="bottom-dock">{props.bottom}</div>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
86
src/timelines/ChooseTootLang.tsx
Normal file
86
src/timelines/ChooseTootLang.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import {
|
||||
For,
|
||||
onMount,
|
||||
type Component,
|
||||
type JSX,
|
||||
} from "solid-js";
|
||||
import Scaffold from "../material/Scaffold";
|
||||
import {
|
||||
AppBar,
|
||||
IconButton,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
Radio,
|
||||
Toolbar,
|
||||
} from "@suid/material";
|
||||
import { Close as CloseIcon } from "@suid/icons-material";
|
||||
import iso639_1 from "iso-639-1";
|
||||
import { createTranslator } from "../platform/i18n";
|
||||
import { Title } from "../material/typography";
|
||||
|
||||
type ChooseTootLangProps = {
|
||||
code: string;
|
||||
onCodeChange: (ncode: string) => void;
|
||||
onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
|
||||
};
|
||||
|
||||
const ChooseTootLang: Component<ChooseTootLangProps> = (props) => {
|
||||
let listRef: HTMLUListElement;
|
||||
const [t] = createTranslator(
|
||||
(code) =>
|
||||
import(`./i18n/${code}.json`) as Promise<{
|
||||
default: Record<string, string | undefined>;
|
||||
}>,
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
const code = props.code;
|
||||
const el = listRef.querySelector(`[data-langcode="${code}"]`);
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: "auto" });
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
<AppBar position="static">
|
||||
<Toolbar
|
||||
variant="dense"
|
||||
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
|
||||
>
|
||||
<IconButton color="inherit" onClick={props.onClose} disableRipple>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Title>{t("Choose Language")}</Title>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
}
|
||||
>
|
||||
<List
|
||||
ref={listRef!}
|
||||
sx={{
|
||||
paddingBottom: "var(--safe-area-inset-bottom, 0)",
|
||||
}}
|
||||
>
|
||||
<For each={iso639_1.getAllCodes()}>
|
||||
{(code) => (
|
||||
<ListItemButton
|
||||
data-langcode={code}
|
||||
onClick={() => props.onCodeChange(code)}
|
||||
>
|
||||
<ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio checked={props.code == code}></Radio>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
)}
|
||||
</For>
|
||||
</List>
|
||||
</Scaffold>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChooseTootLang;
|
||||
|
|
@ -47,6 +47,7 @@ import { HeroSourceProvider, type HeroSource } from "../platform/anim";
|
|||
import { useNavigate } from "@solidjs/router";
|
||||
import { useSignedInProfiles } from "../masto/acct";
|
||||
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
|
||||
import TootComposer from "./TootComposer";
|
||||
|
||||
const TimelinePanel: Component<{
|
||||
client: mastodon.rest.Client;
|
||||
|
|
@ -57,6 +58,7 @@ const TimelinePanel: Component<{
|
|||
openFullScreenToot: (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => void;
|
||||
}> = (props) => {
|
||||
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
|
||||
|
|
@ -72,6 +74,7 @@ const TimelinePanel: Component<{
|
|||
{ fullRefresh: props.fullRefetch },
|
||||
);
|
||||
const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
|
||||
const [typing, setTyping] = createSignal(false);
|
||||
|
||||
const tlEndObserver = new IntersectionObserver(() => {
|
||||
if (untrack(() => props.prefetch) && !snapshot.loading)
|
||||
|
|
@ -143,6 +146,17 @@ const TimelinePanel: Component<{
|
|||
}, 0)
|
||||
}
|
||||
>
|
||||
<Show when={props.name === "home"}>
|
||||
<TootComposer
|
||||
style={{
|
||||
"--scaffold-topbar-height": "0px",
|
||||
}}
|
||||
isTyping={typing()}
|
||||
onTypingChange={setTyping}
|
||||
client={props.client}
|
||||
onSent={() => refetchTimeline({ direction: "new" })}
|
||||
/>
|
||||
</Show>
|
||||
<For each={timeline}>
|
||||
{(item, index) => {
|
||||
let element: HTMLElement | undefined;
|
||||
|
|
@ -152,6 +166,9 @@ const TimelinePanel: Component<{
|
|||
status={item}
|
||||
onBoost={(...args) => onBoost(index(), ...args)}
|
||||
onBookmark={(...args) => onBookmark(index(), ...args)}
|
||||
onReply={(client, status) =>
|
||||
props.openFullScreenToot(status, element, true)
|
||||
}
|
||||
client={props.client}
|
||||
expanded={item.id === expandedThreadId() ? 1 : 0}
|
||||
onExpandChange={(x) => {
|
||||
|
|
@ -314,6 +331,7 @@ const Home: ParentComponent = (props) => {
|
|||
const openFullScreenToot = (
|
||||
toot: mastodon.v1.Status,
|
||||
srcElement?: HTMLElement,
|
||||
reply?: boolean,
|
||||
) => {
|
||||
const p = profiles()[0];
|
||||
const inf = p.account.inf ?? profile();
|
||||
|
|
@ -325,7 +343,13 @@ const Home: ParentComponent = (props) => {
|
|||
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
|
||||
const acct = `${inf.username}@${p.account.site}`;
|
||||
setTootBottomSheetCache(acct, toot);
|
||||
navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
|
||||
navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {
|
||||
state: reply
|
||||
? {
|
||||
tootReply: true,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
css`
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ import {
|
|||
createEffect,
|
||||
createRenderEffect,
|
||||
createResource,
|
||||
createSignal,
|
||||
For,
|
||||
Show,
|
||||
type Component,
|
||||
} from "solid-js";
|
||||
import Scaffold from "../material/Scaffold";
|
||||
import { AppBar, Avatar, CircularProgress, IconButton, Toolbar } from "@suid/material";
|
||||
import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
|
||||
import { Title } from "../material/typography";
|
||||
import {
|
||||
ArrowBack as BackIcon,
|
||||
Close as CloseIcon,
|
||||
Send,
|
||||
} from "@suid/icons-material";
|
||||
import { createUnauthorizedClient, useSessions } from "../masto/clients";
|
||||
import { resolveCustomEmoji } from "../masto/toot";
|
||||
|
|
@ -22,6 +22,8 @@ import type { mastodon } from "masto";
|
|||
import cards from "../material/cards.module.css";
|
||||
import { css } from "solid-styled";
|
||||
import { vibrate } from "../platform/hardware";
|
||||
import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
|
||||
import TootComposer from "./TootComposer";
|
||||
|
||||
let cachedEntry: [string, mastodon.v1.Status] | undefined;
|
||||
|
||||
|
|
@ -37,9 +39,14 @@ function getCache(acct: string, id: string) {
|
|||
|
||||
const TootBottomSheet: Component = (props) => {
|
||||
const params = useParams<{ acct: string; id: string }>();
|
||||
const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
|
||||
const location = useLocation<{
|
||||
tootBottomSheetPushedCount?: number;
|
||||
tootReply?: boolean;
|
||||
}>();
|
||||
const navigate = useNavigate();
|
||||
const allSession = useSessions();
|
||||
const time = createTimeSource();
|
||||
const [isInTyping, setInTyping] = createSignal(false);
|
||||
const acctText = () => decodeURIComponent(params.acct);
|
||||
const session = () => {
|
||||
const [inputUsername, inputSite] = acctText().split("@", 2);
|
||||
|
|
@ -80,7 +87,13 @@ const TootBottomSheet: Component = (props) => {
|
|||
return tootId;
|
||||
});
|
||||
|
||||
const [tootContext] = createResource(
|
||||
createEffect(() => {
|
||||
if (location.state?.tootReply) {
|
||||
setInTyping(true);
|
||||
}
|
||||
});
|
||||
|
||||
const [tootContext, { refetch: refetchContext }] = createResource(
|
||||
() => [session().client, params.id] as const,
|
||||
async ([client, id]) => {
|
||||
return await client.v1.statuses.$select(id).context.fetch();
|
||||
|
|
@ -155,6 +168,10 @@ const TootBottomSheet: Component = (props) => {
|
|||
};
|
||||
|
||||
const switchContext = (status: mastodon.v1.Status) => {
|
||||
if (isInTyping()) {
|
||||
setInTyping(false);
|
||||
return;
|
||||
}
|
||||
setCache(params.acct, status);
|
||||
navigate(`/${params.acct}/${status.id}`, {
|
||||
state: {
|
||||
|
|
@ -163,13 +180,19 @@ const TootBottomSheet: Component = (props) => {
|
|||
});
|
||||
};
|
||||
|
||||
css`
|
||||
.bottom-dock {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: var(--tutu-zidx-nav);
|
||||
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;
|
||||
}
|
||||
|
|
@ -203,74 +226,76 @@ const TootBottomSheet: Component = (props) => {
|
|||
</AppBar>
|
||||
}
|
||||
>
|
||||
<For each={ancestors()}>
|
||||
{(item) => (
|
||||
<RegularToot
|
||||
id={`toot-${item.id}`}
|
||||
class={cards.card}
|
||||
status={item}
|
||||
actionable={false}
|
||||
onClick={[switchContext, item]}
|
||||
></RegularToot>
|
||||
)}
|
||||
</For>
|
||||
<TimeSourceProvider value={time}>
|
||||
<For each={ancestors()}>
|
||||
{(item) => (
|
||||
<RegularToot
|
||||
id={`toot-${item.id}`}
|
||||
class={cards.card}
|
||||
status={item}
|
||||
actionable={false}
|
||||
onClick={[switchContext, item]}
|
||||
></RegularToot>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<article>
|
||||
<Show when={toot()}>
|
||||
<RegularToot
|
||||
id={`toot-${toot()!.id}`}
|
||||
class={cards.card}
|
||||
style={{
|
||||
"scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
|
||||
}}
|
||||
status={toot()!}
|
||||
actionable={!!actSession()}
|
||||
evaluated={true}
|
||||
onBookmark={onBookmark}
|
||||
onRetoot={onBoost}
|
||||
onFavourite={onFav}
|
||||
></RegularToot>
|
||||
<article>
|
||||
<Show when={toot()}>
|
||||
<RegularToot
|
||||
id={`toot-${toot()!.id}`}
|
||||
class={cards.card}
|
||||
style={{
|
||||
"scroll-margin-top":
|
||||
"calc(var(--scaffold-topbar-height) + 20px)",
|
||||
}}
|
||||
status={toot()!}
|
||||
actionable={!!actSession()}
|
||||
evaluated={true}
|
||||
onBookmark={onBookmark}
|
||||
onRetoot={onBoost}
|
||||
onFavourite={onFav}
|
||||
></RegularToot>
|
||||
</Show>
|
||||
</article>
|
||||
|
||||
<Show when={session()!.account}>
|
||||
<TootComposer
|
||||
isTyping={isInTyping()}
|
||||
onTypingChange={setInTyping}
|
||||
mentions={defaultMentions()}
|
||||
profile={session().account!}
|
||||
replyToDisplayName={toot()?.account?.displayName || ""}
|
||||
client={session().client}
|
||||
onSent={() => refetchContext()}
|
||||
inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
|
||||
/>
|
||||
</Show>
|
||||
</article>
|
||||
|
||||
<Show when={tootContext.loading}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"justify-content": "center",
|
||||
"margin-block": "12px",
|
||||
}}
|
||||
>
|
||||
<CircularProgress style="width: 1.5em; height: 1.5em;" />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<For each={descendants()}>
|
||||
{(item) => (
|
||||
<RegularToot
|
||||
id={`toot-${item.id}`}
|
||||
class={cards.card}
|
||||
status={item}
|
||||
actionable={false}
|
||||
onClick={[switchContext, item]}
|
||||
></RegularToot>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<div class="bottom-dock">
|
||||
<Show when={profile()}>
|
||||
<div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
|
||||
<Avatar src={profile()!.inf?.avatar} />
|
||||
<textarea
|
||||
placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
|
||||
style={{ width: "100%", border: "none" }}
|
||||
></textarea>
|
||||
<IconButton>
|
||||
<Send />
|
||||
</IconButton>
|
||||
<Show when={tootContext.loading}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"justify-content": "center",
|
||||
"margin-block": "12px",
|
||||
}}
|
||||
>
|
||||
<CircularProgress style="width: 1.5em; height: 1.5em;" />
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<For each={descendants()}>
|
||||
{(item) => (
|
||||
<RegularToot
|
||||
id={`toot-${item.id}`}
|
||||
class={cards.card}
|
||||
status={item}
|
||||
actionable={false}
|
||||
onClick={[switchContext, item]}
|
||||
></RegularToot>
|
||||
)}
|
||||
</For>
|
||||
</TimeSourceProvider>
|
||||
<div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
|
||||
</Scaffold>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
11
src/timelines/TootComposer.module.css
Normal file
11
src/timelines/TootComposer.module.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
.composer {
|
||||
composes: card from "../material/cards.module.css";
|
||||
--card-gut: 8px;
|
||||
}
|
||||
|
||||
.replyInput {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
383
src/timelines/TootComposer.tsx
Normal file
383
src/timelines/TootComposer.tsx
Normal file
|
|
@ -0,0 +1,383 @@
|
|||
import {
|
||||
createEffect,
|
||||
createSignal,
|
||||
createUniqueId,
|
||||
onMount,
|
||||
Show,
|
||||
type Component,
|
||||
type JSX,
|
||||
type Ref,
|
||||
} from "solid-js";
|
||||
import Scaffold from "../material/Scaffold";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
IconButton,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
Radio,
|
||||
Switch,
|
||||
Divider,
|
||||
CircularProgress,
|
||||
} from "@suid/material";
|
||||
import {
|
||||
ArrowDropDown,
|
||||
Public as PublicIcon,
|
||||
Send,
|
||||
People as PeopleIcon,
|
||||
ThreeP as ThreePIcon,
|
||||
ListAlt as ListAltIcon,
|
||||
Visibility,
|
||||
Translate,
|
||||
} from "@suid/icons-material";
|
||||
import type { Account } from "../accounts/stores";
|
||||
import tootComposers from "./TootComposer.module.css";
|
||||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
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";
|
||||
|
||||
const TootVisibilityPickerDialog: Component<{
|
||||
open?: boolean;
|
||||
onClose: () => void;
|
||||
visibility: TootVisibility;
|
||||
onVisibilityChange: (value: TootVisibility) => void;
|
||||
}> = (props) => {
|
||||
type Kind = "public" | "private" | "direct";
|
||||
|
||||
const kind = () =>
|
||||
props.visibility === "public" || props.visibility === "unlisted"
|
||||
? "public"
|
||||
: props.visibility;
|
||||
|
||||
const setKind = (nv: Kind) => {
|
||||
if (nv == "public") {
|
||||
props.onVisibilityChange(discoverable() ? "public" : "unlisted");
|
||||
} else {
|
||||
props.onVisibilityChange(nv);
|
||||
}
|
||||
};
|
||||
|
||||
const discoverable = () => {
|
||||
return props.visibility === "public";
|
||||
};
|
||||
|
||||
const setDiscoverable = (setter: (v: boolean) => boolean) => {
|
||||
const nval = setter(discoverable());
|
||||
props.onVisibilityChange(nval ? "public" : "unlisted"); // trigger change
|
||||
};
|
||||
|
||||
return (
|
||||
<BottomSheet open={props.open} onClose={props.onClose} bottomUp>
|
||||
<Scaffold
|
||||
bottom={
|
||||
<div
|
||||
style={{
|
||||
"border-top": "1px solid #ddd",
|
||||
background: "var(--tutu-color-surface)",
|
||||
padding: "8px 16px",
|
||||
width: "100%",
|
||||
"text-align": "end",
|
||||
}}
|
||||
>
|
||||
<Button onClick={props.onClose}>Confirm</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<List dense>
|
||||
<ListItemButton onClick={[setKind, "public"]}>
|
||||
<ListItemIcon>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Public"
|
||||
secondary="Everyone can see this toot"
|
||||
></ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio checked={kind() == "public"}></Radio>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
|
||||
<ListItemButton
|
||||
sx={{ paddingLeft: "40px" }}
|
||||
disabled={kind() !== "public"}
|
||||
onClick={() => setDiscoverable((x) => !x)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<ListAltIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Discoverable"
|
||||
secondary="The others can discover it on the exploration."
|
||||
></ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Switch
|
||||
checked={discoverable()}
|
||||
disabled={kind() !== "public"}
|
||||
></Switch>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItemButton onClick={[setKind, "private"]}>
|
||||
<ListItemIcon>
|
||||
<PeopleIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Only Followers"
|
||||
secondary="Visibile for followers only"
|
||||
></ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio checked={kind() == "private"}></Radio>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItemButton onClick={[setKind, "direct"]}>
|
||||
<ListItemIcon>
|
||||
<ThreePIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Only Mentions"
|
||||
secondary="Visible for mentioned users only"
|
||||
></ListItemText>
|
||||
<ListItemSecondaryAction>
|
||||
<Radio checked={kind() == "direct"}></Radio>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Scaffold>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
const TootLanguagePickerDialog: Component<{
|
||||
open?: boolean;
|
||||
onClose: () => void;
|
||||
code: string;
|
||||
onCodeChange: (nval: string) => void;
|
||||
}> = (props) => {
|
||||
return (
|
||||
<BottomSheet open={props.open} onClose={props.onClose}>
|
||||
<Show when={props.open}>
|
||||
<ChooseTootLang
|
||||
code={props.code}
|
||||
onCodeChange={props.onCodeChange}
|
||||
onClose={props.onClose}
|
||||
/>
|
||||
</Show>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
function randomChoose<T extends any[]>(
|
||||
rn: number,
|
||||
K: T,
|
||||
): T extends Array<infer E> ? E : never {
|
||||
const idx = Math.round(rn * K.length);
|
||||
return K[idx];
|
||||
}
|
||||
|
||||
const TootComposer: Component<{
|
||||
ref?: Ref<HTMLDivElement>;
|
||||
style?: JSX.CSSProperties;
|
||||
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");
|
||||
const [langPickerOpen, setLangPickerOpen] = createSignal(false);
|
||||
const appLanguage = useLanguage();
|
||||
|
||||
createEffect(() => {
|
||||
const lang = appLanguage().split("-")[0];
|
||||
setLanguage(lang);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (typing()) {
|
||||
setTimeout(() => inputRef.focus(), 0);
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
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()
|
||||
? {
|
||||
position: "sticky" as const,
|
||||
top: "var(--scaffold-topbar-height, 0)",
|
||||
bottom: "var(--safe-area-inset-bottom, 0)",
|
||||
"z-index": 2,
|
||||
...props.style,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const visibilityText = () => {
|
||||
switch (visibility()) {
|
||||
case "public":
|
||||
return "Discoverable";
|
||||
case "unlisted":
|
||||
return "Public";
|
||||
case "private":
|
||||
return "Only Followers";
|
||||
case "direct":
|
||||
return "Only Mentions";
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
ref={props.ref}
|
||||
class={tootComposers.composer}
|
||||
style={containerStyle()}
|
||||
onClick={(e) => inputRef.focus()}
|
||||
>
|
||||
<div class={tootComposers.replyInput}>
|
||||
<Show when={props.profile}>
|
||||
<Avatar
|
||||
src={props.profile!.inf?.avatar}
|
||||
sx={{ marginLeft: "-0.25em" }}
|
||||
/>
|
||||
</Show>
|
||||
<textarea
|
||||
ref={inputRef!}
|
||||
placeholder={
|
||||
props.replyToDisplayName
|
||||
? `Reply to ${props.replyToDisplayName}...`
|
||||
: randomChoose(Math.random(), [
|
||||
"What's happening?",
|
||||
"What do your think?",
|
||||
])
|
||||
}
|
||||
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>
|
||||
</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}
|
||||
/>
|
||||
|
||||
<TootLanguagePickerDialog
|
||||
open={langPickerOpen()}
|
||||
onClose={() => setLangPickerOpen(false)}
|
||||
code={language()}
|
||||
onCodeChange={setLanguage}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TootComposer;
|
||||
|
|
@ -14,6 +14,7 @@ type TootThreadProps = {
|
|||
|
||||
onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
|
||||
onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
|
||||
onReply?(client: mastodon.rest.Client, status: mastodon.v1.Status): void
|
||||
onExpandChange?(level: 0 | 1 | 2): void;
|
||||
};
|
||||
|
||||
|
|
@ -38,6 +39,10 @@ const TootThread: Component<TootThreadProps> = (props) => {
|
|||
props.onBookmark?.(props.client, status);
|
||||
};
|
||||
|
||||
const reply = (status: mastodon.v1.Status) => {
|
||||
props.onReply?.(props.client, status)
|
||||
}
|
||||
|
||||
css`
|
||||
article {
|
||||
transition:
|
||||
|
|
@ -88,6 +93,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
|
|||
actionable={expanded() > 0}
|
||||
onBookmark={(s) => bookmark(s)}
|
||||
onRetoot={(s) => boost(s)}
|
||||
onReply={s => reply(s)}
|
||||
/>
|
||||
</article>
|
||||
);
|
||||
|
|
|
|||
3
src/timelines/i18n/en.json
Normal file
3
src/timelines/i18n/en.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"Choose Language": "Choose Language"
|
||||
}
|
||||
3
src/timelines/i18n/zh-Hans.json
Normal file
3
src/timelines/i18n/zh-Hans.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"Choose Language": "选择语言"
|
||||
}
|
||||
Loading…
Reference in a new issue