diff --git a/.gitignore b/.gitignore index 089600eb..78f9f348 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ *.sublime-project *.sublime-workspace +.DS_Store node_modules fetchlogs sessionexports diff --git a/README.md b/README.md index 6ee25ae6..6c447024 100644 --- a/README.md +++ b/README.md @@ -10,13 +10,34 @@ Hydrogen's goals are: - It is a standalone webapp, but can also be easily embedded into an existing website/webapp to add chat capabilities. - Loading (unused) parts of the application after initial page load should be supported +For embedded usage, see the [SDK instructions](doc/SDK.md). + If you find this interesting, come and discuss on [`#hydrogen:matrix.org`](https://matrix.to/#/#hydrogen:matrix.org). # How to use -Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can run it locally `yarn install` (only the first time) and `yarn start` in the terminal, and point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md). +Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can also deploy Hydrogen on your own web server: -Hydrogen uses symbolic links in the codebase, so if you are on Windows, have a look at [making git & symlinks work](https://github.com/git-for-windows/git/wiki/Symbolic-Links) there. + 1. Download the [latest release package](https://github.com/vector-im/hydrogen-web/releases). + 1. Extract the package to the public directory of your web server. + 1. If this is your first deploy: + 1. copy `config.sample.json` to `config.json` and if needed, make any modifications (unless you've set up your own [sygnal](https://github.com/matrix-org/sygnal) instance, you don't need to change anything in the `push` section). + 1. Disable caching entirely on the server for: + - `index.html` + - `sw.js` + - `config.json` + - All theme manifests referenced in the `themeManifests` of `config.json`, these files are typically called `theme-{name}.json`. + + These resources will still be cached client-side by the service worker. Because of this; you'll still need to refresh the app twice before config.json changes are applied. + +## Set up a dev environment + +You can run Hydrogen locally by the following commands in the terminal: + + - `yarn install` (only the first time) + - `yarn start` in the terminal + +Now point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md). # FAQ diff --git a/doc/SDK.md b/doc/SDK.md index 3f5bdb09..c8f5197f 100644 --- a/doc/SDK.md +++ b/doc/SDK.md @@ -48,8 +48,8 @@ const assetPaths = { wasmBundle: olmJsPath } }; -import "hydrogen-view-sdk/theme-element-light.css"; -// OR import "hydrogen-view-sdk/theme-element-dark.css"; +import "hydrogen-view-sdk/assets/theme-element-light.css"; +// OR import "hydrogen-view-sdk/assets/theme-element-dark.css"; async function main() { const app = document.querySelector('#app')! diff --git a/doc/THEMING.md b/doc/THEMING.md new file mode 100644 index 00000000..b6af27cf --- /dev/null +++ b/doc/THEMING.md @@ -0,0 +1,169 @@ +# Theming Documentation +## Basic Architecture +A **theme collection** in Hydrogen is represented by a `manifest.json` file and a `theme.css` file. +The manifest specifies variants (eg: dark,light ...) each of which is a **theme** and maps to a single css file in the build output. + +Each such theme is produced by changing the values of variables in the base `theme.css` file with those specified in the variant section of the manifest: + +![](images/theming-architecture.png) + +More in depth explanations can be found in later sections. + +## Structure of `manifest.json` +[See theme.ts](../src/platform/types/theme.ts) + +## Variables +CSS variables specific to a particular variant are specified in the `variants` section of the manifest: +```json= + "variants": { + "light": { + ... + "variables": { + "background-color-primary": "#fff", + "text-color": "#2E2F32", + } + }, + "dark": { + ... + "variables": { + "background-color-primary": "#21262b", + "text-color": "#fff", + } + } + } +``` + +These variables will appear in the css file (theme.css): +```css= +body { + background-color: var(--background-color-primary); + color: var(--text-color); +} +``` + +During the build process, this would result in the creation of two css files (one for each variant) where the variables are substitued with the corresponding values specified in the manifest: + +*element-light.css*: +```css= +body { + background-color: #fff; + color: #2E2F32; +} +``` + +*element-dark.css*: +```css= +body { + background-color: #21262b; + color: #fff; +} +``` + +## Derived Variables +In addition to simple substitution of variables in the stylesheet, it is also possible to instruct the build system to first produce a new value from the base variable value before the substitution. + +Such derived variables have the form `base_css_variable--operation-arg` and can be read as: +apply `operation` to `base_css_variable` with argument `arg`. + +Continuing with the previous example, it possible to specify: +```css= +.left-panel { + /* background color should be 20% more darker + than background-color-primary */ + background-color: var(--background-color-primary--darker-20); +} +``` + +Currently supported operations are: + +| Operation | Argument | Operates On | +| -------- | -------- | -------- | +| darker | percentage | color | +| lighter | percentage | color | + +## Aliases +It is possible give aliases to variables in the `theme.css` file: +```css= +:root { + font-size: 10px; + /* Theme aliases */ + --icon-color: var(--background-color-secondary--darker-40); +} +``` +It is possible to further derive from these aliased variables: +```css= +div { + background: var(--icon-color--darker-20); + --my-alias: var(--icon-color--darker-20); + /* Derive from aliased variable */ + color: var(--my-alias--lighter-15); +} +``` + + +## Colorizing svgs +Along with a change in color-scheme, it may be necessary to change the colors in the svg icons and images. +This can be done by supplying the preferred colors with query parameters: +`my-awesome-logo.svg?primary=base-variable-1&secondary=base-variable-2` + +This instructs the build system to colorize the svg with the given primary and secondary colors. +`base-variable-1` and `base-variable-2` are the css-variables specified in the `variables` section of the manifest. + +For colorizing svgs, the source svg must use `#ff00ff` as the primary color and `#00ffff` as the secondary color: + + + +| ![](images/svg-icon-example.png) | ![](images/coloring-process.png) | +| :--: |:--: | +| **original source image** | **transformation process** | + +## Creating your own theme variant in Hydrogen +If you're looking to change the color-scheme of the existing Element theme, you only need to add your own variant to the existing `manifest.json`. + +The steps are fairly simple: +1. Copy over an existing variant to the variants section of the manifest. +2. Change `dark`, `default` and `name` fields. +3. Give new values to each variable in the `variables` section. +4. Build hydrogen. + +## Creating your own theme collection in Hydrogen +If a theme variant does not solve your needs, you can create a new theme collection with a different base `theme.css` file. +1. Create a directory for your new theme-collection under `src/platform/web/ui/css/themes/`. +2. Create `manifest.json` and `theme.css` files within the newly created directory. +3. Populate `manifest.json` with the base css variables you wish to use. +4. Write styles in your `theme.css` file using the base variables, derived variables and colorized svg icons. +5. Tell the build system where to find this theme-collection by providing the location of this directory to the `themeBuilder` plugin in `vite.config.js`: +```json= +... +themeBuilder({ + themeConfig: { + themes: { + element: "./src/platform/web/ui/css/themes/element", + awesome: "path/to/theme-directory" + }, + default: "element", + }, + compiledVariables, +}), +... +``` +6. Build Hydrogen. + +## Changing the default theme +To change the default theme used in Hydrogen, modify the `defaultTheme` field in `config.json` file (which can be found in the build output): +```json= +"defaultTheme": { + "light": theme-id, + "dark": theme-id +} +``` + +Here *theme-id* is of the form `theme-variant` where `theme` is the key used when specifying the manifest location of the theme collection in `vite.config.js` and `variant` is the key used in variants section of the manifest. + +Some examples of theme-ids are `element-dark` and `element-light`. + +To find the theme-id of some theme, you can look at the built-asset section of the manifest in the build output. + +This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa. + +**You'll need to reload twice so that Hydrogen picks up the config changes!** diff --git a/doc/images/coloring-process.png b/doc/images/coloring-process.png new file mode 100644 index 00000000..5de0d79a Binary files /dev/null and b/doc/images/coloring-process.png differ diff --git a/doc/images/svg-icon-example.png b/doc/images/svg-icon-example.png new file mode 100644 index 00000000..daf40258 Binary files /dev/null and b/doc/images/svg-icon-example.png differ diff --git a/doc/images/theming-architecture.png b/doc/images/theming-architecture.png new file mode 100644 index 00000000..165f7faf Binary files /dev/null and b/doc/images/theming-architecture.png differ diff --git a/package.json b/package.json index 28b726e2..e3f82fa1 100644 --- a/package.json +++ b/package.json @@ -1,19 +1,24 @@ { "name": "hydrogen-web", - "version": "0.2.28", + "version": "0.2.33", "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB", "directories": { "doc": "doc" }, + "enginesStrict": { + "node": ">=15" + }, "scripts": { "lint": "eslint --cache src/", "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts", "lint-ci": "eslint src/", "test": "impunity --entry-point src/platform/web/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/", "test:postcss": "impunity --entry-point scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js", + "test:sdk": "yarn build:sdk && cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js", "start": "vite --port 3000", - "build": "vite build", - "build:sdk": "./scripts/sdk/build.sh" + "build": "vite build && ./scripts/cleanup.sh", + "build:sdk": "./scripts/sdk/build.sh", + "watch:sdk": "./scripts/sdk/build.sh && yarn run vite build -c vite.sdk-lib-config.js --watch" }, "repository": { "type": "git", @@ -48,11 +53,11 @@ "regenerator-runtime": "^0.13.7", "text-encoding": "^0.7.0", "typescript": "^4.4", - "vite": "^2.6.14", + "vite": "^2.9.8", "xxhashjs": "^0.2.2" }, "dependencies": { - "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz", + "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz", "another-json": "^0.2.0", "base64-arraybuffer": "^0.2.0", "dompurify": "^2.3.0", diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index e7a2bb2b..43a21623 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -const path = require('path'); +const path = require('path').posix; async function readCSSSource(location) { const fs = require("fs").promises; @@ -31,6 +31,18 @@ function appendVariablesToCSS(variables, cssSource) { return cssSource + getRootSectionWithVariables(variables); } +function addThemesToConfig(bundle, manifestLocations, defaultThemes) { + for (const [fileName, info] of Object.entries(bundle)) { + if (fileName === "config.json") { + const source = new TextDecoder().decode(info.source); + const config = JSON.parse(source); + config["themeManifests"] = manifestLocations; + config["defaultTheme"] = defaultThemes; + info.source = new TextEncoder().encode(JSON.stringify(config, undefined, 2)); + } + } +} + function parseBundle(bundle) { const chunkMap = new Map(); const assetMap = new Map(); @@ -72,7 +84,7 @@ function parseBundle(bundle) { } module.exports = function buildThemes(options) { - let manifest, variants, defaultDark, defaultLight; + let manifest, variants, defaultDark, defaultLight, defaultThemes = {}; let isDevelopment = false; const virtualModuleId = '@theme/' const resolvedVirtualModuleId = '\0' + virtualModuleId; @@ -99,9 +111,11 @@ module.exports = function buildThemes(options) { // This is the default theme, stash the file name for later if (details.dark) { defaultDark = fileName; + defaultThemes["dark"] = `${name}-${variant}`; } else { defaultLight = fileName; + defaultThemes["light"] = `${name}-${variant}`; } } // emit the css as built theme bundle @@ -215,6 +229,7 @@ module.exports = function buildThemes(options) { type: "text/css", media: "(prefers-color-scheme: dark)", href: `./${darkThemeLocation}`, + class: "theme", } }, { @@ -224,31 +239,43 @@ module.exports = function buildThemes(options) { type: "text/css", media: "(prefers-color-scheme: light)", href: `./${lightThemeLocation}`, + class: "theme", } }, ]; }, generateBundle(_, bundle) { + // assetMap: Mapping from asset-name (eg: element-dark.css) to AssetInfo + // chunkMap: Mapping from theme-location (eg: hydrogen-web/src/.../css/themes/element) to a list of ChunkInfo + // types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle); + const manifestLocations = []; for (const [location, chunkArray] of chunkMap) { const manifest = require(`${location}/manifest.json`); const compiledVariables = options.compiledVariables.get(location); const derivedVariables = compiledVariables["derived-variables"]; const icon = compiledVariables["icon"]; + const builtAssets = {}; + for (const chunk of chunkArray) { + const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); + builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; + } manifest.source = { - "built-asset": chunkArray.map(chunk => assetMap.get(chunk.fileName).fileName), + "built-assets": builtAssets, "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName, "derived-variables": derivedVariables, "icon": icon }; const name = `theme-${manifest.name}.json`; + manifestLocations.push(`assets/${name}`); this.emitFile({ type: "asset", name, source: JSON.stringify(manifest), }); } + addThemesToConfig(bundle, manifestLocations, defaultThemes); }, } } diff --git a/scripts/build-plugins/service-worker.js b/scripts/build-plugins/service-worker.js index 805f6000..85619545 100644 --- a/scripts/build-plugins/service-worker.js +++ b/scripts/build-plugins/service-worker.js @@ -8,7 +8,7 @@ function contentHash(str) { return hasher.digest(); } -function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) { +function injectServiceWorker(swFile, findUnhashedFileNamesFromBundle, placeholdersPerChunk) { const swName = path.basename(swFile); let root; let version; @@ -31,6 +31,7 @@ function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) { logger = config.logger; }, generateBundle: async function(options, bundle) { + const otherUnhashedFiles = findUnhashedFileNamesFromBundle(bundle); const unhashedFilenames = [swName].concat(otherUnhashedFiles); const unhashedFileContentMap = unhashedFilenames.reduce((map, fileName) => { const chunkOrAsset = bundle[fileName]; diff --git a/scripts/cleanup.sh b/scripts/cleanup.sh new file mode 100755 index 00000000..6917af5e --- /dev/null +++ b/scripts/cleanup.sh @@ -0,0 +1,3 @@ +#!/bin/sh +# Remove icons created in .tmp +rm -rf .tmp diff --git a/scripts/package.sh b/scripts/package.sh index 8146fe58..6ad136a3 100755 --- a/scripts/package.sh +++ b/scripts/package.sh @@ -2,6 +2,9 @@ VERSION=$(jq -r ".version" package.json) PACKAGE=hydrogen-web-$VERSION.tar.gz yarn build pushd target +# move config file so we don't override it +# when deploying a new version +mv config.json config.sample.json tar -czvf ../$PACKAGE ./ popd echo $PACKAGE diff --git a/scripts/postcss/css-compile-variables.js b/scripts/postcss/css-compile-variables.js index 0f58a635..63aef97f 100644 --- a/scripts/postcss/css-compile-variables.js +++ b/scripts/postcss/css-compile-variables.js @@ -30,12 +30,7 @@ const valueParser = require("postcss-value-parser"); * The actual derivation is done outside the plugin in a callback. */ -let aliasMap; -let resolvedMap; -let baseVariables; -let isDark; - -function getValueFromAlias(alias) { +function getValueFromAlias(alias, {aliasMap, baseVariables, resolvedMap}) { const derivedVariable = aliasMap.get(alias); return baseVariables.get(derivedVariable) ?? resolvedMap.get(derivedVariable); } @@ -68,14 +63,15 @@ function parseDeclarationValue(value) { return variables; } -function resolveDerivedVariable(decl, derive) { +function resolveDerivedVariable(decl, derive, maps, isDark) { + const { baseVariables, resolvedMap } = maps; const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/; const variableCollection = parseDeclarationValue(decl.value); for (const variable of variableCollection) { const matches = variable.match(RE_VARIABLE_VALUE); if (matches) { const [, wholeVariable, baseVariable, operation, argument] = matches; - const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable); + const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable, maps); if (!value) { throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`); } @@ -85,7 +81,7 @@ function resolveDerivedVariable(decl, derive) { } } -function extract(decl) { +function extract(decl, {aliasMap, baseVariables}) { if (decl.variable) { // see if right side is of form "var(--foo)" const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1]; @@ -100,7 +96,7 @@ function extract(decl) { } } -function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) { +function addResolvedVariablesToRootSelector(root, {Rule, Declaration}, {resolvedMap}) { const newRule = new Rule({ selector: ":root", source: root.source }); // Add derived css variables to :root resolvedMap.forEach((value, key) => { @@ -110,7 +106,7 @@ function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) { root.append(newRule); } -function populateMapWithDerivedVariables(map, cssFileLocation) { +function populateMapWithDerivedVariables(map, cssFileLocation, {resolvedMap, aliasMap}) { const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1]; const derivedVariables = [ ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))), @@ -133,10 +129,10 @@ function populateMapWithDerivedVariables(map, cssFileLocation) { * @param {Map} opts.compiledVariables - A map that stores derived variables so that manifest source sections can be produced */ module.exports = (opts = {}) => { - aliasMap = new Map(); - resolvedMap = new Map(); - baseVariables = new Map(); - isDark = false; + const aliasMap = new Map(); + const resolvedMap = new Map(); + const baseVariables = new Map(); + const maps = { aliasMap, resolvedMap, baseVariables }; return { postcssPlugin: "postcss-compile-variables", @@ -147,16 +143,16 @@ module.exports = (opts = {}) => { // If this is a runtime theme, don't derive variables. return; } - isDark = cssFileLocation.includes("dark=true"); + const isDark = cssFileLocation.includes("dark=true"); /* Go through the CSS file once to extract all aliases and base variables. We use these when resolving derived variables later. */ - root.walkDecls(decl => extract(decl)); - root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive)); - addResolvedVariablesToRootSelector(root, {Rule, Declaration}); + root.walkDecls(decl => extract(decl, maps)); + root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive, maps, isDark)); + addResolvedVariablesToRootSelector(root, {Rule, Declaration}, maps); if (opts.compiledVariables){ - populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation); + populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation, maps); } // Also produce a mapping from alias to completely resolved color const resolvedAliasMap = new Map(); diff --git a/scripts/postcss/css-url-processor.js b/scripts/postcss/css-url-processor.js index f58818f1..8308e106 100644 --- a/scripts/postcss/css-url-processor.js +++ b/scripts/postcss/css-url-processor.js @@ -16,7 +16,6 @@ limitations under the License. const valueParser = require("postcss-value-parser"); const resolve = require("path").resolve; -let cssPath; function colorsFromURL(url, colorMap) { const params = new URL(`file://${url}`).searchParams; @@ -36,7 +35,7 @@ function colorsFromURL(url, colorMap) { return [primaryColor, secondaryColor]; } -function processURL(decl, replacer, colorMap) { +function processURL(decl, replacer, colorMap, cssPath) { const value = decl.value; const parsed = valueParser(value); parsed.walk(node => { @@ -84,8 +83,8 @@ module.exports = (opts = {}) => { Go through each declaration and if it contains an URL, replace the url with the result of running replacer(url) */ - cssPath = root.source?.input.file.replace(/[^/]*$/, ""); - root.walkDecls(decl => processURL(decl, opts.replacer, colorMap)); + const cssPath = root.source?.input.file.replace(/[^/]*$/, ""); + root.walkDecls(decl => processURL(decl, opts.replacer, colorMap, cssPath)); }, }; }; diff --git a/scripts/postcss/css-url-to-variables.js b/scripts/postcss/css-url-to-variables.js index 1d4666f4..9334032b 100644 --- a/scripts/postcss/css-url-to-variables.js +++ b/scripts/postcss/css-url-to-variables.js @@ -20,13 +20,17 @@ const valueParser = require("postcss-value-parser"); * This plugin extracts content inside url() into css variables and adds the variables to the root section. * This plugin is used in conjunction with css-url-processor plugin to colorize svg icons. */ -let counter; -let urlVariables; const idToPrepend = "icon-url"; -function findAndReplaceUrl(decl) { +function findAndReplaceUrl(decl, urlVariables, counter) { const value = decl.value; - const parsed = valueParser(value); + let parsed; + try { + parsed = valueParser(value); + } catch (err) { + console.log(`Error trying to parse ${decl}`); + throw err; + } parsed.walk(node => { if (node.type !== "function" || node.value !== "url") { return; @@ -35,7 +39,8 @@ function findAndReplaceUrl(decl) { if (!url.match(/\.svg\?primary=.+/)) { return; } - const variableName = `${idToPrepend}-${counter++}`; + const count = counter.next().value; + const variableName = `${idToPrepend}-${count}`; urlVariables.set(variableName, url); node.value = "var"; node.nodes = [{ type: "word", value: `--${variableName}` }]; @@ -43,7 +48,7 @@ function findAndReplaceUrl(decl) { decl.assign({prop: decl.prop, value: parsed.toString()}) } -function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) { +function addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables) { const newRule = new Rule({ selector: ":root", source: root.source }); // Add derived css variables to :root urlVariables.forEach((value, key) => { @@ -53,29 +58,35 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) { root.append(newRule); } -function populateMapWithIcons(map, cssFileLocation) { +function populateMapWithIcons(map, cssFileLocation, urlVariables) { const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1]; const sharedObject = map.get(location); sharedObject["icon"] = Object.fromEntries(urlVariables); } +function *createCounter() { + for (let i = 0; ; ++i) { + yield i; + } +} + /* * * @type {import('postcss').PluginCreator} */ module.exports = (opts = {}) => { - urlVariables = new Map(); - counter = 0; return { postcssPlugin: "postcss-url-to-variable", Once(root, { Rule, Declaration }) { - root.walkDecls(decl => findAndReplaceUrl(decl)); + const urlVariables = new Map(); + const counter = createCounter(); + root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter)); if (urlVariables.size) { - addResolvedVariablesToRootSelector(root, { Rule, Declaration }); + addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables); } if (opts.compiledVariables){ const cssFileLocation = root.source.input.from; - populateMapWithIcons(opts.compiledVariables, cssFileLocation); + populateMapWithIcons(opts.compiledVariables, cssFileLocation, urlVariables); } }, }; diff --git a/scripts/release.sh b/scripts/release.sh index e11bdf14..3357a42b 100755 --- a/scripts/release.sh +++ b/scripts/release.sh @@ -1,3 +1,4 @@ +set -e if [ -z "$1" ]; then echo "provide a new version, current version is $(jq '.version' package.json)" exit 1 diff --git a/scripts/sdk/base-manifest.json b/scripts/sdk/base-manifest.json index 5e408cf7..426b0a30 100644 --- a/scripts/sdk/base-manifest.json +++ b/scripts/sdk/base-manifest.json @@ -2,6 +2,18 @@ "name": "@thirdroom/hydrogen-view-sdk", "description": "Embeddable matrix client library, including view components", "version": "0.0.11", - "main": "./hydrogen.es.js", - "type": "module" + "main": "./lib-build/hydrogen.cjs.js", + "exports": { + ".": { + "import": "./lib-build/hydrogen.es.js", + "require": "./lib-build/hydrogen.cjs.js" + }, + "./paths/vite": "./paths/vite.js", + "./style.css": "./asset-build/assets/theme-element-light.css", + "./theme-element-light.css": "./asset-build/assets/theme-element-light.css", + "./theme-element-dark.css": "./asset-build/assets/theme-element-dark.css", + "./main.js": "./asset-build/assets/main.js", + "./download-sandbox.html": "./asset-build/assets/download-sandbox.html", + "./assets/*": "./asset-build/assets/*" + } } diff --git a/scripts/sdk/build.sh b/scripts/sdk/build.sh index ae3a794e..5e1632d3 100755 --- a/scripts/sdk/build.sh +++ b/scripts/sdk/build.sh @@ -2,8 +2,12 @@ # Exit whenever one of the commands fail with a non-zero exit code set -e set -o pipefail +# Enable extended globs so we can use the `!(filename)` glob syntax +shopt -s extglob -rm -rf target +# Only remove the directory contents instead of the whole directory to maintain +# the `npm link`/`yarn link` symlink +rm -rf target/* yarn run vite build -c vite.sdk-assets-config.js yarn run vite build -c vite.sdk-lib-config.js yarn tsc -p tsconfig-declaration.json @@ -12,19 +16,10 @@ mkdir target/paths # this doesn't work, the ?url imports need to be in the consuming project, so disable for now # ./scripts/sdk/transform-paths.js ./src/platform/web/sdk/paths/vite.js ./target/paths/vite.js cp doc/SDK.md target/README.md -pushd target -pushd asset-build/assets -mv main.*.js ../../main.js -# Create a copy of light theme for backwards compatibility -cp theme-element-light.*.css ../../style.css -# Remove asset hash from css files -mv theme-element-light.*.css ../../theme-element-light.css -mv theme-element-dark.*.css ../../theme-element-dark.css -mv download-sandbox.*.html ../../download-sandbox.html -rm *.js *.wasm -mv ./* ../../ +pushd target/asset-build +rm index.html popd -rm -rf asset-build -mv lib-build/* . -rm -rf lib-build +pushd target/asset-build/assets +# Remove all `*.wasm` and `*.js` files except for `main.js` +rm !(main).js *.wasm popd diff --git a/scripts/sdk/create-manifest.js b/scripts/sdk/create-manifest.js index b420e679..9d5cebb2 100755 --- a/scripts/sdk/create-manifest.js +++ b/scripts/sdk/create-manifest.js @@ -3,21 +3,7 @@ const fs = require("fs"); const appManifest = require("../../package.json"); const baseSDKManifest = require("./base-manifest.json"); /* - need to leave exports out of base-manifest.json because of #vite-bug, - with the downside that we can't support environments that support - both esm and commonjs modules, so we pick just esm. - ``` - "exports": { - ".": { - "import": "./hydrogen.es.js", - "require": "./hydrogen.cjs.js" - }, - "./paths/vite": "./paths/vite.js", - "./style.css": "./style.css" - }, - ``` - - Also need to leave typescript type definitions out until the + Need to leave typescript type definitions out until the typescript conversion is complete and all imports in the d.ts files exists. ``` diff --git a/scripts/sdk/test/.gitignore b/scripts/sdk/test/.gitignore new file mode 100644 index 00000000..cf762fe6 --- /dev/null +++ b/scripts/sdk/test/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +yarn.lock diff --git a/scripts/sdk/test/deps.d.ts b/scripts/sdk/test/deps.d.ts new file mode 100644 index 00000000..4c7d0327 --- /dev/null +++ b/scripts/sdk/test/deps.d.ts @@ -0,0 +1,2 @@ +// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet +declare module "hydrogen-view-sdk"; diff --git a/scripts/sdk/test/esm-entry.ts b/scripts/sdk/test/esm-entry.ts new file mode 100644 index 00000000..17bbd8bb --- /dev/null +++ b/scripts/sdk/test/esm-entry.ts @@ -0,0 +1,21 @@ +import * as hydrogenViewSdk from "hydrogen-view-sdk"; +import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url'; +import workerPath from 'hydrogen-view-sdk/main.js?url'; +import olmWasmPath from '@matrix-org/olm/olm.wasm?url'; +import olmJsPath from '@matrix-org/olm/olm.js?url'; +import olmLegacyJsPath from '@matrix-org/olm/olm_legacy.js?url'; +const assetPaths = { + downloadSandbox: downloadSandboxPath, + worker: workerPath, + olm: { + wasm: olmWasmPath, + legacyBundle: olmLegacyJsPath, + wasmBundle: olmJsPath + } +}; +import "hydrogen-view-sdk/assets/theme-element-light.css"; + +console.log('hydrogenViewSdk', hydrogenViewSdk); +console.log('assetPaths', assetPaths); + +console.log('Entry ESM works ✅'); diff --git a/scripts/sdk/test/index.html b/scripts/sdk/test/index.html new file mode 100644 index 00000000..2ee14116 --- /dev/null +++ b/scripts/sdk/test/index.html @@ -0,0 +1,12 @@ + + + + + + Vite App + + +
+ + + diff --git a/scripts/sdk/test/package.json b/scripts/sdk/test/package.json new file mode 100644 index 00000000..a81da82c --- /dev/null +++ b/scripts/sdk/test/package.json @@ -0,0 +1,8 @@ +{ + "name": "test-sdk", + "version": "0.0.0", + "description": "", + "dependencies": { + "hydrogen-view-sdk": "link:../../../target" + } +} diff --git a/scripts/sdk/test/test-sdk-in-commonjs-env.js b/scripts/sdk/test/test-sdk-in-commonjs-env.js new file mode 100644 index 00000000..333f1573 --- /dev/null +++ b/scripts/sdk/test/test-sdk-in-commonjs-env.js @@ -0,0 +1,13 @@ +// Make sure the SDK can be used in a CommonJS environment. +// Usage: node scripts/sdk/test/test-sdk-in-commonjs-env.js +const hydrogenViewSdk = require('hydrogen-view-sdk'); + +// Test that the "exports" are available: +// Worker +require.resolve('hydrogen-view-sdk/main.js'); +// Styles +require.resolve('hydrogen-view-sdk/assets/theme-element-light.css'); +// Can access files in the assets/* directory +require.resolve('hydrogen-view-sdk/assets/main.js'); + +console.log('SDK works in CommonJS ✅'); diff --git a/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js b/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js new file mode 100644 index 00000000..6fc87da7 --- /dev/null +++ b/scripts/sdk/test/test-sdk-in-esm-vite-build-env.js @@ -0,0 +1,19 @@ +const { resolve } = require('path'); +const { build } = require('vite'); + +async function main() { + await build({ + outDir: './dist', + build: { + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html') + } + } + } + }); + + console.log('SDK works in Vite build ✅'); +} + +main(); diff --git a/src/domain/ViewModel.ts b/src/domain/ViewModel.ts index 0bc52f6e..257624ea 100644 --- a/src/domain/ViewModel.ts +++ b/src/domain/ViewModel.ts @@ -47,7 +47,7 @@ export class ViewModel extends EventEmitter<{change this._options = options; } - childOptions(explicitOptions: T): T & Options { + childOptions(explicitOptions: T): T & O { return Object.assign({}, this._options, explicitOptions); } @@ -115,7 +115,7 @@ export class ViewModel extends EventEmitter<{change return result; } - emitChange(changedProps: any): void { + emitChange(changedProps?: any): void { if (this._options.emitChange) { this._options.emitChange(changedProps); } else { diff --git a/src/domain/rageshake.ts b/src/domain/rageshake.ts new file mode 100644 index 00000000..cb06e638 --- /dev/null +++ b/src/domain/rageshake.ts @@ -0,0 +1,65 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import type {BlobHandle} from "../platform/web/dom/BlobHandle"; +import type {RequestFunction} from "../platform/types/types"; + +// see https://github.com/matrix-org/rageshake#readme +type RageshakeData = { + // A textual description of the problem. Included in the details.log.gz file. + text: string | undefined; + // Application user-agent. Included in the details.log.gz file. + userAgent: string; + // Identifier for the application (eg 'riot-web'). Should correspond to a mapping configured in the configuration file for github issue reporting to work. + app: string; + // Application version. Included in the details.log.gz file. + version: string; + // Label to attach to the github issue, and include in the details file. + label: string | undefined; +}; + +export async function submitLogsToRageshakeServer(data: RageshakeData, logsBlob: BlobHandle, submitUrl: string, request: RequestFunction): Promise { + const formData = new Map(); + if (data.text) { + formData.set("text", data.text); + } + formData.set("user_agent", data.userAgent); + formData.set("app", data.app); + formData.set("version", data.version); + if (data.label) { + formData.set("label", data.label); + } + formData.set("file", {name: "logs.json", blob: logsBlob}); + const headers: Map = new Map(); + headers.set("Accept", "application/json"); + const result = request(submitUrl, { + method: "POST", + body: formData, + headers + }); + let response; + try { + response = await result.response(); + } catch (err) { + throw new Error(`Could not submit logs to ${submitUrl}, got error ${err.message}`); + } + const {status, body} = response; + if (status < 200 || status >= 300) { + throw new Error(`Could not submit logs to ${submitUrl}, got status code ${status} with body ${body}`); + } + // we don't bother with reading report_url from the body as the rageshake server doesn't always return it + // and would have to have CORS setup properly for us to be able to read it. +} diff --git a/src/domain/session/room/CallViewModel.ts b/src/domain/session/room/CallViewModel.ts index 08bc3691..020c9f17 100644 --- a/src/domain/session/room/CallViewModel.ts +++ b/src/domain/session/room/CallViewModel.ts @@ -20,15 +20,18 @@ import {getStreamVideoTrack, getStreamAudioTrack} from "../../../matrix/calls/co import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar"; import {EventObservableValue} from "../../../observable/value/EventObservableValue"; import {ObservableValueMap} from "../../../observable/map/ObservableValueMap"; +import type {Room} from "../../../matrix/room/Room"; import type {GroupCall} from "../../../matrix/calls/group/GroupCall"; import type {Member} from "../../../matrix/calls/group/Member"; +import type {RoomMember} from "../../../matrix/room/members/RoomMember"; import type {BaseObservableList} from "../../../observable/list/BaseObservableList"; +import type {BaseObservableValue} from "../../../observable/value/BaseObservableValue"; import type {Stream} from "../../../platform/types/MediaDevices"; import type {MediaRepository} from "../../../matrix/net/MediaRepository"; type Options = BaseOptions & { call: GroupCall, - mediaRepository: MediaRepository + room: Room, }; export class CallViewModel extends ViewModel { @@ -37,16 +40,35 @@ export class CallViewModel extends ViewModel { constructor(options: Options) { super(options); const ownMemberViewModelMap = new ObservableValueMap("self", new EventObservableValue(this.call, "change")) - .mapValues(call => new OwnMemberViewModel(this.childOptions({call: this.call, mediaRepository: this.getOption("mediaRepository")})), () => {}); + .mapValues((call, emitChange) => new OwnMemberViewModel(this.childOptions({call, emitChange})), () => {}); this.memberViewModels = this.call.members .filterValues(member => member.isConnected) - .mapValues(member => new CallMemberViewModel(this.childOptions({member, mediaRepository: this.getOption("mediaRepository")}))) + .mapValues(member => new CallMemberViewModel(this.childOptions({member, mediaRepository: this.getOption("room").mediaRepository}))) .join(ownMemberViewModelMap) .sortValues((a, b) => a.compare(b)); + this.track(this.memberViewModels.subscribe({ + onRemove: () => { + this.emitChange(); // update memberCount + }, + onAdd: () => { + this.emitChange(); // update memberCount + }, + onUpdate: () => {}, + onReset: () => {}, + onMove: () => {} + })) } - private get call(): GroupCall { - return this.getOption("call"); + get isCameraMuted(): boolean { + return this.call.muteSettings?.camera ?? true; + } + + get isMicrophoneMuted(): boolean { + return this.call.muteSettings?.microphone ?? true; + } + + get memberCount(): number { + return this.memberViewModels.length; } get name(): string { @@ -57,29 +79,62 @@ export class CallViewModel extends ViewModel { return this.call.id; } - get stream(): Stream | undefined { - return this.call.localMedia?.userMedia; + private get call(): GroupCall { + return this.getOption("call"); } - leave() { + async hangup() { if (this.call.hasJoined) { - this.call.leave(); + await this.call.leave(); } } - async toggleVideo() { - if (this.call.muteSettings) { - this.call.setMuted(this.call.muteSettings.toggleCamera()); + async toggleCamera() { + const {localMedia, muteSettings} = this.call; + if (muteSettings && localMedia) { + // unmute but no track? + if (muteSettings.camera && !getStreamVideoTrack(localMedia.userMedia)) { + const stream = await this.platform.mediaDevices.getMediaTracks(!muteSettings.microphone, true); + await this.call.setMedia(localMedia.withUserMedia(stream)); + } else { + await this.call.setMuted(muteSettings.toggleCamera()); + } + this.emitChange(); + } + } + + async toggleMicrophone() { + const {localMedia, muteSettings} = this.call; + if (muteSettings && localMedia) { + // unmute but no track? + if (muteSettings.microphone && !getStreamAudioTrack(localMedia.userMedia)) { + const stream = await this.platform.mediaDevices.getMediaTracks(true, !muteSettings.camera); + console.log("got tracks", Array.from(stream.getTracks()).map((t: MediaStreamTrack) => { return {kind: t.kind, id: t.id};})) + await this.call.setMedia(localMedia.withUserMedia(stream)); + } else { + await this.call.setMuted(muteSettings.toggleMicrophone()); + } + this.emitChange(); } } } -type OwnMemberOptions = BaseOptions & { - call: GroupCall, - mediaRepository: MediaRepository -} +class OwnMemberViewModel extends ViewModel implements IStreamViewModel { + private memberObservable: undefined | BaseObservableValue; + + constructor(options: Options) { + super(options); + this.init(); + } + + async init() { + const room = this.getOption("room"); + this.memberObservable = await room.observeMember(room.user.id); + this.track(this.memberObservable!.subscribe(() => { + this.emitChange(undefined); + })); + } -class OwnMemberViewModel extends ViewModel implements IStreamViewModel { get stream(): Stream | undefined { return this.call.localMedia?.userMedia; } @@ -89,27 +144,40 @@ class OwnMemberViewModel extends ViewModel implements IStreamV } get isCameraMuted(): boolean { - return isMuted(this.call.muteSettings?.camera, !!getStreamVideoTrack(this.stream)); + return this.call.muteSettings?.camera ?? true; } get isMicrophoneMuted(): boolean { - return isMuted(this.call.muteSettings?.microphone, !!getStreamAudioTrack(this.stream)); + return this.call.muteSettings?.microphone ?? true; } get avatarLetter(): string { - return "I"; + const member = this.memberObservable?.get(); + if (member) { + return avatarInitials(member.name); + } else { + return this.getOption("room").user.id; + } } get avatarColorNumber(): number { - return 3; + return getIdentifierColorNumber(this.getOption("room").user.id); } avatarUrl(size: number): string | undefined { - return undefined; + const member = this.memberObservable?.get(); + if (member) { + return getAvatarHttpUrl(member.avatarUrl, size, this.platform, this.getOption("room").mediaRepository); + } } get avatarTitle(): string { - return "Me"; + const member = this.memberObservable?.get(); + if (member) { + return member.name; + } else { + return this.getOption("room").user.id; + } } compare(other: OwnMemberViewModel | CallMemberViewModel): number { @@ -117,7 +185,10 @@ class OwnMemberViewModel extends ViewModel implements IStreamV } } -type MemberOptions = BaseOptions & {member: Member, mediaRepository: MediaRepository}; +type MemberOptions = BaseOptions & { + member: Member, + mediaRepository: MediaRepository +}; export class CallMemberViewModel extends ViewModel implements IStreamViewModel { get stream(): Stream | undefined { @@ -129,11 +200,11 @@ export class CallMemberViewModel extends ViewModel implements ISt } get isCameraMuted(): boolean { - return isMuted(this.member.remoteMuteSettings?.camera, !!getStreamVideoTrack(this.stream)); + return this.member.remoteMuteSettings?.camera ?? true; } get isMicrophoneMuted(): boolean { - return isMuted(this.member.remoteMuteSettings?.microphone, !!getStreamAudioTrack(this.stream)); + return this.member.remoteMuteSettings?.microphone ?? true; } get avatarLetter(): string { @@ -172,11 +243,3 @@ export interface IStreamViewModel extends AvatarSource, ViewModel { get isCameraMuted(): boolean; get isMicrophoneMuted(): boolean; } - -function isMuted(muted: boolean | undefined, hasTrack: boolean) { - if (muted) { - return true; - } else { - return !hasTrack; - } -} diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js index c60ce649..077a996e 100644 --- a/src/domain/session/room/RoomViewModel.js +++ b/src/domain/session/room/RoomViewModel.js @@ -62,13 +62,14 @@ export class RoomViewModel extends ViewModel { } this._callViewModel = this.disposeTracked(this._callViewModel); if (call) { - this._callViewModel = this.track(new CallViewModel(this.childOptions({call, mediaRepository: this._room.mediaRepository}))); + this._callViewModel = this.track(new CallViewModel(this.childOptions({call, room: this._room}))); } this.emitChange("callViewModel"); })); const call = this._callObservable.get(); + // TODO: cleanup this duplication to create CallViewModel if (call) { - this._callViewModel = new CallViewModel(this.childOptions({call})); + this._callViewModel = this.track(new CallViewModel(this.childOptions({call, room: this._room}))); } } diff --git a/src/domain/session/room/timeline/tiles/BaseMediaTile.js b/src/domain/session/room/timeline/tiles/BaseMediaTile.js index 0ba5b9a9..aa53661c 100644 --- a/src/domain/session/room/timeline/tiles/BaseMediaTile.js +++ b/src/domain/session/room/timeline/tiles/BaseMediaTile.js @@ -27,6 +27,29 @@ export class BaseMediaTile extends BaseMessageTile { this._decryptedFile = null; this._isVisible = false; this._error = null; + this._downloading = false; + this._downloadError = null; + } + + async downloadMedia() { + if (this._downloading || this.isPending) { + return; + } + const content = this._getContent(); + const filename = content.body; + this._downloading = true; + this.emitChange("status"); + let blob; + try { + blob = await this._mediaRepository.downloadAttachment(content); + this.platform.saveFileAs(blob, filename); + } catch (err) { + this._downloadError = err; + } finally { + blob?.dispose(); + this._downloading = false; + } + this.emitChange("status"); } get isUploading() { @@ -38,7 +61,7 @@ export class BaseMediaTile extends BaseMessageTile { return pendingEvent && Math.round((pendingEvent.attachmentsSentBytes / pendingEvent.attachmentsTotalBytes) * 100); } - get sendStatus() { + get status() { const {pendingEvent} = this._entry; switch (pendingEvent?.status) { case SendStatus.Waiting: @@ -53,6 +76,12 @@ export class BaseMediaTile extends BaseMessageTile { case SendStatus.Error: return this.i18n`Error: ${pendingEvent.error.message}`; default: + if (this._downloadError) { + return `Download failed`; + } + if (this._downloading) { + return this.i18n`Downloading…`; + } return ""; } } diff --git a/src/domain/session/settings/SettingsViewModel.js b/src/domain/session/settings/SettingsViewModel.js index d0f2e91d..0d61bcac 100644 --- a/src/domain/session/settings/SettingsViewModel.js +++ b/src/domain/session/settings/SettingsViewModel.js @@ -16,6 +16,7 @@ limitations under the License. import {ViewModel} from "../../ViewModel"; import {KeyBackupViewModel} from "./KeyBackupViewModel.js"; +import {submitLogsToRageshakeServer} from "../../../domain/rageshake"; class PushNotificationStatus { constructor() { @@ -50,6 +51,8 @@ export class SettingsViewModel extends ViewModel { this.minSentImageSizeLimit = 400; this.maxSentImageSizeLimit = 4000; this.pushNotifications = new PushNotificationStatus(); + this._activeTheme = undefined; + this._logsFeedbackMessage = undefined; } get _session() { @@ -76,6 +79,9 @@ export class SettingsViewModel extends ViewModel { this.sentImageSizeLimit = await this.platform.settingsStorage.getInt("sentImageSizeLimit"); this.pushNotifications.supported = await this.platform.notificationService.supportsPush(); this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled(); + if (!import.meta.env.DEV) { + this._activeTheme = await this.platform.themeLoader.getActiveTheme(); + } this.emitChange(""); } @@ -127,6 +133,14 @@ export class SettingsViewModel extends ViewModel { return this._formatBytes(this._estimate?.usage); } + get themeMapping() { + return this.platform.themeLoader.themeMapping; + } + + get activeTheme() { + return this._activeTheme; + } + _formatBytes(n) { if (typeof n === "number") { return Math.round(n / (1024 * 1024)).toFixed(1) + " MB"; @@ -146,6 +160,51 @@ export class SettingsViewModel extends ViewModel { return logExport.asBlob(); } + get canSendLogsToServer() { + return !!this.platform.config.bugReportEndpointUrl; + } + + get logsServer() { + const {bugReportEndpointUrl} = this.platform.config; + try { + if (bugReportEndpointUrl) { + return new URL(bugReportEndpointUrl).hostname; + } + } catch (e) {} + return ""; + } + + async sendLogsToServer() { + const {bugReportEndpointUrl} = this.platform.config; + if (bugReportEndpointUrl) { + this._logsFeedbackMessage = this.i18n`Sending logs…`; + this.emitChange(); + try { + const logExport = await this.logger.export(); + await submitLogsToRageshakeServer( + { + app: "hydrogen", + userAgent: this.platform.description, + version: DEFINE_VERSION, + text: `Submit logs from settings for user ${this._session.userId} on device ${this._session.deviceId}`, + }, + logExport.asBlob(), + bugReportEndpointUrl, + this.platform.request + ); + this._logsFeedbackMessage = this.i18n`Logs sent succesfully!`; + this.emitChange(); + } catch (err) { + this._logsFeedbackMessage = err.message; + this.emitChange(); + } + } + } + + get logsFeedbackMessage() { + return this._logsFeedbackMessage; + } + async togglePushNotifications() { this.pushNotifications.updating = true; this.pushNotifications.enabledOnServer = null; @@ -175,5 +234,11 @@ export class SettingsViewModel extends ViewModel { this.emitChange("pushNotifications.serverError"); } } + + changeThemeOption(themeName, themeVariant) { + this.platform.themeLoader.setTheme(themeName, themeVariant); + // emit so that radio-buttons become displayed/hidden + this.emitChange("themeOption"); + } } diff --git a/src/logging/Logger.ts b/src/logging/Logger.ts index 395181ef..37a3326c 100644 --- a/src/logging/Logger.ts +++ b/src/logging/Logger.ts @@ -159,6 +159,11 @@ export class Logger implements ILogger { this._openItems.clear(); } + /** @internal */ + _removeItemFromOpenList(item: LogItem): void { + this._openItems.delete(item); + } + /** @internal */ _persistItem(item: LogItem, filter?: LogFilter, forced?: boolean): void { for (var i = 0; i < this.reporters.length; i += 1) { @@ -186,6 +191,7 @@ class DeferredPersistRootLogItem extends LogItem { finish() { super.finish(); (this._logger as Logger)._persistItem(this, undefined, false); + (this._logger as Logger)._removeItemFromOpenList(this); } forceFinish() { diff --git a/src/matrix/DeviceMessageHandler.js b/src/matrix/DeviceMessageHandler.js index c33236aa..05276549 100644 --- a/src/matrix/DeviceMessageHandler.js +++ b/src/matrix/DeviceMessageHandler.js @@ -38,7 +38,6 @@ export class DeviceMessageHandler { async prepareSync(toDeviceEvents, lock, txn, log) { log.set("messageTypes", countBy(toDeviceEvents, e => e.type)); - this._handleUnencryptedCallEvents(toDeviceEvents, log); const encryptedEvents = toDeviceEvents.filter(e => e.type === "m.room.encrypted"); if (!this._olmDecryption) { log.log("can't decrypt, encryption not enabled", log.level.Warn); @@ -54,20 +53,6 @@ export class DeviceMessageHandler { } const newRoomKeys = this._megolmDecryption.roomKeysFromDeviceMessages(olmDecryptChanges.results, log); - // const callMessages = olmDecryptChanges.results.filter(dr => this._callHandler.handlesDeviceMessageEventType(dr.event?.type)); - // // load devices by sender key - // await Promise.all(callMessages.map(async dr => { - // dr.setDevice(await this._getDevice(dr.senderCurve25519Key, txn)); - // })); - // // TODO: pass this in the prep and run it in afterSync or afterSyncComplete (as callHandler can send events as well)? - // for (const dr of callMessages) { - // if (dr.device) { - // this._callHandler.handleDeviceMessage(dr.event, dr.device.userId, dr.device.deviceId, log); - // } else { - // console.error("could not deliver message because don't have device for sender key", dr.event); - // } - // } - // TODO: somehow include rooms that received a call to_device message in the sync state? // or have updates flow through event emitter? // well, we don't really need to update the room other then when a call starts or stops @@ -76,33 +61,43 @@ export class DeviceMessageHandler { } } - _handleUnencryptedCallEvents(toDeviceEvents, log) { - const callMessages = toDeviceEvents.filter(e => this._callHandler.handlesDeviceMessageEventType(e.type)); - for (const event of callMessages) { - const userId = event.sender; - const deviceId = event.content.device_id; - this._callHandler.handleDeviceMessage(event, userId, deviceId, log); - } - } - /** check that prep is not undefined before calling this */ async writeSync(prep, txn) { // write olm changes prep.olmDecryptChanges.write(txn); const didWriteValues = await Promise.all(prep.newRoomKeys.map(key => this._megolmDecryption.writeRoomKey(key, txn))); - return didWriteValues.some(didWrite => !!didWrite); + const hasNewRoomKeys = didWriteValues.some(didWrite => !!didWrite); + return { + hasNewRoomKeys, + decryptionResults: prep.olmDecryptChanges.results + }; } - - async _getDevice(senderKey, txn) { - let device = this._senderDeviceCache.get(senderKey); - if (!device) { - device = await txn.deviceIdentities.getByCurve25519Key(senderKey); - if (device) { - this._senderDeviceCache.set(device); - } + async afterSyncCompleted(decryptionResults, deviceTracker, hsApi, log) { + // if we don't have a device, we need to fetch the device keys the message claims + // and check the keys, and we should only do network requests during + // sync processing in the afterSyncCompleted step. + const callMessages = decryptionResults.filter(dr => this._callHandler.handlesDeviceMessageEventType(dr.event?.type)); + if (callMessages.length) { + await log.wrap("process call signalling messages", async log => { + for (const dr of callMessages) { + // serialize device loading, so subsequent messages for the same device take advantage of the cache + const device = await deviceTracker.deviceForId(dr.event.sender, dr.event.content.device_id, hsApi, log); + dr.setDevice(device); + if (dr.isVerified) { + this._callHandler.handleDeviceMessage(dr.event, dr.userId, dr.deviceId, log); + } else { + log.log({ + l: "could not verify olm fingerprint key matches, ignoring", + ed25519Key: dr.device.ed25519Key, + claimedEd25519Key: dr.claimedEd25519Key, + deviceId: device.deviceId, + userId: device.userId, + }); + } + } + }); } - return device; } } diff --git a/src/matrix/Session.js b/src/matrix/Session.js index ec085fd4..9ce9a9ba 100644 --- a/src/matrix/Session.js +++ b/src/matrix/Session.js @@ -79,18 +79,22 @@ export class Session { this._callHandler = new CallHandler({ clock: this._platform.clock, hsApi: this._hsApi, - encryptDeviceMessage: async (roomId, userId, message, log) => { + encryptDeviceMessage: async (roomId, userId, deviceId, message, log) => { if (!this._deviceTracker || !this._olmEncryption) { - throw new Error("encryption is not enabled"); + log.set("encryption_disabled", true); + return; } - // TODO: just get the devices we're sending the message to, not all the room devices - // although we probably already fetched all devices to send messages in the likely e2ee room - const devices = await log.wrap("get device keys", async log => { - await this._deviceTracker.trackRoom(this.rooms.get(roomId), log); - return this._deviceTracker.devicesForRoomMembers(roomId, [userId], this._hsApi, log); + const device = await log.wrap("get device key", async log => { + const device = this._deviceTracker.deviceForId(userId, deviceId, this._hsApi, log); + if (!device) { + log.set("not_found", true); + } + return device; }); - const encryptedMessage = await this._olmEncryption.encrypt(message.type, message.content, devices, this._hsApi, log); - return encryptedMessage; + if (device) { + const encryptedMessages = await this._olmEncryption.encrypt(message.type, message.content, [device], this._hsApi, log); + return encryptedMessages; + } }, storage: this._storage, webRTC: this._platform.webRTC, @@ -693,7 +697,9 @@ export class Session { async writeSync(syncResponse, syncFilterId, preparation, txn, log) { const changes = { syncInfo: null, - e2eeAccountChanges: null + e2eeAccountChanges: null, + hasNewRoomKeys: false, + deviceMessageDecryptionResults: null, }; const syncToken = syncResponse.next_batch; if (syncToken !== this.syncToken) { @@ -714,7 +720,9 @@ export class Session { } if (preparation) { - changes.hasNewRoomKeys = await log.wrap("deviceMsgs", log => this._deviceMessageHandler.writeSync(preparation, txn, log)); + const {hasNewRoomKeys, decryptionResults} = await log.wrap("deviceMsgs", log => this._deviceMessageHandler.writeSync(preparation, txn, log)); + changes.hasNewRoomKeys = hasNewRoomKeys; + changes.deviceMessageDecryptionResults = decryptionResults; } // store account data @@ -755,6 +763,9 @@ export class Session { if (changes.hasNewRoomKeys) { this._keyBackup.get()?.flush(log); } + if (changes.deviceMessageDecryptionResults) { + await this._deviceMessageHandler.afterSyncCompleted(changes.deviceMessageDecryptionResults, this._deviceTracker, this._hsApi, log); + } } _tryReplaceRoomBeingCreated(roomId, log) { diff --git a/src/matrix/Sync.js b/src/matrix/Sync.js index 4f907563..f77fa79a 100644 --- a/src/matrix/Sync.js +++ b/src/matrix/Sync.js @@ -160,7 +160,7 @@ export class Sync { const isCatchupSync = this._status.get() === SyncStatus.CatchupSync; const sessionPromise = (async () => { try { - await log.wrap("session", log => this._session.afterSyncCompleted(sessionChanges, isCatchupSync, log), log.level.Detail); + await log.wrap("session", log => this._session.afterSyncCompleted(sessionChanges, isCatchupSync, log)); } catch (err) {} // error is logged, but don't fail sessionPromise })(); diff --git a/src/matrix/calls/CallHandler.ts b/src/matrix/calls/CallHandler.ts index c746ba31..f24d2ea5 100644 --- a/src/matrix/calls/CallHandler.ts +++ b/src/matrix/calls/CallHandler.ts @@ -22,6 +22,7 @@ import {EventType, CallIntent} from "./callEventTypes"; import {GroupCall} from "./group/GroupCall"; import {makeId} from "../common"; import {CALL_LOG_TYPE} from "./common"; +import {EVENT_TYPE as MEMBER_EVENT_TYPE, RoomMember} from "../room/members/RoomMember"; import type {LocalMedia} from "./LocalMedia"; import type {Room} from "../room/Room"; @@ -36,6 +37,7 @@ import type {Transaction} from "../storage/idb/Transaction"; import type {CallEntry} from "../storage/idb/stores/CallStore"; import type {Clock} from "../../platform/web/dom/Clock"; import type {RoomStateHandler} from "../room/state/types"; +import type {MemberSync} from "../room/timeline/persistence/MemberWriter"; export type Options = Omit & { clock: Clock @@ -77,7 +79,7 @@ export class CallHandler implements RoomStateHandler { const names = this.options.storage.storeNames; const txn = await this.options.storage.readTxn([ names.calls, - names.roomState + names.roomState, ]); return txn; } @@ -97,15 +99,22 @@ export class CallHandler implements RoomStateHandler { })); const roomIds = Array.from(new Set(callEntries.map(e => e.roomId))); await Promise.all(roomIds.map(async roomId => { - // const ownCallsMemberEvent = await txn.roomState.get(roomId, EventType.GroupCallMember, this.options.ownUserId); - // if (ownCallsMemberEvent) { - // this.handleCallMemberEvent(ownCallsMemberEvent.event, log); - // } + // TODO: don't load all members until we need them const callsMemberEvents = await txn.roomState.getAllForType(roomId, EventType.GroupCallMember); - for (const entry of callsMemberEvents) { - this.handleCallMemberEvent(entry.event, roomId, log); - } - // TODO: we should be loading the other members as well at some point + await Promise.all(callsMemberEvents.map(async entry => { + const userId = entry.event.sender; + const roomMemberState = await txn.roomState.get(roomId, MEMBER_EVENT_TYPE, userId); + let roomMember; + if (roomMemberState) { + roomMember = RoomMember.fromMemberEvent(roomMemberState.event); + } + if (!roomMember) { + // we'll be missing the member here if we received a call and it's members + // as pre-gap state and the members weren't active in the timeline we got. + roomMember = RoomMember.fromUserId(roomId, userId, "join"); + } + this.handleCallMemberEvent(entry.event, roomMember, roomId, log); + })); })); log.set("newSize", this._calls.size); }); @@ -144,12 +153,18 @@ export class CallHandler implements RoomStateHandler { // TODO: check and poll turn server credentials here /** @internal */ - handleRoomState(room: Room, event: StateEvent, txn: Transaction, log: ILogItem) { + async handleRoomState(room: Room, event: StateEvent, memberSync: MemberSync, txn: Transaction, log: ILogItem) { if (event.type === EventType.GroupCall) { this.handleCallEvent(event, room.id, txn, log); } if (event.type === EventType.GroupCallMember) { - this.handleCallMemberEvent(event, room.id, log); + let member = await memberSync.lookupMemberAtEvent(event.sender, event, txn); + if (!member) { + // we'll be missing the member here if we received a call and it's members + // as pre-gap state and the members weren't active in the timeline we got. + member = RoomMember.fromUserId(room.id, event.sender, "join"); + } + this.handleCallMemberEvent(event, member, room.id, log); } } @@ -157,6 +172,11 @@ export class CallHandler implements RoomStateHandler { updateRoomMembers(room: Room, memberChanges: Map) { // TODO: also have map for roomId to calls, so we can easily update members // we will also need this to get the call for a room + for (const call of this._calls.values()) { + if (call.roomId === room.id) { + call.updateRoomMembers(memberChanges); + } + } } /** @internal */ @@ -193,7 +213,7 @@ export class CallHandler implements RoomStateHandler { } } - private handleCallMemberEvent(event: StateEvent, roomId: string, log: ILogItem) { + private handleCallMemberEvent(event: StateEvent, member: RoomMember, roomId: string, log: ILogItem) { const userId = event.state_key; const roomMemberKey = getRoomMemberKey(roomId, userId) const calls = event.content["m.calls"] ?? []; @@ -202,7 +222,7 @@ export class CallHandler implements RoomStateHandler { const callId = call["m.call_id"]; const groupCall = this._calls.get(callId); // TODO: also check the member when receiving the m.call event - groupCall?.updateMembership(userId, call, eventTimestamp, log); + groupCall?.updateMembership(userId, member, call, eventTimestamp, log); }; const newCallIdsMemberOf = new Set(calls.map(call => call["m.call_id"])); let previousCallIdsMemberOf = this.roomMemberToCallIds.get(roomMemberKey); diff --git a/src/matrix/calls/LocalMedia.ts b/src/matrix/calls/LocalMedia.ts index b79fe098..f02cd11b 100644 --- a/src/matrix/calls/LocalMedia.ts +++ b/src/matrix/calls/LocalMedia.ts @@ -40,18 +40,13 @@ export class LocalMedia { /** @internal */ replaceClone(oldClone: LocalMedia | undefined, oldOriginal: LocalMedia | undefined): LocalMedia { - let userMedia; - let screenShare; const cloneOrAdoptStream = (oldOriginalStream: Stream | undefined, oldCloneStream: Stream | undefined, newStream: Stream | undefined): Stream | undefined => { let stream; if (oldOriginalStream?.id === newStream?.id) { - stream = oldCloneStream; + return oldCloneStream; } else { - stream = newStream?.clone(); - getStreamAudioTrack(oldCloneStream)?.stop(); - getStreamVideoTrack(oldCloneStream)?.stop(); + return newStream?.clone(); } - return stream; } return new LocalMedia( cloneOrAdoptStream(oldOriginal?.userMedia, oldClone?.userMedia, this.userMedia), @@ -66,16 +61,8 @@ export class LocalMedia { } dispose() { - this.stopExcept(undefined); - } - - stopExcept(newMedia: LocalMedia | undefined) { - if(newMedia?.userMedia?.id !== this.userMedia?.id) { - getStreamAudioTrack(this.userMedia)?.stop(); - getStreamVideoTrack(this.userMedia)?.stop(); - } - if(newMedia?.screenShare?.id !== this.screenShare?.id) { - getStreamVideoTrack(this.screenShare)?.stop(); - } + getStreamAudioTrack(this.userMedia)?.stop(); + getStreamVideoTrack(this.userMedia)?.stop(); + getStreamVideoTrack(this.screenShare)?.stop(); } } diff --git a/src/matrix/calls/PeerCall.ts b/src/matrix/calls/PeerCall.ts index e6ce3571..fc5b48a6 100644 --- a/src/matrix/calls/PeerCall.ts +++ b/src/matrix/calls/PeerCall.ts @@ -71,7 +71,6 @@ export class PeerCall implements IDisposable { private localMedia?: LocalMedia; private localMuteSettings?: MuteSettings; // TODO: this should go in member - private seq: number = 0; // A queue for candidates waiting to go out. // We try to amalgamate candidates into a single candidate message where // possible @@ -178,6 +177,7 @@ export class PeerCall implements IDisposable { if (this._state !== CallState.Fledgling) { return; } + log.set("signalingState", this.peerConnection.signalingState); this.direction = CallDirection.Outbound; this.setState(CallState.CreateOffer, log); this.localMuteSettings = localMuteSettings; @@ -238,7 +238,6 @@ export class PeerCall implements IDisposable { const content: MCallSDPStreamMetadataChanged = { call_id: this.callId, version: 1, - seq: this.seq++, [SDPStreamMetadataKey]: this.getSDPMetadata() }; await this.sendSignallingMessage({type: EventType.SDPStreamMetadataChangedPrefix, content}, log); @@ -263,7 +262,6 @@ export class PeerCall implements IDisposable { const content: MCallSDPStreamMetadataChanged = { call_id: this.callId, version: 1, - seq: this.seq++, [SDPStreamMetadataKey]: this.getSDPMetadata() }; await this.sendSignallingMessage({type: EventType.SDPStreamMetadataChangedPrefix, content}, log); @@ -312,35 +310,39 @@ export class PeerCall implements IDisposable { }, async log => { logItem = log; - switch (message.type) { - case EventType.Invite: - if (this.callId !== message.content.call_id) { - await this.handleInviteGlare(message.content, partyId, log); - } else { + const callIdMatches = this.callId === message.content.call_id; + + if (message.type === EventType.Invite && !callIdMatches) { + await this.handleInviteGlare(message.content, partyId, log); + } else if (callIdMatches) { + switch (message.type) { + case EventType.Invite: await this.handleFirstInvite(message.content, partyId, log); - } - break; - case EventType.Answer: - await this.handleAnswer(message.content, partyId, log); - break; - case EventType.Negotiate: - await this.onNegotiateReceived(message.content, log); - break; - case EventType.Candidates: - await this.handleRemoteIceCandidates(message.content, partyId, log); - break; - case EventType.SDPStreamMetadataChanged: - case EventType.SDPStreamMetadataChangedPrefix: - this.updateRemoteSDPStreamMetadata(message.content[SDPStreamMetadataKey], log); - break; - case EventType.Hangup: - // TODO: this is a bit hacky, double check its what we need - log.set("reason", message.content.reason); - this.terminate(CallParty.Remote, message.content.reason ?? CallErrorCode.UserHangup, log); - break; - default: - log.log(`Unknown event type for call: ${message.type}`); - break; + break; + case EventType.Answer: + await this.handleAnswer(message.content, partyId, log); + break; + case EventType.Negotiate: + await this.onNegotiateReceived(message.content, log); + break; + case EventType.Candidates: + await this.handleRemoteIceCandidates(message.content, partyId, log); + break; + case EventType.SDPStreamMetadataChanged: + case EventType.SDPStreamMetadataChangedPrefix: + this.updateRemoteSDPStreamMetadata(message.content[SDPStreamMetadataKey], log); + break; + case EventType.Hangup: + // TODO: this is a bit hacky, double check its what we need + log.set("reason", message.content.reason); + this.terminate(CallParty.Remote, message.content.reason ?? CallErrorCode.UserHangup, log); + break; + default: + log.log(`Unknown event type for call: ${message.type}`); + break; + } + } else if (!callIdMatches) { + log.set("wrongCallId", true); } }); return logItem; @@ -350,7 +352,6 @@ export class PeerCall implements IDisposable { const content = { call_id: callId, version: 1, - seq: this.seq++, }; // TODO: Don't send UserHangup reason to older clients if (reason) { @@ -387,8 +388,7 @@ export class PeerCall implements IDisposable { const offer = this.peerConnection.localDescription!; // Get rid of any candidates waiting to be sent: they'll be included in the local // description we just got and will send in the offer. - log.log(`Discarding ${ - this.candidateSendQueue.length} candidates that will be sent in offer`); + log.set("includedCandidates", this.candidateSendQueue.length); this.candidateSendQueue = []; // need to queue this @@ -398,7 +398,6 @@ export class PeerCall implements IDisposable { offer, [SDPStreamMetadataKey]: this.getSDPMetadata(), version: 1, - seq: this.seq++, lifetime: CALL_TIMEOUT_MS }; await this.sendSignallingMessage({type: EventType.Invite, content}, log); @@ -409,7 +408,6 @@ export class PeerCall implements IDisposable { description: offer, [SDPStreamMetadataKey]: this.getSDPMetadata(), version: 1, - seq: this.seq++, lifetime: CALL_TIMEOUT_MS }; await this.sendSignallingMessage({type: EventType.Negotiate, content}, log); @@ -420,16 +418,20 @@ export class PeerCall implements IDisposable { this.sendCandidateQueue(log); - await log.wrap("invite timeout", async log => { - if (this._state === CallState.InviteSent) { + if (this._state === CallState.InviteSent) { + const timeoutLog = this.logItem.child("invite timeout"); + log.refDetached(timeoutLog); + // don't await this, as it would block other negotationneeded events from being processed + // as they are processed serially + timeoutLog.run(async log => { try { await this.delay(CALL_TIMEOUT_MS); } catch (err) { return; } // @ts-ignore TS doesn't take the await above into account to know that the state could have changed in between if (this._state === CallState.InviteSent) { this._hangup(CallErrorCode.InviteTimeout, log); } - } - }); + }).catch(err => {}); // prevent error from being unhandled, it will be logged already by run above + } }; private async handleInviteGlare(content: MCallInvite, partyId: PartyId, log: ILogItem): Promise { @@ -674,7 +676,6 @@ export class PeerCall implements IDisposable { description: this.peerConnection.localDescription!, [SDPStreamMetadataKey]: this.getSDPMetadata(), version: 1, - seq: this.seq++, lifetime: CALL_TIMEOUT_MS }; await this.sendSignallingMessage({type: EventType.Negotiate, content}, log); @@ -689,7 +690,6 @@ export class PeerCall implements IDisposable { const answerContent: MCallAnswer = { call_id: this.callId, version: 1, - seq: this.seq++, answer: { sdp: localDescription.sdp, type: localDescription.type, @@ -755,7 +755,6 @@ export class PeerCall implements IDisposable { content: { call_id: this.callId, version: 1, - seq: this.seq++, candidates }, }, log); @@ -885,6 +884,7 @@ export class PeerCall implements IDisposable { this.setState(CallState.Ended, log); this.localMedia = undefined; + // TODO: change signalingState to connectionState? if (this.peerConnection && this.peerConnection.signalingState !== 'closed') { this.peerConnection.close(); } @@ -896,8 +896,8 @@ export class PeerCall implements IDisposable { const streamId = this.localMedia.userMedia.id; metadata[streamId] = { purpose: SDPStreamMetadataPurpose.Usermedia, - audio_muted: this.localMuteSettings?.microphone || !getStreamAudioTrack(this.localMedia.userMedia), - video_muted: this.localMuteSettings?.camera || !getStreamVideoTrack(this.localMedia.userMedia), + audio_muted: this.localMuteSettings?.microphone ?? false, + video_muted: this.localMuteSettings?.camera ?? false, }; } if (this.localMedia?.screenShare) { @@ -945,7 +945,7 @@ export class PeerCall implements IDisposable { this.updateRemoteMedia(log); } } - }) + }); }; stream.addEventListener("removetrack", listener); const disposeListener = () => { @@ -980,8 +980,10 @@ export class PeerCall implements IDisposable { videoReceiver.track.enabled = !metaData.video_muted; } this._remoteMuteSettings = new MuteSettings( - metaData.audio_muted || !audioReceiver?.track, - metaData.video_muted || !videoReceiver?.track + metaData.audio_muted ?? false, + metaData.video_muted ?? false, + !!audioReceiver?.track ?? false, + !!videoReceiver?.track ?? false ); log.log({ l: "setting userMedia", @@ -1003,49 +1005,56 @@ export class PeerCall implements IDisposable { private updateLocalMedia(localMedia: LocalMedia, logItem: ILogItem): Promise { return logItem.wrap("updateLocalMedia", async log => { - const oldMedia = this.localMedia; - this.localMedia = localMedia; + const senders = this.peerConnection.getSenders(); const applyStream = async (oldStream: Stream | undefined, stream: Stream | undefined, streamPurpose: SDPStreamMetadataPurpose) => { const applyTrack = async (oldTrack: Track | undefined, newTrack: Track | undefined) => { - if (!oldTrack && newTrack) { - log.wrap(`adding ${streamPurpose} ${newTrack.kind} track`, log => { - const sender = this.peerConnection.addTrack(newTrack, stream!); - this.options.webRTC.prepareSenderForPurpose(this.peerConnection, sender, streamPurpose); - }); - } else if (oldTrack) { - const sender = this.peerConnection.getSenders().find(s => s.track && s.track.id === oldTrack.id); - if (sender) { - if (newTrack && oldTrack.id !== newTrack.id) { - try { - await log.wrap(`replacing ${streamPurpose} ${newTrack.kind} track`, log => { - return sender.replaceTrack(newTrack); - }); - } catch (err) { - // can't replace the track without renegotiating{ - log.wrap(`adding and removing ${streamPurpose} ${newTrack.kind} track`, log => { - this.peerConnection.removeTrack(sender); - const newSender = this.peerConnection.addTrack(newTrack); - this.options.webRTC.prepareSenderForPurpose(this.peerConnection, newSender, streamPurpose); - }); - } - } else if (!newTrack) { - log.wrap(`removing ${streamPurpose} ${sender.track!.kind} track`, log => { - this.peerConnection.removeTrack(sender); - }); - } else { - log.log(`${streamPurpose} ${oldTrack.kind} track hasn't changed`); - } + const oldSender = senders.find(s => s.track === oldTrack); + const streamToKeep = (oldStream ?? stream)!; + if (streamToKeep !== stream) { + if (oldTrack) { + streamToKeep.removeTrack(oldTrack); + oldTrack.stop(); } - // TODO: should we do something if we didn't find the sender? e.g. some other code already removed the sender but didn't update localMedia + if (newTrack) { + streamToKeep.addTrack(newTrack); + } + } + if (newTrack && oldSender) { + try { + await log.wrap(`attempting to replace ${streamPurpose} ${newTrack.kind} track`, log => { + return oldSender.replaceTrack(newTrack); + }); + // replaceTrack succeeded, nothing left to do + return; + } catch (err) {} + } + if(oldSender) { + log.wrap(`removing ${streamPurpose} ${oldSender.track!.kind} track`, log => { + this.peerConnection.removeTrack(oldSender); + }); + } + if (newTrack) { + log.wrap(`adding ${streamPurpose} ${newTrack.kind} track`, log => { + const newSender = this.peerConnection.addTrack(newTrack, streamToKeep); + this.options.webRTC.prepareSenderForPurpose(this.peerConnection, newSender, streamPurpose); + }); } } - + if (!oldStream && !stream) { + return; + } await applyTrack(getStreamAudioTrack(oldStream), getStreamAudioTrack(stream)); await applyTrack(getStreamVideoTrack(oldStream), getStreamVideoTrack(stream)); }; - await applyStream(oldMedia?.userMedia, localMedia?.userMedia, SDPStreamMetadataPurpose.Usermedia); - await applyStream(oldMedia?.screenShare, localMedia?.screenShare, SDPStreamMetadataPurpose.Screenshare); + await applyStream(this.localMedia?.userMedia, localMedia?.userMedia, SDPStreamMetadataPurpose.Usermedia); + await applyStream(this.localMedia?.screenShare, localMedia?.screenShare, SDPStreamMetadataPurpose.Screenshare); + // we explicitly don't replace this.localMedia if already set + // as we need to keep the old stream so the stream id doesn't change + // instead we add and remove tracks in the stream in applyTrack + if (!this.localMedia) { + this.localMedia = localMedia; + } // TODO: datachannel, but don't do it here as we don't want to do it from answer, rather in different method }); } @@ -1162,3 +1171,13 @@ function enableTransceiver(transceiver: Transceiver, enabled: boolean, exclusive } } } + +/** + * tests to write: + * + * upgradeCall: adding a track with setMedia calls the correct methods on the peerConnection + * upgradeCall: removing a track with setMedia calls the correct methods on the peerConnection + * upgradeCall: replacing compatible track with setMedia calls the correct methods on the peerConnection + * upgradeCall: replacing incompatible track (sender.replaceTrack throws) with setMedia calls the correct methods on the peerConnection + * + * */ diff --git a/src/matrix/calls/callEventTypes.ts b/src/matrix/calls/callEventTypes.ts index 0490b44f..09376c85 100644 --- a/src/matrix/calls/callEventTypes.ts +++ b/src/matrix/calls/callEventTypes.ts @@ -65,7 +65,6 @@ export interface CallReplacesTarget { export type MCallBase = { call_id: string; version: string | number; - seq: number; } export type MGroupCallBase = MCallBase & { @@ -74,6 +73,7 @@ export type MGroupCallBase = MCallBase & { sender_session_id: string; dest_session_id: string; party_id: string; // Should not need this? + seq: number; } export type MCallAnswer = Base & { diff --git a/src/matrix/calls/common.ts b/src/matrix/calls/common.ts index db49a168..66db6edc 100644 --- a/src/matrix/calls/common.ts +++ b/src/matrix/calls/common.ts @@ -25,14 +25,36 @@ export function getStreamVideoTrack(stream: Stream | undefined): Track | undefin } export class MuteSettings { - constructor (public readonly microphone: boolean = false, public readonly camera: boolean = false) {} + constructor ( + private readonly isMicrophoneMuted: boolean = false, + private readonly isCameraMuted: boolean = false, + private hasMicrophoneTrack: boolean = false, + private hasCameraTrack: boolean = false, + ) {} + + updateTrackInfo(userMedia: Stream | undefined) { + this.hasMicrophoneTrack = !!getStreamAudioTrack(userMedia); + this.hasCameraTrack = !!getStreamVideoTrack(userMedia); + } + + get microphone(): boolean { + return !this.hasMicrophoneTrack || this.isMicrophoneMuted; + } + + get camera(): boolean { + return !this.hasCameraTrack || this.isCameraMuted; + } toggleCamera(): MuteSettings { - return new MuteSettings(this.microphone, !this.camera); + return new MuteSettings(this.microphone, !this.camera, this.hasMicrophoneTrack, this.hasCameraTrack); } toggleMicrophone(): MuteSettings { - return new MuteSettings(!this.microphone, this.camera); + return new MuteSettings(!this.microphone, this.camera, this.hasMicrophoneTrack, this.hasCameraTrack); + } + + equals(other: MuteSettings) { + return this.microphone === other.microphone && this.camera === other.camera; } } diff --git a/src/matrix/calls/group/GroupCall.ts b/src/matrix/calls/group/GroupCall.ts index 97efc498..a04b9d49 100644 --- a/src/matrix/calls/group/GroupCall.ts +++ b/src/matrix/calls/group/GroupCall.ts @@ -18,7 +18,7 @@ import {ObservableMap} from "../../../observable/map/ObservableMap"; import {Member} from "./Member"; import {LocalMedia} from "../LocalMedia"; import {MuteSettings, CALL_LOG_TYPE} from "../common"; -import {RoomMember} from "../../room/members/RoomMember"; +import {MemberChange, RoomMember} from "../../room/members/RoomMember"; import {EventEmitter} from "../../../utils/EventEmitter"; import {EventType, CallIntent} from "../callEventTypes"; @@ -55,7 +55,7 @@ function getDeviceFromMemberKey(key: string): string { export type Options = Omit & { emitUpdate: (call: GroupCall, params?: any) => void; - encryptDeviceMessage: (roomId: string, userId: string, message: SignallingMessage, log: ILogItem) => Promise, + encryptDeviceMessage: (roomId: string, userId: string, deviceId: string, message: SignallingMessage, log: ILogItem) => Promise, storage: Storage, logger: ILogger, }; @@ -96,8 +96,8 @@ export class GroupCall extends EventEmitter<{change: never}> { this._memberOptions = Object.assign({}, options, { confId: this.id, emitUpdate: member => this._members.update(getMemberKey(member.userId, member.deviceId), member), - encryptDeviceMessage: (userId: string, message: SignallingMessage, log) => { - return this.options.encryptDeviceMessage(this.roomId, userId, message, log); + encryptDeviceMessage: (userId: string, deviceId: string, message: SignallingMessage, log) => { + return this.options.encryptDeviceMessage(this.roomId, userId, deviceId, message, log); } }); } @@ -148,21 +148,26 @@ export class GroupCall extends EventEmitter<{change: never}> { ownSessionId: this.options.sessionId }); const membersLogItem = logItem.child("member connections"); + const localMuteSettings = new MuteSettings(); + localMuteSettings.updateTrackInfo(localMedia.userMedia); const joinedData = new JoinedData( logItem, membersLogItem, localMedia, - new MuteSettings() + localMuteSettings ); this.joinedData = joinedData; await joinedData.logItem.wrap("join", async log => { this._state = GroupCallState.Joining; this.emitChange(); - const memberContent = await this._createJoinPayload(); - // send m.call.member state event - const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCallMember, this.options.ownUserId, memberContent, {log}); - await request.response(); - this.emitChange(); + await log.wrap("update member state", async log => { + const memberContent = await this._createJoinPayload(); + log.set("payload", memberContent); + // send m.call.member state event + const request = this.options.hsApi.sendState(this.roomId, EventType.GroupCallMember, this.options.ownUserId, memberContent, {log}); + await request.response(); + this.emitChange(); + }); // send invite to all members that are < my userId for (const [,member] of this._members) { this.connectToMember(member, joinedData, log); @@ -174,10 +179,14 @@ export class GroupCall extends EventEmitter<{change: never}> { if ((this._state === GroupCallState.Joining || this._state === GroupCallState.Joined) && this.joinedData) { const oldMedia = this.joinedData.localMedia; this.joinedData.localMedia = localMedia; + // reflect the fact we gained or lost local tracks in the local mute settings + // and update the track info so PeerCall can use it to send up to date metadata, + this.joinedData.localMuteSettings.updateTrackInfo(localMedia.userMedia); + this.emitChange(); //allow listeners to see new media/mute settings await Promise.all(Array.from(this._members.values()).map(m => { return m.setMedia(localMedia, oldMedia); })); - oldMedia?.stopExcept(localMedia); + oldMedia?.dispose(); } } @@ -186,11 +195,19 @@ export class GroupCall extends EventEmitter<{change: never}> { if (!joinedData) { return; } + const prevMuteSettings = joinedData.localMuteSettings; + // we still update the mute settings if nothing changed because + // you might be muted because you don't have a track or because + // you actively chosen to mute + // (which we want to respect in the future when you add a track) joinedData.localMuteSettings = muteSettings; - await Promise.all(Array.from(this._members.values()).map(m => { - return m.setMuted(joinedData.localMuteSettings); - })); - this.emitChange(); + joinedData.localMuteSettings.updateTrackInfo(joinedData.localMedia.userMedia); + if (!prevMuteSettings.equals(muteSettings)) { + await Promise.all(Array.from(this._members.values()).map(m => { + return m.setMuted(joinedData.localMuteSettings); + })); + this.emitChange(); + } } get muteSettings(): MuteSettings | undefined { @@ -269,7 +286,20 @@ export class GroupCall extends EventEmitter<{change: never}> { } /** @internal */ - updateMembership(userId: string, callMembership: CallMembership, eventTimestamp: number, syncLog: ILogItem) { + updateRoomMembers(memberChanges: Map) { + for (const change of memberChanges.values()) { + const {member} = change; + for (const callMember of this._members.values()) { + // find all call members for a room member (can be multiple, for every device) + if (callMember.userId === member.userId) { + callMember.updateRoomMember(member); + } + } + } + } + + /** @internal */ + updateMembership(userId: string, roomMember: RoomMember, callMembership: CallMembership, eventTimestamp: number, syncLog: ILogItem) { syncLog.wrap({l: "update call membership", t: CALL_LOG_TYPE, id: this.id, userId}, log => { const devices = callMembership["m.devices"]; const previousDeviceIds = this.getDeviceIdsForUserId(userId); @@ -306,8 +336,8 @@ export class GroupCall extends EventEmitter<{change: never}> { } log.set("add", true); member = new Member( - RoomMember.fromUserId(this.roomId, userId, "join"), - device, deviceIndex, eventTimestamp, this._memberOptions + roomMember, + device, deviceIndex, eventTimestamp, this._memberOptions, ); this._members.add(memberKey, member); if (this.joinedData) { @@ -499,8 +529,7 @@ export class GroupCall extends EventEmitter<{change: never}> { const logItem = joinedData.membersLogItem.child({l: "member", id: memberKey}); logItem.set("sessionId", member.sessionId); log.wrap({l: "connect", id: memberKey}, log => { - // Safari can't send a MediaStream to multiple sources, so clone it - const connectItem = member.connect(joinedData.localMedia.clone(), joinedData.localMuteSettings, logItem); + const connectItem = member.connect(joinedData.localMedia, joinedData.localMuteSettings, logItem); if (connectItem) { log.refDetached(connectItem); } diff --git a/src/matrix/calls/group/Member.ts b/src/matrix/calls/group/Member.ts index 7b64d277..972f7966 100644 --- a/src/matrix/calls/group/Member.ts +++ b/src/matrix/calls/group/Member.ts @@ -18,7 +18,7 @@ import {PeerCall, CallState} from "../PeerCall"; import {makeTxnId, makeId} from "../../common"; import {EventType, CallErrorCode} from "../callEventTypes"; import {formatToDeviceMessagesPayload} from "../../common"; - +import {sortedIndex} from "../../../utils/sortedIndex"; import type {MuteSettings} from "../common"; import type {Options as PeerCallOptions, RemoteMedia} from "../PeerCall"; import type {LocalMedia} from "../LocalMedia"; @@ -36,7 +36,7 @@ export type Options = Omit, log: ILogItem) => Promise, + encryptDeviceMessage: (userId: string, deviceId: string, message: SignallingMessage, log: ILogItem) => Promise, emitUpdate: (participant: Member, params?: any) => void, } @@ -53,6 +53,9 @@ const errorCodesWithoutRetry = [ class MemberConnection { public retryCount: number = 0; public peerCall?: PeerCall; + public lastProcessedSeqNr: number | undefined; + public queuedSignallingMessages: SignallingMessage[] = []; + public outboundSeqCounter: number = 0; constructor( public localMedia: LocalMedia, @@ -65,7 +68,7 @@ export class Member { private connection?: MemberConnection; constructor( - public readonly member: RoomMember, + public member: RoomMember, private callDeviceMembership: CallDeviceMembership, private _deviceIndex: number, private _eventTimestamp: number, @@ -123,7 +126,8 @@ export class Member { if (this.connection) { return; } - const connection = new MemberConnection(localMedia, localMuteSettings, memberLogItem); + // Safari can't send a MediaStream to multiple sources, so clone it + const connection = new MemberConnection(localMedia.clone(), localMuteSettings, memberLogItem); this.connection = connection; let connectLogItem; connection.logItem.wrap("connect", async log => { @@ -167,7 +171,7 @@ export class Member { connection.logItem.wrap("disconnect", async log => { disconnectLogItem = log; if (hangup) { - connection.peerCall?.hangup(CallErrorCode.UserHangup, log); + await connection.peerCall?.hangup(CallErrorCode.UserHangup, log); } else { await connection.peerCall?.close(undefined, log); } @@ -194,6 +198,13 @@ export class Member { this.connection.logItem.refDetached(causeItem); } } + + /** @internal */ + updateRoomMember(roomMember: RoomMember) { + this.member = roomMember; + // TODO: this emits an update during the writeSync phase, which we usually try to avoid + this.options.emitUpdate(this); + } /** @internal */ emitUpdateFromPeerCall = (peerCall: PeerCall, params: any, log: ILogItem): void => { @@ -230,25 +241,26 @@ export class Member { /** @internal */ sendSignallingMessage = async (message: SignallingMessage, log: ILogItem): Promise => { const groupMessage = message as SignallingMessage; + groupMessage.content.seq = this.connection!.outboundSeqCounter++; groupMessage.content.conf_id = this.options.confId; groupMessage.content.device_id = this.options.ownDeviceId; groupMessage.content.party_id = this.options.ownDeviceId; groupMessage.content.sender_session_id = this.options.sessionId; groupMessage.content.dest_session_id = this.sessionId; - // const encryptedMessages = await this.options.encryptDeviceMessage(this.member.userId, groupMessage, log); - // const payload = formatToDeviceMessagesPayload(encryptedMessages); - const payload = { - messages: { - [this.member.userId]: { - [this.deviceId]: groupMessage.content - } - } - }; + let payload; + let type: string = message.type; + const encryptedMessages = await this.options.encryptDeviceMessage(this.member.userId, this.deviceId, groupMessage, log); + if (encryptedMessages) { + payload = formatToDeviceMessagesPayload(encryptedMessages); + type = "m.room.encrypted"; + } else { + // device needs deviceId and userId + payload = formatToDeviceMessagesPayload([{content: groupMessage.content, device: this}]); + } // TODO: remove this for release log.set("payload", groupMessage.content); const request = this.options.hsApi.sendToDevice( - message.type, - //"m.room.encrypted", + type, payload, makeTxnId(), {log} @@ -269,11 +281,27 @@ export class Member { if (message.type === EventType.Invite && !connection.peerCall) { connection.peerCall = this._createPeerCall(message.content.call_id); } + const idx = sortedIndex(connection.queuedSignallingMessages, message, (a, b) => a.content.seq - b.content.seq); + connection.queuedSignallingMessages.splice(idx, 0, message); + let hasBeenDequeued = false; if (connection.peerCall) { - const item = connection.peerCall.handleIncomingSignallingMessage(message, this.deviceId, connection.logItem); - syncLog.refDetached(item); - } else { - // TODO: need to buffer events until invite comes? + while ( + connection.queuedSignallingMessages.length && ( + connection.lastProcessedSeqNr === undefined || + connection.queuedSignallingMessages[0].content.seq === connection.lastProcessedSeqNr + 1 + ) + ) { + const dequeuedMessage = connection.queuedSignallingMessages.shift()!; + if (dequeuedMessage === message) { + hasBeenDequeued = true; + } + const item = connection.peerCall!.handleIncomingSignallingMessage(dequeuedMessage, this.deviceId, connection.logItem); + syncLog.refDetached(item); + connection.lastProcessedSeqNr = dequeuedMessage.content.seq; + } + } + if (!hasBeenDequeued) { + syncLog.refDetached(connection.logItem.log({l: "queued signalling message", type: message.type, seq: message.content.seq})); } } else { syncLog.log({l: "member not connected", userId: this.userId, deviceId: this.deviceId}); @@ -284,7 +312,7 @@ export class Member { async setMedia(localMedia: LocalMedia, previousMedia: LocalMedia): Promise { const {connection} = this; if (connection) { - connection.localMedia = connection.localMedia.replaceClone(connection.localMedia, previousMedia); + connection.localMedia = localMedia.replaceClone(connection.localMedia, previousMedia); await connection.peerCall?.setMedia(connection.localMedia, connection.logItem); } } diff --git a/src/matrix/e2ee/DeviceTracker.js b/src/matrix/e2ee/DeviceTracker.js index 0068a1f9..0d0b0e8b 100644 --- a/src/matrix/e2ee/DeviceTracker.js +++ b/src/matrix/e2ee/DeviceTracker.js @@ -214,11 +214,12 @@ export class DeviceTracker { const allDeviceIdentities = []; const deviceIdentitiesToStore = []; // filter out devices that have changed their ed25519 key since last time we queried them - deviceIdentities = await Promise.all(deviceIdentities.map(async deviceIdentity => { + await Promise.all(deviceIdentities.map(async deviceIdentity => { if (knownDeviceIds.includes(deviceIdentity.deviceId)) { const existingDevice = await txn.deviceIdentities.get(deviceIdentity.userId, deviceIdentity.deviceId); if (existingDevice.ed25519Key !== deviceIdentity.ed25519Key) { allDeviceIdentities.push(existingDevice); + return; } } allDeviceIdentities.push(deviceIdentity); @@ -308,6 +309,7 @@ export class DeviceTracker { return await this._devicesForUserIds(roomId, userIds, txn, hsApi, log); } + /** gets devices for the given user ids that are in the given room */ async devicesForRoomMembers(roomId, userIds, hsApi, log) { const txn = await this._storage.readTxn([ this._storage.storeNames.userIdentities, @@ -315,6 +317,60 @@ export class DeviceTracker { return await this._devicesForUserIds(roomId, userIds, txn, hsApi, log); } + /** gets a single device */ + async deviceForId(userId, deviceId, hsApi, log) { + const txn = await this._storage.readTxn([ + this._storage.storeNames.deviceIdentities, + ]); + let device = await txn.deviceIdentities.get(userId, deviceId); + if (device) { + log.set("existingDevice", true); + } else { + //// BEGIN EXTRACT (deviceKeysMap) + const deviceKeyResponse = await hsApi.queryKeys({ + "timeout": 10000, + "device_keys": { + [userId]: [deviceId] + }, + "token": this._getSyncToken() + }, {log}).response(); + // verify signature + const verifiedKeysPerUser = log.wrap("verify", log => this._filterVerifiedDeviceKeys(deviceKeyResponse["device_keys"], log)); + //// END EXTRACT + + const verifiedKeys = verifiedKeysPerUser + .find(vkpu => vkpu.userId === userId).verifiedKeys + .find(vk => vk["device_id"] === deviceId); + // user hasn't uploaded keys for device? + if (!verifiedKeys) { + return undefined; + } + device = deviceKeysAsDeviceIdentity(verifiedKeys); + const txn = await this._storage.readWriteTxn([ + this._storage.storeNames.deviceIdentities, + ]); + // check again we don't have the device already. + // when updating all keys for a user we allow updating the + // device when the key hasn't changed so the device display name + // can be updated, but here we don't. + const existingDevice = await txn.deviceIdentities.get(userId, deviceId); + if (existingDevice) { + device = existingDevice; + log.set("existingDeviceAfterFetch", true); + } else { + try { + txn.deviceIdentities.set(device); + log.set("newDevice", true); + } catch (err) { + txn.abort(); + throw err; + } + await txn.complete(); + } + } + return device; + } + /** * @param {string} roomId [description] * @param {Array} userIds a set of user ids to try and find the identity for. Will be check to belong to roomId. @@ -363,3 +419,154 @@ export class DeviceTracker { return await txn.deviceIdentities.getByCurve25519Key(curve25519Key); } } + +import {createMockStorage} from "../../mocks/Storage"; +import {Instance as NullLoggerInstance} from "../../logging/NullLogger"; + +export function tests() { + + function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) { + return { + isTrackingMembers: false, + isEncrypted: true, + loadMemberList: () => { + const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};}); + const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};}); + const members = joinedMembers.concat(invitedMembers); + const memberMap = members.reduce((map, member) => { + map.set(member.userId, member); + return map; + }, new Map()); + return {members: memberMap, release() {}} + }, + writeIsTrackingMembers(isTrackingMembers) { + if (this.isTrackingMembers !== isTrackingMembers) { + return isTrackingMembers; + } + return undefined; + }, + applyIsTrackingMembersChanges(isTrackingMembers) { + if (isTrackingMembers !== undefined) { + this.isTrackingMembers = isTrackingMembers; + } + }, + } + } + + function createQueryKeysHSApiMock(createKey = (algorithm, userId, deviceId) => `${algorithm}:${userId}:${deviceId}:key`) { + return { + queryKeys(payload) { + const {device_keys: deviceKeys} = payload; + const userKeys = Object.entries(deviceKeys).reduce((userKeys, [userId, deviceIds]) => { + if (deviceIds.length === 0) { + deviceIds = ["device1"]; + } + userKeys[userId] = deviceIds.filter(d => d === "device1").reduce((deviceKeys, deviceId) => { + deviceKeys[deviceId] = { + "algorithms": [ + "m.olm.v1.curve25519-aes-sha2", + "m.megolm.v1.aes-sha2" + ], + "device_id": deviceId, + "keys": { + [`curve25519:${deviceId}`]: createKey("curve25519", userId, deviceId), + [`ed25519:${deviceId}`]: createKey("ed25519", userId, deviceId), + }, + "signatures": { + [userId]: { + [`ed25519:${deviceId}`]: `ed25519:${userId}:${deviceId}:signature` + } + }, + "unsigned": { + "device_display_name": `${userId} Phone` + }, + "user_id": userId + }; + return deviceKeys; + }, {}); + return userKeys; + }, {}); + const response = {device_keys: userKeys}; + return { + async response() { + return response; + } + }; + } + }; + } + const roomId = "!abc:hs.tld"; + + return { + "trackRoom only writes joined members": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const txn = await storage.readTxn([storage.storeNames.userIdentities]); + assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), { + userId: "@alice:hs.tld", + roomIds: [roomId], + deviceTrackingStatus: TRACKING_STATUS_OUTDATED + }); + assert.deepEqual(await txn.userIdentities.get("@bob:hs.tld"), { + userId: "@bob:hs.tld", + roomIds: [roomId], + deviceTrackingStatus: TRACKING_STATUS_OUTDATED + }); + assert.equal(await txn.userIdentities.get("@charly:hs.tld"), undefined); + }, + "getting devices for tracked room yields correct keys": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const hsApi = createQueryKeysHSApiMock(); + const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); + assert.equal(devices.length, 2); + assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key"); + }, + "device with changed key is ignored": async assert => { + const storage = await createMockStorage(); + const tracker = new DeviceTracker({ + storage, + getSyncToken: () => "token", + olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw + ownUserId: "@alice:hs.tld", + ownDeviceId: "ABCD", + }); + const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); + await tracker.trackRoom(room, NullLoggerInstance.item); + const hsApi = createQueryKeysHSApiMock(); + // query devices first time + await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); + const txn = await storage.readWriteTxn([storage.storeNames.userIdentities]); + // mark alice as outdated, so keys will be fetched again + tracker.writeDeviceChanges(["@alice:hs.tld"], txn, NullLoggerInstance.item); + await txn.complete(); + const hsApiWithChangedAliceKey = createQueryKeysHSApiMock((algo, userId, deviceId) => { + return `${algo}:${userId}:${deviceId}:${userId === "@alice:hs.tld" ? "newKey" : "key"}`; + }); + const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApiWithChangedAliceKey, NullLoggerInstance.item); + assert.equal(devices.length, 2); + assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key"); + const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]); + // also check the modified key was not stored + assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key"); + } + } +} diff --git a/src/matrix/e2ee/README.md b/src/matrix/e2ee/README.md index fab53880..fdb4866c 100644 --- a/src/matrix/e2ee/README.md +++ b/src/matrix/e2ee/README.md @@ -41,5 +41,8 @@ Runs before any room.prepareSync, so the new room keys can be passed to each roo - e2ee account - generate more otks if needed - upload new otks if needed or device keys if not uploaded before + - device message handler: + - fetch keys we don't know about yet for (call) to_device messages identity + - pass signalling messages to call handler - rooms - share new room keys if needed diff --git a/src/matrix/net/common.ts b/src/matrix/net/common.ts index 4ba42395..9f0fade4 100644 --- a/src/matrix/net/common.ts +++ b/src/matrix/net/common.ts @@ -17,9 +17,12 @@ limitations under the License. import {BlobHandle} from "../../platform/web/dom/BlobHandle.js"; +export type RequestBody = BlobHandle | string | Map; + export type EncodedBody = { mimeType: string; - body: BlobHandle | string; + // the map gets transformed to a FormData object on the web + body: RequestBody } export function encodeQueryParams(queryParams?: object): string { @@ -41,6 +44,11 @@ export function encodeBody(body: BlobHandle | object): EncodedBody { mimeType: blob.mimeType, body: blob // will be unwrapped in request fn }; + } else if (body instanceof Map) { + return { + mimeType: "multipart/form-data", + body: body + } } else if (typeof body === "object") { const json = JSON.stringify(body); return { diff --git a/src/matrix/room/BaseRoom.js b/src/matrix/room/BaseRoom.js index 76c6c9f7..21b8e93d 100644 --- a/src/matrix/room/BaseRoom.js +++ b/src/matrix/room/BaseRoom.js @@ -459,6 +459,10 @@ export class BaseRoom extends EventEmitter { return this._summary.data.isDirectMessage; } + get user() { + return this._user; + } + isDirectMessageForUserId(userId) { if (this._summary.data.dmUserId === userId) { return true; diff --git a/src/matrix/room/Room.js b/src/matrix/room/Room.js index 38982786..425401d8 100644 --- a/src/matrix/room/Room.js +++ b/src/matrix/room/Room.js @@ -123,7 +123,7 @@ export class Room extends BaseRoom { txn.roomState.removeAllForRoom(this.id); txn.roomMembers.removeAllForRoom(this.id); } - const {entries: newEntries, updatedEntries, newLiveKey, memberChanges} = + const {entries: newEntries, updatedEntries, newLiveKey, memberChanges, memberSync} = await log.wrap("syncWriter", log => this._syncWriter.writeSync( roomResponse, isRejoin, summaryChanges.hasFetchedMembers, txn, log), log.level.Detail); if (decryptChanges) { @@ -180,7 +180,7 @@ export class Room extends BaseRoom { removedPendingEvents = await this._sendQueue.removeRemoteEchos(roomResponse.timeline.events, txn, log); } const powerLevelsEvent = this._getPowerLevelsEvent(roomResponse); - this._runRoomStateHandlers(roomResponse, txn, log); + await this._runRoomStateHandlers(roomResponse, memberSync, txn, log); return { roomResponse, summaryChanges, @@ -453,14 +453,16 @@ export class Room extends BaseRoom { return this._sendQueue.pendingEvents; } - /** global room state handlers, run during write sync step */ - _runRoomStateHandlers(roomResponse, txn, log) { + /** global room state handlers, run during writeSync step */ + _runRoomStateHandlers(roomResponse, memberSync, txn, log) { + const promises = []; iterateResponseStateEvents(roomResponse, event => { - this._roomStateHandler.handleRoomState(this, event, txn, log); + promises.push(this._roomStateHandler.handleRoomState(this, event, memberSync, txn, log)); }); + return Promise.all(promises); } - /** local room state observers, run during after sync step */ + /** local room state observers, run during afterSync step */ _emitSyncRoomState(roomResponse) { iterateResponseStateEvents(roomResponse, event => { for (const handler of this._roomStateObservers) { diff --git a/src/matrix/room/state/RoomStateHandlerSet.ts b/src/matrix/room/state/RoomStateHandlerSet.ts index 986cb0f9..491b02ce 100644 --- a/src/matrix/room/state/RoomStateHandlerSet.ts +++ b/src/matrix/room/state/RoomStateHandlerSet.ts @@ -20,14 +20,17 @@ import type {Transaction} from "../../storage/idb/Transaction"; import type {Room} from "../Room"; import type {MemberChange} from "../members/RoomMember"; import type {RoomStateHandler} from "./types"; +import type {MemberSync} from "../timeline/persistence/MemberWriter.js"; import {BaseObservable} from "../../../observable/BaseObservable"; /** keeps track of all handlers registered with Session.observeRoomState */ export class RoomStateHandlerSet extends BaseObservable implements RoomStateHandler { - handleRoomState(room: Room, stateEvent: StateEvent, txn: Transaction, log: ILogItem) { + async handleRoomState(room: Room, stateEvent: StateEvent, memberSync: MemberSync, txn: Transaction, log: ILogItem): Promise { + const promises: Promise[] = []; for(let h of this._handlers) { - h.handleRoomState(room, stateEvent, txn, log); + promises.push(h.handleRoomState(room, stateEvent, memberSync, txn, log)); } + await Promise.all(promises); } updateRoomMembers(room: Room, memberChanges: Map) { for(let h of this._handlers) { diff --git a/src/matrix/room/state/types.ts b/src/matrix/room/state/types.ts index ef99c727..2e7167d2 100644 --- a/src/matrix/room/state/types.ts +++ b/src/matrix/room/state/types.ts @@ -19,12 +19,13 @@ import type {StateEvent} from "../../storage/types"; import type {Transaction} from "../../storage/idb/Transaction"; import type {ILogItem} from "../../../logging/types"; import type {MemberChange} from "../members/RoomMember"; +import type {MemberSync} from "../timeline/persistence/MemberWriter"; /** used for Session.observeRoomState, which observes in all room, but without loading from storage * It receives the sync write transaction, so other stores can be updated as part of the same transaction. */ export interface RoomStateHandler { - handleRoomState(room: Room, stateEvent: StateEvent, syncWriteTxn: Transaction, log: ILogItem); - updateRoomMembers(room: Room, memberChanges: Map); + handleRoomState(room: Room, stateEvent: StateEvent, memberSync: MemberSync, syncWriteTxn: Transaction, log: ILogItem): Promise; + updateRoomMembers(room: Room, memberChanges: Map): void; } /** diff --git a/src/matrix/room/timeline/persistence/MemberWriter.js b/src/matrix/room/timeline/persistence/MemberWriter.js index 1cdcb7d5..9345324e 100644 --- a/src/matrix/room/timeline/persistence/MemberWriter.js +++ b/src/matrix/room/timeline/persistence/MemberWriter.js @@ -56,7 +56,11 @@ export class MemberWriter { } } -class MemberSync { +/** Represents the member changes in a given sync. + * Used to write the changes to storage and historical member + * information for events in the same sync. + **/ +export class MemberSync { constructor(memberWriter, stateEvents, timelineEvents, hasFetchedMembers) { this._memberWriter = memberWriter; this._timelineEvents = timelineEvents; diff --git a/src/matrix/room/timeline/persistence/SyncWriter.js b/src/matrix/room/timeline/persistence/SyncWriter.js index dc5ae3a8..76c7bec7 100644 --- a/src/matrix/room/timeline/persistence/SyncWriter.js +++ b/src/matrix/room/timeline/persistence/SyncWriter.js @@ -244,7 +244,7 @@ export class SyncWriter { const {currentKey, entries, updatedEntries} = await this._writeTimeline(timelineEvents, timeline, memberSync, this._lastLiveKey, txn, log); const memberChanges = await memberSync.write(txn); - return {entries, updatedEntries, newLiveKey: currentKey, memberChanges}; + return {entries, updatedEntries, newLiveKey: currentKey, memberChanges, memberSync}; } afterSync(newLiveKey) { diff --git a/src/matrix/storage/idb/StorageFactory.ts b/src/matrix/storage/idb/StorageFactory.ts index 5cb1b6e5..264d8670 100644 --- a/src/matrix/storage/idb/StorageFactory.ts +++ b/src/matrix/storage/idb/StorageFactory.ts @@ -67,7 +67,7 @@ export class StorageFactory { requestPersistedStorage().then(persisted => { // Firefox lies here though, and returns true even if the user denied the request if (!persisted) { - console.warn("no persisted storage, database can be evicted by browser"); + log.log("no persisted storage, database can be evicted by browser", log.level.Warn); } }); diff --git a/src/platform/types/MediaDevices.ts b/src/platform/types/MediaDevices.ts index 1b5f7afd..c5439ac4 100644 --- a/src/platform/types/MediaDevices.ts +++ b/src/platform/types/MediaDevices.ts @@ -56,6 +56,8 @@ export interface Stream { clone(): Stream; addEventListener(type: K, listener: (this: Stream, ev: StreamEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: Stream, ev: StreamEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + addTrack(track: Track); + removeTrack(track: Track); } export enum TrackKind { diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts new file mode 100644 index 00000000..9a984277 --- /dev/null +++ b/src/platform/types/theme.ts @@ -0,0 +1,68 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +export type ThemeManifest = Partial<{ + /** + * Version number of the theme manifest. + * This must be incremented when backwards incompatible changes are introduced. + */ + version: number; + // A user-facing string that is the name for this theme-collection. + name: string; + /** + * This is added to the manifest during the build process and includes data + * that is needed to load themes at runtime. + */ + source: { + /** + * This is a mapping from theme-id to location of css file relative to the location of the + * manifest. + * eg: {"element-light": "theme-element-light.10f9bb22.css", ...} + * + * Here theme-id is 'theme-variant' where 'theme' is the key used to specify the manifest + * location for this theme-collection in vite.config.js (where the themeBuilder plugin is + * initialized) and 'variant' is the key used to specify the variant details in the values + * section below. + */ + "built-asset": Record; + // Location of css file that will be used for themes derived from this theme. + "runtime-asset": string; + // Array of derived-variables + "derived-variables": Array; + }; + values: { + /** + * Mapping from variant key to details pertaining to this theme-variant. + * This variant key is used for forming theme-id as mentioned above. + */ + variants: Record; + }; +}>; + +type Variant = Partial<{ + /** + * If true, this variant is used a default dark/light variant and will be the selected theme + * when "Match system theme" is selected for this theme collection in settings. + */ + default: boolean; + // A user-facing string that is the name for this variant. + name: string; + /** + * Mapping from css variable to its value. + * eg: {"background-color-primary": "#21262b", ...} + */ + variables: Record; +}>; diff --git a/src/platform/types/types.ts b/src/platform/types/types.ts index c59278b9..c5f96f8b 100644 --- a/src/platform/types/types.ts +++ b/src/platform/types/types.ts @@ -15,13 +15,13 @@ limitations under the License. */ import type {RequestResult} from "../web/dom/request/fetch.js"; -import type {EncodedBody} from "../../matrix/net/common"; +import type {RequestBody} from "../../matrix/net/common"; import type {ILogItem} from "../../logging/types"; export interface IRequestOptions { uploadProgress?: (loadedBytes: number) => void; timeout?: number; - body?: EncodedBody; + body?: RequestBody; headers?: Map; cache?: boolean; method?: string; diff --git a/src/platform/web/Platform.js b/src/platform/web/Platform.js index 846f7b1c..ed912ee5 100644 --- a/src/platform/web/Platform.js +++ b/src/platform/web/Platform.js @@ -41,6 +41,7 @@ import {parseHTML} from "./parsehtml.js"; import {handleAvatarError} from "./ui/avatar"; import {MediaDevicesWrapper} from "./dom/MediaDevices"; import {DOMWebRTC} from "./dom/WebRTC"; +import {ThemeLoader} from "./ThemeLoader"; function addScript(src) { return new Promise(function (resolve, reject) { @@ -169,20 +170,40 @@ export class Platform { this._workerPromise = undefined; this.mediaDevices = new MediaDevicesWrapper(navigator.mediaDevices); this.webRTC = new DOMWebRTC(); + this._themeLoader = import.meta.env.DEV? null: new ThemeLoader(this); } async init() { - if (!this._config) { - if (!this._configURL) { - throw new Error("Neither config nor configURL was provided!"); - } - const {body}= await this.request(this._configURL, {method: "GET", format: "json", cache: true}).response(); - this._config = body; + try { + await this.logger.run("Platform init", async (log) => { + if (!this._config) { + if (!this._configURL) { + throw new Error("Neither config nor configURL was provided!"); + } + const {status, body}= await this.request(this._configURL, {method: "GET", format: "json", cache: true}).response(); + if (status === 404) { + throw new Error(`Could not find ${this._configURL}. Did you copy over config.sample.json?`); + } else if (status >= 400) { + throw new Error(`Got status ${status} while trying to fetch ${this._configURL}`); + } + this._config = body; + } + this.notificationService = new NotificationService( + this._serviceWorkerHandler, + this._config.push + ); + if (this._themeLoader) { + const manifests = this.config["themeManifests"]; + await this._themeLoader?.init(manifests, log); + const { themeName, themeVariant } = await this._themeLoader.getActiveTheme(); + log.log({ l: "Active theme", name: themeName, variant: themeVariant }); + this._themeLoader.setTheme(themeName, themeVariant, log); + } + }); + } catch (err) { + this._container.innerText = err.message; + throw err; } - this.notificationService = new NotificationService( - this._serviceWorkerHandler, - this._config.push - ); } _createLogger(isDevelopment) { @@ -314,6 +335,27 @@ export class Platform { return DEFINE_VERSION; } + get themeLoader() { + return this._themeLoader; + } + + replaceStylesheet(newPath) { + const head = document.querySelector("head"); + // remove default theme + document.querySelectorAll(".theme").forEach(e => e.remove()); + // add new theme + const styleTag = document.createElement("link"); + styleTag.href = `./${newPath}`; + styleTag.rel = "stylesheet"; + styleTag.type = "text/css"; + styleTag.className = "theme"; + head.appendChild(styleTag); + } + + get description() { + return navigator.userAgent ?? ""; + } + dispose() { this._disposables.dispose(); } diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts new file mode 100644 index 00000000..8c9364bc --- /dev/null +++ b/src/platform/web/ThemeLoader.ts @@ -0,0 +1,207 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import type {ILogItem} from "../../logging/types.js"; +import type {Platform} from "./Platform.js"; + +type NormalVariant = { + id: string; + cssLocation: string; +}; + +type DefaultVariant = { + dark: { + id: string; + cssLocation: string; + variantName: string; + }; + light: { + id: string; + cssLocation: string; + variantName: string; + }; + default: { + id: string; + cssLocation: string; + variantName: string; + }; +} + +type ThemeInformation = NormalVariant | DefaultVariant; + +export enum ColorSchemePreference { + Dark, + Light +}; + +export class ThemeLoader { + private _platform: Platform; + private _themeMapping: Record; + + constructor(platform: Platform) { + this._platform = platform; + } + + async init(manifestLocations: string[], log?: ILogItem): Promise { + await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => { + this._themeMapping = {}; + const results = await Promise.all( + manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response()) + ); + results.forEach(({ body }) => this._populateThemeMap(body, log)); + }); + } + + private _populateThemeMap(manifest, log: ILogItem) { + log.wrap("populateThemeMap", (l) => { + /* + After build has finished, the source section of each theme manifest + contains `built-assets` which is a mapping from the theme-id to + cssLocation of theme + */ + const builtAssets: Record = manifest.source?.["built-assets"]; + const themeName = manifest.name; + let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; + for (const [themeId, cssLocation] of Object.entries(builtAssets)) { + const variant = themeId.match(/.+-(.+)/)?.[1]; + const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!]; + const themeDisplayName = `${themeName} ${variantName}`; + if (isDefault) { + /** + * This is a default variant! + * We'll add these to the themeMapping (separately) keyed with just the + * theme-name (i.e "Element" instead of "Element Dark"). + * We need to be able to distinguish them from other variants! + * + * This allows us to render radio-buttons with "dark" and + * "light" options. + */ + const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; + defaultVariant.variantName = variantName; + defaultVariant.id = themeId + defaultVariant.cssLocation = cssLocation; + continue; + } + // Non-default variants are keyed in themeMapping with "theme_name variant_name" + // eg: "Element Dark" + this._themeMapping[themeDisplayName] = { + cssLocation, + id: themeId + }; + } + if (defaultDarkVariant.id && defaultLightVariant.id) { + /** + * As mentioned above, if there's both a default dark and a default light variant, + * add them to themeMapping separately. + */ + const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant }; + } + else { + /** + * If only one default variant is found (i.e only dark default or light default but not both), + * treat it like any other variant. + */ + const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + } + //Add the default-theme as an additional option to the mapping + const defaultThemeId = this.getDefaultTheme(); + if (defaultThemeId) { + const themeDetails = this._findThemeDetailsFromId(defaultThemeId); + if (themeDetails) { + this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation }; + } + } + l.log({ l: "Default Theme", theme: defaultThemeId}); + l.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" }); + l.log({ l: "Result", themeMapping: this._themeMapping }); + }); + } + + setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) { + this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => { + let cssLocation: string; + let themeDetails = this._themeMapping[themeName]; + if ("id" in themeDetails) { + cssLocation = themeDetails.cssLocation; + } + else { + if (!themeVariant) { + throw new Error("themeVariant is undefined!"); + } + cssLocation = themeDetails[themeVariant].cssLocation; + } + this._platform.replaceStylesheet(cssLocation); + this._platform.settingsStorage.setString("theme-name", themeName); + if (themeVariant) { + this._platform.settingsStorage.setString("theme-variant", themeVariant); + } + else { + this._platform.settingsStorage.remove("theme-variant"); + } + }); + } + + /** Maps theme display name to theme information */ + get themeMapping(): Record { + return this._themeMapping; + } + + async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> { + let themeName = await this._platform.settingsStorage.getString("theme-name"); + let themeVariant = await this._platform.settingsStorage.getString("theme-variant"); + if (!themeName || !this._themeMapping[themeName]) { + themeName = "Default" in this._themeMapping ? "Default" : Object.keys(this._themeMapping)[0]; + if (!this._themeMapping[themeName][themeVariant]) { + themeVariant = "default" in this._themeMapping[themeName] ? "default" : undefined; + } + } + return { themeName, themeVariant }; + } + + getDefaultTheme(): string | undefined { + switch (this.preferredColorScheme) { + case ColorSchemePreference.Dark: + return this._platform.config["defaultTheme"]?.dark; + case ColorSchemePreference.Light: + return this._platform.config["defaultTheme"]?.light; + } + } + + private _findThemeDetailsFromId(themeId: string): {themeName: string, cssLocation: string, variant?: string} | undefined { + for (const [themeName, themeData] of Object.entries(this._themeMapping)) { + if ("id" in themeData && themeData.id === themeId) { + return { themeName, cssLocation: themeData.cssLocation }; + } + else if ("light" in themeData && themeData.light?.id === themeId) { + return { themeName, cssLocation: themeData.light.cssLocation, variant: "light" }; + } + else if ("dark" in themeData && themeData.dark?.id === themeId) { + return { themeName, cssLocation: themeData.dark.cssLocation, variant: "dark" }; + } + } + } + + get preferredColorScheme(): ColorSchemePreference | undefined { + if (window.matchMedia("(prefers-color-scheme: dark)").matches) { + return ColorSchemePreference.Dark; + } + else if (window.matchMedia("(prefers-color-scheme: light)").matches) { + return ColorSchemePreference.Light; + } + } +} diff --git a/src/platform/web/assets/config.json b/src/platform/web/assets/config.json index 703ae1e6..fd46fcbc 100644 --- a/src/platform/web/assets/config.json +++ b/src/platform/web/assets/config.json @@ -4,5 +4,6 @@ "gatewayUrl": "https://matrix.org", "applicationServerKey": "BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM" }, - "defaultHomeServer": "matrix.org" + "defaultHomeServer": "matrix.org", + "bugReportEndpointUrl": "https://element.io/bugreports/submit" } diff --git a/src/platform/web/dom/MediaDevices.ts b/src/platform/web/dom/MediaDevices.ts index c34ab85b..d6439faa 100644 --- a/src/platform/web/dom/MediaDevices.ts +++ b/src/platform/web/dom/MediaDevices.ts @@ -30,6 +30,9 @@ export class MediaDevicesWrapper implements IMediaDevices { async getMediaTracks(audio: true | MediaDeviceInfo, video: boolean | MediaDeviceInfo): Promise { const stream = await this.mediaDevices.getUserMedia(this.getUserMediaContraints(audio, video)); + stream.addEventListener("removetrack", evt => { + console.log(`removing track ${evt.track.id} (${evt.track.kind}) from stream ${stream.id}`); + }); return stream as Stream; } diff --git a/src/platform/web/dom/WebRTC.ts b/src/platform/web/dom/WebRTC.ts index 61d481d4..05e032ca 100644 --- a/src/platform/web/dom/WebRTC.ts +++ b/src/platform/web/dom/WebRTC.ts @@ -24,11 +24,24 @@ const SPEAKING_SAMPLE_COUNT = 8; // samples export class DOMWebRTC implements WebRTC { createPeerConnection(forceTURN: boolean, turnServers: RTCIceServer[], iceCandidatePoolSize): PeerConnection { - return new RTCPeerConnection({ + const peerConn = new RTCPeerConnection({ iceTransportPolicy: forceTURN ? 'relay' : undefined, iceServers: turnServers, iceCandidatePoolSize: iceCandidatePoolSize, }) as PeerConnection; + return new Proxy(peerConn, { + get(target, prop, receiver) { + if (prop === "close") { + console.trace("calling peerConnection.close"); + } + const value = target[prop]; + if (typeof value === "function") { + return value.bind(target); + } else { + return value; + } + } + }); } prepareSenderForPurpose(peerConnection: PeerConnection, sender: Sender, purpose: SDPStreamMetadataPurpose): void { diff --git a/src/platform/web/dom/request/common.js b/src/platform/web/dom/request/common.js index d97456aa..d6ed5074 100644 --- a/src/platform/web/dom/request/common.js +++ b/src/platform/web/dom/request/common.js @@ -27,6 +27,20 @@ export function addCacheBuster(urlStr, random = Math.random) { return urlStr + `_cacheBuster=${Math.ceil(random() * Number.MAX_SAFE_INTEGER)}`; } +export function mapAsFormData(map) { + const formData = new FormData(); + for (const [name, value] of map) { + // Special case {name: string, blob: BlobHandle} to set a filename. + // This is the format returned by platform.openFile + if (value.blob?.nativeBlob && value.name) { + formData.set(name, value.blob.nativeBlob, value.name); + } else { + formData.set(name, value); + } + } + return formData; +} + export function tests() { return { "add cache buster": assert => { diff --git a/src/platform/web/dom/request/fetch.js b/src/platform/web/dom/request/fetch.js index adf833ef..497ad553 100644 --- a/src/platform/web/dom/request/fetch.js +++ b/src/platform/web/dom/request/fetch.js @@ -20,7 +20,7 @@ import { ConnectionError } from "../../../../matrix/error.js"; import {abortOnTimeout} from "../../../../utils/timeout"; -import {addCacheBuster} from "./common.js"; +import {addCacheBuster, mapAsFormData} from "./common.js"; import {xhrRequest} from "./xhr.js"; class RequestResult { @@ -70,6 +70,9 @@ export function createFetchRequest(createTimeout, serviceWorkerHandler) { if (body?.nativeBlob) { body = body.nativeBlob; } + if (body instanceof Map) { + body = mapAsFormData(body); + } let options = {method, body}; if (controller) { options = Object.assign(options, { diff --git a/src/platform/web/dom/request/xhr.js b/src/platform/web/dom/request/xhr.js index c3ad8ae8..fba7123e 100644 --- a/src/platform/web/dom/request/xhr.js +++ b/src/platform/web/dom/request/xhr.js @@ -18,7 +18,7 @@ import { AbortError, ConnectionError } from "../../../../matrix/error.js"; -import {addCacheBuster} from "./common.js"; +import {addCacheBuster, mapAsFormData} from "./common.js"; class RequestResult { constructor(promise, xhr) { @@ -94,6 +94,9 @@ export function xhrRequest(url, options) { if (body?.nativeBlob) { body = body.nativeBlob; } + if (body instanceof Map) { + body = mapAsFormData(body); + } xhr.send(body || null); return new RequestResult(promise, xhr); diff --git a/src/platform/web/sw.js b/src/platform/web/sw.js index a9a92979..088bc059 100644 --- a/src/platform/web/sw.js +++ b/src/platform/web/sw.js @@ -95,8 +95,8 @@ let pendingFetchAbortController = new AbortController(); async function handleRequest(request) { try { - if (request.url.includes("config.json")) { - return handleConfigRequest(request); + if (request.url.includes("config.json") || /theme-.+\.json/.test(request.url)) { + return handleStaleWhileRevalidateRequest(request); } const url = new URL(request.url); // rewrite / to /index.html so it hits the cache @@ -123,9 +123,13 @@ async function handleRequest(request) { } } -async function handleConfigRequest(request) { +/** + * Stale-while-revalidate caching for certain files + * see https://developer.chrome.com/docs/workbox/caching-strategies-overview/#stale-while-revalidate + */ +async function handleStaleWhileRevalidateRequest(request) { let response = await readCache(request); - const networkResponsePromise = fetchAndUpdateConfig(request); + const networkResponsePromise = fetchAndUpdateCache(request); if (response) { return response; } else { @@ -133,7 +137,7 @@ async function handleConfigRequest(request) { } } -async function fetchAndUpdateConfig(request) { +async function fetchAndUpdateCache(request) { const response = await fetch(request, { signal: pendingFetchAbortController.signal, headers: { @@ -156,8 +160,14 @@ async function updateCache(request, response) { cache.put(request, response.clone()); } else if (request.url.startsWith(baseURL)) { let assetName = request.url.substr(baseURL.length); + let cacheName; if (HASHED_CACHED_ON_REQUEST_ASSETS.includes(assetName)) { - const cache = await caches.open(hashedCacheName); + cacheName = hashedCacheName; + } else if (UNHASHED_PRECACHED_ASSETS.includes(assetName)) { + cacheName = unhashedCacheName; + } + if (cacheName) { + const cache = await caches.open(cacheName); await cache.put(request, response.clone()); } } diff --git a/src/platform/web/ui/avatar.js b/src/platform/web/ui/avatar.js index 5bc019cb..547d4b51 100644 --- a/src/platform/web/ui/avatar.js +++ b/src/platform/web/ui/avatar.js @@ -31,7 +31,7 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) { avatarClasses += ` ${extraClasses}`; } const avatarContent = hasAvatar ? renderImg(vm, size) : text(vm.avatarLetter); - const avatar = tag.div({className: avatarClasses}, [avatarContent]); + const avatar = tag.div({className: avatarClasses, "data-testid": "avatar"}, [avatarContent]); if (hasAvatar) { setAttribute(avatar, "data-avatar-letter", vm.avatarLetter); setAttribute(avatar, "data-avatar-color", vm.avatarColorNumber); diff --git a/src/platform/web/ui/css/avatar.css b/src/platform/web/ui/css/avatar.css index 2ee9ca0c..a8f8080d 100644 --- a/src/platform/web/ui/css/avatar.css +++ b/src/platform/web/ui/css/avatar.css @@ -46,6 +46,14 @@ limitations under the License. font-size: calc(var(--avatar-size) * 0.6); } +.hydrogen .avatar.size-96 { + --avatar-size: 96px; + width: var(--avatar-size); + height: var(--avatar-size); + line-height: var(--avatar-size); + font-size: calc(var(--avatar-size) * 0.6); +} + .hydrogen .avatar.size-64 { --avatar-size: 64px; width: var(--avatar-size); diff --git a/src/platform/web/ui/css/themes/element/call.css b/src/platform/web/ui/css/themes/element/call.css new file mode 100644 index 00000000..10388fb4 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/call.css @@ -0,0 +1,219 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.CallView { + height: 40vh; + display: grid; +} + +.CallView > * { + grid-column: 1; + grid-row: 1; +} + +.CallView_members { + display: grid; + gap: 12px; + background: var(--background-color-secondary--darker-60); + padding: 12px; + margin: 0; + min-height: 0; + list-style: none; + align-self: stretch; +} + +.StreamView { + display: grid; + border-radius: 8px; + overflow: hidden; + background-color: black; +} + +.StreamView > * { + grid-column: 1; + grid-row: 1; +} + +.StreamView video { + width: 100%; + height: 100%; + min-height: 0; + object-fit: contain; +} + +.StreamView_avatar { + align-self: center; + justify-self: center; +} + +.StreamView_muteStatus { + align-self: start; + justify-self: end; + width: 24px; + height: 24px; + background-position: center; + background-repeat: no-repeat; + background-size: 14px; + display: block; + background-color: var(--text-color); + border-radius: 4px; + margin: 4px; +} + +.StreamView_muteStatus.microphoneMuted { + background-image: url("./icons/mic-muted.svg?primary=text-color--lighter-80"); +} + +.StreamView_muteStatus.cameraMuted { + background-image: url("./icons/cam-muted.svg?primary=text-color--lighter-80"); +} + +.CallView_buttons { + align-self: end; + justify-self: center; + display: flex; + gap: 12px; + margin-bottom: 16px; + /** Chrome (v100) requires this to make the buttons clickable + * where they overlap with the video element, even though + * the buttons come later in the DOM. */ + z-index: 1; +} + +.CallView_buttons button { + border-radius: 100%; + width: 48px; + height: 48px; + border: none; + background-color: var(--accent-color); + background-position: center; + background-repeat: no-repeat; +} + +.CallView_buttons button:disabled { + background-color: var(--accent-color--lighter-10); +} + +.CallView_buttons .CallView_hangup { + background-color: var(--error-color); + background-image: url("./icons/hangup.svg?primary=background-color-primary"); +} + +.CallView_buttons .CallView_hangup:disabled { + background-color: var(--error-color--lighter-10); +} + +.CallView_buttons .CallView_mutedMicrophone { + background-color: var(--background-color-primary); + background-image: url("./icons/mic-muted.svg?primary=text-color"); +} + +.CallView_buttons .CallView_unmutedMicrophone { + background-image: url("./icons/mic-unmuted.svg?primary=background-color-primary"); +} + +.CallView_buttons .CallView_mutedCamera { + background-color: var(--background-color-primary); + background-image: url("./icons/cam-muted.svg?primary=text-color"); +} + +.CallView_buttons .CallView_unmutedCamera { + background-image: url("./icons/cam-unmuted.svg?primary=background-color-primary"); +} + +.CallView_members.size1 { + grid-template-columns: 1fr; + grid-template-rows: 1fr; +} + +.CallView_members.size2 { + grid-template-columns: 1fr; + grid-template-rows: repeat(2, 1fr); +} + +/* square */ +.CallView_members.square.size3, +.CallView_members.square.size4 { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); +} +.CallView_members.square.size5, +.CallView_members.square.size6 { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); +} +.CallView_members.square.size7, +.CallView_members.square.size8, +.CallView_members.square.size9 { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); +} +.CallView_members.square.size10 { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(4, 1fr); +} +/** tall */ +.CallView_members.tall.size3 { + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); +} +.CallView_members.tall.size4 { + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 1fr); +} +.CallView_members.tall.size5, +.CallView_members.tall.size6 { + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); +} +.CallView_members.tall.size7, +.CallView_members.tall.size8 { + grid-template-rows: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); +} +.CallView_members.tall.size9, +.CallView_members.tall.size10 { + grid-template-rows: repeat(5, 1fr); + grid-template-columns: repeat(2, 1fr); +} +/** wide */ +.CallView_members.wide.size2 { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; +} +.CallView_members.wide.size3 { + grid-template-rows: 1fr; + grid-template-columns: repeat(3, 1fr); +} +.CallView_members.wide.size4 { + grid-template-rows: 1fr; + grid-template-columns: repeat(4, 1fr); +} +.CallView_members.wide.size5, +.CallView_members.wide.size6 { + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); +} +.CallView_members.wide.size7, +.CallView_members.wide.size8 { + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(4, 1fr); +} +.CallView_members.wide.size9, +.CallView_members.wide.size10 { + grid-template-rows: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); +} diff --git a/src/platform/web/ui/css/themes/element/icons/cam-muted.svg b/src/platform/web/ui/css/themes/element/icons/cam-muted.svg new file mode 100644 index 00000000..6a739ae2 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/cam-muted.svg @@ -0,0 +1 @@ + diff --git a/src/platform/web/ui/css/themes/element/icons/cam-unmuted.svg b/src/platform/web/ui/css/themes/element/icons/cam-unmuted.svg new file mode 100644 index 00000000..9497e075 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/cam-unmuted.svg @@ -0,0 +1 @@ + diff --git a/src/platform/web/ui/css/themes/element/icons/hangup.svg b/src/platform/web/ui/css/themes/element/icons/hangup.svg new file mode 100644 index 00000000..c56fe7a4 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/hangup.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/platform/web/ui/css/themes/element/icons/mic-muted.svg b/src/platform/web/ui/css/themes/element/icons/mic-muted.svg new file mode 100644 index 00000000..35669ee0 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/mic-muted.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/src/platform/web/ui/css/themes/element/icons/mic-unmuted.svg b/src/platform/web/ui/css/themes/element/icons/mic-unmuted.svg new file mode 100644 index 00000000..94b81510 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/mic-unmuted.svg @@ -0,0 +1,16 @@ + + + + + diff --git a/src/platform/web/ui/css/themes/element/icons/video-call.svg b/src/platform/web/ui/css/themes/element/icons/video-call.svg new file mode 100644 index 00000000..bc3688b5 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/video-call.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/platform/web/ui/css/themes/element/icons/voice-call.svg b/src/platform/web/ui/css/themes/element/icons/voice-call.svg new file mode 100644 index 00000000..02a79969 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/voice-call.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/platform/web/ui/css/themes/element/manifest.json b/src/platform/web/ui/css/themes/element/manifest.json index ec1852cb..e183317c 100644 --- a/src/platform/web/ui/css/themes/element/manifest.json +++ b/src/platform/web/ui/css/themes/element/manifest.json @@ -1,45 +1,39 @@ { "version": 1, - "name": "element", + "name": "Element", "values": { - "font-faces": [ - { - "font-family": "Inter", - "src": [{"asset": "/fonts/Inter.ttf", "format": "ttf"}] - } - ], "variants": { - "light": { - "base": true, - "default": true, - "name": "Light", - "variables": { - "background-color-primary": "#fff", + "light": { + "base": true, + "default": true, + "name": "Light", + "variables": { + "background-color-primary": "#fff", "background-color-secondary": "#f6f6f6", - "text-color": "#2E2F32", + "text-color": "#2E2F32", "accent-color": "#03b381", "error-color": "#FF4B55", "fixed-white": "#fff", "room-badge": "#61708b", "link-color": "#238cf5" - } - }, - "dark": { - "dark": true, - "default": true, - "name": "Dark", - "variables": { - "background-color-primary": "#21262b", + } + }, + "dark": { + "dark": true, + "default": true, + "name": "Dark", + "variables": { + "background-color-primary": "#21262b", "background-color-secondary": "#2D3239", - "text-color": "#fff", + "text-color": "#fff", "accent-color": "#03B381", "error-color": "#FF4B55", "fixed-white": "#fff", "room-badge": "#61708b", "link-color": "#238cf5" - } - } - } + } + } + } } } diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index db0ad66b..6403bb60 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -18,6 +18,7 @@ limitations under the License. @import url('../../main.css'); @import url('inter.css'); @import url('timeline.css'); +@import url('call.css'); :root { font-size: 10px; @@ -1155,56 +1156,3 @@ button.RoomDetailsView_row::after { background-position: center; background-size: 36px; } - -.CallView { - max-height: 50vh; - overflow-y: auto; -} - -.CallView ul { - display: flex; - margin: 0; - gap: 12px; - padding: 0; - flex-wrap: wrap; - justify-content: center; -} - -.StreamView { - width: 360px; - min-height: 200px; - border: 2px var(--accent-color) solid; - display: grid; - border-radius: 8px; - overflow: hidden; - background-color: black; -} - -.StreamView > * { - grid-column: 1; - grid-row: 1; -} - -.StreamView video { - width: 100%; -} - -.StreamView_avatar { - align-self: center; - justify-self: center; -} - -.StreamView_muteStatus { - align-self: end; - justify-self: start; - color: var(--text-color--lighter-80); -} - -.StreamView_muteStatus.microphoneMuted::before { - content: "mic muted"; -} - -.StreamView_muteStatus.cameraMuted::before { - content: "cam muted"; -} - diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css index bac4b4a5..43c57d19 100644 --- a/src/platform/web/ui/css/themes/element/timeline.css +++ b/src/platform/web/ui/css/themes/element/timeline.css @@ -233,7 +233,7 @@ only loads when the top comes into view*/ align-self: stretch; } -.Timeline_messageBody .media > .sendStatus { +.Timeline_messageBody .media > .status { align-self: end; justify-self: start; font-size: 0.8em; @@ -251,7 +251,7 @@ only loads when the top comes into view*/ } .Timeline_messageBody .media > time, -.Timeline_messageBody .media > .sendStatus { +.Timeline_messageBody .media > .status { color: var(--text-color); display: block; padding: 2px; diff --git a/src/platform/web/ui/general/utils.ts b/src/platform/web/ui/general/utils.ts index f8d407e9..b310571f 100644 --- a/src/platform/web/ui/general/utils.ts +++ b/src/platform/web/ui/general/utils.ts @@ -54,3 +54,11 @@ export function insertAt(parentNode: Element, idx: number, childNode: Node): voi export function removeChildren(parentNode: Element): void { parentNode.innerHTML = ''; } + +export function disableTargetCallback(callback: (evt: Event) => Promise): (evt: Event) => Promise { + return async (evt: Event) => { + (evt.target as HTMLElement)?.setAttribute("disabled", "disabled"); + await callback(evt); + (evt.target as HTMLElement)?.removeAttribute("disabled"); + } +} diff --git a/src/platform/web/ui/session/room/CallView.ts b/src/platform/web/ui/session/room/CallView.ts index 92dfe6b9..619afc2e 100644 --- a/src/platform/web/ui/session/room/CallView.ts +++ b/src/platform/web/ui/session/room/CallView.ts @@ -17,26 +17,81 @@ limitations under the License. import {TemplateView, Builder} from "../../general/TemplateView"; import {AvatarView} from "../../AvatarView"; import {ListView} from "../../general/ListView"; +import {classNames} from "../../general/html"; import {Stream} from "../../../../types/MediaDevices"; import type {CallViewModel, CallMemberViewModel, IStreamViewModel} from "../../../../../domain/session/room/CallViewModel"; export class CallView extends TemplateView { + private resizeObserver?: ResizeObserver; + render(t: Builder, vm: CallViewModel): Element { + const members = t.view(new ListView({ + className: "CallView_members", + list: vm.memberViewModels + }, vm => new StreamView(vm))) as HTMLElement; + this.bindMembersCssClasses(t, members); return t.div({class: "CallView"}, [ - t.p(vm => `Call ${vm.name} (${vm.id})`), - t.view(new ListView({list: vm.memberViewModels}, vm => new StreamView(vm))), - t.div({class: "buttons"}, [ - t.button({onClick: () => vm.leave()}, "Leave"), - t.button({onClick: () => vm.toggleVideo()}, "Toggle video"), + members, + //t.p(vm => `Call ${vm.name}`), + t.div({class: "CallView_buttons"}, [ + t.button({className: { + "CallView_mutedMicrophone": vm => vm.isMicrophoneMuted, + "CallView_unmutedMicrophone": vm => !vm.isMicrophoneMuted, + }, onClick: disableTargetCallback(() => vm.toggleMicrophone())}), + t.button({className: { + "CallView_mutedCamera": vm => vm.isCameraMuted, + "CallView_unmutedCamera": vm => !vm.isCameraMuted, + }, onClick: disableTargetCallback(() => vm.toggleCamera())}), + t.button({className: "CallView_hangup", onClick: disableTargetCallback(() => vm.hangup())}), ]) ]); } + + private bindMembersCssClasses(t, members) { + t.mapSideEffect(vm => vm.memberCount, count => { + members.classList.forEach((c, _, list) => { + if (c.startsWith("size")) { + list.remove(c); + } + }); + members.classList.add(`size${count}`); + }); + // update classes describing aspect ratio categories + if (typeof ResizeObserver === "function") { + const set = (c, flag) => { + if (flag) { + members.classList.add(c); + } else { + members.classList.remove(c); + } + }; + this.resizeObserver = new ResizeObserver(() => { + const ar = members.clientWidth / members.clientHeight; + const isTall = ar < 0.5; + const isSquare = !isTall && ar < 1.8 + const isWide = !isTall && !isSquare; + set("tall", isTall); + set("square", isSquare); + set("wide", isWide); + }); + this.resizeObserver!.observe(members); + } + } + + public unmount() { + if (this.resizeObserver) { + this.resizeObserver.unobserve((this.root()! as Element).querySelector(".CallView_members")!); + this.resizeObserver = undefined; + } + super.unmount(); + } } class StreamView extends TemplateView { render(t: Builder, vm: IStreamViewModel): Element { const video = t.video({ autoplay: true, + disablePictureInPicture: true, className: { hidden: vm => vm.isCameraMuted } @@ -49,7 +104,7 @@ class StreamView extends TemplateView { t.div({className: { StreamView_avatar: true, hidden: vm => !vm.isCameraMuted - }}, t.view(new AvatarView(vm, 64), {parentProvidesUpdates: true})), + }}, t.view(new AvatarView(vm, 96), {parentProvidesUpdates: true})), t.div({ className: { StreamView_muteStatus: true, @@ -60,4 +115,18 @@ class StreamView extends TemplateView { }) ]); } + + update(value, props) { + super.update(value); + // update the AvatarView as we told it to not subscribe itself with parentProvidesUpdates + this.updateSubViews(value, props); + } +} + +function disableTargetCallback(callback: (evt: Event) => Promise): (evt: Event) => Promise { + return async (evt: Event) => { + (evt.target as HTMLElement)?.setAttribute("disabled", "disabled"); + await callback(evt); + (evt.target as HTMLElement)?.removeAttribute("disabled"); + } } diff --git a/src/platform/web/ui/session/room/timeline/BaseMediaView.js b/src/platform/web/ui/session/room/timeline/BaseMediaView.js index c52fbaed..9d534fd1 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMediaView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMediaView.js @@ -15,6 +15,7 @@ limitations under the License. */ import {BaseMessageView} from "./BaseMessageView.js"; +import {Menu} from "../../../general/Menu.js"; export class BaseMediaView extends BaseMessageView { renderMessageBody(t, vm) { @@ -35,24 +36,39 @@ export class BaseMediaView extends BaseMessageView { this.renderMedia(t, vm), t.time(vm.date + " " + vm.time), ]; + const status = t.div({ + className: { + status: true, + hidden: vm => !vm.status + }, + }, vm => vm.status); + children.push(status); if (vm.isPending) { - const sendStatus = t.div({ - className: { - sendStatus: true, - hidden: vm => !vm.sendStatus - }, - }, vm => vm.sendStatus); const progress = t.progress({ min: 0, max: 100, value: vm => vm.uploadPercentage, className: {hidden: vm => !vm.isUploading} }); - children.push(sendStatus, progress); + children.push(progress); } return t.div({className: "Timeline_messageBody"}, [ - t.div({className: "media", style: `max-width: ${vm.width}px`}, children), + t.div({className: "media", style: `max-width: ${vm.width}px`, "data-testid": "media"}, children), t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) ]); } + + createMenuOptions(vm) { + const options = super.createMenuOptions(vm); + if (!vm.isPending) { + let label; + switch (vm.shape) { + case "image": label = vm.i18n`Download image`; break; + case "video": label = vm.i18n`Download video`; break; + default: label = vm.i18n`Download media`; break; + } + options.push(Menu.option(label, () => vm.downloadMedia())); + } + return options; + } } diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js index f375a4be..d7c48351 100644 --- a/src/platform/web/ui/session/settings/SettingsView.js +++ b/src/platform/web/ui/session/settings/SettingsView.js @@ -15,6 +15,7 @@ limitations under the License. */ import {TemplateView} from "../../general/TemplateView"; +import {disableTargetCallback} from "../../general/utils"; import {KeyBackupSettingsView} from "./KeyBackupSettingsView.js" export class SettingsView extends TemplateView { @@ -93,20 +94,28 @@ export class SettingsView extends TemplateView { ]); }) ); - + settingNodes.push( t.h3("Preferences"), row(t, vm.i18n`Scale down images when sending`, this._imageCompressionRange(t, vm)), + t.if(vm => !import.meta.env.DEV && vm.activeTheme, (t, vm) => { + return row(t, vm.i18n`Use the following theme`, this._themeOptions(t, vm)); + }), ); - const logButtons = [t.button({onClick: () => vm.exportLogs()}, "Export")]; + const logButtons = []; if (import.meta.env.DEV) { logButtons.push(t.button({onClick: () => openLogs(vm)}, "Open logs")); } + if (vm.canSendLogsToServer) { + logButtons.push(t.button({onClick: disableTargetCallback(() => vm.sendLogsToServer())}, `Submit logs to ${vm.logsServer}`)); + } + logButtons.push(t.button({onClick: () => vm.exportLogs()}, "Download logs")); settingNodes.push( t.h3("Application"), row(t, vm.i18n`Version`, version), row(t, vm.i18n`Storage usage`, vm => `${vm.storageUsage} / ${vm.storageQuota}`), row(t, vm.i18n`Debug logs`, logButtons), + t.p({className: {hidden: vm => !vm.logsFeedbackMessage}}, vm => vm.logsFeedbackMessage), t.p(["Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, the usernames of other users and the names of files you send. They do not contain messages. For more information, review our ", t.a({href: "https://element.io/privacy", target: "_blank", rel: "noopener"}, "privacy policy"), "."]), t.p([]) @@ -140,6 +149,56 @@ export class SettingsView extends TemplateView { vm.i18n`no resizing`; })]; } + + _themeOptions(t, vm) { + const { themeName: activeThemeName, themeVariant: activeThemeVariant } = vm.activeTheme; + const optionTags = []; + // 1. render the dropdown containing the themes + for (const name of Object.keys(vm.themeMapping)) { + optionTags.push( t.option({ value: name, selected: name === activeThemeName} , name)); + } + const select = t.select({ + onChange: (e) => { + const themeName = e.target.value; + if(!("id" in vm.themeMapping[themeName])) { + const colorScheme = darkRadioButton.checked ? "dark" : lightRadioButton.checked ? "light" : "default"; + // execute the radio-button callback so that the theme actually changes! + // otherwise the theme would only change when another radio-button is selected. + radioButtonCallback(colorScheme); + return; + } + vm.changeThemeOption(themeName); + } + }, optionTags); + // 2. render the radio-buttons used to choose variant + const radioButtonCallback = (colorScheme) => { + const selectedThemeName = select.options[select.selectedIndex].value; + vm.changeThemeOption(selectedThemeName, colorScheme); + }; + const isDarkSelected = activeThemeVariant === "dark"; + const isLightSelected = activeThemeVariant === "light"; + const darkRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected }); + const defaultRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "default", id: "default", checked: !(isDarkSelected || isLightSelected) }); + const lightRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected }); + const radioButtons = t.form({ + className: { + hidden: () => { + const themeName = select.options[select.selectedIndex].value; + return "id" in vm.themeMapping[themeName]; + } + }, + onChange: (e) => radioButtonCallback(e.target.value) + }, + [ + defaultRadioButton, + t.label({for: "default"}, "Match system theme"), + darkRadioButton, + t.label({for: "dark"}, "dark"), + lightRadioButton, + t.label({for: "light"}, "light"), + ]); + return t.div({ className: "theme-chooser" }, [select, radioButtons]); + } } diff --git a/vite.common-config.js b/vite.common-config.js index 8a82a9da..5d65f8e2 100644 --- a/vite.common-config.js +++ b/vite.common-config.js @@ -40,7 +40,7 @@ const commonOptions = { postcss: { plugins: [ compileVariables({derive, compiledVariables}), - urlVariables({compileVariables}), + urlVariables({compiledVariables}), urlProcessor({replacer}), // cssvariables({ // preserve: (declaration) => { diff --git a/vite.config.js b/vite.config.js index 97fb8885..e784a4ad 100644 --- a/vite.config.js +++ b/vite.config.js @@ -16,25 +16,39 @@ export default defineConfig(({mode}) => { sourcemap: true, rollupOptions: { output: { - assetFileNames: (asset) => asset.name.includes("config.json") ? "assets/[name][extname]": "assets/[name].[hash][extname]", + assetFileNames: (asset) => { + if (asset.name.includes("config.json")) { + return "[name][extname]"; + } + else if (asset.name.match(/theme-.+\.json/)) { + return "assets/[name][extname]"; + } + else { + return "assets/[name].[hash][extname]"; + } + } }, }, }, plugins: [ themeBuilder({ themeConfig: { - themes: {"element": "./src/platform/web/ui/css/themes/element"}, + themes: { + element: "./src/platform/web/ui/css/themes/element", + }, default: "element", }, - compiledVariables + compiledVariables, }), // important this comes before service worker // otherwise the manifest and the icons it refers to won't be cached injectWebManifest("assets/manifest.json"), - injectServiceWorker("./src/platform/web/sw.js", ["index.html"], { + injectServiceWorker("./src/platform/web/sw.js", findUnhashedFileNamesFromBundle, { // placeholders to replace at end of build by chunk name - "index": {DEFINE_GLOBAL_HASH: definePlaceholders.DEFINE_GLOBAL_HASH}, - "sw": definePlaceholders + index: { + DEFINE_GLOBAL_HASH: definePlaceholders.DEFINE_GLOBAL_HASH, + }, + sw: definePlaceholders, }), ], define: Object.assign({ @@ -42,3 +56,16 @@ export default defineConfig(({mode}) => { }, definePlaceholders), }); }); + +function findUnhashedFileNamesFromBundle(bundle) { + const names = ["index.html"]; + for (const fileName of Object.keys(bundle)) { + if (fileName.includes("config.json")) { + names.push(fileName); + } + if (/theme-.+\.json/.test(fileName)) { + names.push(fileName); + } + } + return names; +} diff --git a/vite.sdk-assets-config.js b/vite.sdk-assets-config.js index 5fb9c82f..d7d4d064 100644 --- a/vite.sdk-assets-config.js +++ b/vite.sdk-assets-config.js @@ -3,11 +3,35 @@ const mergeOptions = require('merge-options'); const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes"); const {commonOptions, compiledVariables} = require("./vite.common-config.js"); +// These paths will be saved without their hash so they have a consisent path +// that we can reference in our `package.json` `exports`. And so people can import +// them with a consistent path. +const pathsToExport = [ + "main.js", + "download-sandbox.html", + "theme-element-light.css", + "theme-element-dark.css", +]; + export default mergeOptions(commonOptions, { root: "src/", base: "./", build: { outDir: "../target/asset-build/", + rollupOptions: { + output: { + assetFileNames: (chunkInfo) => { + // Get rid of the hash so we can consistently reference these + // files in our `package.json` `exports`. And so people can + // import them with a consistent path. + if(pathsToExport.includes(path.basename(chunkInfo.name))) { + return "assets/[name].[ext]"; + } + + return "assets/[name]-[hash][extname]"; + } + } + } }, plugins: [ themeBuilder({ diff --git a/yarn.lock b/yarn.lock index cbce8b06..0408a6e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -52,9 +52,9 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf" integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w== -"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz": - version "3.2.3" - resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4" +"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz": + version "3.2.8" + resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz#8d53636d045e1776e2a2ec6613e57330dd9ce856" "@matrixdotorg/structured-logviewer@^0.0.1": version "0.0.1" @@ -503,66 +503,141 @@ entities@^2.0.0: version "4.2.8" resolved "https://github.com/bwindels/es6-promise.git#112f78f5829e627055b0ff56a52fecb63f6003b1" +esbuild-android-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.31.tgz#4b7dfbbeee62b3495ba78220b85fb590eb68d5bf" + integrity sha512-MYkuJ91w07nGmr4EouejOZK2j/f5TCnsKxY8vRr2+wpKKfHD1LTJK28VbZa+y1+AL7v1V9G98ezTUwsV3CmXNw== + esbuild-android-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44" integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg== +esbuild-android-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.31.tgz#24c3d693924e044fb0d23206c3e627502b10b930" + integrity sha512-0rkH/35s7ZVcsw6nS0IAkR0dekSbjZGWdlOAf3jV0lGoPqqw0x6/TmaV9w7DQgUERTH1ApmPlpAMU4kVkCq9Jg== + esbuild-darwin-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72" integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ== +esbuild-darwin-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.31.tgz#285fbdb6dc74d4410f43dee59e6a14ebff82a9d7" + integrity sha512-kP6xPZHxtJa36Hb0jC05L3VzQSZBW2f3bpnQS20czXTRGEmM2GDiYpGdI5g2QYaw6vC4PYXjnigq8usd9g9jnQ== + esbuild-darwin-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a" integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ== +esbuild-darwin-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.31.tgz#b39c471a8134ce2c7811eb96fab9c500b256261c" + integrity sha512-1ZMog4hkNsdBGtDDtsftUqX6S9N52gEx4vX5aVehsSptgoBFIar1XrPiBTQty7YNH+bJasTpSVaZQgElCVvPKQ== + esbuild-freebsd-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85" integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA== +esbuild-freebsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.31.tgz#7ca700ef60ae12154bae63094ad41b21c6ae1a23" + integrity sha512-Zo0BYj7QpVFWoUpkv6Ng0RO2eJ4zk/WDaHMO88+jr5HuYmxsOre0imgwaZVPquTuJnCvL1G48BFucJ3tFflSeQ== + esbuild-freebsd-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52" integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ== +esbuild-freebsd-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.31.tgz#f793085c7184fcd08649b8d185edc5c2ce112e82" + integrity sha512-t85bS6jbRpmdjr4pdr/FY/fpx8lo1vv9S7BAs2EsXKJQhRDMIiC3QW+k2acYJoRuqirlvJcJVFQGCq/PfyC1kA== + esbuild-linux-32@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69" integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g== +esbuild-linux-32@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.31.tgz#cac97ec7da6fbde0c21dbe08babd0d2a034f317d" + integrity sha512-XYtOk/GodSkv+UOYVwryGpGPuFnszsMvRMKq6cIUfFfdssHuKDsU9IZveyCG44J106J39ABenQ5EetbYtVJHUw== + esbuild-linux-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3" integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA== +esbuild-linux-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.31.tgz#ec94cd5228e6777d2feb3c24a1fe1cbf8817d6da" + integrity sha512-Zf9CZxAxaXWHLqCg/QZ/hs0RU0XV3IBxV+ENQzy00S4QOTnZAvSLgPciILHHrVJ0lPIlb4XzAqlLM5y6iI2LIw== + esbuild-linux-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1" integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA== +esbuild-linux-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.31.tgz#d119188fccd6384db5c703de24c46dacaee3e9e8" + integrity sha512-V/H0tv+xpQ9IOHM+o85oCKNNidIEc5CcnDWl0V+hPd2F03dqdbFkWPBGphx8rD4JSQn6UefUQ1iH7y1qIzO8Fw== + esbuild-linux-arm@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe" integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA== +esbuild-linux-arm@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.31.tgz#63e10846886901e5632a591d44160f95c5d12ba7" + integrity sha512-RpiaeHPRlgCCDskxoyIsI49BhcDtZ4cl8+SLffizDm0yMNWP538SUg0ezQ2TTOPj3/svaGIbkRDwYtAon0Sjkg== + esbuild-linux-mips64le@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7" integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg== +esbuild-linux-mips64le@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.31.tgz#1cd44f72cde6489a5d6deea7c54efa6f3d6590ee" + integrity sha512-9/oBfAckInRuUg6AEgdCLLn6KJ6UOJDOLmUinTsReVSg6AfV6wxYQJq9iQM2idRogP7GUpomJ+bvCdWXpotQRQ== + esbuild-linux-ppc64le@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2" integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ== +esbuild-linux-ppc64le@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.31.tgz#3b5ccc05e5b8ef5c494f30a61fdd27811d2bbeeb" + integrity sha512-NMcb14Pg+8q8raGkzor9/R3vQwKzgxE3694BtO2SDLBwJuL2C1dQ1ZtM1t7ZvArQBgT8RiZVxb0/3fD+qGNk7g== + +esbuild-linux-riscv64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.31.tgz#d74ca78c8ed1d9b40bc907a9e3ef6e83fc06189c" + integrity sha512-l13yvmsVfawAnoYfcpuvml+nTlrOmtdceXYufSkXl2DOb0JKcuR6ARlAzuQCDcpo49SOJy1cCxpwlOIsUQBfzA== + +esbuild-linux-s390x@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.31.tgz#1bd547b8b027e323b77a838d265cb56ece2543af" + integrity sha512-GIwV9mY3koYja9MCSkKLk1P7rj+MkPV0UsGsZ575hEcIBrXeKN9jBi6X/bxDDPEN/SUAH35cJhBNrZU4x9lEfg== + esbuild-netbsd-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038" integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w== +esbuild-netbsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.31.tgz#964a45dbad4fac92aa0a15056e38a182735bd6c6" + integrity sha512-bJ+pyLvKQm+Obp5k7/Wk8e9Gdkls56F1aiI3uptoIfOIUqsZImH7pDyTrSufwqsFp62kO9LRuwXnjDwQtPyhFQ== + esbuild-node-loader@^0.6.3: version "0.6.3" resolved "https://registry.yarnpkg.com/esbuild-node-loader/-/esbuild-node-loader-0.6.3.tgz#3b90012f8bc2fcbb2ef76a659482c2c99840c5e8" @@ -575,27 +650,52 @@ esbuild-openbsd-64@0.13.15: resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7" integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g== +esbuild-openbsd-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.31.tgz#7d2a1d46450321b0459263d3e7072e6d3924ce46" + integrity sha512-NRAAPPca05H9j9Xab0kVXK0V6/pyZGGy8d2Y8KS0BMwWEydlD4KCJDmH8/7bWCKYLRGOOCE9/GPBJyPWHFW3sg== + esbuild-sunos-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4" integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw== +esbuild-sunos-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.31.tgz#3b3e4363951cd1dda14a14fee6d94ca426108e0c" + integrity sha512-9uA+V8w9Eehu4ldb95lPWdgCMcMO5HH6pXmfkk5usn3JsSZxKdLKsXB4hYgP80wscZvVYXJl2G+KNxsUTfPhZw== + esbuild-windows-32@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7" integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw== +esbuild-windows-32@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.31.tgz#997026a41c04535bfb7c014a0458940b49145820" + integrity sha512-VGdncQTqoxD9q3v/dk0Yugbmx2FzOkcs0OemBYc1X9KXOLQYH0uQbLJIckZdZOC3J+JKSExbYFrzYCOwWPuNyA== + esbuild-windows-64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294" integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ== +esbuild-windows-64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.31.tgz#5d4b0ea686c9b60036303b3415c472f2761bdafc" + integrity sha512-v/2ye5zBqpmCzi3bLCagStbNQlnOsY7WtMrD2Q0xZxeSIXONxji15KYtVee5o7nw4lXWbQSS1BL8G6BBMvtq4A== + esbuild-windows-arm64@0.13.15: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3" integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA== -esbuild@^0.13.12, esbuild@^0.13.2: +esbuild-windows-arm64@0.14.31: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.31.tgz#4f3b9fc34c4a33abbd0171df6cbb657ccbdbfc67" + integrity sha512-RXeU42FJoG1sriNHg73h4S+5B7L/gw+8T7U9u8IWqSSEbY6fZvBh4uofugiU1szUDqqP00GHwZ09WgYe3lGZiw== + +esbuild@^0.13.12: version "0.13.15" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf" integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw== @@ -618,6 +718,32 @@ esbuild@^0.13.12, esbuild@^0.13.2: esbuild-windows-64 "0.13.15" esbuild-windows-arm64 "0.13.15" +esbuild@^0.14.27: + version "0.14.31" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.31.tgz#f7d0db114edc615f66d84972ee9fbd2b267f4029" + integrity sha512-QA0fUM13+JZzcvg1bdrhi7wo8Lr5IRHA9ypNn2znqxGqb66dSK6pAh01TjyBOhzZGazPQJZ1K26VrCAQJ715qA== + optionalDependencies: + esbuild-android-64 "0.14.31" + esbuild-android-arm64 "0.14.31" + esbuild-darwin-64 "0.14.31" + esbuild-darwin-arm64 "0.14.31" + esbuild-freebsd-64 "0.14.31" + esbuild-freebsd-arm64 "0.14.31" + esbuild-linux-32 "0.14.31" + esbuild-linux-64 "0.14.31" + esbuild-linux-arm "0.14.31" + esbuild-linux-arm64 "0.14.31" + esbuild-linux-mips64le "0.14.31" + esbuild-linux-ppc64le "0.14.31" + esbuild-linux-riscv64 "0.14.31" + esbuild-linux-s390x "0.14.31" + esbuild-netbsd-64 "0.14.31" + esbuild-openbsd-64 "0.14.31" + esbuild-sunos-64 "0.14.31" + esbuild-windows-32 "0.14.31" + esbuild-windows-64 "0.14.31" + esbuild-windows-arm64 "0.14.31" + escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -966,10 +1092,10 @@ inherits@2: resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== -is-core-module@^2.2.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491" - integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg== +is-core-module@^2.8.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" + integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== dependencies: has "^1.0.3" @@ -1113,10 +1239,10 @@ ms@2.1.2: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -nanoid@^3.1.28: - version "3.1.28" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.28.tgz#3c01bac14cb6c5680569014cc65a2f26424c6bd4" - integrity sha512-gSu9VZ2HtmoKYe/lmyPFES5nknFrHa+/DT9muUFWFMi6Jh9E1I7bkvlQ8xxf1Kos9pi9o8lBnIOkatMhKX/YUw== +nanoid@^3.3.3: + version "3.3.4" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== natural-compare@^1.4.0: version "1.4.0" @@ -1193,20 +1319,20 @@ path-key@^3.1.0: resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== +path-parse@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== path-type@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -picocolors@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" - integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== +picocolors@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== picomatch@^2.2.3: version "2.3.0" @@ -1232,14 +1358,14 @@ postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.3.8: - version "8.3.9" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.9.tgz#98754caa06c4ee9eb59cc48bd073bb6bd3437c31" - integrity sha512-f/ZFyAKh9Dnqytx5X62jgjhhzttjZS7hMsohcI7HEI5tjELX/HxCy3EFhsRxyzGvrzFF+82XPvCS8T9TFleVJw== +postcss@^8.4.13: + version "8.4.13" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.13.tgz#7c87bc268e79f7f86524235821dfdf9f73e5d575" + integrity sha512-jtL6eTBrza5MPzy8oJLFuUscHDXTV5KcLlqAWHl5q5WYRfnNRGSmOZmOZ1T6Gy7A99mOZfqungmZMpMmCVJ8ZA== dependencies: - nanoid "^3.1.28" - picocolors "^0.2.1" - source-map-js "^0.6.2" + nanoid "^3.3.3" + picocolors "^1.0.0" + source-map-js "^1.0.2" prelude-ls@^1.2.1: version "1.2.1" @@ -1296,13 +1422,14 @@ resolve-from@^4.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -resolve@^1.20.0: - version "1.20.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" - integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== +resolve@^1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" + integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== dependencies: - is-core-module "^2.2.0" - path-parse "^1.0.6" + is-core-module "^2.8.1" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" reusify@^1.0.4: version "1.0.4" @@ -1316,10 +1443,10 @@ rimraf@^3.0.2: dependencies: glob "^7.1.3" -rollup@^2.57.0: - version "2.58.0" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.58.0.tgz#a643983365e7bf7f5b7c62a8331b983b7c4c67fb" - integrity sha512-NOXpusKnaRpbS7ZVSzcEXqxcLDOagN6iFS8p45RkoiMqPHDLwJm758UF05KlMoCRbLBTZsPOIa887gZJ1AiXvw== +rollup@^2.59.0: + version "2.70.1" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e" + integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA== optionalDependencies: fsevents "~2.3.2" @@ -1373,10 +1500,10 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" -source-map-js@^0.6.2: - version "0.6.2" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" - integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== source-map@~0.6.1: version "0.6.1" @@ -1423,6 +1550,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + table@^6.0.9: version "6.7.1" resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2" @@ -1526,15 +1658,15 @@ v8-compile-cache@^2.0.3: resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA== -vite@^2.6.14: - version "2.6.14" - resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271" - integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA== +vite@^2.9.8: + version "2.9.8" + resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.8.tgz#2c2cb0790beb0fbe4b8c0995b80fe691a91c2545" + integrity sha512-zsBGwn5UT3YS0NLSJ7hnR54+vUKfgzMUh/Z9CxF1YKEBVIe213+63jrFLmZphgGI5zXwQCSmqIdbPuE8NJywPw== dependencies: - esbuild "^0.13.2" - postcss "^8.3.8" - resolve "^1.20.0" - rollup "^2.57.0" + esbuild "^0.14.27" + postcss "^8.4.13" + resolve "^1.22.0" + rollup "^2.59.0" optionalDependencies: fsevents "~2.3.2"