Skip to content

Commit d18e455

Browse files
gettinToastygettinToasty
authored
Fix HighlightGenerator form translations (#5309)
* Fix HighlightGenerator form translations * Fix inputs not displaying
1 parent 40963f8 commit d18e455

File tree

2 files changed

+87
-64
lines changed

2 files changed

+87
-64
lines changed

‎app/components-react/highlighter/HighlightGenerator.tsx

+84-61
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import styles from './HighlightGenerator.m.less';
77
import { formatSecondsToHMS } from './ClipPreview';
88
import { $t } from 'services/i18n';
99
import { EHighlighterInputTypes, IInput } from 'services/highlighter/models/ai-highlighter.models';
10+
import Translate from 'components-react/shared/Translate';
1011
const { Option } = Select;
1112

1213
const selectStyles = {
@@ -107,68 +108,90 @@ export default function HighlightGenerator({
107108
}
108109

109110
return (
110-
<div className={styles.wrapper}>
111-
<h3 style={{ color: '#FFFFFF', margin: 0, fontWeight: 400 }}>
112-
🤖 {$t('Create highlight video of')}
113-
</h3>
114-
<Select
115-
style={selectStyles}
116-
mode="multiple"
117-
value={selectedRounds}
118-
maxTagCount={2}
119-
suffixIcon={<DownOutlined style={{ color: '#FFFFFF', fontSize: '12px' }} />}
120-
tagRender={({ value }) => (
121-
<span className={styles.tag}>{value === 0 ? 'All Rounds' : `Round ${value}`}</span>
111+
<h3
112+
className={styles.wrapper}
113+
style={{
114+
color: '#FFFFFF',
115+
margin: 0,
116+
fontWeight: 400,
117+
}}
118+
>
119+
🤖{' '}
120+
<Translate
121+
message={$t(
122+
'Create highlight video of <roundSelect></roundSelect> with a duration of <minutesSelect></minutesSelect>',
122123
)}
123-
dropdownStyle={dropdownStyles}
124-
>
125-
<div key="all-rounds" className={styles.option}>
126-
<Checkbox
127-
style={checkboxStyles}
128-
checked={selectedRounds.includes(0)}
129-
onChange={e => {
130-
setSelectedRounds(e.target.checked ? [0] : []);
131-
}}
132-
>
133-
{$t('All rounds')}
134-
</Checkbox>
135-
</div>
136-
{roundDetails.map(roundDetails => (
137-
<div key={'in-wrapper-round' + roundDetails.round} className={styles.option}>
138-
<Checkbox
139-
style={checkboxStyles}
140-
checked={selectedRounds.includes(roundDetails.round)}
141-
onChange={e => {
142-
if (e.target.checked) {
143-
const newSelection = [...selectedRounds.filter(r => r !== 0), roundDetails.round];
144-
setSelectedRounds(newSelection);
145-
} else {
146-
const newSelection = selectedRounds.filter(r => r !== roundDetails.round);
147-
setSelectedRounds(newSelection.length === 0 ? [0] : newSelection);
148-
}
149-
}}
124+
renderSlots={{
125+
roundSelect: () => (
126+
<Select
127+
style={selectStyles}
128+
mode="multiple"
129+
value={selectedRounds}
130+
maxTagCount={2}
131+
suffixIcon={<DownOutlined style={{ color: '#FFFFFF', fontSize: '12px' }} />}
132+
tagRender={({ value }) => (
133+
<span className={styles.tag}>
134+
{value === 0
135+
? $t('All Rounds')
136+
: $t('Round %{roundNumber}', { roundNumber: value })}
137+
</span>
138+
)}
139+
dropdownStyle={dropdownStyles}
140+
>
141+
<div key="all-rounds" className={styles.option}>
142+
<Checkbox
143+
style={checkboxStyles}
144+
checked={selectedRounds.includes(0)}
145+
onChange={e => {
146+
setSelectedRounds(e.target.checked ? [0] : []);
147+
}}
148+
>
149+
{$t('All Rounds')}
150+
</Checkbox>
151+
</div>
152+
{roundDetails.map(roundDetails => (
153+
<div key={'in-wrapper-round' + roundDetails.round} className={styles.option}>
154+
<Checkbox
155+
style={checkboxStyles}
156+
checked={selectedRounds.includes(roundDetails.round)}
157+
onChange={e => {
158+
if (e.target.checked) {
159+
const newSelection = [
160+
...selectedRounds.filter(r => r !== 0),
161+
roundDetails.round,
162+
];
163+
setSelectedRounds(newSelection);
164+
} else {
165+
const newSelection = selectedRounds.filter(r => r !== roundDetails.round);
166+
setSelectedRounds(newSelection.length === 0 ? [0] : newSelection);
167+
}
168+
}}
169+
>
170+
{roundDropdownDetails(roundDetails)}
171+
</Checkbox>
172+
</div>
173+
))}
174+
</Select>
175+
),
176+
minutesSelect: () => (
177+
<Select
178+
style={{ width: '116px' }}
179+
value={targetDuration}
180+
onChange={value => setTargetDuration(value)}
181+
dropdownStyle={dropdownStyles}
150182
>
151-
{roundDropdownDetails(roundDetails)}
152-
</Checkbox>
153-
</div>
154-
))}
155-
</Select>
156-
<h3 style={{ color: '#FFFFFF', margin: 0, fontWeight: 400 }}> {$t('with a duration of')}</h3>
157-
<Select
158-
style={{ width: '116px' }}
159-
value={targetDuration}
160-
onChange={value => setTargetDuration(value)}
161-
dropdownStyle={dropdownStyles}
162-
>
163-
{filteredOptions.map(option => (
164-
<Option key={option.value} value={option.value} className={styles.option}>
165-
{option.label}
166-
</Option>
167-
))}
168-
<Option value={combinedClipsDuration + 100} className={styles.option}>
169-
{$t('unlimited')}
170-
</Option>
171-
</Select>
183+
{filteredOptions.map(option => (
184+
<Option key={option.value} value={option.value} className={styles.option}>
185+
{option.label}
186+
</Option>
187+
))}
188+
<Option value={combinedClipsDuration + 100} className={styles.option}>
189+
{$t('unlimited')}
190+
</Option>
191+
</Select>
192+
),
193+
}}
194+
></Translate>
172195
<Button
173196
type="text"
174197
onClick={() => {
@@ -179,6 +202,6 @@ export default function HighlightGenerator({
179202
icon={<span style={{ color: '#666666', fontSize: '20px' }}>&times;</span>}
180203
className={styles.resetButton}
181204
/>
182-
</div>
205+
</h3>
183206
);
184207
}

‎app/i18n/en-US/highlighter.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -131,12 +131,12 @@
131131
"Delete highlighted stream?": "Delete highlighted stream?",
132132
"Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.": "Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.",
133133
"Set a title for your stream": "Set a title for your stream",
134-
"Create highlight video of": "Create highlight video of",
135-
"All rounds": "All rounds",
134+
"Create highlight video of <roundSelect></roundSelect> with a duration of <minutesSelect></minutesSelect>": "Create highlight video of <roundSelect></roundSelect> with a duration of <minutesSelect></minutesSelect>",
135+
"All Rounds": "All Rounds",
136+
"Round %{roundNumber}": "Round %{roundNumber}",
136137
"unlimited": "unlimited",
137138
"%{duration} minutes": "%{duration} minutes",
138139
"%{duration} minute": "%{duration} minute",
139-
"with a duration of": "with a duration of",
140140
"AI Highlighter": "AI Highlighter",
141141
"For Fortnite streams (Beta)": "For Fortnite streams (Beta)",
142142
"Automatically capture the best moments from your livestream and turn them into a highlight video.": "Automatically capture the best moments from your livestream and turn them into a highlight video.",

0 commit comments

Comments
 (0)