mirror of
https://github.com/vector-im/element-call.git
synced 2026-04-03 07:10:26 +00:00
Merge branch 'livekit' into michaelk/various_testid_tags
This commit is contained in:
Michael Kaye
23
.env.example
23
.env.example
@@ -10,19 +10,10 @@ LIVEKIT_SECRET="secret"
|
||||
# Used for determining the homeserver to use for short urls etc.
|
||||
# VITE_FALLBACK_STUN_ALLOWED=false
|
||||
|
||||
# VITE_CUSTOM_THEME=true
|
||||
# VITE_THEME_ACCENT=#0dbd8b
|
||||
# VITE_THEME_ACCENT_20=#0dbd8b33
|
||||
# VITE_THEME_ALERT=#ff5b55
|
||||
# VITE_THEME_ALERT_20=#ff5b5533
|
||||
# VITE_THEME_LINKS=#0086e6
|
||||
# VITE_THEME_PRIMARY_CONTENT=#ffffff
|
||||
# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
|
||||
# VITE_THEME_TERTIARY_CONTENT=#8e99a4
|
||||
# VITE_THEME_TERTIARY_CONTENT_20=#8e99a433
|
||||
# VITE_THEME_QUATERNARY_CONTENT=#6f7882
|
||||
# VITE_THEME_QUINARY_CONTENT=#394049
|
||||
# VITE_THEME_SYSTEM=#21262c
|
||||
# VITE_THEME_BACKGROUND=#15191e
|
||||
# VITE_THEME_BACKGROUND_85=#15191ed9
|
||||
# VITE_THEME_SUBTLE_PRIMARY=#26282D
|
||||
# CSS to be injected into the page for the purpose of custom theming.
|
||||
# Generally, writing a custom theme involves overriding Compound design tokens,
|
||||
# which are documented here:
|
||||
# https://compound.element.io/?path=/docs/foundations-design-tokens--docs
|
||||
# https://compound.element.io/?path=/docs/tokens-color-palettes--docs
|
||||
# https://compound.element.io/?path=/docs/tokens-semantic-colors--docs
|
||||
# VITE_CUSTOM_CSS=".cpd-theme-dark.cpd-theme-dark { --cpd-color-theme-bg: #101317; }"
|
||||
|
||||
1
.github/workflows/build.yaml
vendored
1
.github/workflows/build.yaml
vendored
@@ -23,6 +23,7 @@ jobs:
|
||||
SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
|
||||
SENTRY_URL: ${{ secrets.SENTRY_URL }}
|
||||
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
|
||||
VITE_APP_VERSION: ${{ github.sha }}
|
||||
NODE_OPTIONS: "--max-old-space-size=4096"
|
||||
- name: Upload Artifact
|
||||
uses: actions/upload-artifact@v2
|
||||
|
||||
4
.github/workflows/netlify-fullmesh.yaml
vendored
4
.github/workflows/netlify-fullmesh.yaml
vendored
@@ -28,7 +28,7 @@ jobs:
|
||||
ref: ${{ github.event.workflow_run.head_sha }}
|
||||
|
||||
- name: "Download artifact"
|
||||
uses: actions/github-script@v3.1.0
|
||||
uses: actions/github-script@v3.2.0
|
||||
with:
|
||||
script: |
|
||||
const artifacts = await github.actions.listWorkflowRunArtifacts({
|
||||
@@ -60,7 +60,7 @@ jobs:
|
||||
|
||||
- name: Deploy to Netlify
|
||||
id: netlify
|
||||
uses: nwtgck/actions-netlify@v1.2.3
|
||||
uses: nwtgck/actions-netlify@v1.2.4
|
||||
with:
|
||||
publish-dir: dist
|
||||
deploy-message: "Deploy from GitHub Actions"
|
||||
|
||||
4
.github/workflows/netlify-livekit.yaml
vendored
4
.github/workflows/netlify-livekit.yaml
vendored
@@ -28,7 +28,7 @@ jobs:
|
||||
ref: ${{ github.event.workflow_run.head_sha }}
|
||||
|
||||
- name: "Download artifact"
|
||||
uses: actions/github-script@v3.1.0
|
||||
uses: actions/github-script@v3.2.0
|
||||
with:
|
||||
script: |
|
||||
const artifacts = await github.actions.listWorkflowRunArtifacts({
|
||||
@@ -60,7 +60,7 @@ jobs:
|
||||
|
||||
- name: Deploy to Netlify
|
||||
id: netlify
|
||||
uses: nwtgck/actions-netlify@v1.2.3
|
||||
uses: nwtgck/actions-netlify@v1.2.4
|
||||
with:
|
||||
publish-dir: dist
|
||||
deploy-message: "Deploy from GitHub Actions"
|
||||
|
||||
1
.github/workflows/netlify-pr.yaml
vendored
1
.github/workflows/netlify-pr.yaml
vendored
@@ -6,6 +6,7 @@ on:
|
||||
- completed
|
||||
branches-ignore:
|
||||
- "main"
|
||||
- "livekit"
|
||||
jobs:
|
||||
deploy:
|
||||
if: github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request'
|
||||
|
||||
10
.github/workflows/publish.yaml
vendored
10
.github/workflows/publish.yaml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Log in to container registry
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
uses: docker/login-action@cf8514a65188af1d4f94f8c28a7a4153af1088ce
|
||||
with:
|
||||
registry: ${{ env.REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
@@ -54,7 +54,7 @@ jobs:
|
||||
tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
|
||||
|
||||
- name: Upload
|
||||
uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce
|
||||
uses: actions/upload-artifact@65d862660abb392b8c4a3d1195a2108db131dd05
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ github.token }}
|
||||
with:
|
||||
@@ -62,7 +62,7 @@ jobs:
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: docker/metadata-action@818d4b7b91585d195f67373fd9cb0332e31a7175
|
||||
uses: docker/metadata-action@0f8c876bafbf5dbce05c36682ec68e9a0274a48a
|
||||
with:
|
||||
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
|
||||
tags: |
|
||||
@@ -72,10 +72,10 @@ jobs:
|
||||
type=raw,value=latest-ci_${{steps.current-time.outputs.unix_time}},enable={{is_default_branch}}
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
|
||||
uses: docker/setup-buildx-action@885d1462b80bc1c1c7f0b00334ad271f09369c55
|
||||
|
||||
- name: Build and push Docker image
|
||||
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
|
||||
uses: docker/build-push-action@9311bf5263ae5b36f3ec67aff768790c6e2344ad
|
||||
with:
|
||||
context: .
|
||||
platforms: linux/amd64,linux/arm64
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"default_server_config": {
|
||||
"m.homeserver": {
|
||||
"base_url": "https://call.ems.host",
|
||||
"server_name": "call.ems.host"
|
||||
"base_url": "https://call-unstable.ems.host",
|
||||
"server_name": "call-unstable.ems.host"
|
||||
}
|
||||
},
|
||||
"livekit": {
|
||||
|
||||
19
package.json
19
package.json
@@ -20,14 +20,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@juggle/resize-observer": "^3.3.1",
|
||||
"@livekit/components-react": "1.1.0",
|
||||
"@livekit/components-react": "^1.1.0",
|
||||
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
|
||||
"@opentelemetry/api": "^1.4.0",
|
||||
"@opentelemetry/context-zone": "^1.9.1",
|
||||
"@opentelemetry/exporter-jaeger": "^1.9.1",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.35.1",
|
||||
"@opentelemetry/instrumentation-document-load": "^0.31.1",
|
||||
"@opentelemetry/instrumentation-user-interaction": "^0.32.1",
|
||||
"@opentelemetry/exporter-trace-otlp-http": "^0.41.0",
|
||||
"@opentelemetry/instrumentation-document-load": "^0.33.0",
|
||||
"@opentelemetry/instrumentation-user-interaction": "^0.33.0",
|
||||
"@opentelemetry/sdk-trace-web": "^1.9.1",
|
||||
"@react-aria/button": "^3.3.4",
|
||||
"@react-aria/dialog": "^3.1.4",
|
||||
@@ -47,6 +47,8 @@
|
||||
"@sentry/react": "^6.13.3",
|
||||
"@sentry/tracing": "^6.13.3",
|
||||
"@use-gesture/react": "^10.2.11",
|
||||
"@vector-im/compound-design-tokens": "^0.0.5",
|
||||
"@vector-im/compound-web": "^0.2.15",
|
||||
"@vitejs/plugin-basic-ssl": "^1.0.1",
|
||||
"@vitejs/plugin-react": "^4.0.1",
|
||||
"classnames": "^2.3.1",
|
||||
@@ -55,11 +57,11 @@
|
||||
"i18next": "^21.10.0",
|
||||
"i18next-browser-languagedetector": "^6.1.8",
|
||||
"i18next-http-backend": "^1.4.4",
|
||||
"livekit-client": "1.12.3",
|
||||
"livekit-client": "^1.12.3",
|
||||
"lodash": "^4.17.21",
|
||||
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9",
|
||||
"matrix-widget-api": "^1.3.1",
|
||||
"mermaid": "^8.13.8",
|
||||
"mermaid": "^9.0.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pako": "^2.0.4",
|
||||
"postcss-preset-env": "^7",
|
||||
@@ -79,12 +81,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.5",
|
||||
"@react-spring/rafz": "^9.7.3",
|
||||
"@sentry/vite-plugin": "^0.3.0",
|
||||
"@storybook/react": "^6.5.0-alpha.5",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/content-type": "^1.1.5",
|
||||
"@types/d3": "^7.4.0",
|
||||
"@types/dom-screen-wake-lock": "^1.0.1",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/grecaptcha": "^3.0.4",
|
||||
"@types/node": "^18.13.0",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
@@ -117,7 +122,7 @@
|
||||
"vite-plugin-svgr": "^3.2.0"
|
||||
},
|
||||
"jest": {
|
||||
"testEnvironment": "jsdom",
|
||||
"testEnvironment": "./test/environment.ts",
|
||||
"testMatch": [
|
||||
"<rootDir>/test/**/*-test.[jt]s?(x)"
|
||||
],
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="cpd-theme-dark">
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
"Element Call Home": "Element Call Home",
|
||||
"Element Call is temporarily not end-to-end encrypted while we test scalability.": "Element Call is temporarily not end-to-end encrypted while we test scalability.",
|
||||
"Enable end-to-end encryption (password protected calls)": "Enable end-to-end encryption (password protected calls)",
|
||||
"End call": "End call",
|
||||
"End-to-end encryption isn't supported on your browser.": "End-to-end encryption isn't supported on your browser.",
|
||||
"Exit full screen": "Exit full screen",
|
||||
"Expose developer settings in the settings window.": "Expose developer settings in the settings window.",
|
||||
@@ -61,15 +62,15 @@
|
||||
"Join call": "Join call",
|
||||
"Join call now": "Join call now",
|
||||
"Join existing call?": "Join existing call?",
|
||||
"Leave": "Leave",
|
||||
"Loading…": "Loading…",
|
||||
"Local volume": "Local volume",
|
||||
"Logging in…": "Logging in…",
|
||||
"Login": "Login",
|
||||
"Login to your account": "Login to your account",
|
||||
"Microphone": "Microphone",
|
||||
"Microphone off": "Microphone off",
|
||||
"Microphone on": "Microphone on",
|
||||
"More": "More",
|
||||
"Mute microphone": "Mute microphone",
|
||||
"No": "No",
|
||||
"Not now, return to home screen": "Not now, return to home screen",
|
||||
"Not registered yet? <2>Create an account</2>": "Not registered yet? <2>Create an account</2>",
|
||||
@@ -91,13 +92,13 @@
|
||||
"Sending…": "Sending…",
|
||||
"Settings": "Settings",
|
||||
"Share screen": "Share screen",
|
||||
"Sharing screen": "Sharing screen",
|
||||
"Show call inspector": "Show call inspector",
|
||||
"Show connection stats": "Show connection stats",
|
||||
"Sign in": "Sign in",
|
||||
"Sign out": "Sign out",
|
||||
"Speaker": "Speaker",
|
||||
"Spotlight": "Spotlight",
|
||||
"Stop sharing screen": "Stop sharing screen",
|
||||
"Submit": "Submit",
|
||||
"Submit feedback": "Submit feedback",
|
||||
"Submitting…": "Submitting…",
|
||||
@@ -107,15 +108,14 @@
|
||||
"This call already exists, would you like to join?": "This call already exists, would you like to join?",
|
||||
"This call is not end-to-end encrypted.": "This call is not end-to-end encrypted.",
|
||||
"This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
|
||||
"Turn off camera": "Turn off camera",
|
||||
"Turn on camera": "Turn on camera",
|
||||
"Unmute microphone": "Unmute microphone",
|
||||
"User menu": "User menu",
|
||||
"Username": "Username",
|
||||
"Version: {{version}}": "Version: {{version}}",
|
||||
"Video": "Video",
|
||||
"Video call": "Video call",
|
||||
"Video call name": "Video call name",
|
||||
"Video off": "Video off",
|
||||
"Video on": "Video on",
|
||||
"Waiting for other participants…": "Waiting for other participants…",
|
||||
"Walkie-talkie call": "Walkie-talkie call",
|
||||
"Walkie-talkie call name": "Walkie-talkie call name",
|
||||
|
||||
11
renovate.json
Normal file
11
renovate.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"extends": ["config:base"],
|
||||
"packageRules": [
|
||||
{
|
||||
"description": "Disable renoavte for packages we want to monitor ourselves",
|
||||
"matchPackagePatterns": ["matrix-js-sdk"],
|
||||
"enabled": false
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -16,7 +16,7 @@ limitations under the License.
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
color: var(--primary-content);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -33,7 +33,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.avatar svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
.avatar span {
|
||||
|
||||
@@ -18,5 +18,5 @@ limitations under the License.
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background-color: var(--subtle-primary);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ limitations under the License.
|
||||
.banner {
|
||||
position: absolute;
|
||||
padding: 29px;
|
||||
background-color: var(--quaternary-content);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
vertical-align: middle;
|
||||
font-size: var(--font-size-body);
|
||||
text-align: center;
|
||||
|
||||
@@ -24,5 +24,5 @@ limitations under the License.
|
||||
margin: 8px;
|
||||
|
||||
border-radius: 100%;
|
||||
background-color: var(--subtle-primary);
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ limitations under the License.
|
||||
.facepile .avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 1px solid var(--system);
|
||||
border: 1px solid var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.facepile.md .avatar {
|
||||
|
||||
@@ -82,27 +82,6 @@ limitations under the License.
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
color: var(--primary-content);
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.backButton h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.backButton > * {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.backButton > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
@@ -111,15 +90,6 @@ limitations under the License.
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.signOutButton {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgb(255, 75, 85);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.versionMismatchWarning {
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -134,7 +104,7 @@ limitations under the License.
|
||||
mask-image: url("./icons/AlertTriangleFilled.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background-color: var(--alert);
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,8 +21,8 @@ limitations under the License.
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--quinary-content);
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--cpd-color-border-interactive-secondary);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ limitations under the License.
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: transparent;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
padding: 8px 16px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
@@ -44,6 +44,6 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.option.disabled {
|
||||
color: var(--quaternary-content);
|
||||
background-color: var(--bgColor3);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-size: var(--font-size-body);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@@ -44,7 +44,11 @@ limitations under the License.
|
||||
|
||||
.menuItem.focused,
|
||||
.menuItem:hover {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
|
||||
.menuItem:active {
|
||||
background-color: var(--cpd-color-bg-action-secondary-pressed);
|
||||
}
|
||||
|
||||
.menuItem.focused:first-child,
|
||||
@@ -65,5 +69,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkIcon * {
|
||||
stroke: var(--primary-content);
|
||||
stroke: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ import { Node } from "@react-types/shared";
|
||||
import styles from "./Menu.module.css";
|
||||
|
||||
interface MenuProps<T> extends AriaMenuOptions<T> {
|
||||
className?: String;
|
||||
className?: string;
|
||||
onClose: () => void;
|
||||
onAction: (value: Key) => void;
|
||||
label?: string;
|
||||
|
||||
@@ -28,7 +28,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #21262c;
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
max-width: 90vw;
|
||||
|
||||
@@ -15,12 +15,12 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.tooltip {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
border-radius: 8px;
|
||||
max-width: 135px;
|
||||
width: max-content;
|
||||
|
||||
@@ -22,7 +22,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.userButton svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
||||
@@ -81,7 +81,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.authLinks a {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -46,8 +46,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--primary-content);
|
||||
background-color: var(--accent);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.button:focus,
|
||||
@@ -62,7 +62,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.toolbarButton:disabled {
|
||||
opacity: 0.55;
|
||||
background-color: var(--cpd-color-bg-action-primary-disabled);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbarButton,
|
||||
@@ -70,72 +71,76 @@ limitations under the License.
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50px;
|
||||
background-color: var(--system);
|
||||
}
|
||||
|
||||
.toolbarButton:hover,
|
||||
.toolbarButtonSecondary:hover {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-icon-primary);
|
||||
border: 1px solid var(--cpd-color-gray-400);
|
||||
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.toolbarButton.on,
|
||||
.toolbarButton.off {
|
||||
background-color: var(--primary-content);
|
||||
background-color: var(--cpd-color-bg-action-primary-rest);
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
|
||||
.toolbarButtonSecondary.on {
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-success-primary);
|
||||
}
|
||||
|
||||
.toolbarButton:active,
|
||||
.toolbarButtonSecondary:active {
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbarButton.on:active,
|
||||
.toolbarButton.off:active {
|
||||
background-color: var(--cpd-color-bg-action-primary-pressed);
|
||||
}
|
||||
|
||||
.iconButton:not(.stroke) svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
.iconButton:not(.stroke):hover svg * {
|
||||
fill: var(--accent);
|
||||
.iconButton:not(.stroke):tertiary svg * {
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.iconButton.on:not(.stroke) svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.iconButton.on.stroke svg * {
|
||||
stroke: var(--accent);
|
||||
stroke: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.hangupButton,
|
||||
.hangupButton:hover {
|
||||
background-color: var(--alert);
|
||||
.hangupButton {
|
||||
background-color: var(--cpd-color-bg-critical-primary);
|
||||
border-color: var(--cpd-color-border-critical-subtle);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.toolbarButton.on svg * {
|
||||
fill: var(--accent);
|
||||
}
|
||||
|
||||
.toolbarButton.off svg * {
|
||||
fill: #21262c;
|
||||
}
|
||||
|
||||
.toolbarButtonSecondary.on svg * {
|
||||
fill: var(--primary-content);
|
||||
.hangupButton:active {
|
||||
background-color: var(--cpd-color-bg-critical-pressed);
|
||||
}
|
||||
|
||||
.secondary,
|
||||
.copyButton {
|
||||
color: var(--accent);
|
||||
border: 2px solid var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
border: 2px solid var(--cpd-color-text-action-accent);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.secondaryHangup {
|
||||
color: var(--alert);
|
||||
border: 2px solid var(--alert);
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
border: 2px solid var(--cpd-color-border-critical-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.copyButton.secondaryCopy {
|
||||
color: var(--primary-content);
|
||||
border-color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
border-color: var(--cpd-color-border-interactive-primary);
|
||||
}
|
||||
|
||||
.copyButton {
|
||||
@@ -158,12 +163,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.copyButton:not(.on) svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.copyButton.on {
|
||||
border-color: transparent;
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -172,32 +177,28 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.copyButton.secondaryCopy:not(.on) svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
.iconCopyButton svg * {
|
||||
fill: var(--tertiary-content);
|
||||
}
|
||||
|
||||
.iconCopyButton:hover svg * {
|
||||
fill: var(--accent);
|
||||
fill: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
.iconCopyButton.on svg *,
|
||||
.iconCopyButton.on:hover svg * {
|
||||
fill: transparent;
|
||||
stroke: var(--accent);
|
||||
stroke: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.dropdownButton {
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dropdownButton:hover,
|
||||
.dropdownButton:active,
|
||||
.dropdownButton.on {
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-bg-action-secondary-pressed);
|
||||
}
|
||||
|
||||
.dropdownButton svg {
|
||||
@@ -205,7 +206,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.dropdownButton svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.lg {
|
||||
@@ -215,6 +216,36 @@ limitations under the License.
|
||||
.linkButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.toolbarButton:hover,
|
||||
.toolbarButtonSecondary:hover {
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toolbarButton.on:hover,
|
||||
.toolbarButton.off:hover {
|
||||
background-color: var(--cpd-color-bg-action-primary-hovered);
|
||||
}
|
||||
|
||||
.iconButton:not(.stroke):hover svg * {
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.hangupButton:hover {
|
||||
background-color: var(--cpd-color-bg-critical-hovered);
|
||||
}
|
||||
|
||||
.iconCopyButton:hover svg * {
|
||||
fill: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
|
||||
.dropdownButton:hover {
|
||||
background-color: var(--cpd-color-bg-action-secondary-hovered);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,17 +19,18 @@ import classNames from "classnames";
|
||||
import { useButton } from "@react-aria/button";
|
||||
import { mergeProps, useObjectRef } from "@react-aria/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
import { ReactComponent as MicOnSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
|
||||
import { ReactComponent as MicOffSolidIcon } from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
|
||||
import { ReactComponent as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg";
|
||||
import { ReactComponent as VideoCallOffIcon } from "@vector-im/compound-design-tokens/icons/video-call-off.svg";
|
||||
import { ReactComponent as EndCallIcon } from "@vector-im/compound-design-tokens/icons/end-call.svg";
|
||||
import { ReactComponent as ShareScreenSolidIcon } from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
|
||||
import { ReactComponent as SettingsSolidIcon } from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
|
||||
import { ReactComponent as UserAddSolidIcon } from "@vector-im/compound-design-tokens/icons/user-add-solid.svg";
|
||||
import { ReactComponent as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
|
||||
|
||||
import styles from "./Button.module.css";
|
||||
import { ReactComponent as MicIcon } from "../icons/Mic.svg";
|
||||
import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg";
|
||||
import { ReactComponent as VideoIcon } from "../icons/Video.svg";
|
||||
import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
|
||||
import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
|
||||
import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
|
||||
import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
|
||||
import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
|
||||
import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
|
||||
import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
|
||||
import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
|
||||
import { TooltipTrigger } from "../Tooltip";
|
||||
@@ -129,7 +130,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
|
||||
>
|
||||
<>
|
||||
{children}
|
||||
{variant === "dropdown" && <ArrowDownIcon />}
|
||||
{variant === "dropdown" && <ChevronDownIcon />}
|
||||
</>
|
||||
</button>
|
||||
);
|
||||
@@ -147,13 +148,11 @@ export function MicButton({
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<TooltipTrigger
|
||||
tooltip={() => (muted ? t("Unmute microphone") : t("Mute microphone"))}
|
||||
>
|
||||
<Button variant="toolbar" {...rest} off={muted}>
|
||||
{muted ? <MuteMicIcon /> : <MicIcon />}
|
||||
<Tooltip label={muted ? t("Microphone off") : t("Microphone on")}>
|
||||
<Button variant="toolbar" {...rest} on={!muted}>
|
||||
{muted ? <MicOffSolidIcon /> : <MicOnSolidIcon />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -168,13 +167,11 @@ export function VideoButton({
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<TooltipTrigger
|
||||
tooltip={() => (muted ? t("Turn on camera") : t("Turn off camera"))}
|
||||
>
|
||||
<Button variant="toolbar" {...rest} off={muted}>
|
||||
{muted ? <DisableVideoIcon /> : <VideoIcon />}
|
||||
<Tooltip label={muted ? t("Video off") : t("Video on")}>
|
||||
<Button variant="toolbar" {...rest} on={!muted}>
|
||||
{muted ? <VideoCallOffIcon /> : <VideoCallIcon />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -191,13 +188,11 @@ export function ScreenshareButton({
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<TooltipTrigger
|
||||
tooltip={() => (enabled ? t("Stop sharing screen") : t("Share screen"))}
|
||||
>
|
||||
<Button variant="toolbarSecondary" {...rest} on={enabled}>
|
||||
<ScreenshareIcon />
|
||||
<Tooltip label={enabled ? t("Sharing screen") : t("Share screen")}>
|
||||
<Button variant="toolbar" {...rest} on={enabled}>
|
||||
<ShareScreenSolidIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -210,18 +205,17 @@ export function HangupButton({
|
||||
[index: string]: unknown;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tooltip = useCallback(() => t("Leave"), [t]);
|
||||
|
||||
return (
|
||||
<TooltipTrigger tooltip={tooltip}>
|
||||
<Tooltip label={t("End call")}>
|
||||
<Button
|
||||
variant="toolbar"
|
||||
className={classNames(styles.hangupButton, className)}
|
||||
{...rest}
|
||||
>
|
||||
<HangupIcon />
|
||||
<EndCallIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -234,14 +228,13 @@ export function SettingsButton({
|
||||
[index: string]: unknown;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tooltip = useCallback(() => t("Settings"), [t]);
|
||||
|
||||
return (
|
||||
<TooltipTrigger tooltip={tooltip}>
|
||||
<Tooltip label={t("Settings")}>
|
||||
<Button variant="toolbar" {...rest}>
|
||||
<SettingsIcon width={20} height={20} />
|
||||
<SettingsSolidIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -256,14 +249,13 @@ export function InviteButton({
|
||||
[index: string]: unknown;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const tooltip = useCallback(() => t("Invite"), [t]);
|
||||
|
||||
return (
|
||||
<TooltipTrigger tooltip={tooltip}>
|
||||
<Tooltip label={t("Invite")}>
|
||||
<Button variant={variant} {...rest}>
|
||||
<AddUserIcon />
|
||||
<UserAddSolidIcon />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ limitations under the License.
|
||||
.callTile {
|
||||
height: 95px;
|
||||
padding: 12px;
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
@@ -52,7 +52,7 @@ limitations under the License.
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -39,5 +39,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -47,5 +47,5 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.notice {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -21,6 +21,8 @@ limitations under the License.
|
||||
(to avoid having to maintain a fork of Inter). */
|
||||
|
||||
@import "normalize.css/normalize.css";
|
||||
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
|
||||
@import "@vector-im/compound-web/dist/style.css";
|
||||
|
||||
:root {
|
||||
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
@@ -37,22 +39,17 @@ limitations under the License.
|
||||
--font-size-title: calc(24px * var(--font-scale));
|
||||
--font-size-headline: calc(32px * var(--font-scale));
|
||||
|
||||
--accent: #0dbd8b;
|
||||
--accent-20: #0dbd8b33;
|
||||
--alert: #ff5b55;
|
||||
--alert-20: #ff5b5533;
|
||||
--links: #0086e6;
|
||||
--primary-content: #ffffff;
|
||||
--secondary-content: #a9b2bc;
|
||||
--tertiary-content: #8e99a4;
|
||||
--tertiary-content-20: #8e99a433;
|
||||
--quaternary-content: #6f7882;
|
||||
--quinary-content: #394049;
|
||||
--system: #21262c;
|
||||
--background: #15191e;
|
||||
--background-85: rgba(23, 25, 28, 0.85);
|
||||
--bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
|
||||
--subtle-primary: #26282d;
|
||||
--cpd-color-border-accent: var(--cpd-color-green-1100);
|
||||
/* These colors are needed during the transitionary period between the old and
|
||||
new Compound design systems, but should be removed ASAP */
|
||||
--stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
|
||||
--stopgap-background-85: rgba(255, 255, 255, 0.85);
|
||||
--stopgap-bgColor3: #444;
|
||||
}
|
||||
|
||||
.cpd-theme-dark {
|
||||
--stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
|
||||
--stopgap-background-85: rgba(16, 19, 23, 0.85);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -136,8 +133,8 @@ limitations under the License.
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--primary-content);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
color: var(--cpd-color-text-primary);
|
||||
color-scheme: dark;
|
||||
margin: 0;
|
||||
font-family: var(--font-family);
|
||||
@@ -204,7 +201,7 @@ p {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -216,8 +213,8 @@ a:active {
|
||||
hr {
|
||||
width: calc(100% - 24px);
|
||||
border: none;
|
||||
border-top: 1px solid var(--quinary-content);
|
||||
color: var(--quaternary-content);
|
||||
border-top: 1px solid var(--cpd-color-border-interactive-secondary);
|
||||
color: var(--cpd-color-border-interactive-secondary);
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
height: 5px;
|
||||
|
||||
@@ -87,62 +87,10 @@ export class Initializer {
|
||||
});
|
||||
|
||||
// Custom Themeing
|
||||
if (import.meta.env.VITE_CUSTOM_THEME) {
|
||||
const style = document.documentElement.style;
|
||||
style.setProperty(
|
||||
"--accent",
|
||||
import.meta.env.VITE_THEME_ACCENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--accent-20",
|
||||
import.meta.env.VITE_THEME_ACCENT_20 as string
|
||||
);
|
||||
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
|
||||
style.setProperty(
|
||||
"--alert-20",
|
||||
import.meta.env.VITE_THEME_ALERT_20 as string
|
||||
);
|
||||
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
|
||||
style.setProperty(
|
||||
"--primary-content",
|
||||
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--secondary-content",
|
||||
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--tertiary-content",
|
||||
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--tertiary-content-20",
|
||||
import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--quaternary-content",
|
||||
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--quinary-content",
|
||||
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--system",
|
||||
import.meta.env.VITE_THEME_SYSTEM as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--background",
|
||||
import.meta.env.VITE_THEME_BACKGROUND as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--background-85",
|
||||
import.meta.env.VITE_THEME_BACKGROUND_85 as string
|
||||
);
|
||||
style.setProperty(
|
||||
"--subtle-primary",
|
||||
import.meta.env.VITE_THEME_SUBTLE_PRIMARY as string
|
||||
);
|
||||
if (import.meta.env.VITE_CUSTOM_CSS) {
|
||||
const style = document.createElement("style");
|
||||
style.textContent = import.meta.env.VITE_CUSTOM_CSS;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Custom fonts
|
||||
|
||||
@@ -42,7 +42,7 @@ limitations under the License.
|
||||
position: absolute;
|
||||
bottom: 11px;
|
||||
right: -4px;
|
||||
background-color: var(--quinary-content);
|
||||
background-color: var(--cpd-color-subtle-primary);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
@@ -53,7 +53,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
font-size: var(--font-size-caption);
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@ limitations under the License.
|
||||
.inputField {
|
||||
border-radius: 4px;
|
||||
transition: border-color 0.25s;
|
||||
border: 1px solid var(--quinary-content);
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
}
|
||||
|
||||
.inputField input,
|
||||
@@ -52,8 +52,8 @@ limitations under the License.
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px 9px 10px 9px;
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -61,7 +61,7 @@ limitations under the License.
|
||||
.inputField.disabled input,
|
||||
.inputField.disabled textarea,
|
||||
.inputField.disabled span {
|
||||
color: var(--quaternary-content);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
}
|
||||
|
||||
.inputField span {
|
||||
@@ -81,13 +81,13 @@ limitations under the License.
|
||||
.inputField input:placeholder-shown:focus::placeholder,
|
||||
.inputField textarea:placeholder-shown:focus::placeholder {
|
||||
transition: color 0.25s ease-in 0.1s;
|
||||
color: var(--quaternary-content);
|
||||
color: var(--cpd-color-text-placeholder);
|
||||
}
|
||||
|
||||
.inputField label {
|
||||
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
|
||||
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
|
||||
color: var(--tertiary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
background-color: transparent;
|
||||
font-size: var(--font-size-body);
|
||||
position: absolute;
|
||||
@@ -103,7 +103,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.inputField:focus-within {
|
||||
border-color: var(--links);
|
||||
border-color: var(--cpd-color-text-link-external);
|
||||
}
|
||||
|
||||
.inputField input:focus,
|
||||
@@ -117,7 +117,7 @@ limitations under the License.
|
||||
.inputField textarea:focus + label,
|
||||
.inputField textarea:not(:placeholder-shown) + label,
|
||||
.inputField.prefix textarea + label {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
|
||||
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
|
||||
font-size: var(--font-size-micro);
|
||||
@@ -128,7 +128,7 @@ limitations under the License.
|
||||
|
||||
.inputField input:focus + label,
|
||||
.inputField textarea:focus + label {
|
||||
color: var(--links);
|
||||
color: var(--cpd-color-border-focused);
|
||||
}
|
||||
|
||||
.checkboxField {
|
||||
@@ -169,11 +169,11 @@ limitations under the License.
|
||||
|
||||
.checkboxField.disabled,
|
||||
.checkboxField.disabled .description {
|
||||
color: var(--quinary-content);
|
||||
color: var(--cpd-color-text-disabled);
|
||||
}
|
||||
|
||||
.checkboxField.disabled .checkbox {
|
||||
border-color: var(--quinary-content);
|
||||
border-color: var(--cpd-color-border-disabled);
|
||||
}
|
||||
|
||||
.checkbox svg {
|
||||
@@ -181,12 +181,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkbox svg * {
|
||||
stroke: var(--primary-content);
|
||||
stroke: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.checkboxField input[type="checkbox"]:checked + label > .checkbox {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background: var(--cpd-color-text-action-accent);
|
||||
border-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
|
||||
@@ -194,18 +194,18 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.checkboxField:focus-within .checkbox {
|
||||
border: 1.5px solid var(--links) !important;
|
||||
border: 1.5px solid var(--cpd-color-text-link-external) !important;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--alert);
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin-left: 26px;
|
||||
width: 100%; /* Ensure that it breaks onto the next row */
|
||||
}
|
||||
|
||||
@@ -31,11 +31,11 @@ limitations under the License.
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
background-color: var(--background);
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--quinary-content);
|
||||
border: 1px solid var(--cpd-color-border-interactive-primary);
|
||||
font-size: var(--font-size-body);
|
||||
color: var(--primary-content);
|
||||
color: var(--cpd-color-text-primary);
|
||||
height: 40px;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -11,7 +11,9 @@ import {
|
||||
const defaultLiveKitPublishOptions: TrackPublishDefaults = {
|
||||
audioPreset: AudioPresets.music,
|
||||
dtx: true,
|
||||
red: true,
|
||||
// disable red because the livekit server strips out red packets for clients
|
||||
// that don't support it (firefox) but of course that doesn't work with e2ee.
|
||||
red: false,
|
||||
forceStereo: false,
|
||||
simulcast: true,
|
||||
videoSimulcastLayers: [VideoPresets.h180, VideoPresets.h360] as VideoPreset[],
|
||||
|
||||
@@ -18,7 +18,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 194px;
|
||||
background: var(--system);
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
.inspector {
|
||||
background-color: var(--system);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.scrollContainer {
|
||||
@@ -36,6 +36,6 @@ limitations under the License.
|
||||
|
||||
.sequenceDiagramViewer :global(.messageText) {
|
||||
font-size: var(--font-size-caption);
|
||||
fill: var(--primary-content) !important;
|
||||
stroke: var(--primary-content) !important;
|
||||
fill: var(--cpd-color-text-primary) !important;
|
||||
stroke: var(--cpd-color-text-primary) !important;
|
||||
}
|
||||
|
||||
@@ -52,30 +52,23 @@ limitations under the License.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: var(--footerPadding) 0;
|
||||
/* TODO: Un-hardcode these colors */
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
#15191e 0%,
|
||||
rgba(21, 25, 30, 0.9) 37%,
|
||||
rgba(21, 25, 30, 0.8) 49.68%,
|
||||
rgba(21, 25, 30, 0.7) 56.68%,
|
||||
rgba(21, 25, 30, 0.427397) 72.92%,
|
||||
rgba(21, 25, 30, 0.257534) 81.06%,
|
||||
rgba(21, 25, 30, 0.136986) 87.29%,
|
||||
rgba(21, 25, 30, 0.0658079) 92.4%,
|
||||
rgba(21, 25, 30, 0) 100%
|
||||
rgba(16, 19, 23, 0.9) 37%,
|
||||
rgba(16, 19, 23, 0.8) 49.68%,
|
||||
rgba(16, 19, 23, 0.7) 56.68%,
|
||||
rgba(16, 19, 23, 0.427397) 72.92%,
|
||||
rgba(16, 19, 23, 0.257534) 81.06%,
|
||||
rgba(16, 19, 23, 0.136986) 87.29%,
|
||||
rgba(16, 19, 23, 0.0658079) 92.4%,
|
||||
rgba(16, 19, 23, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.footer > * {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.footer > :last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.maximised .footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -84,12 +77,16 @@ limitations under the License.
|
||||
|
||||
@media (min-height: 300px) {
|
||||
.inRoom {
|
||||
--footerPadding: 24px;
|
||||
--footerPadding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.inRoom {
|
||||
--footerPadding: 32px;
|
||||
--footerPadding: 60px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -381,19 +381,19 @@ export function InCallView({
|
||||
const buttons: JSX.Element[] = [];
|
||||
|
||||
buttons.push(
|
||||
<MicButton
|
||||
key="1"
|
||||
muted={!muteStates.audio.enabled}
|
||||
onPress={toggleMicrophone}
|
||||
disabled={muteStates.audio.setEnabled === null}
|
||||
data-testid="incall_mute"
|
||||
/>,
|
||||
<VideoButton
|
||||
key="2"
|
||||
muted={!muteStates.video.enabled}
|
||||
onPress={toggleCamera}
|
||||
disabled={muteStates.video.setEnabled === null}
|
||||
data-testid="incall_videomute"
|
||||
/>,
|
||||
<MicButton
|
||||
key="1"
|
||||
muted={!muteStates.audio.enabled}
|
||||
onPress={toggleMicrophone}
|
||||
disabled={muteStates.audio.setEnabled === null}
|
||||
data-testid="incall_mute"
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
height: 50vh;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background-color: var(--bgColor3);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--bgColor3);
|
||||
background-color: var(--stopgap-bgColor3);
|
||||
}
|
||||
|
||||
.cameraPermissions {
|
||||
@@ -62,7 +62,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(23, 25, 28, 0.9);
|
||||
background-color: var(--stopgap-background-85);
|
||||
}
|
||||
|
||||
.previewButtons > * {
|
||||
|
||||
@@ -137,18 +137,18 @@ export const VideoPreview: FC<Props> = ({ matrixInfo, muteStates }) => {
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.previewButtons}>
|
||||
<MicButton
|
||||
muted={!muteStates.audio.enabled}
|
||||
onPress={onAudioPress}
|
||||
disabled={muteStates.audio.setEnabled === null}
|
||||
data-testid="preview_mute"
|
||||
/>
|
||||
<VideoButton
|
||||
muted={!muteStates.video.enabled}
|
||||
onPress={onVideoPress}
|
||||
disabled={muteStates.video.setEnabled === null}
|
||||
data-testid="preview_videomute"
|
||||
/>
|
||||
<MicButton
|
||||
muted={!muteStates.audio.enabled}
|
||||
onPress={onAudioPress}
|
||||
disabled={muteStates.audio.setEnabled === null}
|
||||
data-testid="preview_mute"
|
||||
/>
|
||||
<SettingsButton onPress={openSettings} />
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -20,7 +20,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.settingsModal p {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.tabContainer {
|
||||
|
||||
@@ -92,7 +92,7 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
|
||||
export const useEnableE2EE = (): DisableableSetting<boolean | null> => {
|
||||
const settingVal = useSetting<boolean | null>(
|
||||
"enable-end-to-end-encryption",
|
||||
false
|
||||
true
|
||||
);
|
||||
if (isE2EESupported()) return settingVal;
|
||||
|
||||
|
||||
@@ -44,12 +44,12 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.tab > * {
|
||||
color: var(--secondary-content);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
|
||||
.tab svg * {
|
||||
fill: var(--secondary-content);
|
||||
fill: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.tab > :last-child {
|
||||
@@ -57,15 +57,15 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.tab.selected {
|
||||
background-color: var(--accent);
|
||||
background-color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.tab.selected * {
|
||||
color: var(--primary-content);
|
||||
color: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.tab.selected svg * {
|
||||
fill: var(--primary-content);
|
||||
fill: var(--stopgap-color-on-solid-accent);
|
||||
}
|
||||
|
||||
.tab.disabled {
|
||||
|
||||
@@ -37,7 +37,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--links);
|
||||
color: var(--cpd-color-text-link-external);
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
@@ -46,7 +46,7 @@ limitations under the License.
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--accent);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
}
|
||||
|
||||
.overflowEllipsis {
|
||||
|
||||
@@ -53,7 +53,7 @@ limitations under the License.
|
||||
bottom: -1px;
|
||||
content: "";
|
||||
border-radius: var(--tileRadius);
|
||||
box-shadow: inset 0 0 0 4px var(--accent) !important;
|
||||
box-shadow: inset 0 0 0 4px var(--cpd-color-border-accent) !important;
|
||||
opacity: 0;
|
||||
transition: opacity ease 0.15s;
|
||||
}
|
||||
@@ -77,8 +77,8 @@ limitations under the License.
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--stopgap-background-85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -95,6 +95,10 @@ limitations under the License.
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.infoBubble > svg * {
|
||||
fill: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -103,8 +107,8 @@ limitations under the License.
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
|
||||
color: var(--primary-content);
|
||||
background-color: var(--background-85);
|
||||
color: var(--cpd-color-text-primary);
|
||||
background-color: var(--stopgap-background-85);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -154,7 +158,7 @@ limitations under the License.
|
||||
.videoMutedOverlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #21262c;
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.presenterLabel {
|
||||
@@ -162,7 +166,7 @@ limitations under the License.
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #17191c;
|
||||
background-color: var(--stopgap-background-85);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -40,9 +40,9 @@ limitations under the License.
|
||||
appearance: none;
|
||||
|
||||
background-color: transparent;
|
||||
--slider-color: var(--quinary-content);
|
||||
--slider-color: var(--cpd-color-bg-subtle-primary);
|
||||
--slider-height: 4px;
|
||||
--thumb-color: var(--accent);
|
||||
--thumb-color: var(--cpd-color-text-action-accent);
|
||||
--thumb-radius: 100%;
|
||||
--thumb-size: 16px;
|
||||
--thumb-margin-top: -6px;
|
||||
|
||||
18
test/environment.ts
Normal file
18
test/environment.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { TextEncoder } from "util";
|
||||
import JSDOMEnvironment_, {
|
||||
TestEnvironment as TestEnvironment_,
|
||||
} from "jest-environment-jsdom";
|
||||
import { JestEnvironmentConfig, EnvironmentContext } from "@jest/environment";
|
||||
|
||||
// This is a patched version of jsdom that adds TextEncoder, as a workaround for
|
||||
// https://github.com/jsdom/jsdom/issues/2524
|
||||
// Once that issue is resolved, this custom environment file can be deleted
|
||||
export default class JSDOMEnvironment extends JSDOMEnvironment_ {
|
||||
constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
|
||||
super(config, context);
|
||||
this.global.TextEncoder ??= TextEncoder;
|
||||
}
|
||||
}
|
||||
|
||||
export const TestEnvironment =
|
||||
TestEnvironment_ === JSDOMEnvironment_ ? JSDOMEnvironment : TestEnvironment_;
|
||||
Reference in New Issue
Block a user