Skip to content

Commit 0ac5bb6

Browse files
RadicalMuffinManRadicalMuffinMan
committed
localized user facing strings
1 parent f13c6af commit 0ac5bb6

18 files changed

Lines changed: 181 additions & 176 deletions

File tree

‎packages/app/src/App/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1206,9 +1206,9 @@ const AppContent = (props) => {
12061206
<DebugOverlay />
12071207
{connectionState !== 'connected' && isAuthenticated && (
12081208
<div className={css.connectionBanner}>
1209-
<span>{connectionState === 'reconnecting' ? 'Reconnecting to server...' : 'Lost connection to server'}</span>
1209+
<span>{connectionState === 'reconnecting' ? $L('Reconnecting to server...') : $L('Lost connection to server')}</span>
12101210
{connectionState === 'disconnected' && (
1211-
<button className={css.retryButton} onClick={handleRetryConnection}>Retry</button>
1211+
<button className={css.retryButton} onClick={handleRetryConnection}>{$L('Retry')}</button>
12121212
)}
12131213
</div>
12141214
)}

‎packages/app/src/components/ClearDataDialog/ClearDataDialog.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {memo, useEffect} from 'react';
2+
import $L from '@enact/i18n/$L';
23
import Spottable from '@enact/spotlight/Spottable';
34
import Spotlight from '@enact/spotlight';
45
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
@@ -56,24 +57,24 @@ const ClearDataDialog = ({open, onCancel, onConfirm}) => {
5657
return (
5758
<div className={css.overlay}>
5859
<DialogContainer className={css.dialog} spotlightId="cleardata-dialog">
59-
<h2 className={css.title}>Clear All Data?</h2>
60+
<h2 className={css.title}>{$L('Clear All Data?')}</h2>
6061
<p className={css.message}>
61-
This will remove all settings, saved servers, and login sessions. You will need to set up the app again.
62+
{$L('This will remove all settings, saved servers, and login sessions. You will need to set up the app again.')}
6263
</p>
6364
<div className={css.buttons}>
6465
<SpottableButton
6566
className={css.btn}
6667
onClick={onCancel}
6768
spotlightId="cleardata-cancel-btn"
6869
>
69-
Cancel
70+
{$L('Cancel')}
7071
</SpottableButton>
7172
<SpottableButton
7273
className={`${css.btn} ${css.confirmBtn} spottable-default`}
7374
onClick={onConfirm}
7475
spotlightId="cleardata-confirm-btn"
7576
>
76-
Clear All Data
77+
{$L('Clear All Data')}
7778
</SpottableButton>
7879
</div>
7980
</DialogContainer>

‎packages/app/src/components/NavBar/NavBar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ const NavBar = ({
324324
spotlightId="navbar-syncplay"
325325
>
326326
<SyncPlayIcon className={css.navIcon} style={navIconStyle(7)} />
327-
<span className={css.expandLabel}>SyncPlay</span>
327+
<span className={css.expandLabel}>{$L('SyncPlay')}</span>
328328
</SpottableButton>
329329
)}
330330

‎packages/app/src/components/NoConnection/NoConnection.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {useState, useEffect, useCallback} from 'react';
2+
import $L from '@enact/i18n/$L';
23
import Spottable from '@enact/spotlight/Spottable';
34
import Spotlight from '@enact/spotlight';
45

@@ -52,14 +53,14 @@ const NoConnection = () => {
5253
<line x1="12" y1="20" x2="12.01" y2="20" />
5354
</svg>
5455
</div>
55-
<h1 className={css.title}>No Internet Connection</h1>
56-
<p className={css.message}>Check your network settings and try again.</p>
56+
<h1 className={css.title}>{$L('No Internet Connection')}</h1>
57+
<p className={css.message}>{$L('Check your network settings and try again.')}</p>
5758
<SpottableButton
5859
className={css.retryButton}
5960
data-spotlight-id="no-connection-retry"
6061
onClick={handleRetry}
6162
>
62-
Retry
63+
{$L('Retry')}
6364
</SpottableButton>
6465
</div>
6566
</div>

‎packages/app/src/components/RatingsRow/RatingsRow.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const RatingsRow = ({item, serverUrl, compact = false, pluginEnabled = true}) =>
7070
<img
7171
className={css.ratingIconCompact}
7272
src={getRtFallbackIcon(item.CriticRating)}
73-
alt="Rotten Tomatoes"
73+
alt={$L('Rotten Tomatoes')}
7474
/>
7575
<span className={css.ratingValueCompact}>{item.CriticRating}%</span>
7676
</span>
@@ -106,11 +106,11 @@ const RatingsRow = ({item, serverUrl, compact = false, pluginEnabled = true}) =>
106106
<img
107107
className={css.ratingIcon}
108108
src={getRtFallbackIcon(item.CriticRating)}
109-
alt="Rotten Tomatoes"
109+
alt={$L('Rotten Tomatoes')}
110110
/>
111111
<div className={css.ratingInfo}>
112112
<span className={css.ratingValue}>{item.CriticRating}%</span>
113-
{showLabels && <span className={css.ratingName}>Rotten Tomatoes</span>}
113+
{showLabels && <span className={css.ratingName}>{$L('Rotten Tomatoes')}</span>}
114114
</div>
115115
</div>
116116
)}

‎packages/app/src/components/Sidebar/Sidebar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ const Sidebar = ({
303303
onClick={onSyncPlay}
304304
>
305305
<SyncPlayIcon className={css.sidebarIcon} style={navIconStyle(7)} />
306-
<span className={css.sidebarLabel}>SyncPlay</span>
306+
<span className={css.sidebarLabel}>{$L('SyncPlay')}</span>
307307
</SpottableButton>
308308
)}
309309

‎packages/app/src/components/SyncPlayDialog/SyncPlayDialog.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {memo, useCallback, useEffect, useState, useRef} from 'react';
2+
import $L from '@enact/i18n/$L';
23
import Spottable from '@enact/spotlight/Spottable';
34
import Spotlight from '@enact/spotlight';
45
import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
@@ -21,9 +22,9 @@ const GroupsContainer = SpotlightContainerDecorator({
2122
const SpottableButton = Spottable('button');
2223

2324
const REPEAT_LABELS = {
24-
RepeatNone: 'Off',
25-
RepeatOne: 'One',
26-
RepeatAll: 'All'
25+
RepeatNone: $L('Off'),
26+
RepeatOne: $L('One'),
27+
RepeatAll: $L('All')
2728
};
2829

2930
const REPEAT_CYCLE = ['RepeatNone', 'RepeatOne', 'RepeatAll'];
@@ -145,7 +146,7 @@ const SyncPlayDialog = ({open, onClose}) => {
145146
onClick={(e) => e.stopPropagation()} // eslint-disable-line react/jsx-no-bind
146147
>
147148
<div className={css.header}>
148-
<h2 className={css.title}>SyncPlay</h2>
149+
<h2 className={css.title}>{$L('SyncPlay')}</h2>
149150
<SpottableButton
150151
className={css.closeBtn}
151152
onClick={onClose}
@@ -194,7 +195,7 @@ const LobbyView = memo(({groups, groupName, isCreating, isJoining, onInputChange
194195
value={groupName}
195196
onChange={onInputChange}
196197
onKeyDown={onInputKeyDown}
197-
placeholder="Group name..."
198+
placeholder={$L('Group name...')}
198199
maxLength={64}
199200
spotlightId="syncplay-input"
200201
/>
@@ -204,17 +205,17 @@ const LobbyView = memo(({groups, groupName, isCreating, isJoining, onInputChange
204205
disabled={!groupName.trim() || isCreating}
205206
spotlightId="syncplay-create-btn"
206207
>
207-
{isCreating ? 'Creating...' : 'Create'}
208+
{isCreating ? $L('Creating...') : $L('Create')}
208209
</SpottableButton>
209210
</div>
210211

211212
<div className={css.divider}>
212-
<span>or join an existing group</span>
213+
<span>{$L('or join an existing group')}</span>
213214
</div>
214215

215216
<GroupsContainer className={css.groupsList} spotlightId="syncplay-groups">
216217
{groups.length === 0 ? (
217-
<div className={css.emptyState}>No active groups found</div>
218+
<div className={css.emptyState}>{$L('No active groups found')}</div>
218219
) : (
219220
groups.map((g) => (
220221
<SpottableButton
@@ -224,14 +225,14 @@ const LobbyView = memo(({groups, groupName, isCreating, isJoining, onInputChange
224225
disabled={isJoining === g.GroupId}
225226
>
226227
<div className={css.groupInfo}>
227-
<span className={css.groupName}>{g.GroupName || 'Unnamed Group'}</span>
228+
<span className={css.groupName}>{g.GroupName || $L('Unnamed Group')}</span>
228229
<span className={css.groupMeta}>
229-
{(g.Participants?.length || 0)} member{(g.Participants?.length || 0) !== 1 ? 's' : ''}
230+
{`${g.Participants?.length || 0} ${(g.Participants?.length || 0) === 1 ? $L('member') : $L('members')}`}
230231
{' \u00B7 '}
231-
{g.State || 'Idle'}
232+
{g.State || $L('Idle')}
232233
</span>
233234
</div>
234-
<span className={css.joinLabel}>Join</span>
235+
<span className={css.joinLabel}>{$L('Join')}</span>
235236
</SpottableButton>
236237
))
237238
)}
@@ -243,7 +244,7 @@ const LobbyView = memo(({groups, groupName, isCreating, isJoining, onInputChange
243244
const GroupView = memo(({group, isLeaving, onLeave, playQueue, playQueueItem, onToggleRepeat, onToggleShuffle}) => {
244245
if (!group) return null;
245246
const participants = group.Participants || [];
246-
const stateLabel = group.State || 'Idle';
247+
const stateLabel = group.State || $L('Idle');
247248
const repeatMode = playQueue?.RepeatMode || 'RepeatNone';
248249
const shuffleMode = playQueue?.ShuffleMode || 'Sorted';
249250
const queueLength = playQueue?.Playlist?.length || 0;
@@ -252,17 +253,17 @@ const GroupView = memo(({group, isLeaving, onLeave, playQueue, playQueueItem, on
252253
return (
253254
<div className={css.groupView}>
254255
<div className={css.groupHeader}>
255-
<h3 className={css.groupTitle}>{group.GroupName || 'Group'}</h3>
256+
<h3 className={css.groupTitle}>{group.GroupName || $L('Group')}</h3>
256257
<span className={`${css.stateBadge} ${css['state' + stateLabel]}`}>
257258
{stateLabel}
258259
</span>
259260
</div>
260261

261262
{playQueueItem && (
262263
<div className={css.nowPlaying}>
263-
<h4 className={css.sectionTitle}>Now Playing</h4>
264+
<h4 className={css.sectionTitle}>{$L('Now Playing')}</h4>
264265
<div className={css.nowPlayingInfo}>
265-
<span className={css.nowPlayingTitle}>{playQueueItem.Name || 'Unknown'}</span>
266+
<span className={css.nowPlayingTitle}>{playQueueItem.Name || $L('Unknown')}</span>
266267
{queueLength > 1 && (
267268
<span className={css.nowPlayingMeta}>
268269
{queueIndex + 1} of {queueLength}
@@ -279,26 +280,26 @@ const GroupView = memo(({group, isLeaving, onLeave, playQueue, playQueueItem, on
279280
onClick={onToggleShuffle}
280281
spotlightId="syncplay-shuffle-btn"
281282
>
282-
Shuffle: {shuffleMode === 'Shuffle' ? 'On' : 'Off'}
283+
{$L('Shuffle')}: {shuffleMode === 'Shuffle' ? $L('On') : $L('Off')}
283284
</SpottableButton>
284285
<SpottableButton
285286
className={`${css.controlBtn} ${repeatMode !== 'RepeatNone' ? css.controlActive : ''}`}
286287
onClick={onToggleRepeat}
287288
spotlightId="syncplay-repeat-btn"
288289
>
289-
Repeat: {REPEAT_LABELS[repeatMode] || 'Off'}
290+
{$L('Repeat')}: {REPEAT_LABELS[repeatMode] || $L('Off')}
290291
</SpottableButton>
291292
</div>
292293
)}
293294

294295
<div>
295-
<h4 className={css.sectionTitle}>Members ({participants.length})</h4>
296+
<h4 className={css.sectionTitle}>{$L('Members ({count})').replace('{count}', String(participants.length))}</h4>
296297
<ul className={css.membersList}>
297298
{participants.map((name, i) => (
298299
<li key={i} className={css.member}>{name}</li>
299300
))}
300301
{participants.length === 0 && (
301-
<li className={css.member}>Waiting for members...</li>
302+
<li className={css.member}>{$L('Waiting for members...')}</li>
302303
)}
303304
</ul>
304305
</div>
@@ -310,7 +311,7 @@ const GroupView = memo(({group, isLeaving, onLeave, playQueue, playQueueItem, on
310311
disabled={isLeaving}
311312
spotlightId="syncplay-leave-btn"
312313
>
313-
{isLeaving ? 'Leaving...' : 'Leave Group'}
314+
{isLeaving ? $L('Leaving...') : $L('Leave Group')}
314315
</SpottableButton>
315316
</div>
316317
</div>

‎packages/app/src/utils/subtitleConstants.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1+
import $L from '@enact/i18n/$L';
2+
13
export const SUBTITLE_SIZE_OPTIONS = [
2-
{ value: 'small', label: 'Small', fontSize: 36 },
3-
{ value: 'medium', label: 'Medium', fontSize: 44 },
4-
{ value: 'large', label: 'Large', fontSize: 52 },
5-
{ value: 'xlarge', label: 'Extra Large', fontSize: 60 }
4+
{ value: 'small', label: $L('Small'), fontSize: 36 },
5+
{ value: 'medium', label: $L('Medium'), fontSize: 44 },
6+
{ value: 'large', label: $L('Large'), fontSize: 52 },
7+
{ value: 'xlarge', label: $L('Extra Large'), fontSize: 60 }
68
];
79

810
export const SUBTITLE_COLOR_OPTIONS = [
9-
{ value: '#ffffff', label: 'White' },
10-
{ value: '#ffff00', label: 'Yellow' },
11-
{ value: '#00ffff', label: 'Cyan' },
12-
{ value: '#ff00ff', label: 'Magenta' },
13-
{ value: '#00ff00', label: 'Green' },
14-
{ value: '#ff0000', label: 'Red' },
15-
{ value: '#808080', label: 'Grey' },
16-
{ value: '#404040', label: 'Dark Grey' }
11+
{ value: '#ffffff', label: $L('White') },
12+
{ value: '#ffff00', label: $L('Yellow') },
13+
{ value: '#00ffff', label: $L('Cyan') },
14+
{ value: '#ff00ff', label: $L('Magenta') },
15+
{ value: '#00ff00', label: $L('Green') },
16+
{ value: '#ff0000', label: $L('Red') },
17+
{ value: '#808080', label: $L('Grey') },
18+
{ value: '#404040', label: $L('Dark Grey') }
1719
];
1820

1921
export const SUBTITLE_POSITION_OPTIONS = [
20-
{ value: 'bottom', label: 'Bottom', offset: 10 },
21-
{ value: 'lower', label: 'Lower', offset: 20 },
22-
{ value: 'middle', label: 'Middle', offset: 30 },
23-
{ value: 'higher', label: 'Higher', offset: 40 },
24-
{ value: 'absolute', label: 'Absolute', offset: 0 }
22+
{ value: 'bottom', label: $L('Bottom'), offset: 10 },
23+
{ value: 'lower', label: $L('Lower'), offset: 20 },
24+
{ value: 'middle', label: $L('Middle'), offset: 30 },
25+
{ value: 'higher', label: $L('Higher'), offset: 40 },
26+
{ value: 'absolute', label: $L('Absolute'), offset: 0 }
2527
];
2628

2729
export const SUBTITLE_SHADOW_COLOR_OPTIONS = [
28-
{ value: '#000000', label: 'Black' },
29-
{ value: '#ffffff', label: 'White' },
30-
{ value: '#808080', label: 'Grey' },
31-
{ value: '#404040', label: 'Dark Grey' },
32-
{ value: '#ff0000', label: 'Red' },
33-
{ value: '#00ff00', label: 'Green' },
34-
{ value: '#0000ff', label: 'Blue' }
30+
{ value: '#000000', label: $L('Black') },
31+
{ value: '#ffffff', label: $L('White') },
32+
{ value: '#808080', label: $L('Grey') },
33+
{ value: '#404040', label: $L('Dark Grey') },
34+
{ value: '#ff0000', label: $L('Red') },
35+
{ value: '#00ff00', label: $L('Green') },
36+
{ value: '#0000ff', label: $L('Blue') }
3537
];
3638

3739
export const SUBTITLE_BACKGROUND_COLOR_OPTIONS = [
38-
{ value: '#000000', label: 'Black' },
39-
{ value: '#ffffff', label: 'White' },
40-
{ value: '#808080', label: 'Grey' },
41-
{ value: '#404040', label: 'Dark Grey' },
42-
{ value: '#000080', label: 'Navy' }
40+
{ value: '#000000', label: $L('Black') },
41+
{ value: '#ffffff', label: $L('White') },
42+
{ value: '#808080', label: $L('Grey') },
43+
{ value: '#404040', label: $L('Dark Grey') },
44+
{ value: '#000080', label: $L('Navy') }
4345
];
4446

4547
const hexOpacity = (opacity) => Math.round((opacity / 100) * 255).toString(16).padStart(2, '0');

‎packages/app/src/views/Browse/Browse.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ let lastFocusState = null;
3636
const EXCLUDED_COLLECTION_TYPES = ['boxsets', 'books', 'musicvideos', 'homevideos', 'photos'];
3737

3838
const FAVORITE_ROW_CONFIGS = [
39-
{id: 'favoriteMovies', title: 'Favorite Movies', includeItemTypes: 'Movie', type: 'portrait'},
40-
{id: 'favoriteSeries', title: 'Favorite Series', includeItemTypes: 'Series', type: 'portrait'},
41-
{id: 'favoriteEpisodes', title: 'Favorite Episodes', includeItemTypes: 'Episode', type: 'landscape'},
42-
{id: 'favoritePeople', title: 'Favorite People', includeItemTypes: 'Person', type: 'portrait'},
43-
{id: 'favoriteArtists', title: 'Favorite Artists', includeItemTypes: 'MusicArtist', type: 'square'},
44-
{id: 'favoriteMusicVideos', title: 'Favorite Music Videos', includeItemTypes: 'MusicVideo', type: 'landscape'},
45-
{id: 'favoriteAlbums', title: 'Favorite Albums', includeItemTypes: 'MusicAlbum', type: 'square'},
46-
{id: 'favoriteSongs', title: 'Favorite Songs', includeItemTypes: 'Audio', type: 'square'}
39+
{id: 'favoriteMovies', title: $L('Favorite Movies'), includeItemTypes: 'Movie', type: 'portrait'},
40+
{id: 'favoriteSeries', title: $L('Favorite Series'), includeItemTypes: 'Series', type: 'portrait'},
41+
{id: 'favoriteEpisodes', title: $L('Favorite Episodes'), includeItemTypes: 'Episode', type: 'landscape'},
42+
{id: 'favoritePeople', title: $L('Favorite People'), includeItemTypes: 'Person', type: 'portrait'},
43+
{id: 'favoriteArtists', title: $L('Favorite Artists'), includeItemTypes: 'MusicArtist', type: 'square'},
44+
{id: 'favoriteMusicVideos', title: $L('Favorite Music Videos'), includeItemTypes: 'MusicVideo', type: 'landscape'},
45+
{id: 'favoriteAlbums', title: $L('Favorite Albums'), includeItemTypes: 'MusicAlbum', type: 'square'},
46+
{id: 'favoriteSongs', title: $L('Favorite Songs'), includeItemTypes: 'Audio', type: 'square'}
4747
];
4848

4949
const FAVORITE_ROW_IDS = FAVORITE_ROW_CONFIGS.map((row) => row.id);

0 commit comments

Comments
 (0)