Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 883 additions and 463 deletions
src/components/ui/Overline.tsx
View file @ 1ac5de17
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { Text } from "preact-i18n";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { Text } from 'preact-i18n';
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & { type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string; error?: string;
block?: boolean; block?: boolean;
spaced?: boolean; spaced?: boolean;
noMargin?: boolean;
children?: Children; children?: Children;
type?: "default" | "subtle" | "error"; type?: "default" | "subtle" | "error";
} };
const OverlineBase = styled.div<Omit<Props, "children" | "error">>` const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline; display: inline;
margin: 0.4em 0;
${ props => props.spaced && css` ${(props) =>
margin-top: 0.8em; !props.noMargin &&
` } css`
margin: 0.4em 0;
`}
${(props) =>
props.spaced &&
css`
margin-top: 0.8em;
`}
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
...@@ -50,9 +60,11 @@ export default function Overline(props: Props) { ...@@ -50,9 +60,11 @@ export default function Overline(props: Props) {
<OverlineBase {...props}> <OverlineBase {...props}>
{props.children} {props.children}
{props.children && props.error && <> &middot; </>} {props.children && props.error && <> &middot; </>}
{props.error && <Overline type="error"> {props.error && (
<Text id={`error.${props.error}`}>{props.error}</Text> <Overline type="error">
</Overline>} <Text id={`error.${props.error}`}>{props.error}</Text>
</Overline>
)}
</OverlineBase> </OverlineBase>
); );
} }
src/components/ui/Preloader.tsx
View file @ 1ac5de17
...@@ -87,7 +87,7 @@ const PreloaderBase = styled.div` ...@@ -87,7 +87,7 @@ const PreloaderBase = styled.div`
`; `;
interface Props { interface Props {
type: 'spinner' | 'ring' type: "spinner" | "ring";
} }
export default function Preloader({ type }: Props) { export default function Preloader({ type }: Props) {
......
src/components/ui/Radio.tsx
View file @ 1ac5de17
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { Circle } from "@styled-icons/boxicons-regular"; import { Circle } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
interface Props { interface Props {
children: Children; children: Children;
...@@ -26,8 +27,8 @@ const RadioBase = styled.label<BaseProps>` ...@@ -26,8 +27,8 @@ const RadioBase = styled.label<BaseProps>`
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
border-radius: 4px;
transition: 0.2s ease all; transition: 0.2s ease all;
border-radius: var(--border-radius);
&:hover { &:hover {
background: var(--hover); background: var(--hover);
...@@ -92,8 +93,7 @@ export default function Radio(props: Props) { ...@@ -92,8 +93,7 @@ export default function Radio(props: Props) {
disabled={props.disabled} disabled={props.disabled}
onClick={() => onClick={() =>
!props.disabled && props.onSelect && props.onSelect() !props.disabled && props.onSelect && props.onSelect()
} }>
>
<div> <div>
<Circle size={12} /> <Circle size={12} />
</div> </div>
......
src/components/ui/TextArea.module.scss
View file @ 1ac5de17
.container { .container {
font-size: 0.875rem; font-size: .875rem;
line-height: 20px; line-height: 20px;
position: relative; position: relative;
} }
......
src/components/ui/TextArea.tsx
View file @ 1ac5de17
...@@ -2,8 +2,8 @@ import styled, { css } from "styled-components"; ...@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
export interface TextAreaProps { export interface TextAreaProps {
code?: boolean; code?: boolean;
padding?: number; padding?: string;
lineHeight?: number; lineHeight?: string;
hideBorder?: boolean; hideBorder?: boolean;
} }
...@@ -17,32 +17,42 @@ export default styled.textarea<TextAreaProps>` ...@@ -17,32 +17,42 @@ export default styled.textarea<TextAreaProps>`
display: block; display: block;
color: var(--foreground); color: var(--foreground);
background: var(--secondary-background); background: var(--secondary-background);
padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px; padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px; line-height: ${(props) =>
props.lineHeight ?? "var(--textarea-line-height)"};
${ props => props.hideBorder && css`
border: none; ${(props) =>
` } props.hideBorder &&
css`
${ props => !props.hideBorder && css` border: none;
border-radius: 4px; `}
transition: border-color .2s ease-in-out;
border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent; ${(props) =>
` } !props.hideBorder &&
css`
border-radius: var(--border-radius);
transition: border-color 0.2s ease-in-out;
border: var(--input-border-width) solid transparent;
`}
&:focus { &:focus {
outline: none; outline: none;
${ props => !props.hideBorder && css` ${(props) =>
border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent); !props.hideBorder &&
` } css`
border: var(--input-border-width) solid var(--accent);
`}
} }
${ props => props.code ? css` ${(props) =>
font-family: var(--monoscape-font-font), monospace; props.code
` : css` ? css`
font-family: inherit; font-family: var(--monospace-font), monospace;
` } `
: css`
font-family: inherit;
`}
font-variant-ligatures: var(--ligatures); font-variant-ligatures: var(--ligatures);
`; `;
src/components/ui/Tip.tsx
View file @ 1ac5de17
import { Children } from "../../types/Preact";
import styled, { css } from "styled-components";
import { InfoCircle } from "@styled-icons/boxicons-regular"; import { InfoCircle } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../types/Preact";
interface Props { interface Props {
warning?: boolean warning?: boolean;
error?: boolean error?: boolean;
} }
export const Separator = styled.div<Props>` export const Separator = styled.div<Props>`
...@@ -21,8 +22,8 @@ export const TipBase = styled.div<Props>` ...@@ -21,8 +22,8 @@ export const TipBase = styled.div<Props>`
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
border-radius: 7px;
background: var(--primary-header); background: var(--primary-header);
border-radius: var(--border-radius);
border: 2px solid var(--secondary-header); border: 2px solid var(--secondary-header);
a { a {
...@@ -37,29 +38,34 @@ export const TipBase = styled.div<Props>` ...@@ -37,29 +38,34 @@ export const TipBase = styled.div<Props>`
margin-inline-end: 10px; margin-inline-end: 10px;
} }
${ props => props.warning && css` ${(props) =>
color: var(--warning); props.warning &&
border: 2px solid var(--warning); css`
background: var(--secondary-header); color: var(--warning);
` } border: 2px solid var(--warning);
background: var(--secondary-header);
`}
${ props => props.error && css` ${(props) =>
color: var(--error); props.error &&
border: 2px solid var(--error); css`
background: var(--secondary-header); color: var(--error);
` } border: 2px solid var(--error);
background: var(--secondary-header);
`}
`; `;
export default function Tip(props: Props & { children: Children }) { export default function Tip(
const { children, ...tipProps } = props; props: Props & { children: Children; hideSeparator?: boolean },
) {
const { children, hideSeparator, ...tipProps } = props;
return ( return (
<> <>
<Separator /> {!hideSeparator && <Separator />}
<TipBase {...tipProps}> <TipBase {...tipProps}>
<InfoCircle size={20} /> <InfoCircle size={20} />
<span>{props.children}</span> <span>{children}</span>
</TipBase> </TipBase>
</> </>
); );
} }
src/components/ui/fluent/CategoryButton.tsx 0 → 100644
View file @ 1ac5de17
import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
interface BaseProps {
readonly hover?: boolean;
readonly account?: boolean;
readonly disabled?: boolean;
readonly largeDescription?: boolean;
}
const CategoryBase = styled.div<BaseProps>`
/*height: 54px;*/
padding: 9.8px 12px;
border-radius: 6px;
margin-bottom: 10px;
color: var(--foreground);
background: var(--secondary-header);
gap: 12px;
display: flex;
align-items: center;
flex-direction: row;
> svg {
flex-shrink: 0;
}
.content {
display: flex;
flex-grow: 1;
flex-direction: column;
font-weight: 600;
font-size: 14px;
.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.description {
${(props) =>
props.largeDescription
? css`
font-size: 14px;
`
: css`
font-size: 11px;
`}
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
a:hover {
text-decoration: underline;
}
}
}
${(props) =>
props.hover &&
css`
cursor: pointer;
opacity: 1;
transition: 0.1s ease background-color;
&:hover {
background: var(--secondary-background);
}
`}
${(props) =>
props.disabled &&
css`
opacity: 0.4;
/*.content,
.action {
color: var(--tertiary-foreground);
}*/
.action {
font-size: 14px;
}
`}
${(props) =>
props.account &&
css`
height: 54px;
.content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.title {
text-transform: uppercase;
font-size: 12px;
color: var(--secondary-foreground);
}
.description {
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
`}
`;
interface Props extends BaseProps {
icon?: Children;
children?: Children;
description?: Children;
onClick?: () => void;
action?: "chevron" | "external" | Children;
}
export default function CategoryButton({
icon,
children,
description,
account,
disabled,
onClick,
hover,
action,
}: Props) {
return (
<CategoryBase
hover={hover || typeof onClick !== "undefined"}
onClick={onClick}
disabled={disabled}
account={account}>
{icon}
<div class="content">
<div className="title">{children}</div>
<div className="description">{description}</div>
</div>
<div class="action">
{typeof action === "string" ? (
action === "chevron" ? (
<ChevronRight size={24} />
) : (
<LinkExternal size={20} />
)
) : (
action
)}
</div>
</CategoryBase>
);
}
src/context/Locale.tsx
View file @ 1ac5de17
import { IntlProvider } from "preact-i18n"; import dayJS from "dayjs";
import calendar from "dayjs/plugin/calendar";
import format from "dayjs/plugin/localizedFormat";
import update from "dayjs/plugin/updateLocale";
import defaultsDeep from "lodash.defaultsdeep"; import defaultsDeep from "lodash.defaultsdeep";
import { IntlProvider } from "preact-i18n";
import { useCallback, useEffect, useState } from "preact/hooks";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import { useEffect, useState } from "preact/hooks";
import definition from "../../external/lang/en.json"; import definition from "../../external/lang/en.json";
import dayjs from "dayjs"; export const dayjs = dayJS;
import calendar from "dayjs/plugin/calendar";
import update from "dayjs/plugin/updateLocale";
import format from "dayjs/plugin/localizedFormat";
dayjs.extend(calendar); dayjs.extend(calendar);
dayjs.extend(format); dayjs.extend(format);
dayjs.extend(update); dayjs.extend(update);
...@@ -19,6 +24,7 @@ export enum Language { ...@@ -19,6 +24,7 @@ export enum Language {
AZERBAIJANI = "az", AZERBAIJANI = "az",
CZECH = "cs", CZECH = "cs",
GERMAN = "de", GERMAN = "de",
GREEK = "el",
SPANISH = "es", SPANISH = "es",
FINNISH = "fi", FINNISH = "fi",
FRENCH = "fr", FRENCH = "fr",
...@@ -26,6 +32,7 @@ export enum Language { ...@@ -26,6 +32,7 @@ export enum Language {
CROATIAN = "hr", CROATIAN = "hr",
HUNGARIAN = "hu", HUNGARIAN = "hu",
INDONESIAN = "id", INDONESIAN = "id",
ITALIAN = "it",
LITHUANIAN = "lt", LITHUANIAN = "lt",
MACEDONIAN = "mk", MACEDONIAN = "mk",
DUTCH = "nl", DUTCH = "nl",
...@@ -35,6 +42,7 @@ export enum Language { ...@@ -35,6 +42,7 @@ export enum Language {
RUSSIAN = "ru", RUSSIAN = "ru",
SERBIAN = "sr", SERBIAN = "sr",
SWEDISH = "sv", SWEDISH = "sv",
TOKIPONA = "tokipona",
TURKISH = "tr", TURKISH = "tr",
UKRANIAN = "uk", UKRANIAN = "uk",
CHINESE_SIMPLIFIED = "zh_Hans", CHINESE_SIMPLIFIED = "zh_Hans",
...@@ -51,7 +59,7 @@ export interface LanguageEntry { ...@@ -51,7 +59,7 @@ export interface LanguageEntry {
i18n: string; i18n: string;
dayjs?: string; dayjs?: string;
rtl?: boolean; rtl?: boolean;
alt?: boolean; cat?: "const" | "alt";
} }
export const Languages: { [key in Language]: LanguageEntry } = { export const Languages: { [key in Language]: LanguageEntry } = {
...@@ -66,13 +74,15 @@ export const Languages: { [key in Language]: LanguageEntry } = { ...@@ -66,13 +74,15 @@ export const Languages: { [key in Language]: LanguageEntry } = {
az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" }, az: { display: "Azərbaycan dili", emoji: "🇦🇿", i18n: "az" },
cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" }, cs: { display: "Čeština", emoji: "🇨🇿", i18n: "cs" },
de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" }, de: { display: "Deutsch", emoji: "🇩🇪", i18n: "de" },
el: { display: "Ελληνικά", emoji: "🇬🇷", i18n: "el" },
es: { display: "Español", emoji: "🇪🇸", i18n: "es" }, es: { display: "Español", emoji: "🇪🇸", i18n: "es" },
fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" }, fi: { display: "suomi", emoji: "🇫🇮", i18n: "fi" },
fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" }, fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" }, hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" }, hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" }, hu: { display: "Magyar", emoji: "🇭🇺", i18n: "hu" },
id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" }, id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" }, lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" }, mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" }, nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
...@@ -96,15 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = { ...@@ -96,15 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = {
dayjs: "zh", dayjs: "zh",
}, },
owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb", alt: true }, tokipona: {
pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb", alt: true }, display: "Toki Pona",
bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb", alt: true }, emoji: "🙂",
i18n: "tokipona",
dayjs: "en-gb",
cat: "const",
},
owo: {
display: "OwO",
emoji: "🐱",
i18n: "owo",
dayjs: "en-gb",
cat: "alt",
},
pr: {
display: "Pirate",
emoji: "🏴‍☠️",
i18n: "pr",
dayjs: "en-gb",
cat: "alt",
},
bottom: {
display: "Bottom",
emoji: "🥺",
i18n: "bottom",
dayjs: "en-gb",
cat: "alt",
},
piglatin: { piglatin: {
display: "Pig Latin", display: "Pig Latin",
emoji: "🐖", emoji: "🐖",
i18n: "piglatin", i18n: "piglatin",
dayjs: "en-gb", dayjs: "en-gb",
alt: true cat: "alt",
}, },
}; };
...@@ -113,62 +149,118 @@ interface Props { ...@@ -113,62 +149,118 @@ interface Props {
locale: Language; locale: Language;
} }
export interface Dictionary {
dayjs?: {
defaults?: {
twelvehour?: "yes" | "no";
separator?: string;
date?: "traditional" | "simplified" | "ISO8601";
};
timeFormat?: string;
};
[key: string]:
| Record<string, Omit<Dictionary, "dayjs">>
| string
| undefined;
}
function Locale({ children, locale }: Props) { function Locale({ children, locale }: Props) {
// TODO: create and use LanguageDefinition type here const [defns, setDefinition] = useState<Dictionary>(
const [defns, setDefinition] = useState<Record<string, unknown>>(definition); definition as Dictionary,
const lang = Languages[locale]; );
// TODO: clean this up and use the built in Intl API // Load relevant language information, fallback to English if invalid.
function transformLanguage(source: { [key: string]: any }) { const lang = Languages[locale] ?? Languages.en;
function transformLanguage(source: Dictionary) {
// Fallback untranslated strings to English (UK)
const obj = defaultsDeep(source, definition); const obj = defaultsDeep(source, definition);
const dayjs = obj.dayjs; // Take relevant objects out, dayjs and defaults
const defaults = dayjs.defaults; // should exist given we just took defaults above.
const { dayjs } = obj;
const { defaults } = dayjs;
// Determine whether we are using 12-hour clock.
const twelvehour = defaults?.twelvehour
? defaults.twelvehour === "yes"
: false;
// Determine what date separator we are using.
const separator: string = defaults?.date_separator ?? "/";
const twelvehour = defaults?.twelvehour === 'yes' || true; // Determine what date format we are using.
const separator: '/' | '-' | '.' = defaults?.date_separator ?? '/'; const date: "traditional" | "simplified" | "ISO8601" =
const date: 'traditional' | 'simplified' | 'ISO8601' = defaults?.date_format ?? 'traditional'; defaults?.date_format ?? "traditional";
// Available date formats.
const DATE_FORMATS = { const DATE_FORMATS = {
traditional: `DD${separator}MM${separator}YYYY`, traditional: `DD${separator}MM${separator}YYYY`,
simplified: `MM${separator}DD${separator}YYYY`, simplified: `MM${separator}DD${separator}YYYY`,
ISO8601: 'YYYY-MM-DD' ISO8601: "YYYY-MM-DD",
} };
dayjs['sameElse'] = DATE_FORMATS[date]; // Replace data in dayjs object, make sure to provide fallbacks.
dayjs["sameElse"] = DATE_FORMATS[date] ?? DATE_FORMATS.traditional;
dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
// Replace {{time}} format string in dayjs strings with the time format.
Object.keys(dayjs) Object.keys(dayjs)
.filter(k => k !== 'defaults') .filter((k) => typeof dayjs[k] === "string")
.forEach(k => dayjs[k] = dayjs[k].replace(/{{time}}/g, twelvehour ? 'LT' : 'HH:mm')); .forEach(
(k) =>
(dayjs[k] = dayjs[k].replace(
/{{time}}/g,
dayjs["timeFormat"],
)),
);
return obj; return obj;
} }
useEffect(() => { const loadLanguage = useCallback(
if (locale === "en") { (locale: string) => {
const defn = transformLanguage(definition); if (locale === "en") {
setDefinition(defn); // If English, make sure to restore everything to defaults.
dayjs.locale("en"); // Use what we already have.
dayjs.updateLocale('en', { calendar: defn.dayjs }); const defn = transformLanguage(definition as Dictionary);
return;
}
import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
const defn = transformLanguage(lang_file.default);
const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);
if (defn.dayjs) {
dayjs.updateLocale(target, { calendar: defn.dayjs });
}
dayjs.locale(dayjs_locale.default);
setDefinition(defn); setDefinition(defn);
dayjs.locale("en");
dayjs.updateLocale("en", { calendar: defn.dayjs });
return;
} }
);
}, [locale, lang]); import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
// Transform the definitions data.
const defn = transformLanguage(lang_file.default);
// Determine and load dayjs locales.
const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import(
`../../node_modules/dayjs/esm/locale/${target}.js`
);
// Load dayjs locales.
dayjs.locale(target, dayjs_locale.default);
if (defn.dayjs) {
// Override dayjs calendar locales with our own.
dayjs.updateLocale(target, { calendar: defn.dayjs });
}
// Apply definition to app.
setDefinition(defn);
},
);
},
[lang.dayjs, lang.i18n],
);
useEffect(() => loadLanguage(locale), [locale, lang, loadLanguage]);
useEffect(() => { useEffect(() => {
// Apply RTL language format.
document.body.style.direction = lang.rtl ? "rtl" : ""; document.body.style.direction = lang.rtl ? "rtl" : "";
}, [lang.rtl]); }, [lang.rtl]);
...@@ -182,5 +274,5 @@ export default connectState<Omit<Props, "locale">>( ...@@ -182,5 +274,5 @@ export default connectState<Omit<Props, "locale">>(
locale: state.locale, locale: state.locale,
}; };
}, },
true true,
); );
src/context/Settings.tsx
View file @ 1ac5de17
...@@ -6,44 +6,56 @@ ...@@ -6,44 +6,56 @@
// if it does cause problems though. // if it does cause problems though.
// //
// This now also supports Audio stuff. // This now also supports Audio stuff.
import { DEFAULT_SOUNDS, Settings, SoundOptions } from "../redux/reducers/settings";
import { playSound, Sounds } from "../assets/sounds/Audio";
import { connectState } from "../redux/connector";
import defaultsDeep from "lodash.defaultsdeep"; import defaultsDeep from "lodash.defaultsdeep";
import { Children } from "../types/Preact";
import { createContext } from "preact"; import { createContext } from "preact";
import { useMemo } from "preact/hooks"; import { useMemo } from "preact/hooks";
import { connectState } from "../redux/connector";
import {
DEFAULT_SOUNDS,
Settings,
SoundOptions,
} from "../redux/reducers/settings";
import { playSound, Sounds } from "../assets/sounds/Audio";
import { Children } from "../types/Preact";
export const SettingsContext = createContext<Settings>({}); export const SettingsContext = createContext<Settings>({});
export const SoundContext = createContext<((sound: Sounds) => void)>(null!); export const SoundContext = createContext<(sound: Sounds) => void>(null!);
interface Props { interface Props {
children?: Children, children?: Children;
settings: Settings settings: Settings;
} }
function Settings({ settings, children }: Props) { function SettingsProvider({ settings, children }: Props) {
const play = useMemo(() => { const play = useMemo(() => {
const enabled: SoundOptions = defaultsDeep(settings.notification?.sounds ?? {}, DEFAULT_SOUNDS); const enabled: SoundOptions = defaultsDeep(
settings.notification?.sounds ?? {},
DEFAULT_SOUNDS,
);
return (sound: Sounds) => { return (sound: Sounds) => {
if (enabled[sound]) { if (enabled[sound]) {
playSound(sound); playSound(sound);
} }
}; };
}, [ settings.notification ]); }, [settings.notification]);
return ( return (
<SettingsContext.Provider value={settings}> <SettingsContext.Provider value={settings}>
<SoundContext.Provider value={play}> <SoundContext.Provider value={play}>
{ children } {children}
</SoundContext.Provider> </SoundContext.Provider>
</SettingsContext.Provider> </SettingsContext.Provider>
) );
} }
export default connectState<Omit<Props, 'settings'>>(Settings, state => { export default connectState<Omit<Props, "settings">>(
return { SettingsProvider,
settings: state.settings (state) => {
} return {
}); settings: state.settings,
};
},
);
src/context/Theme.tsx
View file @ 1ac5de17
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice"; import { Helmet } from "react-helmet";
import { createGlobalStyle } from "styled-components"; import { createGlobalStyle } from "styled-components";
import { createContext } from "preact";
import { useEffect } from "preact/hooks";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import { Children } from "../types/Preact"; import { Children } from "../types/Preact";
import { useEffect } from "preact/hooks";
import { createContext } from "preact";
import { Helmet } from "react-helmet";
export type Variables = export type Variables =
| "accent" | "accent"
...@@ -30,7 +32,7 @@ export type Variables = ...@@ -30,7 +32,7 @@ export type Variables =
| "status-away" | "status-away"
| "status-busy" | "status-busy"
| "status-streaming" | "status-streaming"
| "status-invisible" | "status-invisible";
// While this isn't used, it'd be good to keep this up to date as a reference or for future use // While this isn't used, it'd be good to keep this up to date as a reference or for future use
export type HiddenVariables = export type HiddenVariables =
...@@ -38,10 +40,27 @@ export type HiddenVariables = ...@@ -38,10 +40,27 @@ export type HiddenVariables =
| "ligatures" | "ligatures"
| "app-height" | "app-height"
| "sidebar-active" | "sidebar-active"
| "monospace-font" | "monospace-font";
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue'; export type Fonts =
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono'; | "Open Sans"
| "Inter"
| "Atkinson Hyperlegible"
| "Roboto"
| "Noto Sans"
| "Lato"
| "Bree Serif"
| "Montserrat"
| "Poppins"
| "Raleway"
| "Ubuntu"
| "Comic Neue";
export type MonospaceFonts =
| "Fira Code"
| "Roboto Mono"
| "Source Code Pro"
| "Space Mono"
| "Ubuntu Mono";
export type Theme = { export type Theme = {
[variable in Variables]: string; [variable in Variables]: string;
...@@ -49,7 +68,7 @@ export type Theme = { ...@@ -49,7 +68,7 @@ export type Theme = {
light?: boolean; light?: boolean;
font?: Fonts; font?: Fonts;
css?: string; css?: string;
monoscapeFont?: MonoscapeFonts; monospaceFont?: MonospaceFonts;
}; };
export interface ThemeOptions { export interface ThemeOptions {
...@@ -61,7 +80,7 @@ export interface ThemeOptions { ...@@ -61,7 +80,7 @@ export interface ThemeOptions {
// import aaa from "@fontsource/open-sans/300.css?raw"; // import aaa from "@fontsource/open-sans/300.css?raw";
// console.info(aaa); // console.info(aaa);
export const FONTS: Record<Fonts, { name: string, load: () => void }> = { export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
"Open Sans": { "Open Sans": {
name: "Open Sans", name: "Open Sans",
load: async () => { load: async () => {
...@@ -70,7 +89,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -70,7 +89,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/open-sans/600.css"); await import("@fontsource/open-sans/600.css");
await import("@fontsource/open-sans/700.css"); await import("@fontsource/open-sans/700.css");
await import("@fontsource/open-sans/400-italic.css"); await import("@fontsource/open-sans/400-italic.css");
} },
}, },
Inter: { Inter: {
name: "Inter", name: "Inter",
...@@ -79,7 +98,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -79,7 +98,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/inter/400.css"); await import("@fontsource/inter/400.css");
await import("@fontsource/inter/600.css"); await import("@fontsource/inter/600.css");
await import("@fontsource/inter/700.css"); await import("@fontsource/inter/700.css");
} },
}, },
"Atkinson Hyperlegible": { "Atkinson Hyperlegible": {
name: "Atkinson Hyperlegible", name: "Atkinson Hyperlegible",
...@@ -87,15 +106,15 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -87,15 +106,15 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/atkinson-hyperlegible/400.css"); await import("@fontsource/atkinson-hyperlegible/400.css");
await import("@fontsource/atkinson-hyperlegible/700.css"); await import("@fontsource/atkinson-hyperlegible/700.css");
await import("@fontsource/atkinson-hyperlegible/400-italic.css"); await import("@fontsource/atkinson-hyperlegible/400-italic.css");
} },
}, },
"Roboto": { Roboto: {
name: "Roboto", name: "Roboto",
load: async () => { load: async () => {
await import("@fontsource/roboto/400.css"); await import("@fontsource/roboto/400.css");
await import("@fontsource/roboto/700.css"); await import("@fontsource/roboto/700.css");
await import("@fontsource/roboto/400-italic.css"); await import("@fontsource/roboto/400-italic.css");
} },
}, },
"Noto Sans": { "Noto Sans": {
name: "Noto Sans", name: "Noto Sans",
...@@ -103,22 +122,22 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -103,22 +122,22 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/noto-sans/400.css"); await import("@fontsource/noto-sans/400.css");
await import("@fontsource/noto-sans/700.css"); await import("@fontsource/noto-sans/700.css");
await import("@fontsource/noto-sans/400-italic.css"); await import("@fontsource/noto-sans/400-italic.css");
} },
}, },
"Bree Serif": { "Bree Serif": {
name: "Bree Serif", name: "Bree Serif",
load: () => import("@fontsource/bree-serif/400.css") load: () => import("@fontsource/bree-serif/400.css"),
}, },
"Lato": { Lato: {
name: "Lato", name: "Lato",
load: async () => { load: async () => {
await import("@fontsource/lato/300.css"); await import("@fontsource/lato/300.css");
await import("@fontsource/lato/400.css"); await import("@fontsource/lato/400.css");
await import("@fontsource/lato/700.css"); await import("@fontsource/lato/700.css");
await import("@fontsource/lato/400-italic.css"); await import("@fontsource/lato/400-italic.css");
} },
}, },
"Montserrat": { Montserrat: {
name: "Montserrat", name: "Montserrat",
load: async () => { load: async () => {
await import("@fontsource/montserrat/300.css"); await import("@fontsource/montserrat/300.css");
...@@ -126,9 +145,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -126,9 +145,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/montserrat/600.css"); await import("@fontsource/montserrat/600.css");
await import("@fontsource/montserrat/700.css"); await import("@fontsource/montserrat/700.css");
await import("@fontsource/montserrat/400-italic.css"); await import("@fontsource/montserrat/400-italic.css");
} },
}, },
"Poppins": { Poppins: {
name: "Poppins", name: "Poppins",
load: async () => { load: async () => {
await import("@fontsource/poppins/300.css"); await import("@fontsource/poppins/300.css");
...@@ -136,9 +155,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -136,9 +155,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/poppins/600.css"); await import("@fontsource/poppins/600.css");
await import("@fontsource/poppins/700.css"); await import("@fontsource/poppins/700.css");
await import("@fontsource/poppins/400-italic.css"); await import("@fontsource/poppins/400-italic.css");
} },
}, },
"Raleway": { Raleway: {
name: "Raleway", name: "Raleway",
load: async () => { load: async () => {
await import("@fontsource/raleway/300.css"); await import("@fontsource/raleway/300.css");
...@@ -146,9 +165,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -146,9 +165,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/raleway/600.css"); await import("@fontsource/raleway/600.css");
await import("@fontsource/raleway/700.css"); await import("@fontsource/raleway/700.css");
await import("@fontsource/raleway/400-italic.css"); await import("@fontsource/raleway/400-italic.css");
} },
}, },
"Ubuntu": { Ubuntu: {
name: "Ubuntu", name: "Ubuntu",
load: async () => { load: async () => {
await import("@fontsource/ubuntu/300.css"); await import("@fontsource/ubuntu/300.css");
...@@ -156,7 +175,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -156,7 +175,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/ubuntu/500.css"); await import("@fontsource/ubuntu/500.css");
await import("@fontsource/ubuntu/700.css"); await import("@fontsource/ubuntu/700.css");
await import("@fontsource/ubuntu/400-italic.css"); await import("@fontsource/ubuntu/400-italic.css");
} },
}, },
"Comic Neue": { "Comic Neue": {
name: "Comic Neue", name: "Comic Neue",
...@@ -165,38 +184,41 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = { ...@@ -165,38 +184,41 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
await import("@fontsource/comic-neue/400.css"); await import("@fontsource/comic-neue/400.css");
await import("@fontsource/comic-neue/700.css"); await import("@fontsource/comic-neue/700.css");
await import("@fontsource/comic-neue/400-italic.css"); await import("@fontsource/comic-neue/400-italic.css");
} },
} },
}; };
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = { export const MONOSPACE_FONTS: Record<
MonospaceFonts,
{ name: string; load: () => void }
> = {
"Fira Code": { "Fira Code": {
name: "Fira Code", name: "Fira Code",
load: () => import("@fontsource/fira-code/400.css") load: () => import("@fontsource/fira-code/400.css"),
}, },
"Roboto Mono": { "Roboto Mono": {
name: "Roboto Mono", name: "Roboto Mono",
load: () => import("@fontsource/roboto-mono/400.css") load: () => import("@fontsource/roboto-mono/400.css"),
}, },
"Source Code Pro": { "Source Code Pro": {
name: "Source Code Pro", name: "Source Code Pro",
load: () => import("@fontsource/source-code-pro/400.css") load: () => import("@fontsource/source-code-pro/400.css"),
}, },
"Space Mono": { "Space Mono": {
name: "Space Mono", name: "Space Mono",
load: () => import("@fontsource/space-mono/400.css") load: () => import("@fontsource/space-mono/400.css"),
}, },
"Ubuntu Mono": { "Ubuntu Mono": {
name: "Ubuntu Mono", name: "Ubuntu Mono",
load: () => import("@fontsource/ubuntu-mono/400.css") load: () => import("@fontsource/ubuntu-mono/400.css"),
} },
}; };
export const FONT_KEYS = Object.keys(FONTS).sort(); export const FONT_KEYS = Object.keys(FONTS).sort();
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort(); export const MONOSPACE_FONT_KEYS = Object.keys(MONOSPACE_FONTS).sort();
export const DEFAULT_FONT = 'Open Sans'; export const DEFAULT_FONT = "Open Sans";
export const DEFAULT_MONO_FONT = 'Fira Code'; export const DEFAULT_MONO_FONT = "Fira Code";
// Generated from https://gitlab.insrt.uk/revolt/community/themes // Generated from https://gitlab.insrt.uk/revolt/community/themes
export const PRESETS: Record<string, Theme> = { export const PRESETS: Record<string, Theme> = {
...@@ -210,7 +232,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -210,7 +232,7 @@ export const PRESETS: Record<string, Theme> = {
mention: "rgba(251, 255, 0, 0.40)", mention: "rgba(251, 255, 0, 0.40)",
success: "#65E572", success: "#65E572",
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#ED4245",
hover: "rgba(0, 0, 0, 0.2)", hover: "rgba(0, 0, 0, 0.2)",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
...@@ -225,7 +247,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -225,7 +247,7 @@ export const PRESETS: Record<string, Theme> = {
"status-away": "#F39F00", "status-away": "#F39F00",
"status-busy": "#F84848", "status-busy": "#F84848",
"status-streaming": "#977EFF", "status-streaming": "#977EFF",
"status-invisible": "#A5A5A5" "status-invisible": "#A5A5A5",
}, },
dark: { dark: {
light: false, light: false,
...@@ -237,7 +259,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -237,7 +259,7 @@ export const PRESETS: Record<string, Theme> = {
mention: "rgba(251, 255, 0, 0.06)", mention: "rgba(251, 255, 0, 0.06)",
success: "#65E572", success: "#65E572",
warning: "#FAA352", warning: "#FAA352",
error: "#F06464", error: "#ED4245",
hover: "rgba(0, 0, 0, 0.1)", hover: "rgba(0, 0, 0, 0.1)",
"scrollbar-thumb": "#CA525A", "scrollbar-thumb": "#CA525A",
"scrollbar-track": "transparent", "scrollbar-track": "transparent",
...@@ -252,7 +274,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -252,7 +274,7 @@ export const PRESETS: Record<string, Theme> = {
"status-away": "#F39F00", "status-away": "#F39F00",
"status-busy": "#F84848", "status-busy": "#F84848",
"status-streaming": "#977EFF", "status-streaming": "#977EFF",
"status-invisible": "#A5A5A5" "status-invisible": "#A5A5A5",
}, },
}; };
...@@ -268,7 +290,7 @@ const GlobalTheme = createGlobalStyle<{ theme: Theme }>` ...@@ -268,7 +290,7 @@ const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
`; `;
// Load the default default them and apply extras later // Load the default default them and apply extras later
export const ThemeContext = createContext<Theme>(PRESETS['dark']); export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
interface Props { interface Props {
children: Children; children: Children;
...@@ -278,58 +300,52 @@ interface Props { ...@@ -278,58 +300,52 @@ interface Props {
function Theme({ children, options }: Props) { function Theme({ children, options }: Props) {
const theme: Theme = { const theme: Theme = {
...PRESETS["dark"], ...PRESETS["dark"],
...PRESETS[options?.preset ?? ''], ...PRESETS[options?.preset ?? ""],
...options?.custom ...options?.custom,
}; };
const root = document.documentElement.style; const root = document.documentElement.style;
useEffect(() => { useEffect(() => {
const font = theme.font ?? DEFAULT_FONT; const font = theme.font ?? DEFAULT_FONT;
root.setProperty('--font', `"${font}"`); root.setProperty("--font", `"${font}"`);
FONTS[font].load(); FONTS[font].load();
}, [ theme.font ]); }, [root, theme.font]);
useEffect(() => { useEffect(() => {
const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT; const font = theme.monospaceFont ?? DEFAULT_MONO_FONT;
root.setProperty('--monoscape-font', `"${font}"`); root.setProperty("--monospace-font", `"${font}"`);
MONOSCAPE_FONTS[font].load(); MONOSPACE_FONTS[font].load();
}, [ theme.monoscapeFont ]); }, [root, theme.monospaceFont]);
useEffect(() => { useEffect(() => {
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none'); root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
}, [ options?.ligatures ]); }, [root, options?.ligatures]);
useEffect(() => { useEffect(() => {
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`); const resize = () =>
root.setProperty("--app-height", `${window.innerHeight}px`);
resize(); resize();
window.addEventListener('resize', resize); window.addEventListener("resize", resize);
return () => window.removeEventListener('resize', resize); return () => window.removeEventListener("resize", resize);
}, []); }, [root]);
return ( return (
<ThemeContext.Provider value={theme}> <ThemeContext.Provider value={theme}>
<Helmet> <Helmet>
<meta <meta name="theme-color" content={theme["background"]} />
name="theme-color"
content={
isTouchscreenDevice
? theme["primary-header"]
: theme["background"]
}
/>
</Helmet> </Helmet>
<GlobalTheme theme={theme} /> <GlobalTheme theme={theme} />
{theme.css && ( {theme.css && (
<style dangerouslySetInnerHTML={{ __html: theme.css }} /> <style dangerouslySetInnerHTML={{ __html: theme.css }} />
)} )}
{ children } {children}
</ThemeContext.Provider> </ThemeContext.Provider>
); );
} }
export default connectState<{ children: Children }>(Theme, state => { export default connectState<{ children: Children }>(Theme, (state) => {
return { return {
options: state.settings.theme options: state.settings.theme,
}; };
}); });
src/context/Voice.tsx
View file @ 1ac5de17
import { Channel } from "revolt.js/dist/maps/Channels";
import { createContext } from "preact"; import { createContext } from "preact";
import { Children } from "../types/Preact"; import {
import { useForceUpdate } from "./revoltjs/hooks"; useCallback,
import { AppContext } from "./revoltjs/RevoltClient"; useContext,
import type VoiceClient from "../lib/vortex/VoiceClient"; useEffect,
useMemo,
useRef,
useState,
} from "preact/hooks";
import type { ProduceType, VoiceUser } from "../lib/vortex/Types"; import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import type VoiceClient from "../lib/vortex/VoiceClient";
import { Children } from "../types/Preact";
import { SoundContext } from "./Settings"; import { SoundContext } from "./Settings";
export enum VoiceStatus { export enum VoiceStatus {
...@@ -15,12 +24,12 @@ export enum VoiceStatus { ...@@ -15,12 +24,12 @@ export enum VoiceStatus {
CONNECTING = 4, CONNECTING = 4,
AUTHENTICATING, AUTHENTICATING,
RTC_CONNECTING, RTC_CONNECTING,
CONNECTED CONNECTED,
// RECONNECTING // RECONNECTING
} }
export interface VoiceOperations { export interface VoiceOperations {
connect: (channelId: string) => Promise<void>; connect: (channel: Channel) => Promise<Channel>;
disconnect: () => void; disconnect: () => void;
isProducing: (type: ProduceType) => boolean; isProducing: (type: ProduceType) => boolean;
startProducing: (type: ProduceType) => Promise<void>; startProducing: (type: ProduceType) => Promise<void>;
...@@ -42,23 +51,25 @@ type Props = { ...@@ -42,23 +51,25 @@ type Props = {
}; };
export default function Voice({ children }: Props) { export default function Voice({ children }: Props) {
const revoltClient = useContext(AppContext);
const [client, setClient] = useState<VoiceClient | undefined>(undefined); const [client, setClient] = useState<VoiceClient | undefined>(undefined);
const [state, setState] = useState<VoiceState>({ const [state, setState] = useState<VoiceState>({
status: VoiceStatus.LOADING, status: VoiceStatus.LOADING,
participants: new Map() participants: new Map(),
}); });
function setStatus(status: VoiceStatus, roomId?: string) { const setStatus = useCallback(
setState({ (status: VoiceStatus, roomId?: string) => {
status, setState({
roomId: roomId ?? client?.roomId, status,
participants: client?.participants ?? new Map(), roomId: roomId ?? client?.roomId,
}); participants: client?.participants ?? new Map(),
} });
},
[client?.participants, client?.roomId],
);
useEffect(() => { useEffect(() => {
import('../lib/vortex/VoiceClient') import("../lib/vortex/VoiceClient")
.then(({ default: VoiceClient }) => { .then(({ default: VoiceClient }) => {
const client = new VoiceClient(); const client = new VoiceClient();
setClient(client); setClient(client);
...@@ -69,35 +80,35 @@ export default function Voice({ children }: Props) { ...@@ -69,35 +80,35 @@ export default function Voice({ children }: Props) {
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
} }
}) })
.catch(err => { .catch((err) => {
console.error('Failed to load voice library!', err); console.error("Failed to load voice library!", err);
setStatus(VoiceStatus.UNAVAILABLE); setStatus(VoiceStatus.UNAVAILABLE);
}) });
}, []); }, [setStatus]);
const isConnecting = useRef(false); const isConnecting = useRef(false);
const operations: VoiceOperations = useMemo(() => { const operations: VoiceOperations = useMemo(() => {
return { return {
connect: async channelId => { connect: async (channel) => {
if (!client?.supported()) if (!client?.supported()) throw new Error("RTC is unavailable");
throw new Error("RTC is unavailable");
isConnecting.current = true; isConnecting.current = true;
setStatus(VoiceStatus.CONNECTING, channelId); setStatus(VoiceStatus.CONNECTING, channel._id);
try { try {
const call = await revoltClient.channels.joinCall( const call = await channel.joinCall();
channelId
);
if (!isConnecting.current) { if (!isConnecting.current) {
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
return; return channel;
} }
// ! FIXME: use configuration to check if voso is enabled // ! TODO: use configuration to check if voso is enabled
// await client.connect("wss://voso.revolt.chat/ws"); // await client.connect("wss://voso.revolt.chat/ws");
await client.connect("wss://voso.revolt.chat/ws", channelId); await client.connect(
"wss://voso.revolt.chat/ws",
channel._id,
);
setStatus(VoiceStatus.AUTHENTICATING); setStatus(VoiceStatus.AUTHENTICATING);
...@@ -108,16 +119,16 @@ export default function Voice({ children }: Props) { ...@@ -108,16 +119,16 @@ export default function Voice({ children }: Props) {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
setStatus(VoiceStatus.READY); setStatus(VoiceStatus.READY);
return; return channel;
} }
setStatus(VoiceStatus.CONNECTED); setStatus(VoiceStatus.CONNECTED);
isConnecting.current = false; isConnecting.current = false;
return channel;
}, },
disconnect: () => { disconnect: () => {
if (!client?.supported()) if (!client?.supported()) throw new Error("RTC is unavailable");
throw new Error("RTC is unavailable");
// if (status <= VoiceStatus.READY) return; // if (status <= VoiceStatus.READY) return;
// this will not update in this context // this will not update in this context
...@@ -134,17 +145,18 @@ export default function Voice({ children }: Props) { ...@@ -134,17 +145,18 @@ export default function Voice({ children }: Props) {
startProducing: async (type: ProduceType) => { startProducing: async (type: ProduceType) => {
switch (type) { switch (type) {
case "audio": { case "audio": {
if (client?.audioProducer !== undefined) return console.log('No audio producer.'); // ! FIXME: let the user know if (client?.audioProducer !== undefined)
if (navigator.mediaDevices === undefined) return console.log('No media devices.'); // ! FIXME: let the user know return console.log("No audio producer."); // ! TODO: let the user know
const mediaStream = await navigator.mediaDevices.getUserMedia( if (navigator.mediaDevices === undefined)
{ return console.log("No media devices."); // ! TODO: let the user know
audio: true const mediaStream =
} await navigator.mediaDevices.getUserMedia({
); audio: true,
});
await client?.startProduce( await client?.startProduce(
mediaStream.getAudioTracks()[0], mediaStream.getAudioTracks()[0],
"audio" "audio",
); );
return; return;
} }
...@@ -152,51 +164,56 @@ export default function Voice({ children }: Props) { ...@@ -152,51 +164,56 @@ export default function Voice({ children }: Props) {
}, },
stopProducing: (type: ProduceType) => { stopProducing: (type: ProduceType) => {
return client?.stopProduce(type); return client?.stopProduce(type);
} },
} };
}, [ client ]); }, [client, setStatus]);
const { forceUpdate } = useForceUpdate();
const playSound = useContext(SoundContext); const playSound = useContext(SoundContext);
useEffect(() => { useEffect(() => {
if (!client?.supported()) return; if (!client?.supported()) return;
// ! FIXME: message for fatal: // ! TODO: message for fatal:
// ! get rid of these force updates // ! get rid of these force updates
// ! handle it through state or smth // ! handle it through state or smth
client.on("startProduce", forceUpdate); function stateUpdate() {
client.on("stopProduce", forceUpdate); setStatus(state.status);
}
client.on("startProduce", stateUpdate);
client.on("stopProduce", stateUpdate);
client.on("userJoined", () => { client.on("userJoined", () => {
playSound('call_join'); playSound("call_join");
forceUpdate(); stateUpdate();
}); });
client.on("userLeft", () => { client.on("userLeft", () => {
playSound('call_leave'); playSound("call_leave");
forceUpdate(); stateUpdate();
}); });
client.on("userStartProduce", forceUpdate);
client.on("userStopProduce", forceUpdate); client.on("userStartProduce", stateUpdate);
client.on("close", forceUpdate); client.on("userStopProduce", stateUpdate);
client.on("close", stateUpdate);
return () => { return () => {
client.removeListener("startProduce", forceUpdate); client.removeListener("startProduce", stateUpdate);
client.removeListener("stopProduce", forceUpdate); client.removeListener("stopProduce", stateUpdate);
client.removeListener("userJoined", forceUpdate); client.removeListener("userJoined", stateUpdate);
client.removeListener("userLeft", forceUpdate); client.removeListener("userLeft", stateUpdate);
client.removeListener("userStartProduce", forceUpdate); client.removeListener("userStartProduce", stateUpdate);
client.removeListener("userStopProduce", forceUpdate); client.removeListener("userStopProduce", stateUpdate);
client.removeListener("close", forceUpdate); client.removeListener("close", stateUpdate);
}; };
}, [ client, state ]); }, [client, state, playSound, setStatus]);
return ( return (
<VoiceContext.Provider value={state}> <VoiceContext.Provider value={state}>
<VoiceOperationsContext.Provider value={operations}> <VoiceOperationsContext.Provider value={operations}>
{ children } {children}
</VoiceOperationsContext.Provider> </VoiceOperationsContext.Provider>
</VoiceContext.Provider> </VoiceContext.Provider>
); );
......
src/context/index.tsx
View file @ 1ac5de17
import State from "../redux/State";
import { Children } from "../types/Preact";
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import Intermediate from './intermediate/Intermediate'; import State from "../redux/State";
import Client from './revoltjs/RevoltClient';
import Settings from "./Settings"; import { Children } from "../types/Preact";
import Locale from "./Locale"; import Locale from "./Locale";
import Voice from "./Voice"; import Settings from "./Settings";
import Theme from "./Theme"; import Theme from "./Theme";
import Voice from "./Voice";
import Intermediate from "./intermediate/Intermediate";
import Client from "./revoltjs/RevoltClient";
export default function Context({ children }: { children: Children }) { export default function Context({ children }: { children: Children }) {
return ( return (
...@@ -18,9 +19,7 @@ export default function Context({ children }: { children: Children }) { ...@@ -18,9 +19,7 @@ export default function Context({ children }: { children: Children }) {
<Locale> <Locale>
<Intermediate> <Intermediate>
<Client> <Client>
<Voice> <Voice>{children}</Voice>
{children}
</Voice>
</Client> </Client>
</Intermediate> </Intermediate>
</Locale> </Locale>
......
src/context/intermediate/Intermediate.tsx
View file @ 1ac5de17
import { Attachment, Channels, EmbedImage, Servers, Users } from "revolt.js/dist/api/objects"; import { Prompt } from "react-router";
import { useHistory } from "react-router-dom";
import type { Attachment } from "revolt-api/types/Autumn";
import type { EmbedImage } from "revolt-api/types/January";
import { Channel } from "revolt.js/dist/maps/Channels";
import { Message } from "revolt.js/dist/maps/Messages";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import { createContext } from "preact";
import { useContext, useEffect, useMemo, useState } from "preact/hooks"; import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { internalSubscribe } from "../../lib/eventEmitter"; import { internalSubscribe } from "../../lib/eventEmitter";
import { Action } from "../../components/ui/Modal"; import { Action } from "../../components/ui/Modal";
import { useHistory } from "react-router-dom";
import { Children } from "../../types/Preact"; import { Children } from "../../types/Preact";
import { createContext } from "preact"; import Modals from "./Modals";
import { Prompt } from "react-router";
import Modals from './Modals';
export type Screen = export type Screen =
| { id: "none" } | { id: "none" }
// Modals // Modals
| { id: "signed_out" } | { id: "signed_out" }
| { id: "error"; error: string } | { id: "error"; error: string }
| { id: "clipboard"; text: string } | { id: "clipboard"; text: string }
| { id: "_prompt"; question: Children; content?: Children; actions: Action[] } | {
| ({ id: "special_prompt" } & ( id: "_prompt";
{ type: "leave_group", target: Channels.GroupChannel } | question: Children;
{ type: "close_dm", target: Channels.DirectMessageChannel } | content?: Children;
{ type: "leave_server", target: Servers.Server } | actions: Action[];
{ type: "delete_server", target: Servers.Server } | }
{ type: "delete_channel", target: Channels.TextChannel } | | ({ id: "special_prompt" } & (
{ type: "delete_message", target: Channels.Message } | | { type: "leave_group"; target: Channel }
{ type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } | | { type: "close_dm"; target: Channel }
{ type: "kick_member", target: Servers.Server, user: string } | | { type: "leave_server"; target: Server }
{ type: "ban_member", target: Servers.Server, user: string } | | { type: "delete_server"; target: Server }
{ type: "unfriend_user", target: Users.User } | | { type: "delete_channel"; target: Channel }
{ type: "block_user", target: Users.User } | | { type: "delete_message"; target: Message }
{ type: "create_channel", target: Servers.Server } | {
)) | type: "create_invite";
({ id: "special_input" } & ( target: Channel;
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } | }
{ type: "create_role", server: string, callback: (id: string) => void } | { type: "kick_member"; target: Server; user: User }
)) | { type: "ban_member"; target: Server; user: User }
| { | { type: "unfriend_user"; target: User }
id: "_input"; | { type: "block_user"; target: User }
question: Children; | { type: "create_channel"; target: Server }
field: Children; ))
defaultValue?: string; | ({ id: "special_input" } & (
callback: (value: string) => Promise<void>; | {
} type:
| { | "create_group"
id: "onboarding"; | "create_server"
callback: ( | "set_custom_status"
username: string, | "add_friend";
loginAfterSuccess?: true }
) => Promise<void>; | {
} type: "create_role";
server: Server;
// Pop-overs callback: (id: string) => void;
| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage; } }
| { id: "modify_account"; field: "username" | "email" | "password" } ))
| { id: "profile"; user_id: string } | {
| { id: "channel_info"; channel_id: string } id: "_input";
| { id: "pending_requests"; users: string[] } question: Children;
| { field: Children;
id: "user_picker"; defaultValue?: string;
omit?: string[]; callback: (value: string) => Promise<void>;
callback: (users: string[]) => Promise<void>; }
}; | {
id: "onboarding";
callback: (
username: string,
loginAfterSuccess?: true,
) => Promise<void>;
}
// Pop-overs
| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
| { id: "modify_account"; field: "username" | "email" | "password" }
| { id: "profile"; user_id: string }
| { id: "channel_info"; channel: Channel }
| { id: "pending_requests"; users: User[] }
| {
id: "user_picker";
omit?: string[];
callback: (users: string[]) => Promise<void>;
};
export const IntermediateContext = createContext({ export const IntermediateContext = createContext({
screen: { id: "none" } as Screen, screen: { id: "none" },
focusTaken: false focusTaken: false,
}); });
export const IntermediateActionsContext = createContext({ export const IntermediateActionsContext = createContext<{
openScreen: (screen: Screen) => {}, openScreen: (screen: Screen) => void;
writeClipboard: (text: string) => {} writeClipboard: (text: string) => void;
}>({
openScreen: null!,
writeClipboard: null!,
}); });
interface Props { interface Props {
...@@ -81,7 +111,7 @@ export default function Intermediate(props: Props) { ...@@ -81,7 +111,7 @@ export default function Intermediate(props: Props) {
const value = { const value = {
screen, screen,
focusTaken: screen.id !== 'none' focusTaken: screen.id !== "none",
}; };
const actions = useMemo(() => { const actions = useMemo(() => {
...@@ -93,26 +123,35 @@ export default function Intermediate(props: Props) { ...@@ -93,26 +123,35 @@ export default function Intermediate(props: Props) {
} else { } else {
actions.openScreen({ id: "clipboard", text }); actions.openScreen({ id: "clipboard", text });
} }
} },
} };
}, []); }, []);
useEffect(() => { useEffect(() => {
const openProfile = (user_id: string) => openScreen({ id: "profile", user_id }); const openProfile = (user_id: string) =>
openScreen({ id: "profile", user_id });
const navigate = (path: string) => history.push(path); const navigate = (path: string) => history.push(path);
const subs = [ const subs = [
internalSubscribe("Intermediate", "openProfile", openProfile), internalSubscribe(
internalSubscribe("Intermediate", "navigate", navigate) "Intermediate",
] "openProfile",
openProfile as (...args: unknown[]) => void,
return () => subs.map(unsub => unsub()); ),
}, []); internalSubscribe(
"Intermediate",
"navigate",
navigate as (...args: unknown[]) => void,
),
];
return () => subs.map((unsub) => unsub());
}, [history]);
return ( return (
<IntermediateContext.Provider value={value}> <IntermediateContext.Provider value={value}>
<IntermediateActionsContext.Provider value={actions}> <IntermediateActionsContext.Provider value={actions}>
{ screen.id !== 'onboarding' && props.children } {screen.id !== "onboarding" && props.children}
<Modals <Modals
{...value} {...value}
{...actions} {...actions}
...@@ -121,10 +160,19 @@ export default function Intermediate(props: Props) { ...@@ -121,10 +160,19 @@ export default function Intermediate(props: Props) {
} /** By specifying a key, we reset state whenever switching screen. */ } /** By specifying a key, we reset state whenever switching screen. */
/> />
<Prompt <Prompt
when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'pending_requests', 'user_picker' ].includes(screen.id)} when={[
"modify_account",
"special_prompt",
"special_input",
"image_viewer",
"profile",
"channel_info",
"pending_requests",
"user_picker",
].includes(screen.id)}
message={(_, action) => { message={(_, action) => {
if (action === 'POP') { if (action === "POP") {
openScreen({ id: 'none' }); openScreen({ id: "none" });
setTimeout(() => history.push(history.location), 0); setTimeout(() => history.push(history.location), 0);
return false; return false;
......
src/context/intermediate/Modals.tsx
View file @ 1ac5de17
import { Screen } from "./Intermediate"; import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error"; import { ErrorModal } from "./modals/Error";
import { InputModal } from "./modals/Input"; import { InputModal } from "./modals/Input";
import { OnboardingModal } from "./modals/Onboarding";
import { PromptModal } from "./modals/Prompt"; import { PromptModal } from "./modals/Prompt";
import { SignedOutModal } from "./modals/SignedOut"; import { SignedOutModal } from "./modals/SignedOut";
import { ClipboardModal } from "./modals/Clipboard";
import { OnboardingModal } from "./modals/Onboarding";
export interface Props { export interface Props {
screen: Screen; screen: Screen;
openScreen: (id: any) => void; openScreen: (screen: Screen) => void;
} }
export default function Modals({ screen, openScreen }: Props) { export default function Modals({ screen, openScreen }: Props) {
const onClose = () => openScreen({ id: "none" }); const onClose = () =>
isModalClosing || screen.id === "onboarding"
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) { switch (screen.id) {
case "_prompt": case "_prompt":
......
src/context/intermediate/Popovers.tsx
View file @ 1ac5de17
import { IntermediateContext, useIntermediate } from "./Intermediate";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { UserPicker } from "./popovers/UserPicker"; import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { IntermediateContext, useIntermediate } from "./Intermediate";
import { SpecialInputModal } from "./modals/Input"; import { SpecialInputModal } from "./modals/Input";
import { SpecialPromptModal } from "./modals/Prompt"; import { SpecialPromptModal } from "./modals/Prompt";
import { UserProfile } from "./popovers/UserProfile";
import { ImageViewer } from "./popovers/ImageViewer";
import { ChannelInfo } from "./popovers/ChannelInfo"; import { ChannelInfo } from "./popovers/ChannelInfo";
import { PendingRequests } from "./popovers/PendingRequests"; import { ImageViewer } from "./popovers/ImageViewer";
import { ModifyAccountModal } from "./popovers/ModifyAccount"; import { ModifyAccountModal } from "./popovers/ModifyAccount";
import { PendingRequests } from "./popovers/PendingRequests";
import { UserPicker } from "./popovers/UserPicker";
import { UserProfile } from "./popovers/UserProfile";
export default function Popovers() { export default function Popovers() {
const { screen } = useContext(IntermediateContext); const { screen } = useContext(IntermediateContext);
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const onClose = () => openScreen({ id: "none" }); const onClose = () =>
isModalClosing
? openScreen({ id: "none" })
: internalEmit("Modal", "close");
switch (screen.id) { switch (screen.id) {
case "profile": case "profile":
......
src/context/intermediate/modals/Clipboard.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
...@@ -16,10 +17,9 @@ export function ClipboardModal({ onClose, text }: Props) { ...@@ -16,10 +17,9 @@ export function ClipboardModal({ onClose, text }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.close" /> children: <Text id="app.special.modals.actions.close" />,
} },
]} ]}>
>
{location.protocol !== "https:" && ( {location.protocol !== "https:" && (
<p> <p>
<Text id="app.special.modals.clipboard.https" /> <Text id="app.special.modals.clipboard.https" />
......
src/context/intermediate/modals/Error.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
interface Props { interface Props {
...@@ -16,14 +17,13 @@ export function ErrorModal({ onClose, error }: Props) { ...@@ -16,14 +17,13 @@ export function ErrorModal({ onClose, error }: Props) {
{ {
onClick: onClose, onClick: onClose,
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" /> children: <Text id="app.special.modals.actions.ok" />,
}, },
{ {
onClick: () => location.reload(), onClick: () => location.reload(),
text: <Text id="app.special.modals.actions.reload" /> children: <Text id="app.special.modals.actions.reload" />,
} },
]} ]}>
>
<Text id={`error.${error}`}>{error}</Text> <Text id={`error.${error}`}>{error}</Text>
</Modal> </Modal>
); );
......
src/context/intermediate/modals/Input.tsx
View file @ 1ac5de17
import { useHistory } from "react-router";
import { Server } from "revolt.js/dist/maps/Servers";
import { ulid } from "ulid"; import { ulid } from "ulid";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useHistory } from "react-router"; import { useContext, useState } from "preact/hooks";
import InputBox from "../../../components/ui/InputBox";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import Overline from "../../../components/ui/Overline";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
import { takeError } from "../../revoltjs/util";
import { useContext, useState } from "preact/hooks";
import Overline from '../../../components/ui/Overline';
import InputBox from '../../../components/ui/InputBox';
import { AppContext } from "../../revoltjs/RevoltClient"; import { AppContext } from "../../revoltjs/RevoltClient";
import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
...@@ -22,7 +26,7 @@ export function InputModal({ ...@@ -22,7 +26,7 @@ export function InputModal({
question, question,
field, field,
defaultValue, defaultValue,
callback callback,
}: Props) { }: Props) {
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [value, setValue] = useState(defaultValue ?? ""); const [value, setValue] = useState(defaultValue ?? "");
...@@ -36,31 +40,34 @@ export function InputModal({ ...@@ -36,31 +40,34 @@ export function InputModal({
actions={[ actions={[
{ {
confirmation: true, confirmation: true,
text: <Text id="app.special.modals.actions.ok" />, children: <Text id="app.special.modals.actions.ok" />,
onClick: () => { onClick: () => {
setProcessing(true); setProcessing(true);
callback(value) callback(value)
.then(onClose) .then(onClose)
.catch(err => { .catch((err) => {
setError(takeError(err)); setError(takeError(err));
setProcessing(false) setProcessing(false);
}) });
} },
}, },
{ {
text: <Text id="app.special.modals.actions.cancel" />, children: <Text id="app.special.modals.actions.cancel" />,
onClick: onClose onClick: onClose,
} },
]} ]}
onClose={onClose} onClose={onClose}>
>
<form> <form>
{ field ? <Overline error={error} block> {field ? (
{field} <Overline error={error} block>
</Overline> : (error && <Overline error={error} type="error" block />) } {field}
</Overline>
) : (
error && <Overline error={error} type="error" block />
)}
<InputBox <InputBox
value={value} value={value}
onChange={e => setValue(e.currentTarget.value)} onChange={(e) => setValue(e.currentTarget.value)}
/> />
</form> </form>
</Modal> </Modal>
...@@ -68,9 +75,15 @@ export function InputModal({ ...@@ -68,9 +75,15 @@ export function InputModal({
} }
type SpecialProps = { onClose: () => void } & ( type SpecialProps = { onClose: () => void } & (
{ type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } | | {
{ type: "create_role", server: string, callback: (id: string) => void } type:
) | "create_group"
| "create_server"
| "set_custom_status"
| "add_friend";
}
| { type: "create_role"; server: Server; callback: (id: string) => void }
);
export function SpecialInputModal(props: SpecialProps) { export function SpecialInputModal(props: SpecialProps) {
const history = useHistory(); const history = useHistory();
...@@ -79,76 +92,90 @@ export function SpecialInputModal(props: SpecialProps) { ...@@ -79,76 +92,90 @@ export function SpecialInputModal(props: SpecialProps) {
const { onClose } = props; const { onClose } = props;
switch (props.type) { switch (props.type) {
case "create_group": { case "create_group": {
return <InputModal return (
onClose={onClose} <InputModal
question={<Text id="app.main.groups.create" />} onClose={onClose}
field={<Text id="app.main.groups.name" />} question={<Text id="app.main.groups.create" />}
callback={async name => { field={<Text id="app.main.groups.name" />}
const group = await client.channels.createGroup( callback={async (name) => {
{ const group = await client.channels.createGroup({
name, name,
nonce: ulid(), nonce: ulid(),
users: [] users: [],
} });
);
history.push(`/channel/${group._id}`); history.push(`/channel/${group._id}`);
}} }}
/>; />
);
} }
case "create_server": { case "create_server": {
return <InputModal return (
onClose={onClose} <InputModal
question={<Text id="app.main.servers.create" />} onClose={onClose}
field={<Text id="app.main.servers.name" />} question={<Text id="app.main.servers.create" />}
callback={async name => { field={<Text id="app.main.servers.name" />}
const server = await client.servers.createServer( callback={async (name) => {
{ const server = await client.servers.createServer({
name, name,
nonce: ulid() nonce: ulid(),
} });
);
history.push(`/server/${server._id}`); history.push(`/server/${server._id}`);
}} }}
/>; />
);
} }
case "create_role": { case "create_role": {
return <InputModal return (
onClose={onClose} <InputModal
question={<Text id="app.settings.permissions.create_role" />} onClose={onClose}
field={<Text id="app.settings.permissions.role_name" />} question={
callback={async name => { <Text id="app.settings.permissions.create_role" />
const role = await client.servers.createRole(props.server, name); }
props.callback(role.id); field={<Text id="app.settings.permissions.role_name" />}
}} callback={async (name) => {
/>; const role = await props.server.createRole(name);
props.callback(role.id);
}}
/>
);
} }
case "set_custom_status": { case "set_custom_status": {
return <InputModal return (
onClose={onClose} <InputModal
question={<Text id="app.context_menu.set_custom_status" />} onClose={onClose}
field={<Text id="app.context_menu.custom_status" />} question={<Text id="app.context_menu.set_custom_status" />}
defaultValue={client.user?.status?.text} field={<Text id="app.context_menu.custom_status" />}
callback={text => defaultValue={client.user?.status?.text}
client.users.editUser({ callback={(text) =>
status: { client.users.edit({
...client.user?.status, status: {
text: text.trim().length > 0 ? text : undefined ...client.user?.status,
} text: text.trim().length > 0 ? text : undefined,
}) },
} })
/>; }
/>
);
} }
case "add_friend": { case "add_friend": {
return <InputModal return (
onClose={onClose} <InputModal
question={"Add Friend"} onClose={onClose}
callback={username => question={"Add Friend"}
client.users.addFriend(username) callback={(username) =>
} client
/>; .req(
"PUT",
`/users/${username}/friend` as "/users/id/friend",
)
.then(undefined)
}
/>
);
} }
default: return null; default:
return null;
} }
} }
src/context/intermediate/modals/Onboarding.module.scss
View file @ 1ac5de17
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
margin: auto; margin: auto;
display: block; display: block;
max-height: 420px; max-height: 420px;
border-radius: 8px; border-radius: var(--border-radius);
} }
input { input {
......
src/context/intermediate/modals/Onboarding.tsx
View file @ 1ac5de17
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { SubmitHandler, useForm } from "react-hook-form"; import { SubmitHandler, useForm } from "react-hook-form";
import styles from "./Onboarding.module.scss"; import styles from "./Onboarding.module.scss";
import { takeError } from "../../revoltjs/util"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import wideSVG from "../../../assets/wide.svg";
import Button from "../../../components/ui/Button"; import Button from "../../../components/ui/Button";
import FormField from "../../../pages/login/FormField";
import Preloader from "../../../components/ui/Preloader"; import Preloader from "../../../components/ui/Preloader";
import wideSVG from '../../../assets/wide.svg'; import FormField from "../../../pages/login/FormField";
import { takeError } from "../../revoltjs/util";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
...@@ -15,7 +17,7 @@ interface Props { ...@@ -15,7 +17,7 @@ interface Props {
} }
interface FormInputs { interface FormInputs {
username: string username: string;
} }
export function OnboardingModal({ onClose, callback }: Props) { export function OnboardingModal({ onClose, callback }: Props) {
...@@ -26,19 +28,19 @@ export function OnboardingModal({ onClose, callback }: Props) { ...@@ -26,19 +28,19 @@ export function OnboardingModal({ onClose, callback }: Props) {
const onSubmit: SubmitHandler<FormInputs> = ({ username }) => { const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
setLoading(true); setLoading(true);
callback(username, true) callback(username, true)
.then(onClose) .then(() => onClose())
.catch((err: any) => { .catch((err: unknown) => {
setError(takeError(err)); setError(takeError(err));
setLoading(false); setLoading(false);
}); });
} };
return ( return (
<div className={styles.onboarding}> <div className={styles.onboarding}>
<div className={styles.header}> <div className={styles.header}>
<h1> <h1>
<Text id="app.special.modals.onboarding.welcome" /> <Text id="app.special.modals.onboarding.welcome" />
<img src={wideSVG} /> <img src={wideSVG} loading="eager" />
</h1> </h1>
</div> </div>
<div className={styles.form}> <div className={styles.form}>
...@@ -49,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) { ...@@ -49,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) {
<p> <p>
<Text id="app.special.modals.onboarding.pick" /> <Text id="app.special.modals.onboarding.pick" />
</p> </p>
<form onSubmit={handleSubmit(onSubmit) as JSX.GenericEventHandler<HTMLFormElement>}> <form
onSubmit={
handleSubmit(
onSubmit,
) as JSX.GenericEventHandler<HTMLFormElement>
}>
<div> <div>
<FormField <FormField
type="username" type="username"
......