mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-29 21:15:19 +00:00
Merge remote-tracking branch 'origin/livekit' into hs/add-buttons-for-reactions
This commit is contained in:
4
.github/workflows/translations-download.yaml
vendored
4
.github/workflows/translations-download.yaml
vendored
@@ -24,7 +24,7 @@ jobs:
|
|||||||
run: "yarn install --frozen-lockfile"
|
run: "yarn install --frozen-lockfile"
|
||||||
|
|
||||||
- name: Prune i18n
|
- name: Prune i18n
|
||||||
run: "rm -R public/locales"
|
run: "rm -R locales"
|
||||||
|
|
||||||
- name: Download translation files
|
- name: Download translation files
|
||||||
uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
|
uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
|
||||||
@@ -32,7 +32,7 @@ jobs:
|
|||||||
groups: "-p includeSourceLang:true"
|
groups: "-p includeSourceLang:true"
|
||||||
|
|
||||||
- name: Fix the owner of the downloaded files
|
- name: Fix the owner of the downloaded files
|
||||||
run: "sudo chown runner:docker -R public/locales"
|
run: "sudo chown runner:docker -R locales"
|
||||||
|
|
||||||
- name: Prettier
|
- name: Prettier
|
||||||
run: yarn prettier:format
|
run: yarn prettier:format
|
||||||
|
|||||||
@@ -2,9 +2,3 @@ FROM nginxinc/nginx-unprivileged:alpine
|
|||||||
|
|
||||||
COPY ./dist /app
|
COPY ./dist /app
|
||||||
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
|
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
USER root
|
|
||||||
|
|
||||||
RUN rm -rf /usr/share/nginx/html
|
|
||||||
|
|
||||||
USER 101
|
|
||||||
|
|||||||
@@ -213,7 +213,7 @@ To add a new translation key you can do these steps:
|
|||||||
|
|
||||||
1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
|
1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
|
||||||
1. Run `yarn i18n` to extract the new key and update the translation files. This
|
1. Run `yarn i18n` to extract the new key and update the translation files. This
|
||||||
will add a skeleton entry to the `public/locales/en-GB/app.json` file:
|
will add a skeleton entry to the `locales/en-GB/app.json` file:
|
||||||
```jsonc
|
```jsonc
|
||||||
{
|
{
|
||||||
...
|
...
|
||||||
@@ -221,7 +221,7 @@ To add a new translation key you can do these steps:
|
|||||||
...
|
...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with
|
1. Update the skeleton entry in the `locales/en-GB/app.json` file with
|
||||||
the English translation:
|
the English translation:
|
||||||
|
|
||||||
```jsonc
|
```jsonc
|
||||||
|
|||||||
@@ -3,23 +3,17 @@ server {
|
|||||||
server_name localhost;
|
server_name localhost;
|
||||||
|
|
||||||
root /app;
|
root /app;
|
||||||
|
gzip_static on;
|
||||||
|
gzip_vary on;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
# disable cache entriely by default (apart from Etag which is accurate enough)
|
|
||||||
add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
|
|
||||||
if_modified_since off;
|
|
||||||
expires off;
|
|
||||||
# also turn off last-modified since they are just the timestamps of the file in the docker image
|
|
||||||
# and may or may not bear any resemblance to when the resource changed
|
|
||||||
add_header Last-Modified "";
|
|
||||||
|
|
||||||
try_files $uri $uri/ /index.html;
|
try_files $uri $uri/ /index.html;
|
||||||
|
add_header Cache-Control "no-store, no-cache, must-revalidate";
|
||||||
}
|
}
|
||||||
|
|
||||||
# assets can be cached because they have hashed filenames
|
# assets can be cached because they have hashed filenames
|
||||||
location /assets {
|
location /assets {
|
||||||
expires 1w;
|
add_header Cache-Control "public, immutable, max-age=31536000";
|
||||||
add_header Cache-Control "public, no-transform";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
location /apple-app-site-association {
|
location /apple-app-site-association {
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export default {
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
locales: ["en-GB"],
|
locales: ["en-GB"],
|
||||||
output: "public/locales/$LOCALE/$NAMESPACE.json",
|
output: "locales/$LOCALE/$NAMESPACE.json",
|
||||||
input: ["src/**/*.{ts,tsx}"],
|
input: ["src/**/*.{ts,tsx}"],
|
||||||
sort: true,
|
sort: true,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,13 +7,13 @@
|
|||||||
"features": ["plural_postfix_us", "filter_untranslated"],
|
"features": ["plural_postfix_us", "filter_untranslated"],
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"pattern": "public/locales/en-GB/*.json",
|
"pattern": "locales/en-GB/*.json",
|
||||||
"lang": "inherited"
|
"lang": "inherited"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"group": "existing",
|
"group": "existing",
|
||||||
"pattern": "public/locales/*/*.json",
|
"pattern": "locales/*/*.json",
|
||||||
"excludes": ["public/locales/en-GB/*.json"],
|
"excludes": ["locales/en-GB/*.json"],
|
||||||
"lang": "${autodetectLang}"
|
"lang": "${autodetectLang}"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
"download": {
|
"download": {
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"output": "public/locales/${langLsrDash}/${file}"
|
"output": "locales/${langLsrDash}/${file}"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"includeSourceLang": "${includeSourceLang|false}",
|
"includeSourceLang": "${includeSourceLang|false}",
|
||||||
|
|||||||
@@ -84,7 +84,6 @@
|
|||||||
"history": "^4.0.0",
|
"history": "^4.0.0",
|
||||||
"i18next": "^23.0.0",
|
"i18next": "^23.0.0",
|
||||||
"i18next-browser-languagedetector": "^8.0.0",
|
"i18next-browser-languagedetector": "^8.0.0",
|
||||||
"i18next-http-backend": "^2.0.0",
|
|
||||||
"i18next-parser": "^9.0.0",
|
"i18next-parser": "^9.0.0",
|
||||||
"jsdom": "^25.0.0",
|
"jsdom": "^25.0.0",
|
||||||
"knip": "^5.27.2",
|
"knip": "^5.27.2",
|
||||||
@@ -114,6 +113,7 @@
|
|||||||
"unique-names-generator": "^4.6.0",
|
"unique-names-generator": "^4.6.0",
|
||||||
"vaul": "^1.0.0",
|
"vaul": "^1.0.0",
|
||||||
"vite": "^5.0.0",
|
"vite": "^5.0.0",
|
||||||
|
"vite-plugin-compression2": "^1.3.1",
|
||||||
"vite-plugin-html-template": "^1.1.0",
|
"vite-plugin-html-template": "^1.1.0",
|
||||||
"vite-plugin-svgr": "^4.0.0",
|
"vite-plugin-svgr": "^4.0.0",
|
||||||
"vitest": "^2.0.0",
|
"vitest": "^2.0.0",
|
||||||
|
|||||||
6
src/@types/global.d.ts
vendored
6
src/@types/global.d.ts
vendored
@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import "matrix-js-sdk/src/@types/global";
|
import "matrix-js-sdk/src/@types/global";
|
||||||
|
import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
|
||||||
import { Controls } from "../controls";
|
import { Controls } from "../controls";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@@ -23,4 +24,9 @@ declare global {
|
|||||||
// Safari only supports this prefixed, so tell the type system about it
|
// Safari only supports this prefixed, so tell the type system about it
|
||||||
webkitRequestFullscreen: () => void;
|
webkitRequestFullscreen: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
namespace Intl {
|
||||||
|
// Add DurationFormat as part of the Intl namespace because we polyfill it
|
||||||
|
const DurationFormat: typeof PolyfillDurationFormat;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
src/@types/i18next.d.ts
vendored
2
src/@types/i18next.d.ts
vendored
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
|
|||||||
|
|
||||||
import "i18next";
|
import "i18next";
|
||||||
// import all namespaces (for the default language, only)
|
// import all namespaces (for the default language, only)
|
||||||
import app from "../../public/locales/en-GB/app.json";
|
import app from "../../locales/en-GB/app.json";
|
||||||
|
|
||||||
declare module "i18next" {
|
declare module "i18next" {
|
||||||
interface CustomTypeOptions {
|
interface CustomTypeOptions {
|
||||||
|
|||||||
@@ -16,19 +16,13 @@ import {
|
|||||||
useMemo,
|
useMemo,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import {
|
|
||||||
ClientEvent,
|
|
||||||
ICreateClientOpts,
|
|
||||||
MatrixClient,
|
|
||||||
} from "matrix-js-sdk/src/client";
|
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
|
import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
|
||||||
import { MatrixError } from "matrix-js-sdk/src/matrix";
|
import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
|
||||||
import { WidgetApi } from "matrix-widget-api";
|
|
||||||
|
|
||||||
|
import type { WidgetApi } from "matrix-widget-api";
|
||||||
import { ErrorView } from "./FullScreenView";
|
import { ErrorView } from "./FullScreenView";
|
||||||
import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
|
|
||||||
import { widget } from "./widget";
|
import { widget } from "./widget";
|
||||||
import {
|
import {
|
||||||
PosthogAnalytics,
|
PosthogAnalytics,
|
||||||
@@ -36,7 +30,6 @@ import {
|
|||||||
} from "./analytics/PosthogAnalytics";
|
} from "./analytics/PosthogAnalytics";
|
||||||
import { translatedError } from "./TranslatedError";
|
import { translatedError } from "./TranslatedError";
|
||||||
import { useEventTarget } from "./useEvents";
|
import { useEventTarget } from "./useEvents";
|
||||||
import { Config } from "./config/Config";
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
@@ -359,7 +352,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
type InitResult = {
|
export type InitResult = {
|
||||||
widgetApi: WidgetApi | null;
|
widgetApi: WidgetApi | null;
|
||||||
client: MatrixClient;
|
client: MatrixClient;
|
||||||
passwordlessUser: boolean;
|
passwordlessUser: boolean;
|
||||||
@@ -376,50 +369,8 @@ async function loadClient(): Promise<InitResult | null> {
|
|||||||
passwordlessUser: false,
|
passwordlessUser: false,
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
// We're running as a standalone application
|
const { initSPA } = await import("./utils/spa");
|
||||||
try {
|
return initSPA(loadSession, clearSession);
|
||||||
const session = loadSession();
|
|
||||||
if (!session) {
|
|
||||||
logger.log("No session stored; continuing without a client");
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
logger.log("Using a standalone client");
|
|
||||||
|
|
||||||
/* eslint-disable camelcase */
|
|
||||||
const { user_id, device_id, access_token, passwordlessUser } = session;
|
|
||||||
const initClientParams: ICreateClientOpts = {
|
|
||||||
baseUrl: Config.defaultHomeserverUrl()!,
|
|
||||||
accessToken: access_token,
|
|
||||||
userId: user_id,
|
|
||||||
deviceId: device_id,
|
|
||||||
fallbackICEServerAllowed: fallbackICEServerAllowed,
|
|
||||||
livekitServiceURL: Config.get().livekit?.livekit_service_url,
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const client = await initClient(initClientParams, true);
|
|
||||||
return {
|
|
||||||
widgetApi: null,
|
|
||||||
client,
|
|
||||||
passwordlessUser,
|
|
||||||
};
|
|
||||||
} catch (err) {
|
|
||||||
if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
|
|
||||||
// We can't use this session anymore, so let's log it out
|
|
||||||
logger.log(
|
|
||||||
"The session from local store is invalid; continuing without a client",
|
|
||||||
);
|
|
||||||
clearSession();
|
|
||||||
// returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
clearSession();
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,9 +9,9 @@ import { expect, test } from "vitest";
|
|||||||
|
|
||||||
import { Initializer } from "../src/initializer";
|
import { Initializer } from "../src/initializer";
|
||||||
|
|
||||||
test("initBeforeReact sets font family from URL param", () => {
|
test("initBeforeReact sets font family from URL param", async () => {
|
||||||
window.location.hash = "#?font=DejaVu Sans";
|
window.location.hash = "#?font=DejaVu Sans";
|
||||||
Initializer.initBeforeReact();
|
await Initializer.initBeforeReact();
|
||||||
expect(
|
expect(
|
||||||
getComputedStyle(document.documentElement).getPropertyValue(
|
getComputedStyle(document.documentElement).getPropertyValue(
|
||||||
"--font-family",
|
"--font-family",
|
||||||
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", () => {
|
|||||||
).toBe('"DejaVu Sans"');
|
).toBe('"DejaVu Sans"');
|
||||||
});
|
});
|
||||||
|
|
||||||
test("initBeforeReact sets font scale from URL param", () => {
|
test("initBeforeReact sets font scale from URL param", async () => {
|
||||||
window.location.hash = "#?fontScale=1.2";
|
window.location.hash = "#?fontScale=1.2";
|
||||||
Initializer.initBeforeReact();
|
await Initializer.initBeforeReact();
|
||||||
expect(
|
expect(
|
||||||
getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
|
getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
|
||||||
).toBe("1.2");
|
).toBe("1.2");
|
||||||
|
|||||||
@@ -5,18 +5,85 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
Please see LICENSE in the repository root for full details.
|
Please see LICENSE in the repository root for full details.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import i18n from "i18next";
|
import i18n, {
|
||||||
|
type BackendModule,
|
||||||
|
type ReadCallback,
|
||||||
|
type ResourceKey,
|
||||||
|
} from "i18next";
|
||||||
import { initReactI18next } from "react-i18next";
|
import { initReactI18next } from "react-i18next";
|
||||||
import LanguageDetector from "i18next-browser-languagedetector";
|
import LanguageDetector from "i18next-browser-languagedetector";
|
||||||
import Backend from "i18next-http-backend";
|
|
||||||
import * as Sentry from "@sentry/react";
|
import * as Sentry from "@sentry/react";
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
|
import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
|
||||||
|
import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";
|
||||||
|
|
||||||
import { getUrlParams } from "./UrlParams";
|
import { getUrlParams } from "./UrlParams";
|
||||||
import { Config } from "./config/Config";
|
import { Config } from "./config/Config";
|
||||||
import { ElementCallOpenTelemetry } from "./otel/otel";
|
import { ElementCallOpenTelemetry } from "./otel/otel";
|
||||||
import { platform } from "./Platform";
|
import { platform } from "./Platform";
|
||||||
|
|
||||||
|
// This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
|
||||||
|
// {
|
||||||
|
// "../locales/en-GB/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
|
||||||
|
// ...
|
||||||
|
// }
|
||||||
|
const locales = import.meta.glob<string>("../locales/*/*.json", {
|
||||||
|
query: "?url",
|
||||||
|
import: "default",
|
||||||
|
eager: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getLocaleUrl = (
|
||||||
|
language: string,
|
||||||
|
namespace: string,
|
||||||
|
): string | undefined => locales[`../locales/${language}/${namespace}.json`];
|
||||||
|
|
||||||
|
const supportedLngs = [
|
||||||
|
...new Set(
|
||||||
|
Object.keys(locales).map((url) => {
|
||||||
|
// The URLs are of the form ../locales/en-GB/app.json
|
||||||
|
// This extracts the language code from the URL
|
||||||
|
const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
|
||||||
|
if (!lang) {
|
||||||
|
throw new Error(`Could not parse locale URL ${url}`);
|
||||||
|
}
|
||||||
|
return lang;
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
// A backend that fetches the locale files from the URLs generated by the glob above
|
||||||
|
const Backend = {
|
||||||
|
type: "backend",
|
||||||
|
init(): void {},
|
||||||
|
read(language: string, namespace: string, callback: ReadCallback): void {
|
||||||
|
(async (): Promise<ResourceKey> => {
|
||||||
|
const url = getLocaleUrl(language, namespace);
|
||||||
|
if (!url) {
|
||||||
|
throw new Error(
|
||||||
|
`Namespace ${namespace} for locale ${language} not found`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
credentials: "omit",
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw Error(`Failed to fetch ${url}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
})().then(
|
||||||
|
(data) => callback(null, data),
|
||||||
|
(error) => callback(error, null),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
} satisfies BackendModule;
|
||||||
|
|
||||||
enum LoadState {
|
enum LoadState {
|
||||||
None,
|
None,
|
||||||
Loading,
|
Loading,
|
||||||
@@ -41,10 +108,17 @@ export class Initializer {
|
|||||||
return Initializer.internalInstance?.isInitialized;
|
return Initializer.internalInstance?.isInitialized;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static initBeforeReact(): void {
|
public static async initBeforeReact(): Promise<void> {
|
||||||
// this maybe also needs to return a promise in the future,
|
const polyfills: Promise<unknown>[] = [];
|
||||||
// if we have to do async inits before showing the loading screen
|
if (shouldPolyfillSegmenter()) {
|
||||||
// but this should be avoided if possible
|
polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldPolyfillDurationFormat()) {
|
||||||
|
polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(polyfills);
|
||||||
|
|
||||||
//i18n
|
//i18n
|
||||||
const languageDetector = new LanguageDetector();
|
const languageDetector = new LanguageDetector();
|
||||||
@@ -54,7 +128,7 @@ export class Initializer {
|
|||||||
lookup: () => getUrlParams().lang ?? undefined,
|
lookup: () => getUrlParams().lang ?? undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
i18n
|
await i18n
|
||||||
.use(Backend)
|
.use(Backend)
|
||||||
.use(languageDetector)
|
.use(languageDetector)
|
||||||
.use(initReactI18next)
|
.use(initReactI18next)
|
||||||
@@ -65,6 +139,7 @@ export class Initializer {
|
|||||||
nsSeparator: false,
|
nsSeparator: false,
|
||||||
pluralSeparator: "_",
|
pluralSeparator: "_",
|
||||||
contextSeparator: "|",
|
contextSeparator: "|",
|
||||||
|
supportedLngs,
|
||||||
interpolation: {
|
interpolation: {
|
||||||
escapeValue: false, // React has built-in XSS protections
|
escapeValue: false, // React has built-in XSS protections
|
||||||
},
|
},
|
||||||
@@ -74,9 +149,6 @@ export class Initializer {
|
|||||||
order: ["urlFragment", "navigator"],
|
order: ["urlFragment", "navigator"],
|
||||||
caches: [],
|
caches: [],
|
||||||
},
|
},
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
logger.error("Failed to initialize i18n", e);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Custom Themeing
|
// Custom Themeing
|
||||||
|
|||||||
23
src/main.tsx
23
src/main.tsx
@@ -20,8 +20,6 @@ import {
|
|||||||
setLogExtension as setLKLogExtension,
|
setLogExtension as setLKLogExtension,
|
||||||
setLogLevel as setLKLogLevel,
|
setLogLevel as setLKLogLevel,
|
||||||
} from "livekit-client";
|
} from "livekit-client";
|
||||||
import "@formatjs/intl-segmenter/polyfill";
|
|
||||||
import "@formatjs/intl-durationformat/polyfill";
|
|
||||||
|
|
||||||
import { App } from "./App";
|
import { App } from "./App";
|
||||||
import { init as initRageshake } from "./settings/rageshake";
|
import { init as initRageshake } from "./settings/rageshake";
|
||||||
@@ -57,12 +55,17 @@ if (fatalError !== null) {
|
|||||||
throw fatalError; // Stop the app early
|
throw fatalError; // Stop the app early
|
||||||
}
|
}
|
||||||
|
|
||||||
Initializer.initBeforeReact();
|
Initializer.initBeforeReact()
|
||||||
|
.then(() => {
|
||||||
|
const history = createBrowserHistory();
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
root.render(
|
||||||
|
<StrictMode>
|
||||||
root.render(
|
<App history={history} />
|
||||||
<StrictMode>
|
</StrictMode>,
|
||||||
<App history={history} />
|
);
|
||||||
</StrictMode>,
|
})
|
||||||
);
|
.catch((e) => {
|
||||||
|
logger.error("Failed to initialize app", e);
|
||||||
|
root.render(e.message);
|
||||||
|
});
|
||||||
|
|||||||
@@ -11,19 +11,12 @@ import {
|
|||||||
useCallback,
|
useCallback,
|
||||||
useEffect,
|
useEffect,
|
||||||
useState,
|
useState,
|
||||||
|
useMemo,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { DurationFormat } from "@formatjs/intl-durationformat";
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
import { ReactionIndicator } from "./ReactionIndicator";
|
import { ReactionIndicator } from "./ReactionIndicator";
|
||||||
|
|
||||||
const durationFormatter = new DurationFormat(undefined, {
|
|
||||||
minutesDisplay: "always",
|
|
||||||
secondsDisplay: "always",
|
|
||||||
hoursDisplay: "auto",
|
|
||||||
style: "digital",
|
|
||||||
});
|
|
||||||
|
|
||||||
export function RaisedHandIndicator({
|
export function RaisedHandIndicator({
|
||||||
raisedHandTime,
|
raisedHandTime,
|
||||||
miniature,
|
miniature,
|
||||||
@@ -38,6 +31,17 @@ export function RaisedHandIndicator({
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [raisedHandDuration, setRaisedHandDuration] = useState("");
|
const [raisedHandDuration, setRaisedHandDuration] = useState("");
|
||||||
|
|
||||||
|
const durationFormatter = useMemo(
|
||||||
|
() =>
|
||||||
|
new Intl.DurationFormat(undefined, {
|
||||||
|
minutesDisplay: "always",
|
||||||
|
secondsDisplay: "always",
|
||||||
|
hoursDisplay: "auto",
|
||||||
|
style: "digital",
|
||||||
|
}),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
|
const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
|
||||||
(event) => {
|
(event) => {
|
||||||
if (!onClick) {
|
if (!onClick) {
|
||||||
@@ -69,7 +73,7 @@ export function RaisedHandIndicator({
|
|||||||
calculateTime();
|
calculateTime();
|
||||||
const to = setInterval(calculateTime, 1000);
|
const to = setInterval(calculateTime, 1000);
|
||||||
return (): void => clearInterval(to);
|
return (): void => clearInterval(to);
|
||||||
}, [setRaisedHandDuration, raisedHandTime, showTimer]);
|
}, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);
|
||||||
|
|
||||||
if (!raisedHandTime) {
|
if (!raisedHandTime) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
64
src/utils/spa.ts
Normal file
64
src/utils/spa.ts
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
/*
|
||||||
|
Copyright 2024 New Vector Ltd.
|
||||||
|
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
Please see LICENSE in the repository root for full details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { ICreateClientOpts } from "matrix-js-sdk/src/client";
|
||||||
|
import { MatrixError } from "matrix-js-sdk/src/http-api";
|
||||||
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
|
|
||||||
|
import { Config } from "../config/Config";
|
||||||
|
import { fallbackICEServerAllowed, initClient } from "./matrix";
|
||||||
|
import type { InitResult, Session } from "../ClientContext";
|
||||||
|
|
||||||
|
export async function initSPA(
|
||||||
|
loadSession: () => Session | undefined,
|
||||||
|
clearSession: () => void,
|
||||||
|
): Promise<InitResult | null> {
|
||||||
|
// We're running as a standalone application
|
||||||
|
try {
|
||||||
|
const session = loadSession();
|
||||||
|
if (!session) {
|
||||||
|
logger.log("No session stored; continuing without a client");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
logger.log("Using a standalone client");
|
||||||
|
|
||||||
|
/* eslint-disable camelcase */
|
||||||
|
const { user_id, device_id, access_token, passwordlessUser } = session;
|
||||||
|
const initClientParams: ICreateClientOpts = {
|
||||||
|
baseUrl: Config.defaultHomeserverUrl()!,
|
||||||
|
accessToken: access_token,
|
||||||
|
userId: user_id,
|
||||||
|
deviceId: device_id,
|
||||||
|
fallbackICEServerAllowed,
|
||||||
|
livekitServiceURL: Config.get().livekit?.livekit_service_url,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const client = await initClient(initClientParams, true);
|
||||||
|
return {
|
||||||
|
widgetApi: null,
|
||||||
|
client,
|
||||||
|
passwordlessUser,
|
||||||
|
};
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
|
||||||
|
// We can't use this session anymore, so let's log it out
|
||||||
|
logger.log(
|
||||||
|
"The session from local store is invalid; continuing without a client",
|
||||||
|
);
|
||||||
|
clearSession();
|
||||||
|
// returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
clearSession();
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -6,6 +6,8 @@ Please see LICENSE in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import "global-jsdom/register";
|
import "global-jsdom/register";
|
||||||
|
import "@formatjs/intl-durationformat/polyfill";
|
||||||
|
import "@formatjs/intl-segmenter/polyfill";
|
||||||
import i18n from "i18next";
|
import i18n from "i18next";
|
||||||
import posthog from "posthog-js";
|
import posthog from "posthog-js";
|
||||||
import { initReactI18next } from "react-i18next";
|
import { initReactI18next } from "react-i18next";
|
||||||
@@ -14,6 +16,7 @@ import { cleanup } from "@testing-library/react";
|
|||||||
import "vitest-axe/extend-expect";
|
import "vitest-axe/extend-expect";
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
|
|
||||||
|
import EN_GB from "../locales/en-GB/app.json";
|
||||||
import { Config } from "./config/Config";
|
import { Config } from "./config/Config";
|
||||||
|
|
||||||
// Bare-minimum i18n config
|
// Bare-minimum i18n config
|
||||||
@@ -22,6 +25,13 @@ i18n
|
|||||||
.init({
|
.init({
|
||||||
lng: "en-GB",
|
lng: "en-GB",
|
||||||
fallbackLng: "en-GB",
|
fallbackLng: "en-GB",
|
||||||
|
supportedLngs: ["en-GB"],
|
||||||
|
// We embed the translations, so that it never needs to fetch
|
||||||
|
resources: {
|
||||||
|
"en-GB": {
|
||||||
|
app: EN_GB,
|
||||||
|
},
|
||||||
|
},
|
||||||
interpolation: {
|
interpolation: {
|
||||||
escapeValue: false, // React has built-in XSS protections
|
escapeValue: false, // React has built-in XSS protections
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { defineConfig, loadEnv } from "vite";
|
import { defineConfig, loadEnv } from "vite";
|
||||||
|
import { compression } from "vite-plugin-compression2";
|
||||||
import svgrPlugin from "vite-plugin-svgr";
|
import svgrPlugin from "vite-plugin-svgr";
|
||||||
import htmlTemplate from "vite-plugin-html-template";
|
import htmlTemplate from "vite-plugin-html-template";
|
||||||
import { codecovVitePlugin } from "@codecov/vite-plugin";
|
import { codecovVitePlugin } from "@codecov/vite-plugin";
|
||||||
@@ -38,6 +39,10 @@ export default defineConfig(({ mode }) => {
|
|||||||
bundleName: "element-call",
|
bundleName: "element-call",
|
||||||
uploadToken: process.env.CODECOV_TOKEN,
|
uploadToken: process.env.CODECOV_TOKEN,
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
compression({
|
||||||
|
exclude: [/config.json/],
|
||||||
|
}),
|
||||||
];
|
];
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@@ -60,6 +65,25 @@ export default defineConfig(({ mode }) => {
|
|||||||
},
|
},
|
||||||
build: {
|
build: {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
assetFileNames: ({ originalFileNames }) => {
|
||||||
|
if (originalFileNames) {
|
||||||
|
for (const name of originalFileNames) {
|
||||||
|
// Custom asset name for locales to include the locale code in the filename
|
||||||
|
const match = name.match(/locales\/([^/]+)\/(.+)\.json$/);
|
||||||
|
if (match) {
|
||||||
|
const [, locale, filename] = match;
|
||||||
|
return `assets/${locale}-${filename}-[hash].json`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default naming fallback
|
||||||
|
return "assets/[name]-[hash][extname]";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins,
|
plugins,
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|||||||
35
yarn.lock
35
yarn.lock
@@ -2542,7 +2542,7 @@
|
|||||||
"@react-spring/shared" "~9.7.5"
|
"@react-spring/shared" "~9.7.5"
|
||||||
"@react-spring/types" "~9.7.5"
|
"@react-spring/types" "~9.7.5"
|
||||||
|
|
||||||
"@rollup/pluginutils@^5.1.3":
|
"@rollup/pluginutils@^5.1.0", "@rollup/pluginutils@^5.1.3":
|
||||||
version "5.1.3"
|
version "5.1.3"
|
||||||
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
|
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
|
||||||
integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
|
integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
|
||||||
@@ -4138,13 +4138,6 @@ cosmiconfig@^8.1.3:
|
|||||||
parse-json "^5.2.0"
|
parse-json "^5.2.0"
|
||||||
path-type "^4.0.0"
|
path-type "^4.0.0"
|
||||||
|
|
||||||
cross-fetch@4.0.0:
|
|
||||||
version "4.0.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
|
|
||||||
integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
|
|
||||||
dependencies:
|
|
||||||
node-fetch "^2.6.12"
|
|
||||||
|
|
||||||
cross-spawn@^7.0.0, cross-spawn@^7.0.2:
|
cross-spawn@^7.0.0, cross-spawn@^7.0.2:
|
||||||
version "7.0.3"
|
version "7.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
|
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
|
||||||
@@ -5469,13 +5462,6 @@ i18next-browser-languagedetector@^8.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.23.2"
|
"@babel/runtime" "^7.23.2"
|
||||||
|
|
||||||
i18next-http-backend@^2.0.0:
|
|
||||||
version "2.6.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz#b25516446ae6f251ce8231e70e6ffbca833d46a5"
|
|
||||||
integrity sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==
|
|
||||||
dependencies:
|
|
||||||
cross-fetch "4.0.0"
|
|
||||||
|
|
||||||
i18next-parser@^9.0.0:
|
i18next-parser@^9.0.0:
|
||||||
version "9.0.2"
|
version "9.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/i18next-parser/-/i18next-parser-9.0.2.tgz#f9d627422d33c352967556c8724975d58f1f5a95"
|
resolved "https://registry.yarnpkg.com/i18next-parser/-/i18next-parser-9.0.2.tgz#f9d627422d33c352967556c8724975d58f1f5a95"
|
||||||
@@ -6331,7 +6317,7 @@ node-addon-api@^7.0.0:
|
|||||||
resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
|
resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
|
||||||
integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
|
integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
|
||||||
|
|
||||||
node-fetch@^2.6.12, node-fetch@^2.6.7:
|
node-fetch@^2.6.7:
|
||||||
version "2.7.0"
|
version "2.7.0"
|
||||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
|
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
|
||||||
integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
|
integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
|
||||||
@@ -7927,6 +7913,11 @@ tapable@^2.2.0:
|
|||||||
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
|
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
|
||||||
integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
|
integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
|
||||||
|
|
||||||
|
tar-mini@^0.2.0:
|
||||||
|
version "0.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/tar-mini/-/tar-mini-0.2.0.tgz#2b2cdc215f5b83b0ab8ce363dc9ded22de51849b"
|
||||||
|
integrity sha512-+qfUHz700DWnRutdUsxRRVZ38G1Qr27OetwaMYTdg8hcPxf46U0S1Zf76dQMWRBmusOt2ZCK5kbIaiLkoGO7WQ==
|
||||||
|
|
||||||
teex@^1.0.1:
|
teex@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/teex/-/teex-1.0.1.tgz#b8fa7245ef8e8effa8078281946c85ab780a0b12"
|
resolved "https://registry.yarnpkg.com/teex/-/teex-1.0.1.tgz#b8fa7245ef8e8effa8078281946c85ab780a0b12"
|
||||||
@@ -8430,6 +8421,16 @@ vite-node@2.1.4:
|
|||||||
pathe "^1.1.2"
|
pathe "^1.1.2"
|
||||||
vite "^5.0.0"
|
vite "^5.0.0"
|
||||||
|
|
||||||
|
vite-plugin-compression2@^1.3.1:
|
||||||
|
version "1.3.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/vite-plugin-compression2/-/vite-plugin-compression2-1.3.1.tgz#ac2a512f8ca90a76687add6cf441000dd2c41485"
|
||||||
|
integrity sha512-UMr66CFu+RVPiD8E3iaX9BdZjCgO+lzzaAPAZvL5YgwH6FU4OR/MulJEyp9wq9EKoO6ErjUtPpaiDi3hvzv79Q==
|
||||||
|
dependencies:
|
||||||
|
"@rollup/pluginutils" "^5.1.0"
|
||||||
|
tar-mini "^0.2.0"
|
||||||
|
optionalDependencies:
|
||||||
|
vite "^5.3.4"
|
||||||
|
|
||||||
vite-plugin-html-template@^1.1.0:
|
vite-plugin-html-template@^1.1.0:
|
||||||
version "1.2.2"
|
version "1.2.2"
|
||||||
resolved "https://registry.yarnpkg.com/vite-plugin-html-template/-/vite-plugin-html-template-1.2.2.tgz#d263c18dcf5f5e54bc74894546fd0ed993191f2f"
|
resolved "https://registry.yarnpkg.com/vite-plugin-html-template/-/vite-plugin-html-template-1.2.2.tgz#d263c18dcf5f5e54bc74894546fd0ed993191f2f"
|
||||||
@@ -8446,7 +8447,7 @@ vite-plugin-svgr@^4.0.0:
|
|||||||
"@svgr/core" "^8.1.0"
|
"@svgr/core" "^8.1.0"
|
||||||
"@svgr/plugin-jsx" "^8.1.0"
|
"@svgr/plugin-jsx" "^8.1.0"
|
||||||
|
|
||||||
vite@^5.0.0:
|
vite@^5.0.0, vite@^5.3.4:
|
||||||
version "5.4.11"
|
version "5.4.11"
|
||||||
resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
|
resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
|
||||||
integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
|
integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
|
||||||
|
|||||||
Reference in New Issue
Block a user