mirror of
https://github.com/suitenumerique/meet.git
synced 2026-07-27 04:09:26 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 lebaudantoine
|
78743f06ae |
@@ -13,30 +13,17 @@ and this project adheres to
|
||||
- ✨(backend) allow searching the recording admin table by owner email
|
||||
- ✨(frontend) add participant color gradient when camera is off #1490
|
||||
- ✨(all) allow forcing SSO display name for authenticated users
|
||||
- ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
|
||||
|
||||
### Changed
|
||||
|
||||
- 🗑️(settings) deprecate SUMMARY_SERVICE_VERSION=1
|
||||
- ⬆️(mail) update mjml to v5 and @html-to/text-cli
|
||||
- 🚸(frontend) initialize the join input name with the persisted full name
|
||||
- ♻️(frontend) refactor background processors to use the new API
|
||||
- ♻️(frontend) inline model weights to avoid loading them from remote
|
||||
- ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
|
||||
- ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
|
||||
- ⬆️(frontend) upgrade react-stately from 3.47.0 to 3.48.0
|
||||
- ⬆️(frontend) upgrade react-aria from 3.49.0 to 3.50.0
|
||||
- ⬆️(frontend) upgrade react-aria-components from 1.18.0 to 1.19.0
|
||||
|
||||
### Fixed
|
||||
|
||||
- 🩹(backend) identify externally provisioned users to PostHog
|
||||
- 🐛(backend) fix info panel crash for unregistered rooms
|
||||
- ♿️(frontend) focus side panel container on open #1452
|
||||
|
||||
### Added
|
||||
|
||||
- ✨(frontend) add screen share zoom controls #1498
|
||||
|
||||
## [1.23.0] - 2026-07-08
|
||||
|
||||
|
||||
+1
-1
@@ -37,7 +37,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
|
||||
uv sync --locked --no-dev
|
||||
|
||||
# ---- mails ----
|
||||
FROM node:22 AS mail-builder
|
||||
FROM node:20 AS mail-builder
|
||||
|
||||
COPY ./src/mail /mail/app
|
||||
|
||||
|
||||
Generated
+35
-214
@@ -15,7 +15,6 @@
|
||||
"@livekit/components-react": "2.9.21",
|
||||
"@livekit/components-styles": "1.2.0",
|
||||
"@livekit/track-processors": "0.7.2",
|
||||
"@mediapipe/tasks-vision": "0.10.14",
|
||||
"@pandacss/preset-panda": "1.11.3",
|
||||
"@react-types/overlays": "3.10.0",
|
||||
"@remixicon/react": "4.9.0",
|
||||
@@ -30,13 +29,13 @@
|
||||
"i18next-parser": "9.4.0",
|
||||
"i18next-resources-to-backend": "1.2.1",
|
||||
"livekit-client": "2.19.2",
|
||||
"posthog-js": "1.391.2",
|
||||
"posthog-js": "1.387.0",
|
||||
"react": "18.3.1",
|
||||
"react-aria": "3.50.0",
|
||||
"react-aria-components": "1.19.0",
|
||||
"react-aria": "3.49.0",
|
||||
"react-aria-components": "1.18.0",
|
||||
"react-dom": "18.3.1",
|
||||
"react-i18next": "17.0.8",
|
||||
"react-stately": "3.48.0",
|
||||
"react-stately": "3.47.0",
|
||||
"use-sound": "5.0.0",
|
||||
"valtio": "2.3.2",
|
||||
"wouter": "3.10.0"
|
||||
@@ -64,7 +63,6 @@
|
||||
"typescript": "6.0.3",
|
||||
"typescript-eslint": "8.60.1",
|
||||
"vite": "8.0.14",
|
||||
"vite-plugin-static-copy": "4.1.1",
|
||||
"vite-plugin-svgr": "5.2.0"
|
||||
}
|
||||
},
|
||||
@@ -112,62 +110,6 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/react-spectrum/node_modules/react-aria": {
|
||||
"version": "3.49.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
|
||||
"integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@internationalized/number": "^3.6.7",
|
||||
"@internationalized/string": "^3.2.9",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"aria-hidden": "^1.2.3",
|
||||
"clsx": "^2.0.0",
|
||||
"react-stately": "3.47.0",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/react-spectrum/node_modules/react-aria-components": {
|
||||
"version": "1.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
|
||||
"integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"client-only": "^0.0.1",
|
||||
"react-aria": "3.49.0",
|
||||
"react-stately": "3.47.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/react-spectrum/node_modules/react-stately": {
|
||||
"version": "3.47.0",
|
||||
"resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
|
||||
"integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@internationalized/number": "^3.6.7",
|
||||
"@internationalized/string": "^3.2.9",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
|
||||
@@ -1810,9 +1752,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@react-types/shared": {
|
||||
"version": "3.36.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
|
||||
"integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
|
||||
"version": "3.35.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.35.0.tgz",
|
||||
"integrity": "sha512-iNWvuzEwANttpQpdlu8nPBtdHb0mcCMj1ZTH//iRB5E/14IAnyRlR25rxH7pNLyzHINsPGEKnWvpwDMCT6vziQ==",
|
||||
"license": "Apache-2.0",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||
@@ -3250,19 +3192,6 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/bl": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
|
||||
@@ -7165,19 +7094,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-binary-path": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-boolean-object": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
|
||||
@@ -8759,19 +8675,6 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/p-map": {
|
||||
"version": "7.0.5",
|
||||
"resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.5.tgz",
|
||||
"integrity": "sha512-e8vJF4XdVkzqqSHguEMz41mQO1wKwxKm5ENrUJQUu9kLDCtn83cxbyHZcszr4QC5zEA7WffRRC4gsTecC7J9oA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/package-manager-detector": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
|
||||
@@ -9130,19 +9033,19 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/posthog-js": {
|
||||
"version": "1.391.2",
|
||||
"resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.391.2.tgz",
|
||||
"integrity": "sha512-q0DZN6ljchSnAFJIXf+sQFTPlsLjTlRa+TvrL+QRb6413BGtib/MNiQy1bnwLKt8KR+f6xJYvkqdLyty9s4Aww==",
|
||||
"version": "1.387.0",
|
||||
"resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.387.0.tgz",
|
||||
"integrity": "sha512-Pv1jUMySMN62zoAxdJBJPV8n62lkHdjuWhpeU7izczc5Dqbx3hhqO2hkrNTI8Yx1ezmWk2qUHZs03FuOBubdFQ==",
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
"dependencies": {
|
||||
"@posthog/core": "^1.35.3",
|
||||
"@posthog/types": "^1.390.2",
|
||||
"@posthog/core": "^1.33.0",
|
||||
"@posthog/types": "^1.387.0",
|
||||
"core-js": "^3.38.1",
|
||||
"dompurify": "^3.3.2",
|
||||
"fflate": "^0.4.8",
|
||||
"preact": "^10.29.2",
|
||||
"preact": "^10.28.2",
|
||||
"query-selector-shadow-dom": "^1.0.1",
|
||||
"web-vitals": "^5.3.0"
|
||||
"web-vitals": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/powershell-utils": {
|
||||
@@ -9159,21 +9062,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.29.7",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
|
||||
"integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
|
||||
"version": "10.28.3",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.28.3.tgz",
|
||||
"integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"preact-render-to-string": ">=5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"preact-render-to-string": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
@@ -9380,19 +9275,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-aria": {
|
||||
"version": "3.50.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
|
||||
"integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
|
||||
"version": "3.49.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
|
||||
"integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@internationalized/number": "^3.6.7",
|
||||
"@internationalized/string": "^3.2.9",
|
||||
"@react-types/shared": "^3.36.0",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"aria-hidden": "^1.2.3",
|
||||
"clsx": "^2.0.0",
|
||||
"react-stately": "3.48.0",
|
||||
"react-stately": "3.47.0",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@@ -9401,17 +9296,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-aria-components": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.19.0.tgz",
|
||||
"integrity": "sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==",
|
||||
"version": "1.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
|
||||
"integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@react-types/shared": "^3.36.0",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"client-only": "^0.0.1",
|
||||
"react-aria": "3.50.0",
|
||||
"react-stately": "3.48.0"
|
||||
"react-aria": "3.49.0",
|
||||
"react-stately": "3.47.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||
@@ -9465,15 +9360,15 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-stately": {
|
||||
"version": "3.48.0",
|
||||
"resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
|
||||
"integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
|
||||
"version": "3.47.0",
|
||||
"resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
|
||||
"integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@internationalized/date": "^3.12.2",
|
||||
"@internationalized/number": "^3.6.7",
|
||||
"@internationalized/string": "^3.2.9",
|
||||
"@react-types/shared": "^3.36.0",
|
||||
"@react-types/shared": "^3.35.0",
|
||||
"@swc/helpers": "^0.5.0",
|
||||
"use-sync-external-store": "^1.6.0"
|
||||
},
|
||||
@@ -11242,80 +11137,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-static-copy": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-4.1.1.tgz",
|
||||
"integrity": "sha512-GrlA8YklrAfSyxJ4M3fdQLOo9oNkp56IM9FYgX/WtEgeIFkPwhu4wzpufBCIuNKCa6Fn77FkRdYxkHqV0FwjAw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chokidar": "^3.6.0",
|
||||
"p-map": "^7.0.4",
|
||||
"picocolors": "^1.1.1",
|
||||
"tinyglobby": "^0.2.17"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^22.0.0 || >=24.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/sapphi-red"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-static-copy/node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
"glob-parent": "~5.1.2",
|
||||
"is-binary-path": "~2.1.0",
|
||||
"is-glob": "~4.0.1",
|
||||
"normalize-path": "~3.0.0",
|
||||
"readdirp": "~3.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.10.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-static-copy/node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-static-copy/node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-svgr": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-5.2.0.tgz",
|
||||
@@ -11649,9 +11470,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/web-vitals": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.3.0.tgz",
|
||||
"integrity": "sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==",
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
|
||||
"integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/webrtc-adapter": {
|
||||
|
||||
@@ -17,12 +17,11 @@
|
||||
"dependencies": {
|
||||
"@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
|
||||
"@fontsource-variable/lexend": "5.2.11",
|
||||
"@fontsource/opendyslexic": "5.2.5",
|
||||
"@libreaudio/la-call": "0.1.4",
|
||||
"@fontsource/opendyslexic": "5.2.5",
|
||||
"@livekit/components-react": "2.9.21",
|
||||
"@livekit/components-styles": "1.2.0",
|
||||
"@livekit/track-processors": "0.7.2",
|
||||
"@mediapipe/tasks-vision": "0.10.14",
|
||||
"@pandacss/preset-panda": "1.11.3",
|
||||
"@react-types/overlays": "3.10.0",
|
||||
"@remixicon/react": "4.9.0",
|
||||
@@ -37,13 +36,13 @@
|
||||
"i18next-parser": "9.4.0",
|
||||
"i18next-resources-to-backend": "1.2.1",
|
||||
"livekit-client": "2.19.2",
|
||||
"posthog-js": "1.391.2",
|
||||
"posthog-js": "1.387.0",
|
||||
"react": "18.3.1",
|
||||
"react-aria": "3.50.0",
|
||||
"react-aria-components": "1.19.0",
|
||||
"react-aria": "3.49.0",
|
||||
"react-aria-components": "1.18.0",
|
||||
"react-dom": "18.3.1",
|
||||
"react-i18next": "17.0.8",
|
||||
"react-stately": "3.48.0",
|
||||
"react-stately": "3.47.0",
|
||||
"use-sound": "5.0.0",
|
||||
"valtio": "2.3.2",
|
||||
"wouter": "3.10.0"
|
||||
@@ -71,7 +70,6 @@
|
||||
"typescript": "6.0.3",
|
||||
"typescript-eslint": "8.60.1",
|
||||
"vite": "8.0.14",
|
||||
"vite-plugin-static-copy": "4.1.1",
|
||||
"vite-plugin-svgr": "5.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@@ -28,7 +28,6 @@ import { MutedMicIndicator } from './MutedMicIndicator'
|
||||
import { ParticipantPlaceholder } from './ParticipantPlaceholder'
|
||||
import { ParticipantTileFocus } from './ParticipantTileFocus'
|
||||
import { FullScreenShareWarning } from './FullScreenShareWarning'
|
||||
import { ScreenShareZoomableVideo } from './ScreenShareZoomableVideo'
|
||||
import { ParticipantName } from './ParticipantName'
|
||||
import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
@@ -56,8 +55,6 @@ interface ParticipantTileExtendedProps extends ParticipantTileProps {
|
||||
disableTileControls?: boolean
|
||||
}
|
||||
|
||||
const MOUSE_IDLE_TIME = 3000
|
||||
|
||||
export const ParticipantTile: (
|
||||
props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
|
||||
) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
|
||||
@@ -112,43 +109,14 @@ export const ParticipantTile: (
|
||||
})
|
||||
|
||||
const isScreenShare = trackReference.source != Track.Source.Camera
|
||||
const isRemoteScreenShare =
|
||||
isScreenShare && !trackReference.participant.isLocal
|
||||
const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
|
||||
|
||||
// Hover + idle tracking for the focus overlay (pin, effects, mute buttons).
|
||||
const [isTileHovered, setIsTileHovered] = React.useState(false)
|
||||
const [isIdle, setIsIdle] = React.useState(false)
|
||||
const idleTimerRef = React.useRef<number | null>(null)
|
||||
|
||||
const handleTileMouseMove = React.useCallback(() => {
|
||||
if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
|
||||
idleTimerRef.current = window.setTimeout(
|
||||
() => setIsIdle(true),
|
||||
MOUSE_IDLE_TIME
|
||||
)
|
||||
setIsIdle(false)
|
||||
}, [])
|
||||
|
||||
const isOverlayVisible = hasKeyboardFocus || (isTileHovered && !isIdle)
|
||||
|
||||
// tileRef: fullscreen target. setRefs merges it with the forwarded ref on the same node.
|
||||
const tileRef = React.useRef<HTMLDivElement>(null)
|
||||
const setRefs = React.useCallback(
|
||||
(node: HTMLDivElement | null) => {
|
||||
;(tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node
|
||||
if (typeof ref === 'function') ref(node)
|
||||
else if (ref)
|
||||
(ref as React.MutableRefObject<HTMLDivElement | null>).current = node
|
||||
},
|
||||
[ref]
|
||||
)
|
||||
|
||||
const participantName = getParticipantName(trackReference.participant)
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
|
||||
|
||||
const interactiveProps = {
|
||||
...elementProps,
|
||||
// Ensure the tile is focusable to expose contextual controls to keyboard users.
|
||||
tabIndex: 0,
|
||||
'aria-label': t('containerLabel', { name: participantName }),
|
||||
onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
|
||||
@@ -166,63 +134,30 @@ export const ParticipantTile: (
|
||||
},
|
||||
}
|
||||
|
||||
const isVideoTrack =
|
||||
isTrackReference(trackReference) &&
|
||||
(trackReference.publication?.kind === 'video' ||
|
||||
trackReference.source === Track.Source.Camera ||
|
||||
trackReference.source === Track.Source.ScreenShare)
|
||||
|
||||
let trackMedia: React.ReactNode = null
|
||||
if (isVideoTrack) {
|
||||
if (isRemoteScreenShare) {
|
||||
trackMedia = (
|
||||
<ScreenShareZoomableVideo
|
||||
trackRef={trackReference}
|
||||
tileRef={tileRef}
|
||||
onSubscriptionStatusChanged={handleSubscribe}
|
||||
manageSubscription={autoManageSubscription}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
trackMedia = (
|
||||
<VideoTrack
|
||||
trackRef={trackReference}
|
||||
onSubscriptionStatusChanged={handleSubscribe}
|
||||
manageSubscription={autoManageSubscription}
|
||||
/>
|
||||
)
|
||||
}
|
||||
} else if (isTrackReference(trackReference)) {
|
||||
trackMedia = (
|
||||
<AudioTrack
|
||||
trackRef={trackReference}
|
||||
onSubscriptionStatusChanged={handleSubscribe}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setRefs}
|
||||
style={{ position: 'relative' }}
|
||||
{...interactiveProps}
|
||||
onMouseEnter={() => setIsTileHovered(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsTileHovered(false)
|
||||
setIsIdle(false)
|
||||
if (idleTimerRef.current) {
|
||||
window.clearTimeout(idleTimerRef.current)
|
||||
idleTimerRef.current = null
|
||||
}
|
||||
}}
|
||||
onMouseMove={handleTileMouseMove}
|
||||
>
|
||||
<div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
|
||||
<TrackRefContextIfNeeded trackRef={trackReference}>
|
||||
<ParticipantContextIfNeeded participant={trackReference.participant}>
|
||||
<FullScreenShareWarning trackReference={trackReference} />
|
||||
{children ?? (
|
||||
<>
|
||||
{trackMedia}
|
||||
{isTrackReference(trackReference) &&
|
||||
(trackReference.publication?.kind === 'video' ||
|
||||
trackReference.source === Track.Source.Camera ||
|
||||
trackReference.source === Track.Source.ScreenShare) ? (
|
||||
<VideoTrack
|
||||
trackRef={trackReference}
|
||||
onSubscriptionStatusChanged={handleSubscribe}
|
||||
manageSubscription={autoManageSubscription}
|
||||
/>
|
||||
) : (
|
||||
isTrackReference(trackReference) && (
|
||||
<AudioTrack
|
||||
trackRef={trackReference}
|
||||
onSubscriptionStatusChanged={handleSubscribe}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div className="lk-participant-placeholder">
|
||||
<ParticipantPlaceholder
|
||||
participant={trackReference.participant}
|
||||
@@ -301,7 +236,7 @@ export const ParticipantTile: (
|
||||
{!disableMetadata && !disableTileControls && (
|
||||
<ParticipantTileFocus
|
||||
trackRef={trackReference}
|
||||
isVisible={isOverlayVisible}
|
||||
hasKeyboardFocus={hasKeyboardFocus}
|
||||
/>
|
||||
)}
|
||||
</ParticipantContextIfNeeded>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { css } from '@/styled-system/css'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { Button } from '@/primitives'
|
||||
import {
|
||||
RiFullscreenLine,
|
||||
RiImageCircleAiFill,
|
||||
RiMicLine,
|
||||
RiMicOffLine,
|
||||
@@ -14,13 +15,41 @@ import {
|
||||
} from '@livekit/components-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useSidePanel } from '../hooks/useSidePanel'
|
||||
import { useFullScreen } from '../hooks/useFullScreen'
|
||||
import { type Participant, Track } from 'livekit-client'
|
||||
import { MuteAlertDialog } from './MuteAlertDialog'
|
||||
import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
|
||||
import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
|
||||
|
||||
const ZoomButton = ({
|
||||
trackRef,
|
||||
}: {
|
||||
trackRef: TrackReferenceOrPlaceholder
|
||||
}) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
|
||||
const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
|
||||
trackRef,
|
||||
})
|
||||
|
||||
if (!isFullscreenAvailable) {
|
||||
return
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primaryTextDark"
|
||||
square
|
||||
tooltip={t('fullScreen')}
|
||||
onPress={() => toggleFullScreen()}
|
||||
>
|
||||
<RiFullscreenLine />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
const FocusButton = ({
|
||||
trackRef,
|
||||
}: {
|
||||
@@ -98,17 +127,26 @@ const MuteButton = ({ participant }: { participant: Participant }) => {
|
||||
)
|
||||
}
|
||||
|
||||
const MOUSE_IDLE_TIME = 3000
|
||||
|
||||
export const ParticipantTileFocus = ({
|
||||
trackRef,
|
||||
isVisible,
|
||||
hasKeyboardFocus,
|
||||
}: {
|
||||
trackRef: TrackReferenceOrPlaceholder
|
||||
isVisible: boolean
|
||||
hasKeyboardFocus: boolean
|
||||
}) => {
|
||||
const [hovered, setHovered] = useState(false)
|
||||
const [opacity, setOpacity] = useState(0)
|
||||
|
||||
const idleTimerRef = useRef<number | null>(null)
|
||||
const [isIdleRef, setIsIdleRef] = useState(false)
|
||||
|
||||
const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
// Wait for next frame to ensure element is mounted
|
||||
requestAnimationFrame(() => {
|
||||
setOpacity(0.6)
|
||||
})
|
||||
@@ -117,14 +155,24 @@ export const ParticipantTileFocus = ({
|
||||
}
|
||||
}, [isVisible])
|
||||
|
||||
const handleMouseMove = () => {
|
||||
if (idleTimerRef.current) {
|
||||
window.clearTimeout(idleTimerRef.current)
|
||||
}
|
||||
idleTimerRef.current = window.setTimeout(() => {
|
||||
setIsIdleRef(true)
|
||||
}, MOUSE_IDLE_TIME)
|
||||
setIsIdleRef(false)
|
||||
}
|
||||
|
||||
const participant = trackRef.participant
|
||||
|
||||
const isScreenShare = trackRef.source == Track.Source.ScreenShare
|
||||
const isLocal = trackRef.participant.isLocal
|
||||
|
||||
const canMute = useCanMute(participant)
|
||||
|
||||
return (
|
||||
// Pointer-events: none so this overlay doesn't block the zoom surface below.
|
||||
<div
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
@@ -135,9 +183,11 @@ export const ParticipantTileFocus = ({
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
pointerEvents: 'none',
|
||||
})}
|
||||
aria-hidden={!isVisible}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
onMouseMove={handleMouseMove}
|
||||
>
|
||||
{isVisible && (
|
||||
<div
|
||||
@@ -147,7 +197,6 @@ export const ParticipantTileFocus = ({
|
||||
zIndex: 1,
|
||||
borderRadius: '0.25rem',
|
||||
display: 'flex',
|
||||
pointerEvents: 'auto',
|
||||
_hover: {
|
||||
opacity: '0.95 !important',
|
||||
},
|
||||
@@ -164,7 +213,7 @@ export const ParticipantTileFocus = ({
|
||||
})}
|
||||
>
|
||||
<FocusButton trackRef={trackRef} />
|
||||
{!isScreenShare && (
|
||||
{!isScreenShare ? (
|
||||
<>
|
||||
{participant.isLocal ? (
|
||||
<EffectsButton />
|
||||
@@ -172,6 +221,8 @@ export const ParticipantTileFocus = ({
|
||||
canMute && <MuteButton participant={participant} />
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
!isLocal && <ZoomButton trackRef={trackRef} />
|
||||
)}
|
||||
</HStack>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { VideoTrack } from '@livekit/components-react'
|
||||
import { type TrackReference } from '@livekit/components-core'
|
||||
import { memo } from 'react'
|
||||
|
||||
interface ScreenShareVideoTrackProps {
|
||||
trackRef: TrackReference
|
||||
onSubscriptionStatusChanged: (subscribed: boolean) => void
|
||||
manageSubscription?: boolean
|
||||
}
|
||||
|
||||
// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
|
||||
export const ScreenShareVideoTrack = memo(
|
||||
({
|
||||
trackRef,
|
||||
onSubscriptionStatusChanged,
|
||||
manageSubscription,
|
||||
}: ScreenShareVideoTrackProps) => (
|
||||
<VideoTrack
|
||||
trackRef={trackRef}
|
||||
onSubscriptionStatusChanged={onSubscriptionStatusChanged}
|
||||
manageSubscription={manageSubscription}
|
||||
/>
|
||||
)
|
||||
)
|
||||
|
||||
ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'
|
||||
@@ -1,203 +0,0 @@
|
||||
import { css } from '@/styled-system/css'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { Button } from '@/primitives'
|
||||
import {
|
||||
RiCollapseDiagonalLine,
|
||||
RiExpandDiagonalLine,
|
||||
RiFullscreenExitLine,
|
||||
RiZoomInLine,
|
||||
RiZoomOutLine,
|
||||
} from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
import { isMacintosh } from '@/utils/livekit'
|
||||
import { srOnly } from '@/styles/a11y'
|
||||
|
||||
interface ScreenShareZoomControlsProps {
|
||||
containerRef: React.RefObject<HTMLDivElement | null>
|
||||
isZoomed: boolean
|
||||
zoomPercentage: number
|
||||
canZoomIn: boolean
|
||||
canZoomOut: boolean
|
||||
onZoomIn: () => void
|
||||
onZoomOut: () => void
|
||||
onResetZoom: () => void
|
||||
}
|
||||
|
||||
export const ScreenShareZoomControls = ({
|
||||
containerRef,
|
||||
isZoomed,
|
||||
zoomPercentage,
|
||||
canZoomIn,
|
||||
canZoomOut,
|
||||
onZoomIn,
|
||||
onZoomOut,
|
||||
onResetZoom,
|
||||
}: ScreenShareZoomControlsProps) => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
|
||||
const announce = useScreenReaderAnnounce()
|
||||
|
||||
const [isFullscreen, setIsFullscreen] = useState(false)
|
||||
// Tracks whether this tile's container triggered fullscreen (vs another share's).
|
||||
const wasThisTileFullscreen = useRef(false)
|
||||
const [isFullscreenAvailable] = useState(
|
||||
() => typeof document !== 'undefined' && document.fullscreenEnabled
|
||||
)
|
||||
|
||||
// Covers Esc and browser UI exits, not just the toolbar button.
|
||||
// Only this tile's instance announces to avoid duplicates with multiple shares.
|
||||
useEffect(() => {
|
||||
const onChange = () => {
|
||||
const isThisTileFullscreen =
|
||||
document.fullscreenElement === containerRef.current
|
||||
setIsFullscreen(isThisTileFullscreen)
|
||||
|
||||
if (isThisTileFullscreen) {
|
||||
wasThisTileFullscreen.current = true
|
||||
announce(t('fullScreenEntered'), 'assertive')
|
||||
} else if (wasThisTileFullscreen.current) {
|
||||
wasThisTileFullscreen.current = false
|
||||
announce(t('fullScreenExited'), 'assertive')
|
||||
}
|
||||
}
|
||||
document.addEventListener('fullscreenchange', onChange)
|
||||
return () => document.removeEventListener('fullscreenchange', onChange)
|
||||
}, [announce, t, containerRef])
|
||||
|
||||
const toggleFullScreen = useCallback(async () => {
|
||||
try {
|
||||
if (document.fullscreenElement === containerRef.current) {
|
||||
await document.exitFullscreen()
|
||||
} else {
|
||||
// Tile container so zoom controls stay visible in fullscreen.
|
||||
await containerRef.current?.requestFullscreen()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling fullscreen:', error)
|
||||
}
|
||||
}, [containerRef])
|
||||
|
||||
const wheelShortcutVisual = isMacintosh() ? '⌘+scroll' : 'Ctrl+scroll'
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
bottom: '12px',
|
||||
right: '12px',
|
||||
zIndex: 2,
|
||||
pointerEvents: 'auto',
|
||||
})}
|
||||
>
|
||||
<HStack
|
||||
gap={0}
|
||||
role="toolbar"
|
||||
aria-label={t('toolbarLabel')}
|
||||
className={css({
|
||||
backgroundColor: 'primaryDark.50',
|
||||
borderRadius: '2rem',
|
||||
padding: '0.5rem',
|
||||
alignItems: 'center',
|
||||
opacity: 0.7,
|
||||
transition: 'opacity 200ms linear',
|
||||
_hover: {
|
||||
opacity: 0.95,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<span className={srOnly}>
|
||||
{t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
|
||||
</span>
|
||||
{/* Animated wrapper: collapses to 0 when not zoomed. padding/margin
|
||||
trick keeps overflow:hidden from clipping focus rings. */}
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden',
|
||||
transition: 'max-width 200ms ease-out, opacity 200ms ease-out',
|
||||
padding: '3px',
|
||||
margin: '-3px',
|
||||
})}
|
||||
style={{
|
||||
maxWidth: isZoomed ? '12rem' : '0',
|
||||
opacity: isZoomed ? 1 : 0,
|
||||
}}
|
||||
aria-hidden={!isZoomed}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primaryTextDark"
|
||||
square
|
||||
tooltip={t('fitToWindow')}
|
||||
aria-label={t('fitToWindow')}
|
||||
isDisabled={!isZoomed}
|
||||
onPress={onResetZoom}
|
||||
>
|
||||
<RiFullscreenExitLine size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primaryTextDark"
|
||||
square
|
||||
tooltip={t('zoomOutWithShortcut', {
|
||||
shortcut: wheelShortcutVisual,
|
||||
})}
|
||||
aria-label={t('zoomOut')}
|
||||
isDisabled={!isZoomed || !canZoomOut}
|
||||
onPress={onZoomOut}
|
||||
>
|
||||
<RiZoomOutLine size={20} />
|
||||
</Button>
|
||||
{/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={css({
|
||||
color: 'white',
|
||||
fontSize: '0.8125rem',
|
||||
fontWeight: 500,
|
||||
minWidth: '3.25rem',
|
||||
textAlign: 'center',
|
||||
userSelect: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '0 0.25rem',
|
||||
whiteSpace: 'nowrap',
|
||||
})}
|
||||
>
|
||||
{zoomPercentage} %
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primaryTextDark"
|
||||
square
|
||||
tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
|
||||
aria-label={t('zoomIn')}
|
||||
isDisabled={!canZoomIn}
|
||||
onPress={onZoomIn}
|
||||
>
|
||||
<RiZoomInLine size={20} />
|
||||
</Button>
|
||||
{isFullscreenAvailable && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primaryTextDark"
|
||||
square
|
||||
tooltip={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
|
||||
aria-label={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
|
||||
onPress={toggleFullScreen}
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<RiCollapseDiagonalLine size={20} />
|
||||
) : (
|
||||
<RiExpandDiagonalLine size={20} />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</HStack>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import { css } from '@/styled-system/css'
|
||||
import { type TrackReference } from '@livekit/components-core'
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
|
||||
import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
|
||||
import { ScreenShareZoomControls } from './ScreenShareZoomControls'
|
||||
import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
|
||||
|
||||
interface ScreenShareZoomableVideoProps {
|
||||
trackRef: TrackReference
|
||||
tileRef: React.RefObject<HTMLDivElement | null>
|
||||
onSubscriptionStatusChanged: (subscribed: boolean) => void
|
||||
manageSubscription?: boolean
|
||||
}
|
||||
|
||||
export const ScreenShareZoomableVideo = ({
|
||||
trackRef,
|
||||
tileRef,
|
||||
onSubscriptionStatusChanged,
|
||||
manageSubscription,
|
||||
}: ScreenShareZoomableVideoProps) => {
|
||||
const zoom = useScreenShareZoom()
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
|
||||
const announce = useScreenReaderAnnounce()
|
||||
|
||||
// SR announcement: announce zoom level on change, with a one-time pan hint
|
||||
// on the first zoom above 100 % per session.
|
||||
const prevZoomRef = useRef(zoom.zoomPercentage)
|
||||
const hasAnnouncedPanHint = useRef(false)
|
||||
useEffect(() => {
|
||||
if (prevZoomRef.current === zoom.zoomPercentage) return
|
||||
const wasAtDefault = prevZoomRef.current <= 100
|
||||
prevZoomRef.current = zoom.zoomPercentage
|
||||
|
||||
if (wasAtDefault && zoom.isZoomed && !hasAnnouncedPanHint.current) {
|
||||
hasAnnouncedPanHint.current = true
|
||||
announce(t('panHint', { level: zoom.zoomPercentage }), 'polite')
|
||||
} else {
|
||||
announce(t('currentZoomLevel', { level: zoom.zoomPercentage }), 'polite')
|
||||
}
|
||||
|
||||
if (!zoom.isZoomed) hasAnnouncedPanHint.current = false
|
||||
}, [zoom.zoomPercentage, zoom.isZoomed, announce, t])
|
||||
|
||||
// Attach keyboard listener on the tile container (has tabIndex=0).
|
||||
useEffect(() => {
|
||||
const el = tileRef.current
|
||||
if (!el) return
|
||||
el.addEventListener('keydown', zoom.handleKeyDown)
|
||||
return () => el.removeEventListener('keydown', zoom.handleKeyDown)
|
||||
}, [tileRef, zoom.handleKeyDown])
|
||||
|
||||
// Native wheel listener with { passive: false } so preventDefault works.
|
||||
useEffect(() => {
|
||||
const el = zoom.surfaceElRef.current
|
||||
if (!el) return
|
||||
el.addEventListener('wheel', zoom.handleWheel, { passive: false })
|
||||
return () => el.removeEventListener('wheel', zoom.handleWheel)
|
||||
}, [zoom.handleWheel, zoom.surfaceElRef])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={zoom.surfaceElRef}
|
||||
className={css({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
touchAction: 'none',
|
||||
})}
|
||||
{...zoom.moveProps}
|
||||
>
|
||||
<div
|
||||
ref={zoom.transformElRef}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
pointerEvents: 'none',
|
||||
transformOrigin: 'center center',
|
||||
}}
|
||||
>
|
||||
<ScreenShareVideoTrack
|
||||
trackRef={trackRef}
|
||||
onSubscriptionStatusChanged={onSubscriptionStatusChanged}
|
||||
manageSubscription={manageSubscription}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ScreenShareZoomControls
|
||||
containerRef={tileRef}
|
||||
isZoomed={zoom.isZoomed}
|
||||
zoomPercentage={zoom.zoomPercentage}
|
||||
canZoomIn={zoom.canZoomIn}
|
||||
canZoomOut={zoom.canZoomOut}
|
||||
onZoomIn={zoom.zoomIn}
|
||||
onZoomOut={zoom.zoomOut}
|
||||
onResetZoom={zoom.resetZoom}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -6,8 +6,8 @@ import { Button, Div } from '@/primitives'
|
||||
import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ParticipantsList } from './controls/Participants/ParticipantsList'
|
||||
import { PanelId, useSidePanel } from '../hooks/useSidePanel'
|
||||
import React, { ReactNode, useCallback, useRef } from 'react'
|
||||
import { useSidePanel } from '../hooks/useSidePanel'
|
||||
import { ReactNode } from 'react'
|
||||
import { Chat } from '../prefabs/Chat'
|
||||
import { Effects } from './effects/Effects'
|
||||
import { Admin } from './Admin'
|
||||
@@ -15,7 +15,6 @@ import { Tools } from './Tools'
|
||||
import { Info } from './Info'
|
||||
import { HStack } from '@/styled-system/jsx'
|
||||
import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
|
||||
import { useRestoreFocus } from '@/hooks/useRestoreFocus'
|
||||
|
||||
type StyledSidePanelProps = {
|
||||
title: string
|
||||
@@ -30,115 +29,103 @@ type StyledSidePanelProps = {
|
||||
isReactionToolbarOpen?: boolean
|
||||
}
|
||||
|
||||
const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
|
||||
(
|
||||
{
|
||||
title,
|
||||
ariaLabel,
|
||||
children,
|
||||
onClose,
|
||||
isClosed,
|
||||
isReactionToolbarOpen,
|
||||
closeButtonTooltip,
|
||||
isSubmenu = false,
|
||||
onBack,
|
||||
backButtonLabel,
|
||||
},
|
||||
ref
|
||||
) => (
|
||||
<aside
|
||||
ref={ref}
|
||||
tabIndex={-1}
|
||||
className={css({
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'box.border',
|
||||
backgroundColor: 'box.bg',
|
||||
color: 'box.text',
|
||||
borderRadius: 8,
|
||||
flex: 1,
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: 'var(--sizes-room-side-panel-margin)',
|
||||
marginLeft: 0,
|
||||
marginBottom: 0,
|
||||
padding: 0,
|
||||
gap: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 'var(--sizes-room-side-panel)',
|
||||
transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
})}
|
||||
style={{
|
||||
transform: isClosed
|
||||
? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
|
||||
: 'none',
|
||||
bottom: isReactionToolbarOpen
|
||||
? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
|
||||
: 'var(--sizes-room-control-bar)',
|
||||
}}
|
||||
aria-hidden={isClosed}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<HStack alignItems="center">
|
||||
{isSubmenu && (
|
||||
<Button
|
||||
variant="secondaryText"
|
||||
size="sm"
|
||||
square
|
||||
className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
|
||||
aria-label={backButtonLabel}
|
||||
onPress={onBack}
|
||||
>
|
||||
<RiArrowLeftLine size={20} aria-hidden="true" />
|
||||
</Button>
|
||||
)}
|
||||
<Heading
|
||||
slot="title"
|
||||
level={1}
|
||||
className={text({ variant: 'h2' })}
|
||||
style={{
|
||||
paddingLeft: isSubmenu ? 0 : '1.5rem',
|
||||
paddingTop: '1rem',
|
||||
display: isClosed ? 'none' : 'flex',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
const StyledSidePanel = ({
|
||||
title,
|
||||
ariaLabel,
|
||||
children,
|
||||
onClose,
|
||||
isClosed,
|
||||
isReactionToolbarOpen,
|
||||
closeButtonTooltip,
|
||||
isSubmenu = false,
|
||||
onBack,
|
||||
backButtonLabel,
|
||||
}: StyledSidePanelProps) => (
|
||||
<aside
|
||||
className={css({
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'box.border',
|
||||
backgroundColor: 'box.bg',
|
||||
color: 'box.text',
|
||||
borderRadius: 8,
|
||||
flex: 1,
|
||||
position: 'absolute',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: 'var(--sizes-room-side-panel-margin)',
|
||||
marginLeft: 0,
|
||||
marginBottom: 0,
|
||||
padding: 0,
|
||||
gap: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 'var(--sizes-room-side-panel)',
|
||||
transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
|
||||
})}
|
||||
style={{
|
||||
transform: isClosed
|
||||
? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
|
||||
: 'none',
|
||||
bottom: isReactionToolbarOpen
|
||||
? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
|
||||
: 'var(--sizes-room-control-bar)',
|
||||
}}
|
||||
aria-hidden={isClosed}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<HStack alignItems="center">
|
||||
{isSubmenu && (
|
||||
<Button
|
||||
variant="secondaryText"
|
||||
size="sm"
|
||||
square
|
||||
className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
|
||||
aria-label={backButtonLabel}
|
||||
onPress={onBack}
|
||||
>
|
||||
{title}
|
||||
</Heading>
|
||||
</HStack>
|
||||
<Div
|
||||
position="absolute"
|
||||
top="5"
|
||||
right="5"
|
||||
<RiArrowLeftLine size={20} aria-hidden="true" />
|
||||
</Button>
|
||||
)}
|
||||
<Heading
|
||||
slot="title"
|
||||
level={1}
|
||||
className={text({ variant: 'h2' })}
|
||||
style={{
|
||||
display: isClosed ? 'none' : undefined,
|
||||
paddingLeft: isSubmenu ? 0 : '1.5rem',
|
||||
paddingTop: '1rem',
|
||||
display: isClosed ? 'none' : 'flex',
|
||||
justifyContent: 'start',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
invisible
|
||||
variant="tertiaryText"
|
||||
size="xs"
|
||||
onPress={onClose}
|
||||
aria-label={closeButtonTooltip}
|
||||
tooltip={closeButtonTooltip}
|
||||
>
|
||||
<RiCloseLine />
|
||||
</Button>
|
||||
</Div>
|
||||
{children}
|
||||
</aside>
|
||||
)
|
||||
{title}
|
||||
</Heading>
|
||||
</HStack>
|
||||
<Div
|
||||
position="absolute"
|
||||
top="5"
|
||||
right="5"
|
||||
style={{
|
||||
display: isClosed ? 'none' : undefined,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
invisible
|
||||
variant="tertiaryText"
|
||||
size="xs"
|
||||
onPress={onClose}
|
||||
aria-label={closeButtonTooltip}
|
||||
tooltip={closeButtonTooltip}
|
||||
>
|
||||
<RiCloseLine />
|
||||
</Button>
|
||||
</Div>
|
||||
{children}
|
||||
</aside>
|
||||
)
|
||||
|
||||
StyledSidePanel.displayName = 'StyledSidePanel'
|
||||
|
||||
type PanelProps = {
|
||||
isOpen: boolean
|
||||
children: React.ReactNode
|
||||
@@ -175,28 +162,8 @@ export const SidePanel = () => {
|
||||
|
||||
const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()
|
||||
|
||||
const asideRef = useRef<HTMLElement>(null)
|
||||
|
||||
const focusAside = useCallback(() => {
|
||||
requestAnimationFrame(() => {
|
||||
asideRef.current?.focus({ preventScroll: true })
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handlePanelOpened = useCallback(() => {
|
||||
if (activePanelId === PanelId.CHAT) return
|
||||
focusAside()
|
||||
}, [activePanelId, focusAside])
|
||||
|
||||
useRestoreFocus(isSidePanelOpen, {
|
||||
onOpened: handlePanelOpened,
|
||||
preventScroll: true,
|
||||
activeKey: activePanelId,
|
||||
})
|
||||
|
||||
return (
|
||||
<StyledSidePanel
|
||||
ref={asideRef}
|
||||
title={title}
|
||||
ariaLabel={t('ariaLabel', { title })}
|
||||
onClose={() => {
|
||||
|
||||
@@ -95,13 +95,8 @@ const ToolButton = ({
|
||||
|
||||
export const Tools = () => {
|
||||
const { data } = useConfig()
|
||||
const {
|
||||
openTranscript,
|
||||
openScreenRecording,
|
||||
activeSubPanelId,
|
||||
isToolsOpen,
|
||||
isSidePanelOpen,
|
||||
} = useSidePanel()
|
||||
const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
|
||||
useSidePanel()
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
|
||||
|
||||
// Restore focus to the element that opened the Tools panel
|
||||
@@ -118,7 +113,6 @@ export const Tools = () => {
|
||||
},
|
||||
restoreFocusRaf: true,
|
||||
preventScroll: true,
|
||||
shouldRestoreOnClose: () => !isSidePanelOpen,
|
||||
})
|
||||
|
||||
const isTranscriptEnabled = useIsRecordingModeEnabled(
|
||||
|
||||
+5
-4
@@ -13,10 +13,8 @@ import {
|
||||
} from './TimerWorker'
|
||||
import {
|
||||
BackgroundProcessorInterface,
|
||||
SELFIE_SEGMENTER_MODEL_PATH,
|
||||
type ProcessorConfig,
|
||||
type ProcessorType,
|
||||
MEDIAPIPE_PATH_WASM,
|
||||
} from '.'
|
||||
|
||||
const PROCESSING_WIDTH = 256
|
||||
@@ -155,10 +153,13 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
|
||||
}
|
||||
|
||||
async initSegmenter() {
|
||||
const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
|
||||
const vision = await FilesetResolver.forVisionTasks(
|
||||
'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
|
||||
)
|
||||
this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
|
||||
baseOptions: {
|
||||
modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
|
||||
modelAssetPath:
|
||||
'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter_landscape/float16/latest/selfie_segmenter_landscape.tflite',
|
||||
delegate: 'CPU', // Use CPU for Firefox.
|
||||
},
|
||||
runningMode: 'VIDEO',
|
||||
|
||||
@@ -11,11 +11,7 @@ import {
|
||||
TIMEOUT_TICK,
|
||||
timerWorkerScript,
|
||||
} from './TimerWorker'
|
||||
import {
|
||||
FACE_LANDMARKS_MODEL_PATH,
|
||||
ProcessorType,
|
||||
MEDIAPIPE_PATH_WASM,
|
||||
} from '.'
|
||||
import { ProcessorType } from '.'
|
||||
|
||||
const PROCESSING_WIDTH = 256 * 3
|
||||
const PROCESSING_HEIGHT = 144 * 3
|
||||
@@ -132,10 +128,13 @@ export class FaceLandmarksProcessor implements TrackProcessor<Track.Kind> {
|
||||
}
|
||||
|
||||
async initFaceLandmarker() {
|
||||
const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
|
||||
const vision = await FilesetResolver.forVisionTasks(
|
||||
'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
|
||||
)
|
||||
this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
|
||||
baseOptions: {
|
||||
modelAssetPath: FACE_LANDMARKS_MODEL_PATH,
|
||||
modelAssetPath:
|
||||
'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
|
||||
delegate: 'GPU',
|
||||
},
|
||||
runningMode: 'VIDEO',
|
||||
|
||||
+4
-19
@@ -1,14 +1,13 @@
|
||||
import type { ProcessorOptions, Track } from 'livekit-client'
|
||||
import {
|
||||
BackgroundBlur,
|
||||
ProcessorWrapper,
|
||||
BackgroundProcessor,
|
||||
VirtualBackground,
|
||||
} from '@livekit/track-processors'
|
||||
import {
|
||||
type ProcessorConfig,
|
||||
BackgroundProcessorInterface,
|
||||
ProcessorType,
|
||||
MEDIAPIPE_PATH_WASM,
|
||||
SELFIE_SEGMENTER_MODEL_PATH,
|
||||
} from '.'
|
||||
|
||||
export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInterface {
|
||||
@@ -21,24 +20,10 @@ export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInter
|
||||
|
||||
if (opts.type === 'virtual') {
|
||||
this.processorType = ProcessorType.VIRTUAL
|
||||
this.processor = BackgroundProcessor({
|
||||
mode: 'virtual-background',
|
||||
imagePath: opts.imagePath,
|
||||
assetPaths: {
|
||||
tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
|
||||
modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
|
||||
},
|
||||
})
|
||||
this.processor = VirtualBackground(opts.imagePath)
|
||||
} else if (opts.type === 'blur') {
|
||||
this.processorType = ProcessorType.BLUR
|
||||
this.processor = BackgroundProcessor({
|
||||
mode: 'background-blur',
|
||||
blurRadius: opts.blurRadius,
|
||||
assetPaths: {
|
||||
tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
|
||||
modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
|
||||
},
|
||||
})
|
||||
this.processor = BackgroundBlur(opts.blurRadius)
|
||||
} else {
|
||||
throw new Error(
|
||||
'Must provide either imagePath for virtual background or blurRadius for blur'
|
||||
|
||||
@@ -4,14 +4,6 @@ import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
|
||||
import { UnifiedBackgroundTrackProcessor } from './UnifiedBackgroundTrackProcessor'
|
||||
import { FaceLandmarksOptions } from './FaceLandmarksProcessor'
|
||||
|
||||
export const SELFIE_SEGMENTER_MODEL_PATH =
|
||||
'/assets/mediapipe/models/selfie_segmenter_landscape.tflite'
|
||||
|
||||
export const FACE_LANDMARKS_MODEL_PATH =
|
||||
'/assets/mediapipe/models/face_landmarker.task'
|
||||
|
||||
export const MEDIAPIPE_PATH_WASM = '/assets/mediapipe/wasm'
|
||||
|
||||
export enum ProcessorType {
|
||||
BLUR = 'blur',
|
||||
VIRTUAL = 'virtual',
|
||||
|
||||
+3
-3
@@ -1,4 +1,4 @@
|
||||
import { RiCollapseDiagonalLine, RiExpandDiagonalLine } from '@remixicon/react'
|
||||
import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
|
||||
import { MenuItem } from 'react-aria-components'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { menuRecipe } from '@/primitives/menuRecipe'
|
||||
@@ -20,12 +20,12 @@ export const FullScreenMenuItem = () => {
|
||||
>
|
||||
{isCurrentlyFullscreen ? (
|
||||
<>
|
||||
<RiCollapseDiagonalLine size={20} />
|
||||
<RiFullscreenExitLine size={20} />
|
||||
{t('fullscreen.exit')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RiExpandDiagonalLine size={20} />
|
||||
<RiFullscreenLine size={20} />
|
||||
{t('fullscreen.enter')}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,260 +0,0 @@
|
||||
import { useCallback, useRef, useSyncExternalStore } from 'react'
|
||||
import { useMove } from 'react-aria'
|
||||
import type { MoveMoveEvent } from '@react-types/shared'
|
||||
import {
|
||||
MIN_ZOOM,
|
||||
PAN_STEP,
|
||||
WHEEL_ZOOM_SPEED,
|
||||
ZOOM_STEP,
|
||||
type PanOffset,
|
||||
type ZoomSnapshot,
|
||||
buildZoomSnapshot,
|
||||
clampPan,
|
||||
clampZoom,
|
||||
getCursorFromZoomState,
|
||||
getCursorPercentsFromWheelEvent,
|
||||
getPanDeltaPercentsFromMove,
|
||||
getWheelPanOffset,
|
||||
getZoomTransform,
|
||||
} from '../utils/screenShareZoom'
|
||||
|
||||
/**
|
||||
* Manages zoom and pan state for a remote screen share.
|
||||
*
|
||||
* Performance: zoom/pan live in refs and are applied imperatively to the DOM
|
||||
* (via transformElRef / surfaceElRef) so the hot path (drag, wheel) never
|
||||
* triggers a React re-render. A useSyncExternalStore snapshot is flushed only
|
||||
* when the toolbar UI needs to update (zoom level change, drag end).
|
||||
*
|
||||
* Drag/touch panning is handled by react-aria's useMove (moveProps).
|
||||
* Ctrl/Cmd + wheel zoom is a native listener (must be non-passive to
|
||||
* preventDefault and block browser page zoom).
|
||||
* Arrow key panning and +/-/0 zoom are on a keydown listener attached to the
|
||||
* tile container (which has tabIndex=0 and focus).
|
||||
*/
|
||||
export const useScreenShareZoom = () => {
|
||||
const zoomRef = useRef(MIN_ZOOM)
|
||||
const panRef = useRef<PanOffset>({ x: 0, y: 0 })
|
||||
const draggingRef = useRef(false)
|
||||
|
||||
// The consumer binds these to the inner transform div and the outer drag surface.
|
||||
const transformElRef = useRef<HTMLDivElement | null>(null)
|
||||
const surfaceElRef = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
// Snapshot store: subscribers are notified only on explicit flush() calls.
|
||||
const snapshotRef = useRef<ZoomSnapshot>(
|
||||
buildZoomSnapshot(MIN_ZOOM, { x: 0, y: 0 }, false)
|
||||
)
|
||||
const listenersRef = useRef(new Set<() => void>())
|
||||
|
||||
const subscribe = useCallback((cb: () => void) => {
|
||||
listenersRef.current.add(cb)
|
||||
return () => {
|
||||
listenersRef.current.delete(cb)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const getSnapshot = useCallback(() => snapshotRef.current, [])
|
||||
|
||||
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
|
||||
|
||||
const flush = useCallback(() => {
|
||||
snapshotRef.current = buildZoomSnapshot(
|
||||
zoomRef.current,
|
||||
panRef.current,
|
||||
draggingRef.current
|
||||
)
|
||||
listenersRef.current.forEach((cb) => cb())
|
||||
}, [])
|
||||
|
||||
const applyTransform = useCallback((transition: boolean) => {
|
||||
const el = transformElRef.current
|
||||
if (!el) return
|
||||
el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
|
||||
el.style.transition = transition ? 'transform 150ms ease-out' : 'none'
|
||||
}, [])
|
||||
|
||||
const applyCursor = useCallback(() => {
|
||||
const el = surfaceElRef.current
|
||||
if (!el) return
|
||||
el.style.cursor = getCursorFromZoomState(
|
||||
zoomRef.current,
|
||||
draggingRef.current
|
||||
)
|
||||
}, [])
|
||||
|
||||
const zoomIn = useCallback(() => {
|
||||
const next = clampZoom(zoomRef.current + ZOOM_STEP)
|
||||
zoomRef.current = next
|
||||
panRef.current = clampPan(panRef.current, next)
|
||||
applyTransform(true)
|
||||
applyCursor()
|
||||
flush()
|
||||
}, [applyTransform, applyCursor, flush])
|
||||
|
||||
const zoomOut = useCallback(() => {
|
||||
const next = clampZoom(zoomRef.current - ZOOM_STEP)
|
||||
zoomRef.current = next
|
||||
panRef.current =
|
||||
next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next)
|
||||
applyTransform(true)
|
||||
applyCursor()
|
||||
flush()
|
||||
}, [applyTransform, applyCursor, flush])
|
||||
|
||||
const resetZoom = useCallback(() => {
|
||||
zoomRef.current = MIN_ZOOM
|
||||
panRef.current = { x: 0, y: 0 }
|
||||
applyTransform(true)
|
||||
applyCursor()
|
||||
flush()
|
||||
}, [applyTransform, applyCursor, flush])
|
||||
|
||||
// Must be attached with { passive: false } so preventDefault() blocks
|
||||
// the browser's native Ctrl+scroll page zoom.
|
||||
const handleWheel = useCallback(
|
||||
(e: WheelEvent) => {
|
||||
if (!e.ctrlKey && !e.metaKey) return
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
const target = e.currentTarget as HTMLElement
|
||||
const prev = zoomRef.current
|
||||
const delta = -e.deltaY * WHEEL_ZOOM_SPEED
|
||||
const next = clampZoom(prev + delta)
|
||||
|
||||
if (next <= MIN_ZOOM) {
|
||||
zoomRef.current = MIN_ZOOM
|
||||
panRef.current = { x: 0, y: 0 }
|
||||
} else {
|
||||
const { cursorXPercent, cursorYPercent } =
|
||||
getCursorPercentsFromWheelEvent(e, target)
|
||||
zoomRef.current = next
|
||||
panRef.current = getWheelPanOffset({
|
||||
pan: panRef.current,
|
||||
prevZoom: prev,
|
||||
nextZoom: next,
|
||||
cursorXPercent,
|
||||
cursorYPercent,
|
||||
})
|
||||
}
|
||||
|
||||
applyTransform(false)
|
||||
applyCursor()
|
||||
flush()
|
||||
},
|
||||
[applyTransform, applyCursor, flush]
|
||||
)
|
||||
|
||||
// useMove handles mouse drag + touch pan. Keyboard arrows are not handled
|
||||
// here because moveProps is on the zoom surface, while focus is on the tile
|
||||
// container, see handleKeyDown below.
|
||||
const { moveProps } = useMove({
|
||||
onMoveStart() {
|
||||
if (zoomRef.current <= MIN_ZOOM) return
|
||||
draggingRef.current = true
|
||||
applyCursor()
|
||||
flush()
|
||||
},
|
||||
onMove(e: MoveMoveEvent) {
|
||||
if (zoomRef.current <= MIN_ZOOM) return
|
||||
|
||||
const el = surfaceElRef.current
|
||||
if (!el) return
|
||||
|
||||
const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
|
||||
e.deltaX,
|
||||
e.deltaY,
|
||||
el
|
||||
)
|
||||
|
||||
panRef.current = clampPan(
|
||||
{
|
||||
x: panRef.current.x + deltaXPercent,
|
||||
y: panRef.current.y + deltaYPercent,
|
||||
},
|
||||
zoomRef.current
|
||||
)
|
||||
|
||||
applyTransform(false)
|
||||
// Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
|
||||
// Keyboard: flush so the toolbar reflects the updated position.
|
||||
if (e.pointerType === 'keyboard') {
|
||||
flush()
|
||||
}
|
||||
},
|
||||
onMoveEnd() {
|
||||
draggingRef.current = false
|
||||
applyTransform(true)
|
||||
applyCursor()
|
||||
flush()
|
||||
},
|
||||
})
|
||||
|
||||
const panBy = useCallback(
|
||||
(dx: number, dy: number) => {
|
||||
panRef.current = clampPan(
|
||||
{ x: panRef.current.x + dx, y: panRef.current.y + dy },
|
||||
zoomRef.current
|
||||
)
|
||||
applyTransform(true)
|
||||
flush()
|
||||
},
|
||||
[applyTransform, flush]
|
||||
)
|
||||
|
||||
// Attached to the tile container (not the zoom surface) where keyboard
|
||||
// focus lives. Arrows pan, +/-/0 zoom.
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
const isZoomed = zoomRef.current > MIN_ZOOM
|
||||
if (!isZoomed && e.key !== '+' && e.key !== '=') return
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault()
|
||||
panBy(PAN_STEP, 0)
|
||||
break
|
||||
case 'ArrowRight':
|
||||
e.preventDefault()
|
||||
panBy(-PAN_STEP, 0)
|
||||
break
|
||||
case 'ArrowUp':
|
||||
e.preventDefault()
|
||||
panBy(0, PAN_STEP)
|
||||
break
|
||||
case 'ArrowDown':
|
||||
e.preventDefault()
|
||||
panBy(0, -PAN_STEP)
|
||||
break
|
||||
case '+':
|
||||
case '=':
|
||||
e.preventDefault()
|
||||
zoomIn()
|
||||
break
|
||||
case '-':
|
||||
e.preventDefault()
|
||||
zoomOut()
|
||||
break
|
||||
case '0':
|
||||
e.preventDefault()
|
||||
resetZoom()
|
||||
break
|
||||
}
|
||||
},
|
||||
[panBy, zoomIn, zoomOut, resetZoom]
|
||||
)
|
||||
|
||||
return {
|
||||
...snapshot,
|
||||
transformElRef,
|
||||
surfaceElRef,
|
||||
moveProps,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
resetZoom,
|
||||
handleWheel,
|
||||
handleKeyDown,
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,7 @@ export function Chat({ ...props }: ChatProps) {
|
||||
const room = useRoomContext()
|
||||
const { send, chatMessages, isSending } = useChat()
|
||||
|
||||
const { isChatOpen, isSidePanelOpen } = useSidePanel()
|
||||
const { isChatOpen } = useSidePanel()
|
||||
const chatSnap = useSnapshot(chatStore)
|
||||
|
||||
// Keep track of the element that opened the chat so we can restore focus
|
||||
@@ -51,7 +51,6 @@ export function Chat({ ...props }: ChatProps) {
|
||||
})
|
||||
},
|
||||
preventScroll: true,
|
||||
shouldRestoreOnClose: () => !isSidePanelOpen,
|
||||
})
|
||||
|
||||
// Use useParticipants hook to trigger a re-render when the participant list changes.
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
export const MIN_ZOOM = 1
|
||||
export const MAX_ZOOM = 4
|
||||
export const ZOOM_STEP = 0.1
|
||||
export const WHEEL_ZOOM_SPEED = 0.002
|
||||
export const WHEEL_ZOOM_FOCUS_BLEND = 0.3
|
||||
export const PAN_STEP = 5
|
||||
export const PAN_CLAMP_HALF = 50
|
||||
|
||||
export interface PanOffset {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export interface ZoomSnapshot {
|
||||
zoomLevel: number
|
||||
zoomPercentage: number
|
||||
panOffset: PanOffset
|
||||
isZoomed: boolean
|
||||
isDragging: boolean
|
||||
canZoomIn: boolean
|
||||
canZoomOut: boolean
|
||||
}
|
||||
|
||||
export const clampZoom = (value: number) => {
|
||||
return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value))
|
||||
}
|
||||
|
||||
// Restrict pan so the content edge never passes the viewport center.
|
||||
export const clampPan = (pan: PanOffset, zoom: number): PanOffset => {
|
||||
const maxPan = ((zoom - 1) / zoom) * PAN_CLAMP_HALF
|
||||
return {
|
||||
x: Math.max(-maxPan, Math.min(maxPan, pan.x)),
|
||||
y: Math.max(-maxPan, Math.min(maxPan, pan.y)),
|
||||
}
|
||||
}
|
||||
|
||||
export const buildZoomSnapshot = (
|
||||
zoom: number,
|
||||
pan: PanOffset,
|
||||
dragging: boolean
|
||||
): ZoomSnapshot => {
|
||||
return {
|
||||
zoomLevel: zoom,
|
||||
zoomPercentage: Math.round(zoom * 100),
|
||||
panOffset: pan,
|
||||
isZoomed: zoom > MIN_ZOOM,
|
||||
isDragging: dragging,
|
||||
canZoomIn: zoom < MAX_ZOOM,
|
||||
canZoomOut: zoom > MIN_ZOOM,
|
||||
}
|
||||
}
|
||||
|
||||
export const getZoomTransform = (zoom: number, pan: PanOffset) => {
|
||||
return `scale(${zoom}) translate(${pan.x}%, ${pan.y}%)`
|
||||
}
|
||||
|
||||
export const getCursorFromZoomState = (zoom: number, dragging: boolean) => {
|
||||
if (zoom <= MIN_ZOOM) return 'default'
|
||||
return dragging ? 'grabbing' : 'grab'
|
||||
}
|
||||
|
||||
// Blend the current pan toward the cursor position so the zoom "tracks" the pointer.
|
||||
export const getWheelPanOffset = ({
|
||||
pan,
|
||||
prevZoom,
|
||||
nextZoom,
|
||||
cursorXPercent,
|
||||
cursorYPercent,
|
||||
}: {
|
||||
pan: PanOffset
|
||||
prevZoom: number
|
||||
nextZoom: number
|
||||
cursorXPercent: number
|
||||
cursorYPercent: number
|
||||
}): PanOffset => {
|
||||
const zoomRatio = nextZoom / prevZoom
|
||||
return clampPan(
|
||||
{
|
||||
x:
|
||||
pan.x +
|
||||
(cursorXPercent - pan.x) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
|
||||
y:
|
||||
pan.y +
|
||||
(cursorYPercent - pan.y) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
|
||||
},
|
||||
nextZoom
|
||||
)
|
||||
}
|
||||
|
||||
// Convert cursor pixel position to a % offset from the surface center.
|
||||
export const getCursorPercentsFromWheelEvent = (
|
||||
e: WheelEvent,
|
||||
target: HTMLElement
|
||||
) => {
|
||||
const rect = target.getBoundingClientRect()
|
||||
return {
|
||||
cursorXPercent:
|
||||
((e.clientX - rect.left) / rect.width) * 100 - PAN_CLAMP_HALF,
|
||||
cursorYPercent:
|
||||
((e.clientY - rect.top) / rect.height) * 100 - PAN_CLAMP_HALF,
|
||||
}
|
||||
}
|
||||
|
||||
// Convert useMove pixel deltas to % of the surface dimensions.
|
||||
export const getPanDeltaPercentsFromMove = (
|
||||
deltaX: number,
|
||||
deltaY: number,
|
||||
surface: HTMLElement
|
||||
) => {
|
||||
const rect = surface.getBoundingClientRect()
|
||||
return {
|
||||
deltaXPercent: (deltaX / rect.width) * 100,
|
||||
deltaYPercent: (deltaY / rect.height) * 100,
|
||||
}
|
||||
}
|
||||
@@ -6,10 +6,6 @@ export type RestoreFocusOptions = {
|
||||
onClosed?: () => void
|
||||
restoreFocusRaf?: boolean
|
||||
preventScroll?: boolean
|
||||
/** When the panel stays open but its content changes, update the restore target. */
|
||||
activeKey?: string | null
|
||||
/** Return false to skip restoring focus on close (e.g. when switching to another panel). */
|
||||
shouldRestoreOnClose?: () => boolean
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -26,12 +22,9 @@ export function useRestoreFocus(
|
||||
onClosed,
|
||||
restoreFocusRaf = false,
|
||||
preventScroll = true,
|
||||
activeKey,
|
||||
shouldRestoreOnClose,
|
||||
} = options
|
||||
|
||||
const prevIsOpenRef = useRef(false)
|
||||
const prevActiveKeyRef = useRef(activeKey)
|
||||
const triggerRef = useRef<HTMLElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -44,41 +37,25 @@ export function useRestoreFocus(
|
||||
onOpened?.()
|
||||
}
|
||||
|
||||
// Panel switched while staying open
|
||||
if (wasOpen && isOpen && activeKey !== prevActiveKeyRef.current) {
|
||||
const activeEl = document.activeElement as HTMLElement | null
|
||||
triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
|
||||
onOpened?.()
|
||||
}
|
||||
|
||||
// Just closed
|
||||
if (wasOpen && !isOpen) {
|
||||
const trigger = triggerRef.current
|
||||
const shouldRestore =
|
||||
(shouldRestoreOnClose?.() ?? true) &&
|
||||
trigger &&
|
||||
document.contains(trigger)
|
||||
|
||||
if (shouldRestore) {
|
||||
if (trigger && document.contains(trigger)) {
|
||||
const focus = () => trigger.focus({ preventScroll })
|
||||
if (restoreFocusRaf) requestAnimationFrame(focus)
|
||||
else focus()
|
||||
}
|
||||
|
||||
triggerRef.current = null
|
||||
onClosed?.()
|
||||
}
|
||||
|
||||
prevIsOpenRef.current = isOpen
|
||||
prevActiveKeyRef.current = activeKey
|
||||
}, [
|
||||
isOpen,
|
||||
activeKey,
|
||||
onClosed,
|
||||
onOpened,
|
||||
preventScroll,
|
||||
resolveTrigger,
|
||||
restoreFocusRaf,
|
||||
shouldRestoreOnClose,
|
||||
])
|
||||
}
|
||||
|
||||
@@ -668,24 +668,6 @@
|
||||
"muteParticipant": "{{name}} stummschalten",
|
||||
"fullScreen": "Vollbild"
|
||||
},
|
||||
"screenShareZoom": {
|
||||
"toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
|
||||
"zoomIn": "Vergrößern",
|
||||
"zoomInWithShortcut": "Vergrößern ({{shortcut}})",
|
||||
"zoomOut": "Verkleinern",
|
||||
"zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
|
||||
"wheelShortcut": "Steuerung plus Mausrad",
|
||||
"wheelShortcutMac": "Befehl plus Mausrad",
|
||||
"wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
|
||||
"wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
|
||||
"fitToWindow": "An Fenster anpassen",
|
||||
"fullScreen": "Vollbild",
|
||||
"exitFullScreen": "Vollbild beenden",
|
||||
"currentZoomLevel": "Zoom {{level}} %",
|
||||
"panHint": "Zoom {{level}} %. Mit der Maus ziehen oder Pfeiltasten zum Navigieren verwenden.",
|
||||
"fullScreenEntered": "Vollbild aktiviert",
|
||||
"fullScreenExited": "Vollbild deaktiviert"
|
||||
},
|
||||
"shortcutsPanel": {
|
||||
"title": "Tastenkürzel",
|
||||
"categories": {
|
||||
|
||||
@@ -667,24 +667,6 @@
|
||||
"muteParticipant": "Mute {{name}}",
|
||||
"fullScreen": "Full screen"
|
||||
},
|
||||
"screenShareZoom": {
|
||||
"toolbarLabel": "Screen share zoom controls",
|
||||
"zoomIn": "Zoom in",
|
||||
"zoomInWithShortcut": "Zoom in ({{shortcut}})",
|
||||
"zoomOut": "Zoom out",
|
||||
"zoomOutWithShortcut": "Zoom out ({{shortcut}})",
|
||||
"wheelShortcut": "Control plus scroll wheel",
|
||||
"wheelShortcutMac": "Command plus scroll wheel",
|
||||
"wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
|
||||
"wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
|
||||
"fitToWindow": "Fit to window",
|
||||
"fullScreen": "Full screen",
|
||||
"exitFullScreen": "Exit full screen",
|
||||
"currentZoomLevel": "Zoom {{level}} %",
|
||||
"panHint": "Zoom {{level}} %. Drag with mouse or use arrow keys to navigate.",
|
||||
"fullScreenEntered": "Full screen enabled",
|
||||
"fullScreenExited": "Full screen disabled"
|
||||
},
|
||||
"shortcutsPanel": {
|
||||
"title": "Keyboard shortcuts",
|
||||
"categories": {
|
||||
|
||||
@@ -667,24 +667,6 @@
|
||||
"muteParticipant": "Couper le micro de {{name}}",
|
||||
"fullScreen": "Plein écran"
|
||||
},
|
||||
"screenShareZoom": {
|
||||
"toolbarLabel": "Contrôles de zoom du partage d'écran",
|
||||
"zoomIn": "Zoomer",
|
||||
"zoomInWithShortcut": "Zoomer ({{shortcut}})",
|
||||
"zoomOut": "Dézoomer",
|
||||
"zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
|
||||
"wheelShortcut": "Contrôle plus molette",
|
||||
"wheelShortcutMac": "Commande plus molette",
|
||||
"wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
|
||||
"wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
|
||||
"fitToWindow": "Ajuster à la fenêtre",
|
||||
"fullScreen": "Plein écran",
|
||||
"exitFullScreen": "Quitter le plein écran",
|
||||
"currentZoomLevel": "Zoom {{level}} %",
|
||||
"panHint": "Zoom {{level}} %. Glissez avec la souris ou utilisez les touches fléchées pour naviguer.",
|
||||
"fullScreenEntered": "Plein écran activé",
|
||||
"fullScreenExited": "Plein écran désactivé"
|
||||
},
|
||||
"shortcutsPanel": {
|
||||
"title": "Raccourcis clavier",
|
||||
"categories": {
|
||||
|
||||
@@ -667,24 +667,6 @@
|
||||
"muteParticipant": "Demp {{name}}",
|
||||
"fullScreen": "Volledig scherm"
|
||||
},
|
||||
"screenShareZoom": {
|
||||
"toolbarLabel": "Zoombediening voor schermdeling",
|
||||
"zoomIn": "Inzoomen",
|
||||
"zoomInWithShortcut": "Inzoomen ({{shortcut}})",
|
||||
"zoomOut": "Uitzoomen",
|
||||
"zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
|
||||
"wheelShortcut": "Control plus scrollwiel",
|
||||
"wheelShortcutMac": "Command plus scrollwiel",
|
||||
"wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
|
||||
"wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
|
||||
"fitToWindow": "Aanpassen aan venster",
|
||||
"fullScreen": "Volledig scherm",
|
||||
"exitFullScreen": "Volledig scherm verlaten",
|
||||
"currentZoomLevel": "Zoom {{level}} %",
|
||||
"panHint": "Zoom {{level}} %. Sleep met de muis of gebruik de pijltjestoetsen om te navigeren.",
|
||||
"fullScreenEntered": "Volledig scherm ingeschakeld",
|
||||
"fullScreenExited": "Volledig scherm uitgeschakeld"
|
||||
},
|
||||
"shortcutsPanel": {
|
||||
"title": "Sneltoetsen",
|
||||
"categories": {
|
||||
|
||||
@@ -2,7 +2,6 @@ import { defineConfig, loadEnv } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
import svgr from 'vite-plugin-svgr'
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
@@ -12,32 +11,18 @@ export default defineConfig(({ mode }) => {
|
||||
react(),
|
||||
svgr({
|
||||
svgrOptions: {
|
||||
replaceAttrValues: {
|
||||
'#000': 'currentColor',
|
||||
'#000000': 'currentColor',
|
||||
'#1f1f1f': 'currentColor',
|
||||
},
|
||||
replaceAttrValues: { '#000': 'currentColor', '#000000': 'currentColor', '#1f1f1f': 'currentColor' },
|
||||
},
|
||||
}),
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
{
|
||||
src: 'node_modules/@mediapipe/tasks-vision/wasm/*',
|
||||
dest: 'assets/mediapipe/wasm',
|
||||
rename: { stripBase: 4 },
|
||||
},
|
||||
],
|
||||
env.VITE_ANALYZE === 'true' && visualizer({
|
||||
open: true,
|
||||
filename: 'rollup-plugin-visualizer/stats.html',
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
env.VITE_ANALYZE === 'true' &&
|
||||
visualizer({
|
||||
open: true,
|
||||
filename: 'rollup-plugin-visualizer/stats.html',
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
tsconfigPaths: true,
|
||||
tsconfigPaths: true
|
||||
},
|
||||
build: {
|
||||
sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
|
||||
|
||||
Reference in New Issue
Block a user