🚸(frontend) add permissions dialog to guide users through setup
Introduce guided permissions dialog to help users understand and resolve camera/microphone access issues step-by-step. Addresses common user support requests where users cannot enable their hardware and don't understand the permission requirements. Provides clear instructions to reduce confusion and support burden. Image was quickly prototyped. It will be updated later on.
This commit is contained in:
lebaudantoine
committed by
aleb_the_flash
aleb_the_flash
parent
f1b20d7981
commit
120bcdc720
10
src/frontend/package-lock.json
generated
10
src/frontend/package-lock.json
generated
@@ -17,6 +17,7 @@
|
||||
"@tanstack/react-query": "5.81.5",
|
||||
"@timephy/rnnoise-wasm": "1.0.0",
|
||||
"crisp-sdk-web": "1.0.25",
|
||||
"derive-valtio": "0.2.0",
|
||||
"hoofd": "1.7.3",
|
||||
"humanize-duration": "3.33.0",
|
||||
"i18next": "25.3.1",
|
||||
@@ -5294,6 +5295,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/derive-valtio": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.2.0.tgz",
|
||||
"integrity": "sha512-6slhaFHtfaL3t5dLYaQt6s4G2xZymhu0Ktdl7OMeVk8+46RgR8ft6FL0Tr4F31W+yPH03nJe1SSP4JFy2hSMRA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"valtio": ">=2.0.0-rc.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"@tanstack/react-query": "5.81.5",
|
||||
"@timephy/rnnoise-wasm": "1.0.0",
|
||||
"crisp-sdk-web": "1.0.25",
|
||||
"derive-valtio": "0.2.0",
|
||||
"hoofd": "1.7.3",
|
||||
"humanize-duration": "3.33.0",
|
||||
"i18next": "25.3.1",
|
||||
|
||||
109
src/frontend/public/assets/camera_mic_permission.svg
Normal file
109
src/frontend/public/assets/camera_mic_permission.svg
Normal file
@@ -0,0 +1,109 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
|
||||
<defs>
|
||||
<style>
|
||||
.st0, .st1, .st2, .st3, .st4, .st5 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.st6 {
|
||||
fill: #6dd58c;
|
||||
}
|
||||
|
||||
.st6, .st1, .st2, .st7, .st8, .st9, .st10 {
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.st6, .st1, .st2, .st7, .st8, .st10 {
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.st6, .st1, .st7, .st8, .st4, .st5, .st10 {
|
||||
stroke: #191c1e;
|
||||
}
|
||||
|
||||
.st11, .st7, .st12, .st9 {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.st11, .st3 {
|
||||
stroke: #000;
|
||||
stroke-miterlimit: 10;
|
||||
}
|
||||
|
||||
.st11, .st3, .st9 {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.st2, .st9 {
|
||||
stroke: #898989;
|
||||
}
|
||||
|
||||
.st8 {
|
||||
fill: #ff8669;
|
||||
}
|
||||
|
||||
.st13 {
|
||||
fill: #e3e3fb;
|
||||
}
|
||||
|
||||
.st14 {
|
||||
fill: #f7f7f7;
|
||||
}
|
||||
|
||||
.st4, .st5 {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.st5 {
|
||||
stroke-linecap: square;
|
||||
}
|
||||
|
||||
.st15 {
|
||||
fill: #ca3632;
|
||||
}
|
||||
|
||||
.st10 {
|
||||
fill: #ffb929;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
|
||||
<path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
|
||||
<path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
|
||||
<path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
|
||||
<path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
|
||||
<path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
|
||||
<path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
|
||||
<path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
|
||||
<g>
|
||||
<ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
|
||||
<path class="st5" d="M624,299h63"/>
|
||||
<circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
|
||||
<path class="st5" d="M728,339h-63"/>
|
||||
</g>
|
||||
<path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
|
||||
<path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
|
||||
<path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
|
||||
<path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
|
||||
<path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
|
||||
<path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
|
||||
<path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
|
||||
<path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
|
||||
<line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
|
||||
<path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
|
||||
<path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
|
||||
<g>
|
||||
<path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
|
||||
<path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
|
||||
</g>
|
||||
<line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
|
||||
<path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
|
||||
<polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
@@ -1,4 +1,12 @@
|
||||
import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
|
||||
import { css } from '@/styled-system/css'
|
||||
import { Dialog, H } from '@/primitives'
|
||||
import { RiEqualizer2Line } from '@remixicon/react'
|
||||
import { useEffect, useMemo } from 'react'
|
||||
import { useSnapshot } from 'valtio'
|
||||
import { permissionsStore } from '@/stores/permissions'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { injectIconIntoTranslation } from '@/utils/translation'
|
||||
|
||||
/**
|
||||
* Singleton component - ensures permissions sync runs only once across the app.
|
||||
@@ -6,6 +14,90 @@ import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
|
||||
* Multiple instances may cause unexpected behavior or performance issues.
|
||||
*/
|
||||
export const Permissions = () => {
|
||||
const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
|
||||
|
||||
useWatchPermissions()
|
||||
return null
|
||||
|
||||
const permissions = useSnapshot(permissionsStore)
|
||||
|
||||
const permissionLabel = useMemo(() => {
|
||||
if (permissions.isMicrophoneDenied && permissions.isCameraDenied) {
|
||||
return 'cameraAndMicrophone'
|
||||
} else if (permissions.isCameraDenied) {
|
||||
return 'camera'
|
||||
} else if (permissions.isMicrophoneDenied) {
|
||||
return 'microphone'
|
||||
} else {
|
||||
return 'default'
|
||||
}
|
||||
}, [permissions])
|
||||
|
||||
const [descriptionBeforeIcon, descriptionAfterIcon] =
|
||||
injectIconIntoTranslation(t('body.openMenu'))
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
permissions.isPermissionDialogOpen &&
|
||||
permissions.isCameraGranted &&
|
||||
permissions.isMicrophoneGranted
|
||||
) {
|
||||
permissionsStore.isPermissionDialogOpen = false
|
||||
}
|
||||
}, [permissions])
|
||||
|
||||
const appTitle = `${import.meta.env.VITE_APP_TITLE}`
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={permissions.isPermissionDialogOpen}
|
||||
role="dialog"
|
||||
type="flex"
|
||||
title=""
|
||||
aria-label={t(`heading.${permissionLabel}`, {
|
||||
appTitle,
|
||||
})}
|
||||
onClose={() => (permissionsStore.isPermissionDialogOpen = false)}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
})}
|
||||
>
|
||||
<img
|
||||
src="/assets/camera_mic_permission.svg"
|
||||
alt=""
|
||||
className={css({
|
||||
minWidth: '290px',
|
||||
minHeight: '290px',
|
||||
maxWidth: '290px',
|
||||
})}
|
||||
/>
|
||||
<div
|
||||
className={css({
|
||||
maxWidth: '400px',
|
||||
})}
|
||||
>
|
||||
<H lvl={2}>
|
||||
{t(`heading.${permissionLabel}`, {
|
||||
appTitle,
|
||||
})}
|
||||
</H>
|
||||
<ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
|
||||
<li>
|
||||
{descriptionBeforeIcon}
|
||||
<span
|
||||
style={{ display: 'inline-block', verticalAlign: 'middle' }}
|
||||
>
|
||||
<RiEqualizer2Line />
|
||||
</span>
|
||||
{descriptionAfterIcon}
|
||||
</li>
|
||||
<li>{t(`body.details.${permissionLabel}`)}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -77,6 +77,23 @@
|
||||
},
|
||||
"close": "OK"
|
||||
},
|
||||
"permissionErrorDialog": {
|
||||
"heading": {
|
||||
"camera": "{{appTitle}} darf Ihre Kamera nicht verwenden",
|
||||
"microphone": "{{appTitle}} darf Ihr Mikrofon nicht verwenden",
|
||||
"cameraAndMicrophone": "{{appTitle}} darf weder Ihr Mikrofon noch Ihre Kamera verwenden",
|
||||
"default": "{{appTitle}} hat keine Berechtigung für bestimmte Zugriffe"
|
||||
},
|
||||
"body": {
|
||||
"openMenu": "Klicken Sie auf das Einstellungen-Symbol ICON_PLACEHOLDER in der Adressleiste Ihres Browsers",
|
||||
"details": {
|
||||
"camera": "Zugriff auf die Kamera erlauben",
|
||||
"microphone": "Zugriff auf das Mikrofon erlauben",
|
||||
"cameraAndMicrophone": "Zugriff auf Kamera und Mikrofon erlauben",
|
||||
"default": "Aktivieren Sie die erforderlichen Berechtigungen."
|
||||
}
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"createRoom": {
|
||||
"heading": "Authentifizierung erforderlich",
|
||||
|
||||
@@ -77,6 +77,23 @@
|
||||
},
|
||||
"close": "OK"
|
||||
},
|
||||
"permissionErrorDialog": {
|
||||
"heading": {
|
||||
"camera": "{{appTitle}} is not allowed to use your camera",
|
||||
"microphone": "{{appTitle}} is not allowed to use your microphone",
|
||||
"cameraAndMicrophone": "{{appTitle}} is not allowed to use your microphone or camera",
|
||||
"default": "{{appTitle}} is not allowed to use certain permissions"
|
||||
},
|
||||
"body": {
|
||||
"openMenu": "Click on the settings icon ICON_PLACEHOLDER in your browser’s address bar",
|
||||
"details": {
|
||||
"camera": "Allow access to the camera",
|
||||
"microphone": "Allow access to the microphone",
|
||||
"cameraAndMicrophone": "Allow access to the camera and microphone",
|
||||
"default": "Enable the necessary permissions."
|
||||
}
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"createRoom": {
|
||||
"heading": "Authentication Required",
|
||||
|
||||
@@ -77,6 +77,23 @@
|
||||
},
|
||||
"close": "OK"
|
||||
},
|
||||
"permissionErrorDialog": {
|
||||
"heading": {
|
||||
"camera": "{{appTitle}} n'est pas autorisé à utiliser votre caméra",
|
||||
"microphone": "{{appTitle}} n'est pas autorisé à utiliser votre micro",
|
||||
"cameraAndMicrophone": "{{appTitle}} n'est pas autorisé à utiliser votre micro ni votre caméra",
|
||||
"default": "{{appTitle}} n'est pas autorisé à utiliser certaines fonctionnalités nécessaires."
|
||||
},
|
||||
"body": {
|
||||
"openMenu": "Cliquez sur l'icône des paramètres ICON_PLACEHOLDER dans la barre d'adresse de votre navigateur",
|
||||
"details": {
|
||||
"camera": "Autorisez l'accès à la caméra",
|
||||
"microphone": "Autorisez l'accès au microphone",
|
||||
"cameraAndMicrophone": "Autorisez l'accès à la caméra et au microphone",
|
||||
"default": "Activez les autorisations nécessaires."
|
||||
}
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"createRoom": {
|
||||
"heading": "Authentification requise",
|
||||
|
||||
@@ -77,6 +77,23 @@
|
||||
},
|
||||
"close": "OK"
|
||||
},
|
||||
"permissionErrorDialog": {
|
||||
"heading": {
|
||||
"camera": "{{appTitle}} mag uw camera niet gebruiken",
|
||||
"microphone": "{{appTitle}} mag uw microfoon niet gebruiken",
|
||||
"cameraAndMicrophone": "{{appTitle}} mag uw microfoon en camera niet gebruiken",
|
||||
"default": "{{appTitle}} heeft geen toestemming voor bepaalde rechten"
|
||||
},
|
||||
"body": {
|
||||
"openMenu": "Klik op het instellingenpictogram ICON_PLACEHOLDER in de adresbalk van uw browser",
|
||||
"details": {
|
||||
"camera": "Toegang tot de camera toestaan",
|
||||
"microphone": "Toegang tot de microfoon toestaan",
|
||||
"cameraAndMicrophone": "Toegang tot camera en microfoon toestaan",
|
||||
"default": "Schakel de vereiste machtigingen in."
|
||||
}
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"createRoom": {
|
||||
"heading": "Verificatie vereist",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { proxy } from 'valtio'
|
||||
import { derive } from 'derive-valtio'
|
||||
|
||||
type PermissionState =
|
||||
| undefined
|
||||
@@ -11,10 +12,27 @@ type State = {
|
||||
cameraPermission: PermissionState
|
||||
microphonePermission: PermissionState
|
||||
isLoading: boolean
|
||||
isPermissionDialogOpen: boolean
|
||||
}
|
||||
|
||||
export const permissionsStore = proxy<State>({
|
||||
cameraPermission: undefined,
|
||||
microphonePermission: undefined,
|
||||
isLoading: true,
|
||||
isPermissionDialogOpen: false,
|
||||
})
|
||||
|
||||
derive(
|
||||
{
|
||||
isCameraGranted: (get) =>
|
||||
get(permissionsStore).cameraPermission == 'granted',
|
||||
isMicrophoneGranted: (get) =>
|
||||
get(permissionsStore).microphonePermission == 'granted',
|
||||
isCameraDenied: (get) => get(permissionsStore).cameraPermission == 'denied',
|
||||
isMicrophoneDenied: (get) =>
|
||||
get(permissionsStore).microphonePermission == 'denied',
|
||||
},
|
||||
{
|
||||
proxy: permissionsStore,
|
||||
}
|
||||
)
|
||||
|
||||
14
src/frontend/src/utils/translation.ts
Normal file
14
src/frontend/src/utils/translation.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* FRAGILE: Splits translated text on placeholder to inject icons inline.
|
||||
*
|
||||
* Fragile because:
|
||||
* - Relies on exact string matching - typos break it silently
|
||||
* - Translators may accidentally modify/remove placeholders
|
||||
* - No validation or error handling
|
||||
*/
|
||||
export const injectIconIntoTranslation = (
|
||||
translation: string,
|
||||
placeholder: string = 'ICON_PLACEHOLDER'
|
||||
) => {
|
||||
return translation.split(placeholder)
|
||||
}
|
||||
Reference in New Issue
Block a user