tutu/src/timelines/TootBottomSheet.tsx

277 lines
7.5 KiB
TypeScript
Raw Normal View History

import { useLocation, useNavigate, useParams } from "@solidjs/router";
2024-08-13 15:39:05 +08:00
import {
createEffect,
createRenderEffect,
createResource,
2024-08-22 16:49:27 +08:00
For,
2024-08-13 15:39:05 +08:00
Show,
type Component,
} from "solid-js";
import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread";
2024-08-22 16:49:27 +08:00
import {
AppBar,
Avatar,
CircularProgress,
IconButton,
Toolbar,
} from "@suid/material";
import { Title } from "../material/typography";
import {
ArrowBack as BackIcon,
Close as CloseIcon,
Send,
} from "@suid/icons-material";
2024-08-12 21:55:26 +08:00
import { isiOS } from "../platform/host";
import { createUnauthorizedClient, useSessions } from "../masto/clients";
import { resolveCustomEmoji } from "../masto/toot";
import RegularToot from "./RegularToot";
2024-08-13 14:17:33 +08:00
import type { mastodon } from "masto";
2024-08-13 15:39:05 +08:00
import cards from "../material/cards.module.css";
import { css } from "solid-styled";
import { vibrate } from "../platform/hardware";
2024-08-13 14:17:33 +08:00
let cachedEntry: [string, mastodon.v1.Status] | undefined;
export function setCache(acct: string, status: mastodon.v1.Status) {
2024-08-13 15:39:05 +08:00
cachedEntry = [acct, status];
2024-08-13 14:17:33 +08:00
}
function getCache(acct: string, id: string) {
if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
2024-08-13 15:39:05 +08:00
return cachedEntry[1];
2024-08-13 14:17:33 +08:00
}
}
2024-07-14 20:28:44 +08:00
const TootBottomSheet: Component = (props) => {
2024-08-12 21:55:26 +08:00
const params = useParams<{ acct: string; id: string }>();
const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
2024-08-12 21:55:26 +08:00
const navigate = useNavigate();
const allSession = useSessions();
2024-08-13 15:39:05 +08:00
const acctText = () => decodeURIComponent(params.acct);
2024-08-12 21:55:26 +08:00
const session = () => {
2024-08-13 15:39:05 +08:00
const [inputUsername, inputSite] = acctText().split("@", 2);
2024-08-12 21:55:26 +08:00
const authedSession = allSession().find(
(x) =>
x.account.site === inputSite &&
x.account.inf?.username === inputUsername,
);
2024-08-13 15:39:05 +08:00
return (
authedSession ?? {
client: createUnauthorizedClient(inputSite),
account: undefined,
}
);
};
const profile = () => {
return session().account;
2024-08-12 21:55:26 +08:00
};
const pushedCount = () => {
return location.state?.tootBottomSheetPushedCount || 0;
};
const [remoteToot, { mutate: setRemoteToot }] = createResource(
2024-08-12 21:55:26 +08:00
() => [session().client, params.id] as const,
async ([client, id]) => {
return await client.v1.statuses.$select(id).fetch();
},
);
2024-08-13 14:17:33 +08:00
const toot = () => remoteToot() ?? getCache(acctText(), params.id);
2024-08-12 21:55:26 +08:00
createEffect((lastTootId?: string) => {
const tootId = toot()?.id;
if (!tootId || lastTootId === tootId) return tootId;
const elementId = `toot-${tootId}`;
document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
return tootId;
});
2024-08-22 16:49:27 +08:00
const [tootContext] = createResource(
() => [session().client, params.id] as const,
async ([client, id]) => {
return await client.v1.statuses.$select(id).context.fetch();
},
);
const ancestors = () => tootContext()?.ancestors ?? [];
const descendants = () => tootContext()?.descendants ?? [];
createEffect(() => {
if (ancestors().length > 0) {
document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
}
});
2024-08-12 21:55:26 +08:00
const tootTitle = () => {
const t = toot();
if (t) {
const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
return `${name}'s toot`;
}
return "Someone's toot";
2024-08-12 21:55:26 +08:00
};
const actSession = () => {
const s = session();
return s.account ? s : undefined;
};
const onBookmark = async () => {
const status = remoteToot()!;
const client = actSession()!.client;
const result = await (status.bookmarked
? client.v1.statuses.$select(status.id).unbookmark()
: client.v1.statuses.$select(status.id).bookmark());
setRemoteToot(result);
};
const onBoost = async () => {
const status = remoteToot()!;
const client = actSession()!.client;
vibrate(50);
setRemoteToot(
Object.assign({}, status, {
reblogged: !status.reblogged,
}),
);
const result = await (status.reblogged
? client.v1.statuses.$select(status.id).unreblog()
: client.v1.statuses.$select(status.id).reblog());
vibrate([20, 30]);
setRemoteToot(result);
};
const onFav = async () => {
const status = remoteToot()!;
const client = actSession()!.client;
const result = await (status.favourited
? client.v1.statuses.$select(status.id).favourite()
: client.v1.statuses.$select(status.id).unfavourite());
setRemoteToot(result);
};
const switchContext = (status: mastodon.v1.Status) => {
setCache(params.acct, status);
navigate(`/${params.acct}/${status.id}`, {
state: {
tootBottomSheetPushedCount: pushedCount() + 1,
},
});
};
2024-08-13 15:39:05 +08:00
css`
.bottom-dock {
position: sticky;
bottom: 0;
z-index: var(--tutu-zidx-nav);
2024-08-13 15:39:05 +08:00
}
.name :global(img) {
max-height: 1em;
}
`;
2024-08-12 21:55:26 +08:00
return (
<Scaffold
topbar={
<AppBar
sx={{
backgroundColor: "var(--tutu-color-surface)",
color: "var(--tutu-color-on-surface)",
}}
elevation={1}
position="static"
>
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
{pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
2024-08-12 21:55:26 +08:00
</IconButton>
2024-08-13 15:39:05 +08:00
<Title
class="name"
ref={(e: HTMLElement) =>
createRenderEffect(() => (e.innerHTML = tootTitle()))
}
></Title>
2024-08-12 21:55:26 +08:00
</Toolbar>
</AppBar>
}
>
2024-08-22 16:49:27 +08:00
<For each={ancestors()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
actionable={false}
onClick={[switchContext, item]}
2024-08-22 16:49:27 +08:00
></RegularToot>
)}
</For>
2024-08-13 15:39:05 +08:00
<article>
2024-08-12 21:55:26 +08:00
<Show when={toot()}>
2024-08-13 15:39:05 +08:00
<RegularToot
2024-08-22 16:49:27 +08:00
id={`toot-${toot()!.id}`}
2024-08-13 15:39:05 +08:00
class={cards.card}
style={{
"scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
}}
2024-08-13 15:39:05 +08:00
status={toot()!}
actionable={!!actSession()}
2024-08-13 15:39:05 +08:00
evaluated={true}
onBookmark={onBookmark}
onRetoot={onBoost}
onFavourite={onFav}
2024-08-13 15:39:05 +08:00
></RegularToot>
</Show>
</article>
2024-08-22 16:49:27 +08:00
<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]}
2024-08-22 16:49:27 +08:00
></RegularToot>
)}
</For>
2024-08-13 15:39:05 +08:00
<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 ?? ""}...`}
2024-08-13 15:49:36 +08:00
style={{ width: "100%", border: "none" }}
2024-08-13 15:39:05 +08:00
></textarea>
<IconButton>
<Send />
</IconButton>
</div>
2024-08-12 21:55:26 +08:00
</Show>
</div>
</Scaffold>
);
2024-08-05 15:33:00 +08:00
};
2024-07-14 20:28:44 +08:00
2024-08-05 15:33:00 +08:00
export default TootBottomSheet;