Skip to content

Commit ad41b48

Browse files
Ross Moodybsclifton
Ross Moody
authored and
bsclifton
committed
WebTorrent styling
Test fixes Linter/Formatting Fixes
1 parent fd43aaf commit ad41b48

File tree

11 files changed

+222
-182
lines changed

11 files changed

+222
-182
lines changed

‎components/brave_webtorrent/extension/components/app.tsx

+19-11
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import MediaViewer from './mediaViewer'
1111
import TorrentViewer from './torrentViewer'
1212

1313
// Constants
14-
import { TorrentObj, TorrentState, ApplicationState, getTorrentObj, getTorrentState } from '../constants/webtorrentState'
14+
import {
15+
TorrentObj,
16+
TorrentState,
17+
ApplicationState,
18+
getTorrentObj,
19+
getTorrentState
20+
} from '../constants/webtorrentState'
1521

1622
// Utils
1723
import * as torrentActions from '../actions/webtorrent_actions'
@@ -37,12 +43,8 @@ export class BraveWebtorrentPage extends React.Component<Props, {}> {
3743

3844
if (!torrentState) return null
3945

40-
if (torrentObj && typeof(torrentState.ix) === 'number') {
41-
return (
42-
<MediaViewer
43-
torrent={torrentObj}
44-
ix={torrentState.ix}
45-
/>)
46+
if (torrentObj && typeof torrentState.ix === 'number') {
47+
return <MediaViewer torrent={torrentObj} ix={torrentState.ix} />
4648
}
4749

4850
return (
@@ -53,13 +55,19 @@ export class BraveWebtorrentPage extends React.Component<Props, {}> {
5355
errorMsg={torrentState.errorMsg}
5456
torrent={torrentObj}
5557
tabId={torrentState.tabId}
56-
/>)
58+
/>
59+
)
5760
}
5861
}
5962

60-
export const mapStateToProps = (state: ApplicationState, ownProps: { tabId: number }) => {
61-
return { torrentState: getTorrentState(state.torrentsData, ownProps.tabId),
62-
torrentObj: getTorrentObj(state.torrentsData, ownProps.tabId) }
63+
export const mapStateToProps = (
64+
state: ApplicationState,
65+
ownProps: { tabId: number }
66+
) => {
67+
return {
68+
torrentState: getTorrentState(state.torrentsData, ownProps.tabId),
69+
torrentObj: getTorrentObj(state.torrentsData, ownProps.tabId)
70+
}
6371
}
6472

6573
export const mapDispatchToProps = (dispatch: Dispatch) => ({

‎components/brave_webtorrent/extension/components/mediaViewer.tsx

+16-25
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,9 @@ import * as React from 'react'
77
// Constants
88
import { TorrentObj } from '../constants/webtorrentState'
99

10-
const SUPPORTED_VIDEO_EXTENSIONS = [
11-
'm4v',
12-
'mkv',
13-
'mov',
14-
'mp4',
15-
'ogv',
16-
'webm'
17-
]
10+
const SUPPORTED_VIDEO_EXTENSIONS = ['m4v', 'mkv', 'mov', 'mp4', 'ogv', 'webm']
1811

19-
const SUPPORTED_AUDIO_EXTENSIONS = [
20-
'aac',
21-
'mp3',
22-
'ogg',
23-
'wav',
24-
'm4a'
25-
]
12+
const SUPPORTED_AUDIO_EXTENSIONS = ['aac', 'mp3', 'ogg', 'wav', 'm4a']
2613

2714
// Given 'foo.txt', returns 'txt'
2815
// Given eg. null, undefined, '', or 'README', returns null
@@ -43,30 +30,34 @@ export default class MediaViewer extends React.PureComponent<Props, {}> {
4330
const { torrent, ix } = this.props
4431

4532
const file = torrent.files ? torrent.files[ix] : undefined
46-
const fileURL = torrent.serverURL && (torrent.serverURL + '/' + ix)
33+
const fileURL = torrent.serverURL && torrent.serverURL + '/' + ix
4734

4835
const fileExt = file && getExtension(file.name)
49-
const isVideo = fileExt ? SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt) : false
50-
const isAudio = fileExt ? SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt) : false
36+
const isVideo = fileExt
37+
? SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
38+
: false
39+
const isAudio = fileExt
40+
? SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
41+
: false
5142

5243
let content
5344
if (!file || !torrent.serverURL) {
5445
content = <div className='loading'>Loading Media</div>
5546
} else if (isVideo) {
56-
content = <video id='video' src={fileURL} autoPlay={true} controls={true} />
47+
content = (
48+
<video id='video' src={fileURL} autoPlay={true} controls={true} />
49+
)
5750
} else if (isAudio) {
58-
content = <audio id='audio' src={fileURL} autoPlay={true} controls={true} />
51+
content = (
52+
<audio id='audio' src={fileURL} autoPlay={true} controls={true} />
53+
)
5954
} else {
6055
// For security, sandbox and disallow scripts.
6156
// We need allow-same-origin so that the iframe can load from
6257
// http://localhost:...
6358
content = <iframe id='other' src={fileURL} sandbox='allow-same-origin' />
6459
}
6560

66-
return (
67-
<div className='mediaViewer'>
68-
{content}
69-
</div>
70-
)
61+
return <div className='mediaViewer'>{content}</div>
7162
}
7263
}

‎components/brave_webtorrent/extension/components/torrentFileList.tsx

+28-20
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import * as React from 'react'
66
import { Table } from 'brave-ui/components'
77
import { Cell, Row } from 'brave-ui/components/dataTables/table/index'
8-
import { Heading } from 'brave-ui/old'
8+
import { LoaderIcon } from 'brave-ui/components/icons'
99

1010
// Constants
1111
import { File, TorrentObj } from '../constants/webtorrentState'
@@ -20,8 +20,11 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
2020
const { torrent } = this.props
2121
if (!torrent || !torrent.files) {
2222
return (
23-
<div>
24-
Click "Start Torrent" to load the torrent file list
23+
<div className='torrentSubhead'>
24+
<p>
25+
Click "Start Torrent" to begin your download. WebTorrent can be
26+
disabled from the extensions panel in Settings.
27+
</p>
2528
</div>
2629
)
2730
}
@@ -47,23 +50,30 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
4750
if (isDownload) {
4851
if (torrent.serverURL) {
4952
const url = torrent.serverURL + '/' + ix
50-
return (<a href={url} download={file.name}>⇩</a>)
53+
return (
54+
<a href={url} download={file.name}>
55+
⇩
56+
</a>
57+
)
5158
} else {
52-
return (<div />) // No download links until the server is ready
59+
return <div /> // No download links until the server is ready
5360
}
5461
} else {
5562
// use # for .torrent links, since query params might cause the remote
5663
// server to return 404
57-
const suffix = /^https?:/.test(torrentId)
58-
? '#ix=' + ix
59-
: '&ix=' + ix
64+
const suffix = /^https?:/.test(torrentId) ? '#ix=' + ix : '&ix=' + ix
6065
const href = torrentId + suffix
61-
return (<a href={href} target='_blank'> {file.name} </a>)
66+
return (
67+
<a href={href} target='_blank'>
68+
{' '}
69+
{file.name}{' '}
70+
</a>
71+
)
6272
}
6373
}
6474

6575
const rows: Row[] = torrent.files.map((file: File, index: number) => {
66-
return ({
76+
return {
6777
content: [
6878
{
6979
content: index + 1
@@ -78,20 +88,18 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
7888
content: file.length
7989
}
8090
]
81-
})
91+
}
8292
})
8393

8494
return (
8595
<div>
86-
<Heading
87-
text='Files'
88-
level={3}
89-
/>
90-
<Table
91-
header={header}
92-
rows={rows}
93-
>
94-
'Loading the torrent file list...'
96+
<Table header={header} rows={rows}>
97+
<div className='loadingContainer'>
98+
<div className='__icon'>
99+
<LoaderIcon />
100+
</div>
101+
Loading the torrent file list
102+
</div>
95103
</Table>
96104
</div>
97105
)

‎components/brave_webtorrent/extension/components/torrentStatus.tsx

+38-24
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44

55
import * as React from 'react'
66
import * as prettierBytes from 'prettier-bytes'
7-
import { Column, Grid } from 'brave-ui/components'
8-
import { Heading } from 'brave-ui/old'
7+
import { Column, Grid, Heading } from 'brave-ui/components'
98

109
// Constants
1110
import { TorrentObj } from '../constants/webtorrentState'
@@ -20,9 +19,7 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
2019
const { torrent, errorMsg } = this.props
2120

2221
if (errorMsg) {
23-
return (
24-
<div> {errorMsg} </div>
25-
)
22+
return <div> {errorMsg} </div>
2623
}
2724

2825
if (!torrent) {
@@ -31,41 +28,57 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
3128

3229
const renderStatus = () => {
3330
const status = torrent.progress < 1 ? 'Downloading' : 'Seeding'
34-
return (<Column size={2}> {status} </Column>)
31+
return <Column size={2}> {status} </Column>
3532
}
3633

3734
const renderPercentage = () => {
38-
const percentage = (torrent.progress < 1) ?
39-
(torrent.progress * 100).toFixed(1) : '100'
40-
return (<Column size={2}> {percentage} </Column>)
35+
const percentage =
36+
torrent.progress < 1 ? (torrent.progress * 100).toFixed(1) : '100'
37+
return <Column size={2}> {percentage} </Column>
4138
}
4239

4340
const renderSpeeds = () => {
4441
let str = ''
45-
if (torrent.downloadSpeed > 0) str += ' ↓ ' + prettierBytes(torrent.downloadSpeed) + '/s'
46-
if (torrent.uploadSpeed > 0) str += ' ↑ ' + prettierBytes(torrent.uploadSpeed) + '/s'
42+
if (torrent.downloadSpeed > 0) {
43+
str += ' ↓ ' + prettierBytes(torrent.downloadSpeed) + '/s'
44+
}
45+
if (torrent.uploadSpeed > 0) {
46+
str += ' ↑ ' + prettierBytes(torrent.uploadSpeed) + '/s'
47+
}
4748
if (str === '') return
48-
return (<Column size={2}> {str} </Column>)
49+
return <Column size={2}> {str} </Column>
4950
}
5051

5152
const renderTotalProgress = () => {
5253
const downloaded = prettierBytes(torrent.downloaded)
5354
const total = prettierBytes(torrent.length || 0)
5455
if (downloaded === total) {
55-
return (<Column size={2}> {downloaded} </Column>)
56+
return <Column size={2}> {downloaded} </Column>
5657
} else {
57-
return (<Column size={2}> {downloaded} / {total} </Column>)
58+
return (
59+
<Column size={2}>
60+
{' '}
61+
{downloaded} / {total}{' '}
62+
</Column>
63+
)
5864
}
5965
}
6066

6167
const renderPeers = () => {
6268
if (torrent.numPeers === 0) return
6369
const count = torrent.numPeers === 1 ? 'peer' : 'peers'
64-
return (<Column size={2}> {torrent.numPeers} {count} </Column>)
70+
return (
71+
<Column size={2}>
72+
{' '}
73+
{torrent.numPeers} {count}{' '}
74+
</Column>
75+
)
6576
}
6677

6778
const renderEta = () => {
68-
if (torrent.timeRemaining === 0 || torrent.timeRemaining === Infinity) return // Zero download speed
79+
if (torrent.timeRemaining === 0 || torrent.timeRemaining === Infinity) {
80+
return
81+
} // Zero download speed
6982
if (torrent.downloaded === torrent.length) return // Already done
7083

7184
const rawEta = torrent.timeRemaining / 1000
@@ -76,19 +89,20 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
7689
// Only display hours and minutes if they are greater than 0 but always
7790
// display minutes if hours is being displayed
7891
const hoursStr = hours ? hours + 'h' : ''
79-
const minutesStr = (hours || minutes) ? minutes + 'm' : ''
92+
const minutesStr = hours || minutes ? minutes + 'm' : ''
8093
const secondsStr = seconds + 's'
8194

82-
return (<Column size={2}> {hoursStr} {minutesStr} {secondsStr} remaining </Column>)
95+
return (
96+
<div className='__column'>
97+
{hoursStr} {minutesStr} {secondsStr} remaining
98+
</div>
99+
)
83100
}
84101

85102
return (
86-
<div>
87-
<Heading
88-
text='Torrent Status'
89-
level={3}
90-
/>
91-
<Grid>
103+
<div className='torrentSubhead'>
104+
<Heading children='Torrent Status' level={3} />
105+
<Grid className='gridFix'>
92106
{renderStatus()}
93107
{renderPercentage()}
94108
{renderSpeeds()}

‎components/brave_webtorrent/extension/components/torrentViewer.tsx

+3-11
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,9 @@ export default class TorrentViewer extends React.PureComponent<Props, {}> {
3636
onStartTorrent={actions.startTorrent}
3737
onStopDownload={actions.stopDownload}
3838
/>
39-
<TorrentStatus
40-
torrent={torrent}
41-
errorMsg={errorMsg}
42-
/>
43-
<TorrentFileList
44-
torrentId={torrentId}
45-
torrent={torrent}
46-
/>
47-
<TorrentViewerFooter
48-
torrent={torrent}
49-
/>
39+
<TorrentStatus torrent={torrent} errorMsg={errorMsg} />
40+
<TorrentFileList torrentId={torrentId} torrent={torrent} />
41+
<TorrentViewerFooter torrent={torrent} />
5042
</div>
5143
)
5244
}

0 commit comments

Comments
 (0)