Remember age gate prompt confirmation.

Translate age gate.
Add additional limitations on KaTeX.
Prevent any message overflow.
This commit is contained in:
Paul 2021-07-08 20:16:50 +01:00
parent ccb7499c2a
commit ee9aab07a9
4 changed files with 106 additions and 80 deletions

View file

@ -0,0 +1,90 @@
import { useHistory } from "react-router-dom";
import { useState } from "preact/hooks";
import styled from "styled-components";
import { dispatch, getState } from "../../redux";
import Checkbox from "../ui/Checkbox";
import Button from "../ui/Button";
import { Children } from "../../types/Preact";
import { Channel } from "revolt.js";
import { Text } from "preact-i18n";
const Base = styled.div`
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
padding: 12px;
img {
height: 150px;
}
.subtext {
color: var(--secondary-foreground);
margin-bottom: 12px;
font-size: 14px;
}
.actions {
margin-top: 20px;
display: flex;
gap: 12px;
}
`;
type Props = {
gated: boolean;
children: Children;
} & {
type: 'channel';
channel: Channel;
}
export default function AgeGate(props: Props) {
const history = useHistory();
const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false);
const [ageGate, setAgeGate] = useState(false);
if (ageGate || !props.gated) {
return <>{ props.children }</>;
} else {
if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
return (
<Base>
<img
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{props.channel.name}</h2>
<span className="subtext">
<Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
<a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
</span>
<Checkbox checked={consent} onChange={(v) => {
setConsent(v);
if (v) {
dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true });
} else {
dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' });
}
}}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button
contrast
onClick={() => consent && setAgeGate(true)}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>
</Base>
);
}
}

View file

@ -21,7 +21,7 @@ export interface BaseMessageProps {
export default styled.div<BaseMessageProps>`
display: flex;
overflow-x: none;
overflow: none;
padding: 0.125rem;
flex-direction: row;
padding-right: 16px;

View file

@ -66,16 +66,9 @@ export const md: MarkdownIt = MarkdownIt({
.use(MarkdownKatex, {
throwOnError: false,
maxExpand: 0,
maxSize: 10
});
// ? Force links to open _blank.
// From: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender =
md.renderer.rules.link_open ||
function (tokens, idx, options, _env, self) {
return self.renderToken(tokens, idx, options);
};
// TODO: global.d.ts file for defining globals
declare global {
interface Window {
@ -124,15 +117,19 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
}, []);
const handleLink = useCallback((ev: MouseEvent) => {
ev.preventDefault();
if (ev.currentTarget) {
const element = ev.currentTarget as HTMLAnchorElement;
const url = new URL(element.href, location.href);
const pathname = url.pathname;
if (pathname.startsWith("/@")) {
internalEmit("Intermediate", "openProfile", pathname.substr(2));
let id = pathname.substr(2);
if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
ev.preventDefault();
internalEmit("Intermediate", "openProfile", id);
}
} else {
ev.preventDefault();
internalEmit("Intermediate", "navigate", pathname);
}
}

View file

@ -13,8 +13,7 @@ import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
import Button from "../../components/ui/Button";
import Checkbox from "../../components/ui/Checkbox";
import AgeGate from "../../components/common/AgeGate";
import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader";
@ -36,32 +35,6 @@ const ChannelContent = styled.div`
flex-direction: column;
`;
const AgeGate = styled.div`
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
padding: 12px;
img {
height: 150px;
}
.subtext {
color: var(--secondary-foreground);
margin-bottom: 12px;
font-size: 14px;
}
.actions {
margin-top: 20px;
display: flex;
gap: 12px;
}
`;
export function Channel({ id }: { id: string }) {
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
@ -77,52 +50,18 @@ export function Channel({ id }: { id: string }) {
const MEMBERS_SIDEBAR_KEY = "sidebar_members";
function TextChannel({ channel }: { channel: Channels.Channel }) {
if (
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")
) {
const goBack = useHistory();
const [consent, setConsent] = useState(false);
const [ageGate, setAgeGate] = useState(false);
if (!ageGate) {
return (
<AgeGate>
<img
src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
draggable={false}
/>
<h2>{channel.name}</h2>
<span className="subtext">
This channel is marked as NSFW.{" "}
<a href="#">Learn more</a>
</span>
<Checkbox checked={consent} onChange={(v) => setConsent(v)}>
I confirm that I am at least 18 years old.
</Checkbox>
<div className="actions">
<Button contrast onClick={() => goBack}>
Go back
</Button>
<Button
contrast
onClick={() => consent && setAgeGate(true)}>
Enter Channel
</Button>
</div>
</AgeGate>
);
}
}
const [showMembers, setMembers] = useState(
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
);
let id = channel._id;
return (
<>
<AgeGate
type="channel"
channel={channel}
gated={(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")}>
<ChannelHeader
channel={channel}
toggleSidebar={() => {
@ -154,7 +93,7 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
<MemberSidebar channel={channel} />
)}
</ChannelMain>
</>
</AgeGate>
);
}