@@ -38,12 +38,12 @@ const GITHUB_API_URL = 'https://api.github.com/repos/remix-project-org/remix-des
38
38
const CACHE_KEY = 'remix-desktop-release-cache'
39
39
const CACHE_DURATION = 30 * 60 * 1000 // 30 minutes in milliseconds
40
40
41
- export const DesktopDownload : React . FC < DesktopDownloadProps > = ( {
42
- className = '' ,
43
- compact = true ,
44
- variant = 'button' ,
41
+ export const DesktopDownload : React . FC < DesktopDownloadProps > = ( {
42
+ className = '' ,
43
+ compact = true ,
44
+ variant = 'button' ,
45
45
style = { } ,
46
- trackingContext = 'unknown'
46
+ trackingContext = 'unknown'
47
47
} ) => {
48
48
const [ releaseData , setReleaseData ] = useState < ReleaseData | null > ( null )
49
49
const [ loading , setLoading ] = useState ( true )
@@ -63,13 +63,13 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
63
63
try {
64
64
const cached = localStorage . getItem ( CACHE_KEY )
65
65
if ( ! cached ) return null
66
-
66
+
67
67
const { data, timestamp } = JSON . parse ( cached )
68
68
if ( Date . now ( ) - timestamp > CACHE_DURATION ) {
69
69
localStorage . removeItem ( CACHE_KEY )
70
70
return null
71
71
}
72
-
72
+
73
73
return data
74
74
} catch {
75
75
localStorage . removeItem ( CACHE_KEY )
@@ -103,42 +103,42 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
103
103
let preferredAsset : ReleaseAsset | null = null
104
104
105
105
if ( os === 'windows' ) {
106
- preferredAsset = assets . find ( asset =>
107
- asset . name . toLowerCase ( ) . includes ( 'setup' ) &&
106
+ preferredAsset = assets . find ( asset =>
107
+ asset . name . toLowerCase ( ) . includes ( 'setup' ) &&
108
108
asset . name . toLowerCase ( ) . includes ( '.exe' )
109
109
) || null
110
110
} else if ( os === 'macos' ) {
111
111
// Check if user is on Apple Silicon (M1/M2/etc.)
112
- const isAppleSilicon = navigator . userAgent . includes ( 'Macintosh' ) &&
113
- ( navigator . userAgent . includes ( 'ARM' ) ||
112
+ const isAppleSilicon = navigator . userAgent . includes ( 'Macintosh' ) &&
113
+ ( navigator . userAgent . includes ( 'ARM' ) ||
114
114
/ M a c O S X 1 0 _ 1 [ 5 - 9 ] | M a c O S X 1 [ 1 - 9 ] | m a c O S / . test ( navigator . userAgent ) )
115
-
115
+
116
116
// Prefer ARM64 version for newer Macs, Intel version for older ones
117
117
if ( isAppleSilicon ) {
118
- preferredAsset = assets . find ( asset =>
119
- asset . name . toLowerCase ( ) . includes ( '.dmg' ) &&
118
+ preferredAsset = assets . find ( asset =>
119
+ asset . name . toLowerCase ( ) . includes ( '.dmg' ) &&
120
120
asset . name . toLowerCase ( ) . includes ( 'arm64' )
121
121
) || null
122
122
}
123
-
123
+
124
124
// Fallback to any dmg if ARM64 not found or not Apple Silicon
125
125
if ( ! preferredAsset ) {
126
- preferredAsset = assets . find ( asset =>
127
- asset . name . toLowerCase ( ) . includes ( '.dmg' ) &&
126
+ preferredAsset = assets . find ( asset =>
127
+ asset . name . toLowerCase ( ) . includes ( '.dmg' ) &&
128
128
! asset . name . toLowerCase ( ) . includes ( 'arm64' )
129
- ) || assets . find ( asset =>
129
+ ) || assets . find ( asset =>
130
130
asset . name . toLowerCase ( ) . includes ( '.dmg' )
131
131
) || null
132
132
}
133
133
} else if ( os === 'linux' ) {
134
134
// Prefer .deb for most Linux distributions
135
- preferredAsset = assets . find ( asset =>
135
+ preferredAsset = assets . find ( asset =>
136
136
asset . name . toLowerCase ( ) . includes ( '.deb' )
137
137
) || null
138
-
138
+
139
139
// Fallback to AppImage if no .deb found
140
140
if ( ! preferredAsset ) {
141
- preferredAsset = assets . find ( asset =>
141
+ preferredAsset = assets . find ( asset =>
142
142
asset . name . toLowerCase ( ) . includes ( '.appimage' )
143
143
) || null
144
144
}
@@ -173,29 +173,29 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
173
173
// Get platform-specific icon
174
174
const getPlatformIcon = ( platform : string ) : string => {
175
175
switch ( platform ) {
176
- case 'windows' : return 'fab fa-windows'
177
- case 'macos' : return 'fab fa-apple'
178
- case 'linux' : return 'fab fa-linux'
179
- default : return 'fas fa-desktop'
176
+ case 'windows' : return 'fab fa-windows'
177
+ case 'macos' : return 'fab fa-apple'
178
+ case 'linux' : return 'fab fa-linux'
179
+ default : return 'fas fa-desktop'
180
180
}
181
181
}
182
182
183
183
// Get platform display name
184
184
const getPlatformName = ( platform : string ) : string => {
185
185
switch ( platform ) {
186
- case 'windows' : return 'Windows'
187
- case 'macos' : return 'macOS'
188
- case 'linux' : return 'Linux'
189
- default : return platform . charAt ( 0 ) . toUpperCase ( ) + platform . slice ( 1 )
186
+ case 'windows' : return 'Windows'
187
+ case 'macos' : return 'macOS'
188
+ case 'linux' : return 'Linux'
189
+ default : return platform . charAt ( 0 ) . toUpperCase ( ) + platform . slice ( 1 )
190
190
}
191
191
}
192
192
193
193
// Track download click events
194
194
const trackDownloadClick = ( platform ?: string , filename ?: string , variant ?: string ) => {
195
195
const trackingData = [
196
- 'trackEvent' ,
197
- 'desktopDownload' ,
198
- `${ trackingContext } -${ variant || 'button' } ` ,
196
+ 'trackEvent' ,
197
+ 'desktopDownload' ,
198
+ `${ trackingContext } -${ variant || 'button' } ` ,
199
199
platform ? `${ platform } -${ filename } ` : 'releases-page'
200
200
]
201
201
_paq . push ( trackingData )
@@ -257,14 +257,14 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
257
257
return (
258
258
< div className = { `text-muted ${ className } ` } >
259
259
< small >
260
- < FormattedMessage
261
- id = "desktopDownload.error"
260
+ < FormattedMessage
261
+ id = "desktopDownload.error"
262
262
defaultMessage = "Unable to load desktop app. Check the {link} for downloads."
263
263
values = { {
264
264
link : (
265
- < a
266
- href = "https://github.com/remix-project-org/remix-desktop/releases"
267
- target = "_blank"
265
+ < a
266
+ href = "https://github.com/remix-project-org/remix-desktop/releases"
267
+ target = "_blank"
268
268
rel = "noopener noreferrer"
269
269
className = "text-decoration-none"
270
270
>
@@ -303,10 +303,10 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
303
303
>
304
304
< i className = { getPlatformIcon ( detectedDownload . platform ) } > </ i >
305
305
< span >
306
- < FormattedMessage
307
- id = "desktopDownload.downloadSpan"
306
+ < FormattedMessage
307
+ id = "desktopDownload.downloadSpan"
308
308
defaultMessage = "Download Remix Desktop {platform} {version}"
309
- values = { {
309
+ values = { {
310
310
platform : getPlatformName ( detectedDownload . platform ) ,
311
311
version : releaseData . tag_name
312
312
} }
@@ -333,8 +333,8 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
333
333
>
334
334
< i className = "far fa-desktop" > </ i >
335
335
< span >
336
- < FormattedMessage
337
- id = "desktopDownload.downloadSpanGeneric"
336
+ < FormattedMessage
337
+ id = "desktopDownload.downloadSpanGeneric"
338
338
defaultMessage = "Download Remix Desktop {version}"
339
339
values = { { version : releaseData . tag_name } }
340
340
/>
@@ -362,10 +362,10 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
362
362
>
363
363
< i className = { getPlatformIcon ( detectedDownload . platform ) } > </ i >
364
364
< span >
365
- < FormattedMessage
366
- id = "desktopDownload.downloadCompactFull"
365
+ < FormattedMessage
366
+ id = "desktopDownload.downloadCompactFull"
367
367
defaultMessage = "Download Remix Desktop {platform} {version}"
368
- values = { {
368
+ values = { {
369
369
platform : getPlatformName ( detectedDownload . platform ) ,
370
370
version : releaseData . tag_name
371
371
} }
@@ -375,14 +375,14 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
375
375
</ CustomTooltip >
376
376
< div className = "text-muted" >
377
377
< small >
378
- < a
379
- href = { releaseData . html_url }
380
- target = "_blank"
378
+ < a
379
+ href = { releaseData . html_url }
380
+ target = "_blank"
381
381
rel = "noopener noreferrer"
382
382
className = "text-decoration-none text-muted"
383
383
>
384
- < FormattedMessage
385
- id = "desktopDownload.otherVersions"
384
+ < FormattedMessage
385
+ id = "desktopDownload.otherVersions"
386
386
defaultMessage = "Other versions and platforms"
387
387
/>
388
388
</ a >
@@ -405,8 +405,8 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
405
405
>
406
406
< i className = "far fa-desktop" > </ i >
407
407
< span >
408
- < FormattedMessage
409
- id = "desktopDownload.downloadCompactGeneric"
408
+ < FormattedMessage
409
+ id = "desktopDownload.downloadCompactGeneric"
410
410
defaultMessage = "Download Remix Desktop {version}"
411
411
values = { { version : releaseData . tag_name } }
412
412
/>
@@ -415,8 +415,8 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
415
415
</ CustomTooltip >
416
416
< div className = "text-muted" >
417
417
< small >
418
- < FormattedMessage
419
- id = "desktopDownload.noAutoDetect"
418
+ < FormattedMessage
419
+ id = "desktopDownload.noAutoDetect"
420
420
defaultMessage = "Available for Windows, macOS, and Linux"
421
421
/>
422
422
</ small >
@@ -433,11 +433,11 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
433
433
</ h5 >
434
434
< span className = "badge bg-primary" > { releaseData . tag_name } </ span >
435
435
</ div >
436
-
436
+
437
437
< div className = "text-muted mb-2" >
438
438
< small >
439
- < FormattedMessage
440
- id = "desktopDownload.releaseDate"
439
+ < FormattedMessage
440
+ id = "desktopDownload.releaseDate"
441
441
defaultMessage = "Released {date}"
442
442
values = { { date : formatDate ( releaseData . published_at ) } }
443
443
/>
@@ -460,28 +460,28 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
460
460
>
461
461
< i className = { getPlatformIcon ( detectedDownload . platform ) } > </ i >
462
462
< span >
463
- < FormattedMessage
464
- id = "desktopDownload.downloadButton"
463
+ < FormattedMessage
464
+ id = "desktopDownload.downloadButton"
465
465
defaultMessage = "Download for {platform}"
466
- values = { {
466
+ values = { {
467
467
platform : getPlatformName ( detectedDownload . platform )
468
468
} }
469
469
/>
470
470
</ span >
471
471
</ a >
472
472
</ CustomTooltip >
473
-
473
+
474
474
< div className = "text-muted" >
475
475
< small >
476
476
{ formatSize ( detectedDownload . size ) } • { ' ' }
477
- < a
478
- href = { releaseData . html_url }
479
- target = "_blank"
477
+ < a
478
+ href = { releaseData . html_url }
479
+ target = "_blank"
480
480
rel = "noopener noreferrer"
481
481
className = "text-decoration-none text-muted"
482
482
>
483
- < FormattedMessage
484
- id = "desktopDownload.otherVersions"
483
+ < FormattedMessage
484
+ id = "desktopDownload.otherVersions"
485
485
defaultMessage = "Other versions and platforms"
486
486
/>
487
487
</ a >
@@ -502,11 +502,11 @@ export const DesktopDownload: React.FC<DesktopDownloadProps> = ({
502
502
< FormattedMessage id = "desktopDownload.viewReleases" defaultMessage = "View Downloads" />
503
503
</ span >
504
504
</ a >
505
-
505
+
506
506
< div className = "text-muted" >
507
507
< small >
508
- < FormattedMessage
509
- id = "desktopDownload.noAutoDetect"
508
+ < FormattedMessage
509
+ id = "desktopDownload.noAutoDetect"
510
510
defaultMessage = "Available for Windows, macOS, and Linux"
511
511
/>
512
512
</ small >
0 commit comments