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 387 additions and 280 deletions
src/context/Locale.tsx
View file @ 1ac5de17
import dayjs from "dayjs"; import dayJS from "dayjs";
import calendar from "dayjs/plugin/calendar"; import calendar from "dayjs/plugin/calendar";
import format from "dayjs/plugin/localizedFormat"; import format from "dayjs/plugin/localizedFormat";
import update from "dayjs/plugin/updateLocale"; import update from "dayjs/plugin/updateLocale";
import defaultsDeep from "lodash.defaultsdeep"; import defaultsDeep from "lodash.defaultsdeep";
import { IntlProvider } from "preact-i18n"; import { IntlProvider } from "preact-i18n";
import { useEffect, useState } from "preact/hooks"; import { useCallback, useEffect, useState } from "preact/hooks";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import definition from "../../external/lang/en.json"; import definition from "../../external/lang/en.json";
export const dayjs = dayJS;
dayjs.extend(calendar); dayjs.extend(calendar);
dayjs.extend(format); dayjs.extend(format);
dayjs.extend(update); dayjs.extend(update);
...@@ -22,6 +24,7 @@ export enum Language { ...@@ -22,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",
...@@ -29,6 +32,7 @@ export enum Language { ...@@ -29,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",
...@@ -38,6 +42,7 @@ export enum Language { ...@@ -38,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",
...@@ -54,7 +59,7 @@ export interface LanguageEntry { ...@@ -54,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 } = {
...@@ -69,13 +74,15 @@ export const Languages: { [key in Language]: LanguageEntry } = { ...@@ -69,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" },
...@@ -99,33 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = { ...@@ -99,33 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = {
dayjs: "zh", dayjs: "zh",
}, },
tokipona: {
display: "Toki Pona",
emoji: "🙂",
i18n: "tokipona",
dayjs: "en-gb",
cat: "const",
},
owo: { owo: {
display: "OwO", display: "OwO",
emoji: "🐱", emoji: "🐱",
i18n: "owo", i18n: "owo",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, cat: "alt",
}, },
pr: { pr: {
display: "Pirate", display: "Pirate",
emoji: "🏴‍☠️", emoji: "🏴‍☠️",
i18n: "pr", i18n: "pr",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, cat: "alt",
}, },
bottom: { bottom: {
display: "Bottom", display: "Bottom",
emoji: "🥺", emoji: "🥺",
i18n: "bottom", i18n: "bottom",
dayjs: "en-gb", dayjs: "en-gb",
alt: true, 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",
}, },
}; };
...@@ -134,72 +149,118 @@ interface Props { ...@@ -134,72 +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] = definition as Dictionary,
useState<Record<string, unknown>>(definition); );
const lang = Languages[locale];
// Load relevant language information, fallback to English if invalid.
const lang = Languages[locale] ?? Languages.en;
// TODO: clean this up and use the built in Intl API function transformLanguage(source: Dictionary) {
function transformLanguage(source: { [key: string]: any }) { // 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( .forEach(
(k) => (k) =>
(dayjs[k] = dayjs[k].replace( (dayjs[k] = dayjs[k].replace(
/{{time}}/g, /{{time}}/g,
twelvehour ? "LT" : "HH:mm", 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 });
}, [locale, lang]); return;
}
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]);
......
src/context/Theme.tsx
View file @ 1ac5de17
...@@ -4,8 +4,6 @@ import { createGlobalStyle } from "styled-components"; ...@@ -4,8 +4,6 @@ import { createGlobalStyle } from "styled-components";
import { createContext } from "preact"; import { createContext } from "preact";
import { useEffect } from "preact/hooks"; import { useEffect } from "preact/hooks";
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
import { connectState } from "../redux/connector"; import { connectState } from "../redux/connector";
import { Children } from "../types/Preact"; import { Children } from "../types/Preact";
...@@ -57,7 +55,7 @@ export type Fonts = ...@@ -57,7 +55,7 @@ export type Fonts =
| "Raleway" | "Raleway"
| "Ubuntu" | "Ubuntu"
| "Comic Neue"; | "Comic Neue";
export type MonoscapeFonts = export type MonospaceFonts =
| "Fira Code" | "Fira Code"
| "Roboto Mono" | "Roboto Mono"
| "Source Code Pro" | "Source Code Pro"
...@@ -70,7 +68,7 @@ export type Theme = { ...@@ -70,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 {
...@@ -190,8 +188,8 @@ export const FONTS: Record<Fonts, { name: string; load: () => void }> = { ...@@ -190,8 +188,8 @@ export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
}, },
}; };
export const MONOSCAPE_FONTS: Record< export const MONOSPACE_FONTS: Record<
MonoscapeFonts, MonospaceFonts,
{ name: string; load: () => void } { name: string; load: () => void }
> = { > = {
"Fira Code": { "Fira Code": {
...@@ -217,7 +215,7 @@ export const MONOSCAPE_FONTS: Record< ...@@ -217,7 +215,7 @@ export const MONOSCAPE_FONTS: Record<
}; };
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";
...@@ -234,7 +232,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -234,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",
...@@ -261,7 +259,7 @@ export const PRESETS: Record<string, Theme> = { ...@@ -261,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",
...@@ -311,17 +309,17 @@ function Theme({ children, options }: Props) { ...@@ -311,17 +309,17 @@ function Theme({ children, options }: Props) {
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 = () => const resize = () =>
...@@ -330,19 +328,12 @@ function Theme({ children, options }: Props) { ...@@ -330,19 +328,12 @@ function Theme({ children, options }: Props) {
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 && (
......
src/context/Voice.tsx
View file @ 1ac5de17
import { Channel } from "revolt.js/dist/maps/Channels";
import { createContext } from "preact"; import { createContext } from "preact";
import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import {
useCallback,
useContext,
useEffect,
useMemo,
useRef,
useState,
} from "preact/hooks";
import type { ProduceType, VoiceUser } from "../lib/vortex/Types"; import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
import type VoiceClient from "../lib/vortex/VoiceClient"; import type VoiceClient from "../lib/vortex/VoiceClient";
import { Children } from "../types/Preact"; import { Children } from "../types/Preact";
import { SoundContext } from "./Settings"; import { SoundContext } from "./Settings";
import { AppContext } from "./revoltjs/RevoltClient";
import { useForceUpdate } from "./revoltjs/hooks";
export enum VoiceStatus { export enum VoiceStatus {
LOADING = 0, LOADING = 0,
...@@ -22,7 +29,7 @@ export enum VoiceStatus { ...@@ -22,7 +29,7 @@ export enum VoiceStatus {
} }
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>;
...@@ -44,20 +51,22 @@ type Props = { ...@@ -44,20 +51,22 @@ 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")
...@@ -75,32 +84,30 @@ export default function Voice({ children }: Props) { ...@@ -75,32 +84,30 @@ export default function Voice({ children }: Props) {
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()) throw new Error("RTC is unavailable"); if (!client?.supported()) 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( await client.connect(
"wss://voso.revolt.chat/ws", "wss://voso.revolt.chat/ws",
channelId, channel._id,
); );
setStatus(VoiceStatus.AUTHENTICATING); setStatus(VoiceStatus.AUTHENTICATING);
...@@ -112,11 +119,12 @@ export default function Voice({ children }: Props) { ...@@ -112,11 +119,12 @@ 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()) throw new Error("RTC is unavailable"); if (!client?.supported()) throw new Error("RTC is unavailable");
...@@ -138,9 +146,9 @@ export default function Voice({ children }: Props) { ...@@ -138,9 +146,9 @@ export default function Voice({ children }: Props) {
switch (type) { switch (type) {
case "audio": { case "audio": {
if (client?.audioProducer !== undefined) if (client?.audioProducer !== undefined)
return console.log("No audio producer."); // ! FIXME: let the user know return console.log("No audio producer."); // ! TODO: let the user know
if (navigator.mediaDevices === undefined) if (navigator.mediaDevices === undefined)
return console.log("No media devices."); // ! FIXME: let the user know return console.log("No media devices."); // ! TODO: let the user know
const mediaStream = const mediaStream =
await navigator.mediaDevices.getUserMedia({ await navigator.mediaDevices.getUserMedia({
audio: true, audio: true,
...@@ -158,44 +166,49 @@ export default function Voice({ children }: Props) { ...@@ -158,44 +166,49 @@ export default function Voice({ children }: Props) {
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}>
......
src/context/intermediate/Intermediate.tsx
View file @ 1ac5de17
import { Prompt } from "react-router"; import { Prompt } from "react-router";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { import type { Attachment } from "revolt-api/types/Autumn";
Attachment, import type { EmbedImage } from "revolt-api/types/January";
Channels, import { Channel } from "revolt.js/dist/maps/Channels";
EmbedImage, import { Message } from "revolt.js/dist/maps/Messages";
Servers, import { Server } from "revolt.js/dist/maps/Servers";
Users, import { User } from "revolt.js/dist/maps/Users";
} from "revolt.js/dist/api/objects";
import { createContext } from "preact"; import { createContext } from "preact";
import { useContext, useEffect, useMemo, useState } from "preact/hooks"; import { useContext, useEffect, useMemo, useState } from "preact/hooks";
...@@ -32,21 +31,21 @@ export type Screen = ...@@ -32,21 +31,21 @@ export type Screen =
actions: Action[]; actions: Action[];
} }
| ({ id: "special_prompt" } & ( | ({ id: "special_prompt" } & (
| { type: "leave_group"; target: Channels.GroupChannel } | { type: "leave_group"; target: Channel }
| { type: "close_dm"; target: Channels.DirectMessageChannel } | { type: "close_dm"; target: Channel }
| { type: "leave_server"; target: Servers.Server } | { type: "leave_server"; target: Server }
| { type: "delete_server"; target: Servers.Server } | { type: "delete_server"; target: Server }
| { type: "delete_channel"; target: Channels.TextChannel } | { type: "delete_channel"; target: Channel }
| { type: "delete_message"; target: Channels.Message } | { type: "delete_message"; target: Message }
| { | {
type: "create_invite"; type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel; target: Channel;
} }
| { type: "kick_member"; target: Servers.Server; user: string } | { type: "kick_member"; target: Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: string } | { type: "ban_member"; target: Server; user: User }
| { type: "unfriend_user"; target: Users.User } | { type: "unfriend_user"; target: User }
| { type: "block_user"; target: Users.User } | { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server } | { type: "create_channel"; target: Server }
)) ))
| ({ id: "special_input" } & ( | ({ id: "special_input" } & (
| { | {
...@@ -58,7 +57,7 @@ export type Screen = ...@@ -58,7 +57,7 @@ export type Screen =
} }
| { | {
type: "create_role"; type: "create_role";
server: string; server: Server;
callback: (id: string) => void; callback: (id: string) => void;
} }
)) ))
...@@ -81,8 +80,8 @@ export type Screen = ...@@ -81,8 +80,8 @@ export type Screen =
| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage } | { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
| { id: "modify_account"; field: "username" | "email" | "password" } | { id: "modify_account"; field: "username" | "email" | "password" }
| { id: "profile"; user_id: string } | { id: "profile"; user_id: string }
| { id: "channel_info"; channel_id: string } | { id: "channel_info"; channel: Channel }
| { id: "pending_requests"; users: string[] } | { id: "pending_requests"; users: User[] }
| { | {
id: "user_picker"; id: "user_picker";
omit?: string[]; omit?: string[];
...@@ -90,13 +89,16 @@ export type Screen = ...@@ -90,13 +89,16 @@ export type Screen =
}; };
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 {
...@@ -131,12 +133,20 @@ export default function Intermediate(props: Props) { ...@@ -131,12 +133,20 @@ export default function Intermediate(props: Props) {
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,
),
internalSubscribe(
"Intermediate",
"navigate",
navigate as (...args: unknown[]) => void,
),
]; ];
return () => subs.map((unsub) => unsub()); return () => subs.map((unsub) => unsub());
}, []); }, [history]);
return ( return (
<IntermediateContext.Provider value={value}> <IntermediateContext.Provider value={value}>
......
src/context/intermediate/Modals.tsx
View file @ 1ac5de17
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { Screen } from "./Intermediate"; import { Screen } from "./Intermediate";
import { ClipboardModal } from "./modals/Clipboard"; import { ClipboardModal } from "./modals/Clipboard";
import { ErrorModal } from "./modals/Error"; import { ErrorModal } from "./modals/Error";
...@@ -8,11 +12,14 @@ import { SignedOutModal } from "./modals/SignedOut"; ...@@ -8,11 +12,14 @@ import { SignedOutModal } from "./modals/SignedOut";
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 { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { internalEmit } from "../../lib/eventEmitter";
import { isModalClosing } from "../../components/ui/Modal";
import { IntermediateContext, useIntermediate } from "./Intermediate"; 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";
...@@ -14,7 +18,10 @@ export default function Popovers() { ...@@ -14,7 +18,10 @@ 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
...@@ -17,7 +17,7 @@ export function ClipboardModal({ onClose, text }: Props) { ...@@ -17,7 +17,7 @@ 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:" && (
......
src/context/intermediate/modals/Error.tsx
View file @ 1ac5de17
...@@ -17,11 +17,11 @@ export function ErrorModal({ onClose, error }: Props) { ...@@ -17,11 +17,11 @@ 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>
......
src/context/intermediate/modals/Input.tsx
View file @ 1ac5de17
import { useHistory } from "react-router"; 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";
...@@ -39,7 +40,7 @@ export function InputModal({ ...@@ -39,7 +40,7 @@ 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)
...@@ -51,7 +52,7 @@ export function InputModal({ ...@@ -51,7 +52,7 @@ export function InputModal({
}, },
}, },
{ {
text: <Text id="app.special.modals.actions.cancel" />, children: <Text id="app.special.modals.actions.cancel" />,
onClick: onClose, onClick: onClose,
}, },
]} ]}
...@@ -81,7 +82,7 @@ type SpecialProps = { onClose: () => void } & ( ...@@ -81,7 +82,7 @@ type SpecialProps = { onClose: () => void } & (
| "set_custom_status" | "set_custom_status"
| "add_friend"; | "add_friend";
} }
| { type: "create_role"; server: string; callback: (id: string) => void } | { type: "create_role"; server: Server; callback: (id: string) => void }
); );
export function SpecialInputModal(props: SpecialProps) { export function SpecialInputModal(props: SpecialProps) {
...@@ -134,10 +135,7 @@ export function SpecialInputModal(props: SpecialProps) { ...@@ -134,10 +135,7 @@ export function SpecialInputModal(props: SpecialProps) {
} }
field={<Text id="app.settings.permissions.role_name" />} field={<Text id="app.settings.permissions.role_name" />}
callback={async (name) => { callback={async (name) => {
const role = await client.servers.createRole( const role = await props.server.createRole(name);
props.server,
name,
);
props.callback(role.id); props.callback(role.id);
}} }}
/> />
...@@ -151,7 +149,7 @@ export function SpecialInputModal(props: SpecialProps) { ...@@ -151,7 +149,7 @@ export function SpecialInputModal(props: SpecialProps) {
field={<Text id="app.context_menu.custom_status" />} field={<Text id="app.context_menu.custom_status" />}
defaultValue={client.user?.status?.text} defaultValue={client.user?.status?.text}
callback={(text) => callback={(text) =>
client.users.editUser({ client.users.edit({
status: { status: {
...client.user?.status, ...client.user?.status,
text: text.trim().length > 0 ? text : undefined, text: text.trim().length > 0 ? text : undefined,
...@@ -166,7 +164,14 @@ export function SpecialInputModal(props: SpecialProps) { ...@@ -166,7 +164,14 @@ export function SpecialInputModal(props: SpecialProps) {
<InputModal <InputModal
onClose={onClose} onClose={onClose}
question={"Add Friend"} question={"Add Friend"}
callback={(username) => client.users.addFriend(username)} callback={(username) =>
client
.req(
"PUT",
`/users/${username}/friend` as "/users/id/friend",
)
.then(undefined)
}
/> />
); );
} }
......
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
...@@ -28,8 +28,8 @@ export function OnboardingModal({ onClose, callback }: Props) { ...@@ -28,8 +28,8 @@ 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);
}); });
...@@ -40,7 +40,7 @@ export function OnboardingModal({ onClose, callback }: Props) { ...@@ -40,7 +40,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
<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}>
......
src/context/intermediate/modals/Prompt.module.scss
View file @ 1ac5de17
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
user-select: all; user-select: all;
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
font-family: var(--monoscape-font); font-family: var(--monospace-font);
} }
} }
......
src/context/intermediate/modals/Prompt.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects"; import { Channel } from "revolt.js/dist/maps/Channels";
import { Message as MessageI } from "revolt.js/dist/maps/Messages";
import { Server } from "revolt.js/dist/maps/Servers";
import { User } from "revolt.js/dist/maps/Users";
import { ulid } from "ulid"; import { ulid } from "ulid";
import styles from "./Prompt.module.scss"; import styles from "./Prompt.module.scss";
...@@ -17,7 +21,7 @@ import Radio from "../../../components/ui/Radio"; ...@@ -17,7 +21,7 @@ import Radio from "../../../components/ui/Radio";
import { Children } from "../../../types/Preact"; import { Children } from "../../../types/Preact";
import { AppContext } from "../../revoltjs/RevoltClient"; import { AppContext } from "../../revoltjs/RevoltClient";
import { mapMessage, takeError } from "../../revoltjs/util"; import { takeError } from "../../revoltjs/util";
import { useIntermediate } from "../Intermediate"; import { useIntermediate } from "../Intermediate";
interface Props { interface Props {
...@@ -51,24 +55,24 @@ export function PromptModal({ ...@@ -51,24 +55,24 @@ export function PromptModal({
} }
type SpecialProps = { onClose: () => void } & ( type SpecialProps = { onClose: () => void } & (
| { type: "leave_group"; target: Channels.GroupChannel } | { type: "leave_group"; target: Channel }
| { type: "close_dm"; target: Channels.DirectMessageChannel } | { type: "close_dm"; target: Channel }
| { type: "leave_server"; target: Servers.Server } | { type: "leave_server"; target: Server }
| { type: "delete_server"; target: Servers.Server } | { type: "delete_server"; target: Server }
| { type: "delete_channel"; target: Channels.TextChannel } | { type: "delete_channel"; target: Channel }
| { type: "delete_message"; target: Channels.Message } | { type: "delete_message"; target: MessageI }
| { | {
type: "create_invite"; type: "create_invite";
target: Channels.TextChannel | Channels.GroupChannel; target: Channel;
} }
| { type: "kick_member"; target: Servers.Server; user: string } | { type: "kick_member"; target: Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: string } | { type: "ban_member"; target: Server; user: User }
| { type: "unfriend_user"; target: Users.User } | { type: "unfriend_user"; target: User }
| { type: "block_user"; target: Users.User } | { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server } | { type: "create_channel"; target: Server }
); );
export function SpecialPromptModal(props: SpecialProps) { export const SpecialPromptModal = observer((props: SpecialProps) => {
const client = useContext(AppContext); const client = useContext(AppContext);
const [processing, setProcessing] = useState(false); const [processing, setProcessing] = useState(false);
const [error, setError] = useState<undefined | string>(undefined); const [error, setError] = useState<undefined | string>(undefined);
...@@ -92,7 +96,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -92,7 +96,7 @@ export function SpecialPromptModal(props: SpecialProps) {
block_user: ["block_user", "block"], block_user: ["block_user", "block"],
}; };
let event = EVENTS[props.type]; const event = EVENTS[props.type];
let name; let name;
switch (props.type) { switch (props.type) {
case "unfriend_user": case "unfriend_user":
...@@ -100,9 +104,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -100,9 +104,7 @@ export function SpecialPromptModal(props: SpecialProps) {
name = props.target.username; name = props.target.username;
break; break;
case "close_dm": case "close_dm":
name = client.users.get( name = props.target.recipient?.username;
client.channels.getRecipient(props.target._id),
)?.username;
break; break;
default: default:
name = props.target.name; name = props.target.name;
...@@ -122,7 +124,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -122,7 +124,7 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( children: (
<Text <Text
id={`app.special.modals.actions.${event[1]}`} id={`app.special.modals.actions.${event[1]}`}
/> />
...@@ -133,27 +135,19 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -133,27 +135,19 @@ export function SpecialPromptModal(props: SpecialProps) {
try { try {
switch (props.type) { switch (props.type) {
case "unfriend_user": case "unfriend_user":
await client.users.removeFriend( await props.target.removeFriend();
props.target._id,
);
break; break;
case "block_user": case "block_user":
await client.users.blockUser( await props.target.blockUser();
props.target._id,
);
break; break;
case "leave_group": case "leave_group":
case "close_dm": case "close_dm":
case "delete_channel": case "delete_channel":
await client.channels.delete( props.target.delete();
props.target._id,
);
break; break;
case "leave_server": case "leave_server":
case "delete_server": case "delete_server":
await client.servers.delete( props.target.delete();
props.target._id,
);
break; break;
} }
...@@ -165,7 +159,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -165,7 +159,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
...@@ -192,18 +186,14 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -192,18 +186,14 @@ export function SpecialPromptModal(props: SpecialProps) {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
error: true, error: true,
text: ( children: (
<Text id="app.special.modals.actions.delete" /> <Text id="app.special.modals.actions.delete" />
), ),
onClick: async () => { onClick: async () => {
setProcessing(true); setProcessing(true);
try { try {
await client.channels.deleteMessage( props.target.delete();
props.target.channel,
props.target._id,
);
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
...@@ -212,10 +202,11 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -212,10 +202,11 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
plain: true,
}, },
]} ]}
content={ content={
...@@ -224,7 +215,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -224,7 +215,7 @@ export function SpecialPromptModal(props: SpecialProps) {
id={`app.special.modals.prompt.confirm_delete_message_long`} id={`app.special.modals.prompt.confirm_delete_message_long`}
/> />
<Message <Message
message={mapMessage(props.target)} message={props.target}
head={true} head={true}
contrast contrast
/> />
...@@ -242,12 +233,12 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -242,12 +233,12 @@ export function SpecialPromptModal(props: SpecialProps) {
useEffect(() => { useEffect(() => {
setProcessing(true); setProcessing(true);
client.channels props.target
.createInvite(props.target._id) .createInvite()
.then((code) => setCode(code)) .then((code) => setCode(code))
.catch((err) => setError(takeError(err))) .catch((err) => setError(takeError(err)))
.finally(() => setProcessing(false)); .finally(() => setProcessing(false));
}, []); }, [props.target]);
return ( return (
<PromptModal <PromptModal
...@@ -255,12 +246,14 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -255,12 +246,14 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.create_invite`} />} question={<Text id={`app.context_menu.create_invite`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ok" />, children: (
<Text id="app.special.modals.actions.ok" />
),
confirmation: true, confirmation: true,
onClick: onClose, onClick: onClose,
}, },
{ {
text: <Text id="app.context_menu.copy_link" />, children: <Text id="app.context_menu.copy_link" />,
onClick: () => onClick: () =>
writeClipboard( writeClipboard(
`${window.location.protocol}//${window.location.host}/invite/${code}`, `${window.location.protocol}//${window.location.host}/invite/${code}`,
...@@ -283,15 +276,15 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -283,15 +276,15 @@ export function SpecialPromptModal(props: SpecialProps) {
); );
} }
case "kick_member": { case "kick_member": {
const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
onClose={onClose} onClose={onClose}
question={<Text id={`app.context_menu.kick_member`} />} question={<Text id={`app.context_menu.kick_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.kick" />, children: (
<Text id="app.special.modals.actions.kick" />
),
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
...@@ -299,10 +292,13 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -299,10 +292,13 @@ export function SpecialPromptModal(props: SpecialProps) {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.members.kickMember( client.members
props.target._id, .getKey({
props.user, server: props.target._id,
); user: props.user._id,
})
?.kick();
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
...@@ -311,7 +307,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -311,7 +307,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
...@@ -319,10 +315,10 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -319,10 +315,10 @@ export function SpecialPromptModal(props: SpecialProps) {
]} ]}
content={ content={
<div className={styles.column}> <div className={styles.column}>
<UserIcon target={user} size={64} /> <UserIcon target={props.user} size={64} />
<Text <Text
id="app.special.modals.prompt.confirm_kick" id="app.special.modals.prompt.confirm_kick"
fields={{ name: user?.username }} fields={{ name: props.user?.username }}
/> />
</div> </div>
} }
...@@ -333,7 +329,6 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -333,7 +329,6 @@ export function SpecialPromptModal(props: SpecialProps) {
} }
case "ban_member": { case "ban_member": {
const [reason, setReason] = useState<string | undefined>(undefined); const [reason, setReason] = useState<string | undefined>(undefined);
const user = client.users.get(props.user);
return ( return (
<PromptModal <PromptModal
...@@ -341,7 +336,9 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -341,7 +336,9 @@ export function SpecialPromptModal(props: SpecialProps) {
question={<Text id={`app.context_menu.ban_member`} />} question={<Text id={`app.context_menu.ban_member`} />}
actions={[ actions={[
{ {
text: <Text id="app.special.modals.actions.ban" />, children: (
<Text id="app.special.modals.actions.ban" />
),
contrast: true, contrast: true,
error: true, error: true,
confirmation: true, confirmation: true,
...@@ -349,11 +346,9 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -349,11 +346,9 @@ export function SpecialPromptModal(props: SpecialProps) {
setProcessing(true); setProcessing(true);
try { try {
await client.servers.banUser( await props.target.banUser(props.user._id, {
props.target._id, reason,
props.user, });
{ reason },
);
onClose(); onClose();
} catch (err) { } catch (err) {
setError(takeError(err)); setError(takeError(err));
...@@ -362,7 +357,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -362,7 +357,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
...@@ -370,10 +365,10 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -370,10 +365,10 @@ export function SpecialPromptModal(props: SpecialProps) {
]} ]}
content={ content={
<div className={styles.column}> <div className={styles.column}>
<UserIcon target={user} size={64} /> <UserIcon target={props.user} size={64} />
<Text <Text
id="app.special.modals.prompt.confirm_ban" id="app.special.modals.prompt.confirm_ban"
fields={{ name: user?.username }} fields={{ name: props.user?.username }}
/> />
<Overline> <Overline>
<Text id="app.special.modals.prompt.confirm_ban_reason" /> <Text id="app.special.modals.prompt.confirm_ban_reason" />
...@@ -404,7 +399,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -404,7 +399,7 @@ export function SpecialPromptModal(props: SpecialProps) {
{ {
confirmation: true, confirmation: true,
contrast: true, contrast: true,
text: ( children: (
<Text id="app.special.modals.actions.create" /> <Text id="app.special.modals.actions.create" />
), ),
onClick: async () => { onClick: async () => {
...@@ -412,14 +407,11 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -412,14 +407,11 @@ export function SpecialPromptModal(props: SpecialProps) {
try { try {
const channel = const channel =
await client.servers.createChannel( await props.target.createChannel({
props.target._id, type,
{ name,
type, nonce: ulid(),
name, });
nonce: ulid(),
},
);
history.push( history.push(
`/server/${props.target._id}/channel/${channel._id}`, `/server/${props.target._id}/channel/${channel._id}`,
...@@ -432,7 +424,7 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -432,7 +424,7 @@ export function SpecialPromptModal(props: SpecialProps) {
}, },
}, },
{ {
text: ( children: (
<Text id="app.special.modals.actions.cancel" /> <Text id="app.special.modals.actions.cancel" />
), ),
onClick: onClose, onClick: onClose,
...@@ -470,4 +462,4 @@ export function SpecialPromptModal(props: SpecialProps) { ...@@ -470,4 +462,4 @@ export function SpecialPromptModal(props: SpecialProps) {
default: default:
return null; return null;
} }
} });
src/context/intermediate/modals/SignedOut.tsx
View file @ 1ac5de17
...@@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: Props) { ...@@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: 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" />,
}, },
]} ]}
/> />
......
src/context/intermediate/popovers/ChannelInfo.tsx
View file @ 1ac5de17
import { X } from "@styled-icons/boxicons-regular"; import { X } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import styles from "./ChannelInfo.module.scss"; import styles from "./ChannelInfo.module.scss";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import Markdown from "../../../components/markdown/Markdown"; import Markdown from "../../../components/markdown/Markdown";
import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
import { getChannelName } from "../../revoltjs/util"; import { getChannelName } from "../../revoltjs/util";
interface Props { interface Props {
channel_id: string; channel: Channel;
onClose: () => void; onClose: () => void;
} }
export function ChannelInfo({ channel_id, onClose }: Props) { export const ChannelInfo = observer(({ channel, onClose }: Props) => {
const ctx = useForceUpdate();
const channel = useChannel(channel_id, ctx);
if (!channel) return null;
if ( if (
channel.channel_type === "DirectMessage" || channel.channel_type === "DirectMessage" ||
channel.channel_type === "SavedMessages" channel.channel_type === "SavedMessages"
...@@ -30,15 +27,15 @@ export function ChannelInfo({ channel_id, onClose }: Props) { ...@@ -30,15 +27,15 @@ export function ChannelInfo({ channel_id, onClose }: Props) {
<Modal visible={true} onClose={onClose}> <Modal visible={true} onClose={onClose}>
<div className={styles.info}> <div className={styles.info}>
<div className={styles.header}> <div className={styles.header}>
<h1>{getChannelName(ctx.client, channel, true)}</h1> <h1>{getChannelName(channel, true)}</h1>
<div onClick={onClose}> <div onClick={onClose}>
<X size={36} /> <X size={36} />
</div> </div>
</div> </div>
<p> <p>
<Markdown content={channel.description} /> <Markdown content={channel.description!} />
</p> </p>
</div> </div>
</Modal> </Modal>
); );
} });
src/context/intermediate/popovers/ImageViewer.module.scss
View file @ 1ac5de17
.viewer { .viewer {
display: flex;
flex-direction: column;
border-end-end-radius: 4px;
border-end-start-radius: 4px;
overflow: hidden;
img { img {
width: auto;
height: auto;
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 75vh;
border-bottom: thin solid var(--tertiary-foreground);
object-fit: contain;
} }
} }
src/context/intermediate/popovers/ImageViewer.tsx
View file @ 1ac5de17
import { Attachment, EmbedImage } from "revolt.js/dist/api/objects"; /* eslint-disable react-hooks/rules-of-hooks */
import { Attachment, AttachmentMetadata } from "revolt-api/types/Autumn";
import { EmbedImage } from "revolt-api/types/January";
import styles from "./ImageViewer.module.scss"; import styles from "./ImageViewer.module.scss";
import { useContext, useEffect } from "preact/hooks";
import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions"; import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions"; import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { AppContext } from "../../revoltjs/RevoltClient"; import { useClient } from "../../revoltjs/RevoltClient";
interface Props { interface Props {
onClose: () => void; onClose: () => void;
...@@ -15,28 +16,42 @@ interface Props { ...@@ -15,28 +16,42 @@ interface Props {
attachment?: Attachment; attachment?: Attachment;
} }
type ImageMetadata = AttachmentMetadata & { type: "Image" };
export function ImageViewer({ attachment, embed, onClose }: Props) { export function ImageViewer({ attachment, embed, onClose }: Props) {
// ! FIXME: temp code if (attachment && attachment.metadata.type !== "Image") {
// ! add proxy function to client console.warn(
function proxyImage(url: string) { `Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url); );
return null;
} }
if (attachment && attachment.metadata.type !== "Image") return null; const client = useClient();
const client = useContext(AppContext);
return ( return (
<Modal visible={true} onClose={onClose} noBackground> <Modal visible={true} onClose={onClose} noBackground>
<div className={styles.viewer}> <div className={styles.viewer}>
{attachment && ( {attachment && (
<> <>
<img src={client.generateFileURL(attachment)} /> <img
loading="eager"
src={client.generateFileURL(attachment)}
width={(attachment.metadata as ImageMetadata).width}
height={
(attachment.metadata as ImageMetadata).height
}
/>
<AttachmentActions attachment={attachment} /> <AttachmentActions attachment={attachment} />
</> </>
)} )}
{embed && ( {embed && (
<> <>
<img src={proxyImage(embed.url)} /> <img
loading="eager"
src={client.proxyFile(embed.url)}
width={embed.width}
height={embed.height}
/>
<EmbedMediaActions embed={embed} /> <EmbedMediaActions embed={embed} />
</> </>
)} )}
......
src/context/intermediate/popovers/ModifyAccount.tsx
View file @ 1ac5de17
...@@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) { ...@@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
{ {
confirmation: true, confirmation: true,
onClick: handleSubmit(onSubmit), onClick: handleSubmit(onSubmit),
text: children:
field === "email" ? ( field === "email" ? (
<Text id="app.special.modals.actions.send_email" /> <Text id="app.special.modals.actions.send_email" />
) : ( ) : (
...@@ -80,16 +80,18 @@ export function ModifyAccountModal({ onClose, field }: Props) { ...@@ -80,16 +80,18 @@ export function ModifyAccountModal({ onClose, field }: Props) {
}, },
{ {
onClick: onClose, onClick: onClose,
text: <Text id="app.special.modals.actions.close" />, children: <Text id="app.special.modals.actions.close" />,
}, },
]}> ]}>
{/* Preact / React typing incompatabilities */} {/* Preact / React typing incompatabilities */}
<form <form
onSubmit={ onSubmit={(e) => {
e.preventDefault();
handleSubmit( handleSubmit(
onSubmit, onSubmit,
) as JSX.GenericEventHandler<HTMLFormElement> // eslint-disable-next-line @typescript-eslint/no-explicit-any
}> )(e as any);
}}>
{field === "email" && ( {field === "email" && (
<FormField <FormField
type="email" type="email"
......
src/context/intermediate/popovers/PendingRequests.tsx
View file @ 1ac5de17
import { observer } from "mobx-react-lite";
import { User } from "revolt.js/dist/maps/Users";
import styles from "./UserPicker.module.scss"; import styles from "./UserPicker.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import Modal from "../../../components/ui/Modal"; import Modal from "../../../components/ui/Modal";
import { Friend } from "../../../pages/friends/Friend"; import { Friend } from "../../../pages/friends/Friend";
import { useUsers } from "../../revoltjs/hooks";
interface Props { interface Props {
users: string[]; users: User[];
onClose: () => void; onClose: () => void;
} }
export function PendingRequests({ users: ids, onClose }: Props) { export const PendingRequests = observer(({ users, onClose }: Props) => {
const users = useUsers(ids);
return ( return (
<Modal <Modal
visible={true} visible={true}
title={<Text id="app.special.friends.pending" />} title={<Text id="app.special.friends.pending" />}
onClose={onClose}> onClose={onClose}>
<div className={styles.list}> <div className={styles.list}>
{users {users.map((x) => (
.filter((x) => typeof x !== "undefined") <Friend user={x!} key={x!._id} />
.map((x) => ( ))}
<Friend user={x!} key={x!._id} />
))}
</div> </div>
</Modal> </Modal>
); );
} });
src/context/intermediate/popovers/UserPicker.module.scss
View file @ 1ac5de17
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
max-height: 360px; max-height: 360px;
overflow-y: scroll; overflow-y: scroll;
// ! FIXME: very temporary code
> label { > label {
> span { > span {
align-items: flex-start !important; align-items: flex-start !important;
...@@ -18,4 +17,4 @@ ...@@ -18,4 +17,4 @@
} }
} }
} }
} }
\ No newline at end of file