Skip to content

Commit 53eb7c5

Browse files
HugoGresseHugoGresse
committed
Merge branch 'main' of github.com:HugoGresse/OpenPlanner
2 parents 1a77cb5 + 78f1d45 commit 53eb7c5

3 files changed

Lines changed: 161 additions & 159 deletions

File tree

‎src/public/transcription/LiveTranscriptionView.tsx‎

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -46,60 +46,57 @@ export const LiveTranscriptionView = ({
4646
{status === 'connecting' && <Typography sx={{ color: 'white', p: 2 }}>Connecting to Gladia…</Typography>}
4747
{status === 'error' && <Typography sx={{ color: 'red', p: 2 }}>Error: {error}</Typography>}
4848

49-
{!settings.hideSettings && <TranscriptionSettingsPanel settings={settings} onChange={updateSettings} />}
50-
5149
<LiveCaptions lines={lines} partial={partial} settings={settings} />
5250

53-
{/* Single bottom bar: talk info + all controls. Wraps to multiple lines on narrow screens. */}
54-
<Box
55-
sx={{
56-
position: 'fixed',
57-
bottom: 0,
58-
left: 0,
59-
right: 0,
60-
zIndex: 999,
61-
display: 'flex',
62-
flexWrap: 'wrap',
63-
alignItems: 'center',
64-
gap: 1.5,
65-
px: 2,
66-
py: 1,
67-
bgcolor: 'rgba(0,0,0,0.82)',
68-
color: '#fff',
69-
borderTop: '1px solid rgba(255,255,255,0.12)',
70-
backdropFilter: 'blur(4px)',
71-
}}>
72-
<TalkInfo
73-
trackName={trackName}
74-
talkTitle={talkTitle}
75-
dateStart={dateStart}
76-
dateEnd={dateEnd}
77-
nextTalkTitle={nextTalkTitle}
78-
/>
51+
{/* Footer: settings strip (optional) stacked above the talk/control bar. */}
52+
<Box sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 999 }}>
53+
{!settings.hideSettings && <TranscriptionSettingsPanel settings={settings} onChange={updateSettings} />}
54+
55+
<Box
56+
sx={{
57+
display: 'flex',
58+
flexWrap: 'wrap',
59+
alignItems: 'center',
60+
gap: 1.5,
61+
px: 2,
62+
py: 1,
63+
bgcolor: 'rgba(0,0,0,0.82)',
64+
color: '#fff',
65+
borderTop: settings.hideSettings ? '1px solid rgba(255,255,255,0.12)' : 'none',
66+
backdropFilter: 'blur(4px)',
67+
}}>
68+
<TalkInfo
69+
trackName={trackName}
70+
talkTitle={talkTitle}
71+
dateStart={dateStart}
72+
dateEnd={dateEnd}
73+
nextTalkTitle={nextTalkTitle}
74+
/>
7975

80-
<Stack direction="row" spacing={1} sx={{ ml: 'auto', flexShrink: 0 }}>
81-
<Button variant="contained" size="small" onClick={onNext} disabled={!nextTalkTitle}>
82-
Next talk ▸
83-
</Button>
84-
<Button variant="outlined" size="small" color="inherit" onClick={onClear}>
85-
Clear
86-
</Button>
87-
<Button
88-
variant="contained"
89-
size="small"
90-
color="warning"
91-
onClick={() => setRestartNonce((n) => n + 1)}>
92-
Restart
93-
</Button>
94-
{settings.hideSettings && (
76+
<Stack direction="row" spacing={1} sx={{ ml: 'auto', flexShrink: 0 }}>
77+
<Button variant="contained" size="small" onClick={onNext} disabled={!nextTalkTitle}>
78+
Next talk ▸
79+
</Button>
80+
<Button variant="outlined" size="small" color="inherit" onClick={onClear}>
81+
Clear
82+
</Button>
9583
<Button
9684
variant="contained"
9785
size="small"
98-
onClick={() => updateSettings({ ...settings, hideSettings: false })}>
99-
Show settings
86+
color="warning"
87+
onClick={() => setRestartNonce((n) => n + 1)}>
88+
Restart
10089
</Button>
101-
)}
102-
</Stack>
90+
{settings.hideSettings && (
91+
<Button
92+
variant="contained"
93+
size="small"
94+
onClick={() => updateSettings({ ...settings, hideSettings: false })}>
95+
Show settings
96+
</Button>
97+
)}
98+
</Stack>
99+
</Box>
103100
</Box>
104101
</Box>
105102
)

‎src/public/transcription/TranscriptionSettingsPanel.tsx‎

Lines changed: 115 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, MenuItem, Stack, TextField } from '@mui/material'
1+
import { Box, Button, MenuItem, TextField } from '@mui/material'
22
import type { LiveV2TranscriptionLanguageCode } from '@gladiaio/sdk'
33
import { ColorPickerField } from './ColorPickerField'
44
import { FONT_OPTIONS, TranscriptionSettings } from './transcriptionSettings'
@@ -10,123 +10,128 @@ export type TranscriptionSettingsPanelProps = {
1010

1111
const ALIGNMENTS: TranscriptionSettings['alignment'][] = ['left', 'center', 'right']
1212

13-
// Floating settings panel (parity with the old gladia.html form). Changes apply live; session-shaping
14-
// fields (languages, vocabulary, endpointing) restart the Gladia session via the hook's deps.
13+
// Horizontal settings strip above the bottom control bar. Changes apply live; session-shaping fields
14+
// (languages, vocabulary, endpointing) restart the Gladia session via the hook's deps.
1515
export const TranscriptionSettingsPanel = ({ settings, onChange }: TranscriptionSettingsPanelProps) => {
1616
const set = <K extends keyof TranscriptionSettings>(key: K, value: TranscriptionSettings[K]) =>
1717
onChange({ ...settings, [key]: value })
1818

19+
const fieldSx = { width: { xs: 'calc(50% - 4px)', sm: 110 } }
20+
1921
return (
2022
<Box
2123
sx={{
22-
position: 'fixed',
23-
top: 10,
24-
right: 10,
25-
zIndex: 1000,
26-
width: 280,
27-
p: 2,
28-
borderRadius: 1,
29-
background: 'rgba(0,0,0,0.75)',
30-
color: 'white',
24+
display: 'flex',
25+
flexWrap: 'wrap',
26+
alignItems: 'center',
27+
gap: 1,
28+
px: 2,
29+
py: 1,
30+
bgcolor: 'rgba(0,0,0,0.82)',
31+
color: '#fff',
32+
borderTop: '1px solid rgba(255,255,255,0.12)',
33+
backdropFilter: 'blur(4px)',
3134
}}>
32-
<Stack spacing={1.5}>
33-
<TextField
34-
size="small"
35-
type="number"
36-
label="Font size"
37-
value={settings.fontSize}
38-
onChange={(e) => set('fontSize', Number(e.target.value) || settings.fontSize)}
39-
/>
40-
<TextField
41-
size="small"
42-
type="number"
43-
label="Line height"
44-
inputProps={{ step: 0.1, min: 0.5, max: 3 }}
45-
value={settings.lineHeight}
46-
onChange={(e) => set('lineHeight', Number(e.target.value) || settings.lineHeight)}
47-
/>
48-
<TextField
49-
size="small"
50-
select
51-
label="Font"
52-
value={settings.fontName}
53-
onChange={(e) => set('fontName', e.target.value)}>
54-
{FONT_OPTIONS.map((font) => (
55-
<MenuItem key={font} value={font}>
56-
{font}
57-
</MenuItem>
58-
))}
59-
</TextField>
60-
<TextField
61-
size="small"
62-
type="number"
63-
label="Max lines"
64-
inputProps={{ min: 1, max: 10 }}
65-
value={settings.maxLines}
66-
onChange={(e) => set('maxLines', Number(e.target.value) || settings.maxLines)}
67-
/>
68-
<TextField
69-
size="small"
70-
select
71-
label="Alignment"
72-
value={settings.alignment}
73-
onChange={(e) => set('alignment', e.target.value as TranscriptionSettings['alignment'])}>
74-
{ALIGNMENTS.map((value) => (
75-
<MenuItem key={value} value={value}>
76-
{value}
77-
</MenuItem>
78-
))}
79-
</TextField>
80-
<ColorPickerField
81-
label="Background color"
82-
value={settings.backgroundColor}
83-
onChange={(hex) => set('backgroundColor', hex)}
84-
/>
85-
<ColorPickerField
86-
label="Text color"
87-
value={settings.textColor}
88-
onChange={(hex) => set('textColor', hex)}
89-
/>
90-
<TextField
91-
size="small"
92-
label="Languages (comma)"
93-
value={settings.languages.join(',')}
94-
onChange={(e) =>
95-
set(
96-
'languages',
97-
e.target.value
98-
.split(',')
99-
.map((s) => s.trim())
100-
.filter(Boolean) as LiveV2TranscriptionLanguageCode[]
101-
)
102-
}
103-
/>
104-
<TextField
105-
size="small"
106-
label="Custom vocabulary (comma)"
107-
value={settings.customVocabulary.join(',')}
108-
onChange={(e) =>
109-
set(
110-
'customVocabulary',
111-
e.target.value
112-
.split(',')
113-
.map((s) => s.trim())
114-
.filter(Boolean)
115-
)
116-
}
117-
/>
118-
<TextField
119-
size="small"
120-
type="number"
121-
label="Endpointing (s)"
122-
inputProps={{ step: 0.05, min: 0 }}
123-
value={settings.endpointing}
124-
onChange={(e) => set('endpointing', Number(e.target.value) || settings.endpointing)}
125-
/>
126-
<Button variant="contained" size="small" onClick={() => set('hideSettings', true)}>
127-
Hide settings
128-
</Button>
129-
</Stack>
35+
<TextField
36+
size="small"
37+
type="number"
38+
label="Font size"
39+
value={settings.fontSize}
40+
onChange={(e) => set('fontSize', Number(e.target.value) || settings.fontSize)}
41+
sx={fieldSx}
42+
/>
43+
<TextField
44+
size="small"
45+
type="number"
46+
label="Line height"
47+
inputProps={{ step: 0.1, min: 0.5, max: 3 }}
48+
value={settings.lineHeight}
49+
onChange={(e) => set('lineHeight', Number(e.target.value) || settings.lineHeight)}
50+
sx={fieldSx}
51+
/>
52+
<TextField
53+
size="small"
54+
select
55+
label="Font"
56+
value={settings.fontName}
57+
onChange={(e) => set('fontName', e.target.value)}
58+
sx={{ width: { xs: '100%', sm: 150 } }}>
59+
{FONT_OPTIONS.map((font) => (
60+
<MenuItem key={font} value={font}>
61+
{font}
62+
</MenuItem>
63+
))}
64+
</TextField>
65+
<TextField
66+
size="small"
67+
type="number"
68+
label="Max lines"
69+
inputProps={{ min: 1, max: 10 }}
70+
value={settings.maxLines}
71+
onChange={(e) => set('maxLines', Number(e.target.value) || settings.maxLines)}
72+
sx={fieldSx}
73+
/>
74+
<TextField
75+
size="small"
76+
select
77+
label="Alignment"
78+
value={settings.alignment}
79+
onChange={(e) => set('alignment', e.target.value as TranscriptionSettings['alignment'])}
80+
sx={fieldSx}>
81+
{ALIGNMENTS.map((value) => (
82+
<MenuItem key={value} value={value}>
83+
{value}
84+
</MenuItem>
85+
))}
86+
</TextField>
87+
<ColorPickerField
88+
label="Background"
89+
value={settings.backgroundColor}
90+
onChange={(hex) => set('backgroundColor', hex)}
91+
/>
92+
<ColorPickerField label="Text" value={settings.textColor} onChange={(hex) => set('textColor', hex)} />
93+
<TextField
94+
size="small"
95+
label="Languages"
96+
value={settings.languages.join(',')}
97+
onChange={(e) =>
98+
set(
99+
'languages',
100+
e.target.value
101+
.split(',')
102+
.map((s) => s.trim())
103+
.filter(Boolean) as LiveV2TranscriptionLanguageCode[]
104+
)
105+
}
106+
sx={{ flex: 1, minWidth: { xs: '100%', sm: 140 } }}
107+
/>
108+
<TextField
109+
size="small"
110+
label="Vocabulary"
111+
value={settings.customVocabulary.join(',')}
112+
onChange={(e) =>
113+
set(
114+
'customVocabulary',
115+
e.target.value
116+
.split(',')
117+
.map((s) => s.trim())
118+
.filter(Boolean)
119+
)
120+
}
121+
sx={{ flex: 1, minWidth: { xs: '100%', sm: 140 } }}
122+
/>
123+
<TextField
124+
size="small"
125+
type="number"
126+
label="Endpointing (s)"
127+
inputProps={{ step: 0.05, min: 0 }}
128+
value={settings.endpointing}
129+
onChange={(e) => set('endpointing', Number(e.target.value) || settings.endpointing)}
130+
sx={fieldSx}
131+
/>
132+
<Button variant="contained" size="small" onClick={() => set('hideSettings', true)} sx={{ ml: 'auto' }}>
133+
Hide settings
134+
</Button>
130135
</Box>
131136
)
132137
}

‎src/public/transcription/transcriptionSettings.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const DEFAULT_SETTINGS: TranscriptionSettings = {
3232
languages: ['fr', 'en'],
3333
customVocabulary: DEFAULT_VOCABULARY,
3434
endpointing: 0.2,
35-
hideSettings: false,
35+
hideSettings: true,
3636
}
3737

3838
// A bare "#rrggbb" or "rrggbb" both work; normalise to a CSS-usable "#rrggbb".
@@ -70,6 +70,6 @@ export const settingsFromQuery = (search: string): TranscriptionSettings => {
7070
languages: languages?.length ? languages : DEFAULT_SETTINGS.languages,
7171
customVocabulary: csv(q.get('custom_vocabulary')) ?? DEFAULT_SETTINGS.customVocabulary,
7272
endpointing: num('endpointing', DEFAULT_SETTINGS.endpointing),
73-
hideSettings: q.get('hide_settings') === 'true',
73+
hideSettings: q.has('hide_settings') ? q.get('hide_settings') === 'true' : DEFAULT_SETTINGS.hideSettings,
7474
}
7575
}

0 commit comments

Comments
 (0)