diff --git a/src/components/common/AgeGate.tsx b/src/components/common/AgeGate.tsx index a7bea21e..16a6ec88 100644 --- a/src/components/common/AgeGate.tsx +++ b/src/components/common/AgeGate.tsx @@ -4,9 +4,9 @@ import { Channel } from "revolt.js"; import styled from "styled-components/macro"; import { Text } from "preact-i18n"; -import { useState } from "preact/hooks"; +import { useEffect, useState } from "preact/hooks"; -import { Button, Checkbox } from "@revoltchat/ui"; +import { Button, Checkbox, Preloader } from "@revoltchat/ui"; import { useApplicationState } from "../../mobx/State"; import { SECTION_NSFW } from "../../mobx/stores/Layout"; @@ -45,14 +45,36 @@ type Props = { channel: Channel; }; +let geoBlock: + | undefined + | { + countryCode: string; + isAgeRestrictedGeo: true; + }; + export default observer((props: Props) => { const history = useHistory(); const layout = useApplicationState().layout; + const [geoLoaded, setGeoLoaded] = useState(typeof geoBlock !== "undefined"); const [ageGate, setAgeGate] = useState(false); - if (ageGate || !props.gated) { + useEffect(() => { + if (!geoLoaded) { + fetch("https://geo.revolt.chat") + .then((res) => res.json()) + .then((data) => { + geoBlock = data; + setGeoLoaded(true); + }); + } + }, []); + + if (!geoBlock) return ; + + if ((ageGate && !geoBlock.isAgeRestrictedGeo) || !props.gated) { return <>{props.children}; } + if ( !( props.channel.channel_type === "Group" || @@ -76,23 +98,50 @@ export default observer((props: Props) => { - } - value={layout.getSectionState(SECTION_NSFW, false)} - onChange={() => layout.toggleSectionState(SECTION_NSFW, false)} - /> -
- - -
+ {geoBlock.isAgeRestrictedGeo ? ( +
+ This content is not available in your country. + {geoBlock.countryCode === "GB" && ( + <> +
+
+ Ofcom sets a legal requirement for platforms to + verify the age of users to access age restricted + content. Revolt neither has the ability to implement + nor currently intends to implement these measures as + the current available solutions come with privacy + and cost concerns. + + )} +
+ ) : ( + <> + } + value={layout.getSectionState(SECTION_NSFW, false)} + onChange={() => + layout.toggleSectionState(SECTION_NSFW, false) + } + /> +
+ + +
+ + )} ); });