323 lines
9.2 KiB
TypeScript
323 lines
9.2 KiB
TypeScript
import {
|
|
Component,
|
|
createSignal,
|
|
ErrorBoundary,
|
|
type Ref,
|
|
createSelector,
|
|
Index,
|
|
createMemo,
|
|
For,
|
|
createUniqueId,
|
|
} from "solid-js";
|
|
import { type mastodon } from "masto";
|
|
import { vibrate } from "~platform/hardware";
|
|
import { useDefaultSession } from "../masto/clients";
|
|
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
|
|
import RegularToot, {
|
|
findElementActionable,
|
|
findRootToot,
|
|
TootEnvProvider,
|
|
} from "./RegularToot";
|
|
import cardStyle from "~material/cards.module.css";
|
|
import type { ThreadNode } from "../masto/timelines";
|
|
import { useNavigator } from "~platform/StackedRouter";
|
|
import { ANIM_CURVE_STD } from "~material/theme";
|
|
import { useItemSelection } from "./toots/ItemSelectionProvider";
|
|
|
|
function durationOf(rect0: DOMRect, rect1: DOMRect) {
|
|
const distancelt = Math.sqrt(
|
|
Math.pow(Math.abs(rect0.top - rect1.top), 2) +
|
|
Math.pow(Math.abs(rect0.left - rect1.left), 2),
|
|
);
|
|
const distancerb = Math.sqrt(
|
|
Math.pow(Math.abs(rect0.bottom - rect1.bottom), 2) +
|
|
Math.pow(Math.abs(rect0.right - rect1.right), 2),
|
|
);
|
|
const distance = distancelt + distancerb;
|
|
const duration = distance / 1.6;
|
|
return duration;
|
|
}
|
|
|
|
function positionTootInThread(index: number, threadLength: number) {
|
|
if (index === 0) {
|
|
return "top";
|
|
} else if (index === threadLength - 1) {
|
|
return "bottom";
|
|
}
|
|
return "middle";
|
|
}
|
|
|
|
/**
|
|
* Full-feature toot list.
|
|
*/
|
|
const TootList: Component<{
|
|
ref?: Ref<HTMLDivElement>;
|
|
id?: string;
|
|
threads: readonly string[];
|
|
onUnknownThread: (id: string) => ThreadNode[] | undefined;
|
|
onChangeToot: (id: string, value: mastodon.v1.Status) => void;
|
|
}> = (props) => {
|
|
const session = useDefaultSession();
|
|
const [isExpanded, setExpanded] = useItemSelection();
|
|
const { push } = useNavigator();
|
|
|
|
const onBookmark = async (status: mastodon.v1.Status) => {
|
|
const client = session()?.client;
|
|
if (!client) return;
|
|
|
|
const result = await (status.bookmarked
|
|
? client.v1.statuses.$select(status.id).unbookmark()
|
|
: client.v1.statuses.$select(status.id).bookmark());
|
|
props.onChangeToot(result.id, result);
|
|
};
|
|
|
|
const toggleBoost = async (status: mastodon.v1.Status) => {
|
|
const client = session()?.client;
|
|
if (!client) return;
|
|
|
|
vibrate(50);
|
|
const rootStatus = status.reblog ? status.reblog : status;
|
|
const reblogged = rootStatus.reblogged;
|
|
if (status.reblog) {
|
|
props.onChangeToot(status.id, {
|
|
...status,
|
|
reblog: { ...status.reblog, reblogged: !reblogged },
|
|
});
|
|
} else {
|
|
props.onChangeToot(status.id, {
|
|
...status,
|
|
reblogged: !reblogged,
|
|
});
|
|
}
|
|
|
|
const result = reblogged
|
|
? await client.v1.statuses.$select(status.id).unreblog()
|
|
: (await client.v1.statuses.$select(status.id).reblog()).reblog!;
|
|
|
|
if (status.reblog) {
|
|
props.onChangeToot(status.id, {
|
|
...status,
|
|
reblog: result,
|
|
});
|
|
} else {
|
|
props.onChangeToot(status.id, result);
|
|
}
|
|
};
|
|
|
|
const toggleFavourite = async (status: mastodon.v1.Status) => {
|
|
const client = session()?.client;
|
|
if (!client) return;
|
|
const ovalue = status.favourited;
|
|
props.onChangeToot(status.id, { ...status, favourited: !ovalue });
|
|
|
|
const result = ovalue
|
|
? await client.v1.statuses.$select(status.id).unfavourite()
|
|
: await client.v1.statuses.$select(status.id).favourite();
|
|
props.onChangeToot(status.id, result);
|
|
};
|
|
|
|
const openFullScreenToot = (
|
|
toot: mastodon.v1.Status,
|
|
srcElement: HTMLElement,
|
|
reply?: boolean,
|
|
) => {
|
|
const p = session()?.account;
|
|
if (!p) return;
|
|
const inf = p.inf;
|
|
if (!inf) {
|
|
console.warn("no account info?");
|
|
return;
|
|
}
|
|
|
|
const acct = `${inf.username}@${p.site}`;
|
|
setTootBottomSheetCache(acct, toot);
|
|
|
|
push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
|
|
animateOpen(element) {
|
|
const rect0 = srcElement.getBoundingClientRect(); // the start rect
|
|
const rect1 = element.getBoundingClientRect(); // the end rect
|
|
|
|
const duration = durationOf(rect0, rect1);
|
|
|
|
const keyframes = {
|
|
top: [`${rect0.top}px`, `${rect1.top}px`],
|
|
bottom: [`${rect0.bottom}px`, `${rect1.bottom}px`],
|
|
left: [`${rect0.left}px`, `${rect1.left}px`],
|
|
right: [`${rect0.right}px`, `${rect1.right}px`],
|
|
height: [`${rect0.height}px`, `${rect1.height}px`],
|
|
margin: 0,
|
|
};
|
|
|
|
srcElement.style.visibility = "hidden";
|
|
|
|
const animation = element.animate(keyframes, {
|
|
duration,
|
|
easing: ANIM_CURVE_STD,
|
|
});
|
|
return animation;
|
|
},
|
|
|
|
animateClose(element) {
|
|
const rect0 = element.getBoundingClientRect(); // the start rect
|
|
const rect1 = srcElement.getBoundingClientRect(); // the end rect
|
|
|
|
const duration = durationOf(rect0, rect1);
|
|
|
|
const keyframes = {
|
|
top: [`${rect0.top}px`, `${rect1.top}px`],
|
|
bottom: [`${rect0.bottom}px`, `${rect1.bottom}px`],
|
|
left: [`${rect0.left}px`, `${rect1.left}px`],
|
|
right: [`${rect0.right}px`, `${rect1.right}px`],
|
|
height: [`${rect0.height}px`, `${rect1.height}px`],
|
|
margin: 0,
|
|
};
|
|
|
|
srcElement.style.visibility = "";
|
|
|
|
const animation = element.animate(keyframes, {
|
|
duration,
|
|
easing: ANIM_CURVE_STD,
|
|
});
|
|
return animation;
|
|
},
|
|
});
|
|
};
|
|
|
|
const onItemClick = (
|
|
status: mastodon.v1.Status,
|
|
event: MouseEvent & { target: EventTarget; currentTarget: HTMLElement },
|
|
) => {
|
|
if (!(event.target instanceof HTMLElement)) {
|
|
throw new Error("target is not an element");
|
|
}
|
|
const actionableElement = findElementActionable(
|
|
event.target,
|
|
event.currentTarget,
|
|
);
|
|
|
|
if (actionableElement && isExpanded(event.currentTarget.id)) {
|
|
if (actionableElement.dataset.action === "acct") {
|
|
event.stopPropagation();
|
|
|
|
const target = actionableElement as HTMLAnchorElement;
|
|
|
|
const acct = encodeURIComponent(
|
|
target.dataset.client || `@${new URL(target.href).origin}`,
|
|
);
|
|
|
|
push(`/${acct}/profile/${target.dataset.acctId}`);
|
|
|
|
return;
|
|
} else {
|
|
console.warn("unknown action", actionableElement.dataset.rel);
|
|
}
|
|
} else if (
|
|
event.target.parentElement &&
|
|
event.target.parentElement.tagName === "A"
|
|
) {
|
|
return;
|
|
}
|
|
|
|
// else if (!actionableElement || !checkIsExpended(status) || <rel is not one of known action>)
|
|
if (!isExpanded(event.currentTarget.id)) {
|
|
setExpanded(event.currentTarget.id);
|
|
} else {
|
|
openFullScreenToot(status, event.currentTarget as HTMLElement);
|
|
}
|
|
};
|
|
|
|
const reply = (
|
|
status: mastodon.v1.Status,
|
|
event: { currentTarget: HTMLElement },
|
|
) => {
|
|
const element = findRootToot(event.currentTarget);
|
|
openFullScreenToot(status, element, true);
|
|
};
|
|
|
|
const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
|
|
const client = session()?.client;
|
|
if (!client) return;
|
|
|
|
const toot = status.reblog ?? status;
|
|
if (!toot.poll) return;
|
|
|
|
const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
|
|
choices: votes,
|
|
});
|
|
|
|
if (status.reblog) {
|
|
props.onChangeToot(status.id, {
|
|
...status,
|
|
reblog: {
|
|
...status.reblog,
|
|
poll: npoll,
|
|
},
|
|
});
|
|
} else {
|
|
props.onChangeToot(status.id, {
|
|
...status,
|
|
poll: npoll,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary
|
|
fallback={(err, reset) => {
|
|
console.error(err);
|
|
return <p>Oops: {String(err)}</p>;
|
|
}}
|
|
>
|
|
<TootEnvProvider
|
|
value={{
|
|
boost: toggleBoost,
|
|
bookmark: onBookmark,
|
|
favourite: toggleFavourite,
|
|
reply: reply,
|
|
vote: vote,
|
|
}}
|
|
>
|
|
<div ref={props.ref} id={props.id} class="toot-list">
|
|
<For each={props.threads}>
|
|
{(threadId, threadIdx) => {
|
|
const thread = createMemo(() =>
|
|
props.onUnknownThread(threadId)?.reverse(),
|
|
);
|
|
|
|
const threadLength = () => thread()?.length ?? 0;
|
|
|
|
return (
|
|
<Index each={thread()}>
|
|
{(threadNode, index) => {
|
|
const status = () => threadNode().value;
|
|
const id = createUniqueId();
|
|
|
|
return (
|
|
<RegularToot
|
|
data-status-id={status().id}
|
|
data-thread-sort={index}
|
|
id={id}
|
|
status={status()}
|
|
thread={
|
|
threadLength() > 1
|
|
? positionTootInThread(index, threadLength())
|
|
: undefined
|
|
}
|
|
class={cardStyle.card}
|
|
evaluated={isExpanded(id)}
|
|
actionable={isExpanded(id)}
|
|
onClick={[onItemClick, status()]}
|
|
/>
|
|
);
|
|
}}
|
|
</Index>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
</TootEnvProvider>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|
|
|
|
export default TootList;
|