WebTorrent styling

components/brave_webtorrent/extension/components/app.tsx

@@ -11,7 +11,13 @@ import MediaViewer from './mediaViewer'
 import TorrentViewer from './torrentViewer'
 
 // Constants
-import { TorrentObj, TorrentState, ApplicationState, getTorrentObj, getTorrentState } from '../constants/webtorrentState'
+import {
+  TorrentObj,
+  TorrentState,
+  ApplicationState,
+  getTorrentObj,
+  getTorrentState
+} from '../constants/webtorrentState'
 
 // Utils
 import * as torrentActions from '../actions/webtorrent_actions'
@@ -37,12 +43,8 @@ export class BraveWebtorrentPage extends React.Component<Props, {}> {
 
     if (!torrentState) return null
 
-    if (torrentObj && typeof(torrentState.ix) === 'number') {
-      return (
-        <MediaViewer
-          torrent={torrentObj}
-          ix={torrentState.ix}
-        />)
+    if (torrentObj && typeof torrentState.ix === 'number') {
+      return <MediaViewer torrent={torrentObj} ix={torrentState.ix} />
     }
 
     return (
@@ -53,13 +55,19 @@ export class BraveWebtorrentPage extends React.Component<Props, {}> {
         errorMsg={torrentState.errorMsg}
         torrent={torrentObj}
         tabId={torrentState.tabId}
-      />)
+      />
+    )
   }
 }
 
-export const mapStateToProps = (state: ApplicationState, ownProps: { tabId: number }) => {
-  return { torrentState: getTorrentState(state.torrentsData, ownProps.tabId),
-    torrentObj: getTorrentObj(state.torrentsData, ownProps.tabId) }
+export const mapStateToProps = (
+  state: ApplicationState,
+  ownProps: { tabId: number }
+) => {
+  return {
+    torrentState: getTorrentState(state.torrentsData, ownProps.tabId),
+    torrentObj: getTorrentObj(state.torrentsData, ownProps.tabId)
+  }
 }
 
 export const mapDispatchToProps = (dispatch: Dispatch) => ({

components/brave_webtorrent/extension/components/mediaViewer.tsx

@@ -7,22 +7,9 @@ import * as React from 'react'
 // Constants
 import { TorrentObj } from '../constants/webtorrentState'
 
-const SUPPORTED_VIDEO_EXTENSIONS = [
-  'm4v',
-  'mkv',
-  'mov',
-  'mp4',
-  'ogv',
-  'webm'
-]
+const SUPPORTED_VIDEO_EXTENSIONS = ['m4v', 'mkv', 'mov', 'mp4', 'ogv', 'webm']
 
-const SUPPORTED_AUDIO_EXTENSIONS = [
-  'aac',
-  'mp3',
-  'ogg',
-  'wav',
-  'm4a'
-]
+const SUPPORTED_AUDIO_EXTENSIONS = ['aac', 'mp3', 'ogg', 'wav', 'm4a']
 
 // Given 'foo.txt', returns 'txt'
 // Given eg. null, undefined, '', or 'README', returns null
@@ -43,30 +30,34 @@ export default class MediaViewer extends React.PureComponent<Props, {}> {
     const { torrent, ix } = this.props
 
     const file = torrent.files ? torrent.files[ix] : undefined
-    const fileURL = torrent.serverURL && (torrent.serverURL + '/' + ix)
+    const fileURL = torrent.serverURL && torrent.serverURL + '/' + ix
 
     const fileExt = file && getExtension(file.name)
-    const isVideo = fileExt ? SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt) : false
-    const isAudio = fileExt ? SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt) : false
+    const isVideo = fileExt
+      ? SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
+      : false
+    const isAudio = fileExt
+      ? SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
+      : false
 
     let content
     if (!file || !torrent.serverURL) {
       content = <div className='loading'>Loading Media</div>
     } else if (isVideo) {
-      content = <video id='video' src={fileURL} autoPlay={true} controls={true} />
+      content = (
+        <video id='video' src={fileURL} autoPlay={true} controls={true} />
+      )
     } else if (isAudio) {
-      content = <audio id='audio' src={fileURL} autoPlay={true} controls={true} />
+      content = (
+        <audio id='audio' src={fileURL} autoPlay={true} controls={true} />
+      )
     } else {
       // For security, sandbox and disallow scripts.
       // We need allow-same-origin so that the iframe can load from
       // http://localhost:...
       content = <iframe id='other' src={fileURL} sandbox='allow-same-origin' />
     }
 
-    return (
-      <div className='mediaViewer'>
-        {content}
-      </div>
-    )
+    return <div className='mediaViewer'>{content}</div>
   }
 }

components/brave_webtorrent/extension/components/torrentFileList.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 import { Table } from 'brave-ui/components'
 import { Cell, Row } from 'brave-ui/components/dataTables/table/index'
-import { Heading } from 'brave-ui/old'
+import { LoaderIcon } from 'brave-ui/components/icons'
 
 // Constants
 import { File, TorrentObj } from '../constants/webtorrentState'
@@ -20,8 +20,11 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
     const { torrent } = this.props
     if (!torrent || !torrent.files) {
       return (
-        <div>
-          Click "Start Torrent" to load the torrent file list
+        <div className='torrentSubhead'>
+          <p>
+            Click "Start Torrent" to begin your download. WebTorrent can be
+            disabled from the extensions panel in Settings.
+          </p>
         </div>
       )
     }
@@ -47,23 +50,30 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
       if (isDownload) {
         if (torrent.serverURL) {
           const url = torrent.serverURL + '/' + ix
-          return (<a href={url} download={file.name}>⇩</a>)
+          return (
+            <a href={url} download={file.name}>
+              ⇩
+            </a>
+          )
         } else {
-          return (<div />) // No download links until the server is ready
+          return <div /> // No download links until the server is ready
         }
       } else {
         // use # for .torrent links, since query params might cause the remote
         // server to return 404
-        const suffix = /^https?:/.test(torrentId)
-          ? '#ix=' + ix
-          : '&ix=' + ix
+        const suffix = /^https?:/.test(torrentId) ? '#ix=' + ix : '&ix=' + ix
         const href = torrentId + suffix
-        return (<a href={href} target='_blank'> {file.name} </a>)
+        return (
+          <a href={href} target='_blank'>
+            {' '}
+            {file.name}{' '}
+          </a>
+        )
       }
     }
 
     const rows: Row[] = torrent.files.map((file: File, index: number) => {
-      return ({
+      return {
         content: [
           {
             content: index + 1
@@ -78,20 +88,18 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
             content: file.length
           }
         ]
-      })
+      }
     })
 
     return (
       <div>
-        <Heading
-          text='Files'
-          level={3}
-        />
-        <Table
-          header={header}
-          rows={rows}
-        >
-        'Loading the torrent file list...'
+        <Table header={header} rows={rows}>
+          <div className='loadingContainer'>
+            <div className='__icon'>
+              <LoaderIcon />
+            </div>
+            Loading the torrent file list
+          </div>
         </Table>
       </div>
     )

components/brave_webtorrent/extension/components/torrentStatus.tsx

@@ -4,8 +4,7 @@
 
 import * as React from 'react'
 import * as prettierBytes from 'prettier-bytes'
-import { Column, Grid } from 'brave-ui/components'
-import { Heading } from 'brave-ui/old'
+import { Column, Grid, Heading } from 'brave-ui/components'
 
 // Constants
 import { TorrentObj } from '../constants/webtorrentState'
@@ -20,9 +19,7 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
     const { torrent, errorMsg } = this.props
 
     if (errorMsg) {
-      return (
-        <div> {errorMsg} </div>
-      )
+      return <div> {errorMsg} </div>
     }
 
     if (!torrent) {
@@ -31,41 +28,57 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
 
     const renderStatus = () => {
       const status = torrent.progress < 1 ? 'Downloading' : 'Seeding'
-      return (<Column size={2}> {status} </Column>)
+      return <Column size={2}> {status} </Column>
     }
 
     const renderPercentage = () => {
-      const percentage = (torrent.progress < 1) ?
-        (torrent.progress * 100).toFixed(1) : '100'
-      return (<Column size={2}> {percentage} </Column>)
+      const percentage =
+        torrent.progress < 1 ? (torrent.progress * 100).toFixed(1) : '100'
+      return <Column size={2}> {percentage} </Column>
     }
 
     const renderSpeeds = () => {
       let str = ''
-      if (torrent.downloadSpeed > 0) str += ' ↓ ' + prettierBytes(torrent.downloadSpeed) + '/s'
-      if (torrent.uploadSpeed > 0) str += ' ↑ ' + prettierBytes(torrent.uploadSpeed) + '/s'
+      if (torrent.downloadSpeed > 0) {
+        str += ' ↓ ' + prettierBytes(torrent.downloadSpeed) + '/s'
+      }
+      if (torrent.uploadSpeed > 0) {
+        str += ' ↑ ' + prettierBytes(torrent.uploadSpeed) + '/s'
+      }
       if (str === '') return
-      return (<Column size={2}> {str} </Column>)
+      return <Column size={2}> {str} </Column>
     }
 
     const renderTotalProgress = () => {
       const downloaded = prettierBytes(torrent.downloaded)
       const total = prettierBytes(torrent.length || 0)
       if (downloaded === total) {
-        return (<Column size={2}> {downloaded} </Column>)
+        return <Column size={2}> {downloaded} </Column>
       } else {
-        return (<Column size={2}> {downloaded} / {total} </Column>)
+        return (
+          <Column size={2}>
+            {' '}
+            {downloaded} / {total}{' '}
+          </Column>
+        )
       }
     }
 
     const renderPeers = () => {
       if (torrent.numPeers === 0) return
       const count = torrent.numPeers === 1 ? 'peer' : 'peers'
-      return (<Column size={2}> {torrent.numPeers} {count} </Column>)
+      return (
+        <Column size={2}>
+          {' '}
+          {torrent.numPeers} {count}{' '}
+        </Column>
+      )
     }
 
     const renderEta = () => {
-      if (torrent.timeRemaining === 0 || torrent.timeRemaining === Infinity) return // Zero download speed
+      if (torrent.timeRemaining === 0 || torrent.timeRemaining === Infinity) {
+        return
+      } // Zero download speed
       if (torrent.downloaded === torrent.length) return // Already done
 
       const rawEta = torrent.timeRemaining / 1000
@@ -76,19 +89,20 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
       // Only display hours and minutes if they are greater than 0 but always
       // display minutes if hours is being displayed
       const hoursStr = hours ? hours + 'h' : ''
-      const minutesStr = (hours || minutes) ? minutes + 'm' : ''
+      const minutesStr = hours || minutes ? minutes + 'm' : ''
       const secondsStr = seconds + 's'
 
-      return (<Column size={2}> {hoursStr} {minutesStr} {secondsStr} remaining </Column>)
+      return (
+        <div className='__column'>
+          {hoursStr} {minutesStr} {secondsStr} remaining
+        </div>
+      )
     }
 
     return (
-      <div>
-        <Heading
-          text='Torrent Status'
-          level={3}
-        />
-        <Grid>
+      <div className='torrentSubhead'>
+        <Heading children='Torrent Status' level={3} />
+        <Grid className='gridFix'>
           {renderStatus()}
           {renderPercentage()}
           {renderSpeeds()}

components/brave_webtorrent/extension/components/torrentViewer.tsx

@@ -36,17 +36,9 @@ export default class TorrentViewer extends React.PureComponent<Props, {}> {
           onStartTorrent={actions.startTorrent}
           onStopDownload={actions.stopDownload}
         />
-        <TorrentStatus
-          torrent={torrent}
-          errorMsg={errorMsg}
-        />
-        <TorrentFileList
-          torrentId={torrentId}
-          torrent={torrent}
-        />
-        <TorrentViewerFooter
-          torrent={torrent}
-        />
+        <TorrentStatus torrent={torrent} errorMsg={errorMsg} />
+        <TorrentFileList torrentId={torrentId} torrent={torrent} />
+        <TorrentViewerFooter torrent={torrent} />
       </div>
     )
   }