mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
Merge branch 'master' into bwindels/calls
This commit is contained in:
Bruno Windels
commit
6aab049052
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
.DS_Store
|
||||
node_modules
|
||||
fetchlogs
|
||||
sessionexports
|
||||
|
||||
@ -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<HTMLDivElement>('#app')!
|
||||
|
||||
169
doc/THEMING.md
Normal file
169
doc/THEMING.md
Normal file
@ -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:
|
||||
|
||||
|
||||
|
||||
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:
|
||||
|
||||
|
||||
|
||||
|  |  |
|
||||
| :--: |:--: |
|
||||
| **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!**
|
||||
BIN
doc/images/coloring-process.png
Normal file
BIN
doc/images/coloring-process.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
doc/images/svg-icon-example.png
Normal file
BIN
doc/images/svg-icon-example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
doc/images/theming-architecture.png
Normal file
BIN
doc/images/theming-architecture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -1,10 +1,13 @@
|
||||
{
|
||||
"name": "hydrogen-web",
|
||||
"version": "0.2.30",
|
||||
"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",
|
||||
@ -54,7 +57,7 @@
|
||||
"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",
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -20,11 +20,9 @@ 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;
|
||||
let parsed;
|
||||
try {
|
||||
@ -41,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}` }];
|
||||
@ -49,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) => {
|
||||
@ -59,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);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
set -e
|
||||
if [ -z "$1" ]; then
|
||||
echo "provide a new version, current version is $(jq '.version' package.json)"
|
||||
exit 1
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "hydrogen-view-sdk",
|
||||
"description": "Embeddable matrix client library, including view components",
|
||||
"version": "0.0.12",
|
||||
"version": "0.0.13",
|
||||
"main": "./lib-build/hydrogen.cjs.js",
|
||||
"exports": {
|
||||
".": {
|
||||
|
||||
@ -13,7 +13,7 @@ const assetPaths = {
|
||||
wasmBundle: olmJsPath
|
||||
}
|
||||
};
|
||||
import "hydrogen-view-sdk/theme-element-light.css";
|
||||
import "hydrogen-view-sdk/assets/theme-element-light.css";
|
||||
|
||||
console.log('hydrogenViewSdk', hydrogenViewSdk);
|
||||
console.log('assetPaths', assetPaths);
|
||||
|
||||
@ -6,7 +6,7 @@ const hydrogenViewSdk = require('hydrogen-view-sdk');
|
||||
// Worker
|
||||
require.resolve('hydrogen-view-sdk/main.js');
|
||||
// Styles
|
||||
require.resolve('hydrogen-view-sdk/theme-element-light.css');
|
||||
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');
|
||||
|
||||
|
||||
65
src/domain/rageshake.ts
Normal file
65
src/domain/rageshake.ts
Normal file
@ -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<void> {
|
||||
const formData = new Map<string, string | {name: string, blob: BlobHandle}>();
|
||||
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<string, string> = 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.
|
||||
}
|
||||
@ -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 "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
@ -51,6 +52,7 @@ export class SettingsViewModel extends ViewModel {
|
||||
this.maxSentImageSizeLimit = 4000;
|
||||
this.pushNotifications = new PushNotificationStatus();
|
||||
this._activeTheme = undefined;
|
||||
this._logsFeedbackMessage = undefined;
|
||||
}
|
||||
|
||||
get _session() {
|
||||
@ -158,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;
|
||||
@ -193,9 +240,5 @@ export class SettingsViewModel extends ViewModel {
|
||||
// emit so that radio-buttons become displayed/hidden
|
||||
this.emitChange("themeOption");
|
||||
}
|
||||
|
||||
get preferredColorScheme() {
|
||||
return this.platform.themeLoader.preferredColorScheme;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,9 +17,12 @@ limitations under the License.
|
||||
|
||||
import {BlobHandle} from "../../platform/web/dom/BlobHandle.js";
|
||||
|
||||
export type RequestBody = BlobHandle | string | Map<string, string | {blob: BlobHandle, name: string}>;
|
||||
|
||||
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 {
|
||||
|
||||
@ -163,7 +163,7 @@ export class GapWriter {
|
||||
if (!Array.isArray(chunk)) {
|
||||
throw new Error("Invalid chunk in response");
|
||||
}
|
||||
if (typeof end !== "string") {
|
||||
if (typeof end !== "string" && typeof end !== "undefined") {
|
||||
throw new Error("Invalid end token in response");
|
||||
}
|
||||
|
||||
|
||||
68
src/platform/types/theme.ts
Normal file
68
src/platform/types/theme.ts
Normal file
@ -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<string, string>;
|
||||
// Location of css file that will be used for themes derived from this theme.
|
||||
"runtime-asset": string;
|
||||
// Array of derived-variables
|
||||
"derived-variables": Array<string>;
|
||||
};
|
||||
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<string, Variant>;
|
||||
};
|
||||
}>;
|
||||
|
||||
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<string, string>;
|
||||
}>;
|
||||
@ -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<string, string|number>;
|
||||
cache?: boolean;
|
||||
method?: string;
|
||||
|
||||
@ -352,6 +352,10 @@ export class Platform {
|
||||
head.appendChild(styleTag);
|
||||
}
|
||||
|
||||
get description() {
|
||||
return navigator.userAgent ?? "<unknown>";
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this._disposables.dispose();
|
||||
}
|
||||
|
||||
@ -196,13 +196,12 @@ export class ThemeLoader {
|
||||
}
|
||||
}
|
||||
|
||||
get preferredColorScheme(): ColorSchemePreference {
|
||||
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;
|
||||
}
|
||||
throw new Error("Cannot find preferred colorscheme!");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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<void>): (evt: Event) => Promise<void> {
|
||||
return async (evt: Event) => {
|
||||
(evt.target as HTMLElement)?.setAttribute("disabled", "disabled");
|
||||
await callback(evt);
|
||||
(evt.target as HTMLElement)?.removeAttribute("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
@ -101,15 +102,20 @@ export class SettingsView extends TemplateView {
|
||||
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([])
|
||||
|
||||
@ -40,7 +40,7 @@ const commonOptions = {
|
||||
postcss: {
|
||||
plugins: [
|
||||
compileVariables({derive, compiledVariables}),
|
||||
urlVariables({compileVariables}),
|
||||
urlVariables({compiledVariables}),
|
||||
urlProcessor({replacer}),
|
||||
// cssvariables({
|
||||
// preserve: (declaration) => {
|
||||
|
||||
@ -3,8 +3,9 @@ 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 havea consisent path to
|
||||
// reference
|
||||
// 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",
|
||||
@ -21,7 +22,8 @@ export default mergeOptions(commonOptions, {
|
||||
output: {
|
||||
assetFileNames: (chunkInfo) => {
|
||||
// Get rid of the hash so we can consistently reference these
|
||||
// files in our `package.json` `exports`
|
||||
// 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]";
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user