studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/installation.md
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 | | CREATION_CALLBACK_THROTTLE_RATES | Creation callback throttle rates | 600/minute |
| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check | false | | SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check | false |
| CSRF_TRUSTED_ORIGINS | CSRF trusted origins list | [] | | 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_ANALYTICS | Analytics information | {} |
| FRONTEND_SUPPORT | Crisp frontend support configuration | {} | | FRONTEND_SUPPORT | Crisp frontend support configuration | {} |
| FRONTEND_SILENCE_LIVEKIT_DEBUG | Silence LiveKit debug logs | false | | FRONTEND_SILENCE_LIVEKIT_DEBUG | Silence LiveKit debug logs | false |

5
src/backend/meet/settings.py
View File

@@ -304,6 +304,11 @@ class Base(Configuration):
# Frontend # Frontend
FRONTEND_CONFIGURATION = { 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( "analytics": values.DictValue(
{}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None {}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
), ),

1
src/frontend/src/api/useConfig.ts
View File

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

12
src/frontend/src/components/AppInitialization.tsx
View File

@@ -3,6 +3,7 @@ import { useConfig } from '@/api/useConfig'
import { useAnalytics } from '@/features/analytics/hooks/useAnalytics' import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
import { useSupport } from '@/features/support/hooks/useSupport' import { useSupport } from '@/features/support/hooks/useSupport'
import { useSyncUserPreferencesWithBackend } from '@/features/auth' import { useSyncUserPreferencesWithBackend } from '@/features/auth'
import { useEffect } from 'react'
export const AppInitialization = () => { export const AppInitialization = () => {
const { data } = useConfig() const { data } = useConfig()
@@ -12,11 +13,22 @@ export const AppInitialization = () => {
analytics = {}, analytics = {},
support = {}, support = {},
silence_livekit_debug_logs = false, silence_livekit_debug_logs = false,
custom_css_url = '',
} = data || {} } = data || {}
useAnalytics(analytics) useAnalytics(analytics)
useSupport(support) 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) silenceLiveKitLogs(silence_livekit_debug_logs)
return null return null