🔧(env) add a way to load a custom css file to ease up UI customization

This is the first step in removing DINUM-related styling of the default
meet install
This commit is contained in:
Emmanuel Pelletier
2025-06-02 16:45:39 +02:00
committed by aleb_the_flash
parent d1bb414cb4
commit 3088299c0b
4 changed files with 19 additions and 0 deletions

View File

@@ -275,6 +275,7 @@ These are the environmental options available on meet backend.
| CREATION_CALLBACK_THROTTLE_RATES | Creation callback throttle rates | 600/minute |
| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check | false |
| CSRF_TRUSTED_ORIGINS | CSRF trusted origins list | [] |
| FRONTEND_CUSTOM_CSS_URL | URL of an additional CSS file to load in the frontend app. If set, a `<link>` tag with this URL as href is added to the `<head>` of the frontend app | |
| FRONTEND_ANALYTICS | Analytics information | {} |
| FRONTEND_SUPPORT | Crisp frontend support configuration | {} |
| FRONTEND_SILENCE_LIVEKIT_DEBUG | Silence LiveKit debug logs | false |

View File

@@ -304,6 +304,11 @@ class Base(Configuration):
# Frontend
FRONTEND_CONFIGURATION = {
# If set, a <link> tag with this URL as href is added to the <head> of the frontend app.
# This is useful if you want to change CSS variables to customize the look of the app.
"custom_css_url": values.Value(
None, environ_name="FRONTEND_CUSTOM_CSS_URL", environ_prefix=None
),
"analytics": values.DictValue(
{}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
),

View File

@@ -16,6 +16,7 @@ export interface ApiConfig {
}
silence_livekit_debug_logs?: boolean
is_silent_login_enabled?: boolean
custom_css_url?: string
recording?: {
is_enabled?: boolean
available_modes?: RecordingMode[]

View File

@@ -3,6 +3,7 @@ import { useConfig } from '@/api/useConfig'
import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
import { useSupport } from '@/features/support/hooks/useSupport'
import { useSyncUserPreferencesWithBackend } from '@/features/auth'
import { useEffect } from 'react'
export const AppInitialization = () => {
const { data } = useConfig()
@@ -12,11 +13,22 @@ export const AppInitialization = () => {
analytics = {},
support = {},
silence_livekit_debug_logs = false,
custom_css_url = '',
} = data || {}
useAnalytics(analytics)
useSupport(support)
useEffect(() => {
if (custom_css_url) {
const link = document.createElement('link')
link.href = custom_css_url
link.id = 'meet-custom-css'
link.rel = 'stylesheet'
document.head.appendChild(link)
}
}, [custom_css_url])
silenceLiveKitLogs(silence_livekit_debug_logs)
return null