React: convert functions to controls

src/renderer/views/app.js

@@ -49,9 +49,9 @@ module.exports = class App extends React.Component {
 
     var vdom = (
       <div className={'app ' + cls.join(' ')}>
-        {Header(state)}
+        <Header state={state} />
         {getErrorPopover(state)}
-        <div className='content'>{getView(state)}</div>
+        <div key='content' className='content'>{getView(state)}</div>
         {getModal(state)}
       </div>
     )
@@ -65,12 +65,13 @@ function getErrorPopover (state) {
   var recentErrors = state.errors.filter((x) => now - x.time < 5000)
   var hasErrors = recentErrors.length > 0
 
-  var errorElems = recentErrors.map(function (error) {
-    return (<div className='error'>{error.message}</div>)
+  var errorElems = recentErrors.map(function (error, i) {
+    return (<div key={i} className='error'>{error.message}</div>)
   })
   return (
-    <div className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
-      <div className='title'>Error</div>
+    <div key='errors'
+      className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
+      <div key='title' className='title'>Error</div>
       {errorElems}
     </div>
   )
@@ -78,18 +79,18 @@ function getErrorPopover (state) {
 
 function getModal (state) {
   if (!state.modal) return
-  var contents = Modals[state.modal.id](state)
+  var ModalContents = Modals[state.modal.id]
   return (
-    <div className='modal'>
-      <div className='modal-background'></div>
-      <div className='modal-content'>
-        {contents}
+    <div key='modal' className='modal'>
+      <div key='modal-background' className='modal-background'></div>
+      <div key='modal-content' className='modal-content'>
+        <ModalContents state={state} />
       </div>
     </div>
   )
 }
 
 function getView (state) {
-  var url = state.location.url()
-  return Views[url](state)
+  var View = Views[state.location.url()]
+  return (<View state={state} />)
 }

src/renderer/views/create-torrent.js

@@ -1,143 +1,125 @@
-module.exports = CreateTorrentPage
-
 const React = require('react')
 const createTorrent = require('create-torrent')
 const path = require('path')
 const prettyBytes = require('prettier-bytes')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
+const CreateTorrentErrorPage = require('./create-torrent-error-page')
 
-function CreateTorrentPage (state) {
-  var info = state.location.current()
+module.exports = class CreateTorrentPage extends React.Component {
+  render () {
+    var state = this.props.state
+    var info = state.location.current()
 
-  // Preprocess: exclude .DS_Store and other dotfiles
-  var files = info.files
-    .filter((f) => !f.name.startsWith('.'))
-    .map((f) => ({name: f.name, path: f.path, size: f.size}))
-  if (files.length === 0) return CreateTorrentErrorPage()
+    // Preprocess: exclude .DS_Store and other dotfiles
+    var files = info.files
+      .filter((f) => !f.name.startsWith('.'))
+      .map((f) => ({name: f.name, path: f.path, size: f.size}))
+    if (files.length === 0) return (<CreateTorrentErrorPage state={state} />)
 
-  // First, extract the base folder that the files are all in
-  var pathPrefix = info.folderPath
-  if (!pathPrefix) {
-    pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
-    if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
-      pathPrefix = path.dirname(pathPrefix)
+    // First, extract the base folder that the files are all in
+    var pathPrefix = info.folderPath
+    if (!pathPrefix) {
+      pathPrefix = files.map((x) => x.path).reduce(findCommonPrefix)
+      if (!pathPrefix.endsWith('/') && !pathPrefix.endsWith('\\')) {
+        pathPrefix = path.dirname(pathPrefix)
+      }
     }
-  }
 
-  // Sanity check: show the number of files and total size
-  var numFiles = files.length
-  var totalBytes = files
-    .map((f) => f.size)
-    .reduce((a, b) => a + b, 0)
-  var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
+    // Sanity check: show the number of files and total size
+    var numFiles = files.length
+    var totalBytes = files
+      .map((f) => f.size)
+      .reduce((a, b) => a + b, 0)
+    var torrentInfo = `${numFiles} files, ${prettyBytes(totalBytes)}`
 
-  // Then, use the name of the base folder (or sole file, for a single file torrent)
-  // as the default name. Show all files relative to the base folder.
-  var defaultName, basePath
-  if (files.length === 1) {
-    // Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
-    defaultName = files[0].name
-    basePath = pathPrefix
-  } else {
-    // Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
-    defaultName = path.basename(pathPrefix)
-    basePath = path.dirname(pathPrefix)
-  }
-  var maxFileElems = 100
-  var fileElems = files.slice(0, maxFileElems).map(function (file) {
-    var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
-    return (<div>{relativePath}</div>)
-  })
-  if (files.length > maxFileElems) {
-    fileElems.push(<div>+ {maxFileElems - files.length} more</div>)
-  }
-  var trackers = createTorrent.announceList.join('\n')
-  var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
+    // Then, use the name of the base folder (or sole file, for a single file torrent)
+    // as the default name. Show all files relative to the base folder.
+    var defaultName, basePath
+    if (files.length === 1) {
+      // Single file torrent: /a/b/foo.jpg -> torrent name 'foo.jpg', path '/a/b'
+      defaultName = files[0].name
+      basePath = pathPrefix
+    } else {
+      // Multi file torrent: /a/b/{foo, bar}.jpg -> torrent name 'b', path '/a'
+      defaultName = path.basename(pathPrefix)
+      basePath = path.dirname(pathPrefix)
+    }
+    var maxFileElems = 100
+    var fileElems = files.slice(0, maxFileElems).map(function (file) {
+      var relativePath = files.length === 0 ? file.name : path.relative(pathPrefix, file.path)
+      return (<div>{relativePath}</div>)
+    })
+    if (files.length > maxFileElems) {
+      fileElems.push(<div>+ {maxFileElems - files.length} more</div>)
+    }
+    var trackers = createTorrent.announceList.join('\n')
+    var collapsedClass = info.showAdvanced ? 'expanded' : 'collapsed'
 
-  return (
-    <div className='create-torrent'>
-      <h2>Create torrent {defaultName}</h2>
-      <p className='torrent-info'>
-        {torrentInfo}
-      </p>
-      <p className='torrent-attribute'>
-        <label>Path:</label>
-        <div className='torrent-attribute'>{pathPrefix}</div>
-      </p>
-      <div className={'expand-collapse ' + collapsedClass}
-        onClick={dispatcher('toggleCreateTorrentAdvanced')}>
-        {info.showAdvanced ? 'Basic' : 'Advanced'}
-      </div>
-      <div className={'create-torrent-advanced ' + collapsedClass}>
-        <p className='torrent-attribute'>
-          <label>Comment:</label>
-          <textarea className='torrent-attribute torrent-comment'></textarea>
+    return (
+      <div className='create-torrent'>
+        <h2>Create torrent {defaultName}</h2>
+        <p className='torrent-info'>
+          {torrentInfo}
         </p>
         <p className='torrent-attribute'>
-          <label>Trackers:</label>
-          <textarea className='torrent-attribute torrent-trackers'>{trackers}</textarea>
+          <label>Path:</label>
+          <div className='torrent-attribute'>{pathPrefix}</div>
         </p>
-        <p className='torrent-attribute'>
-          <label>Private:</label>
-          <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
-        </p>
-        <p className='torrent-attribute'>
-          <label>Files:</label>
-          <div>{fileElems}</div>
+        <div className={'expand-collapse ' + collapsedClass}
+          onClick={dispatcher('toggleCreateTorrentAdvanced')}>
+          {info.showAdvanced ? 'Basic' : 'Advanced'}
+        </div>
+        <div className={'create-torrent-advanced ' + collapsedClass}>
+          <p className='torrent-attribute'>
+            <label>Comment:</label>
+            <textarea className='torrent-attribute torrent-comment'></textarea>
+          </p>
+          <p className='torrent-attribute'>
+            <label>Trackers:</label>
+            <textarea className='torrent-attribute torrent-trackers'>{trackers}</textarea>
+          </p>
+          <p className='torrent-attribute'>
+            <label>Private:</label>
+            <input type='checkbox' className='torrent-is-private' value='torrent-is-private' />
+          </p>
+          <p className='torrent-attribute'>
+            <label>Files:</label>
+            <div>{fileElems}</div>
+          </p>
+        </div>
+        <p className='float-right'>
+          <button className='button-flat light' onClick={dispatcher('back')}>Cancel</button>
+          <button className='button-raised' onClick={handleOK}>Create Torrent</button>
         </p>
       </div>
-      <p className='float-right'>
-        <button className='button-flat light' onClick={dispatcher('back')}>Cancel</button>
-        <button className='button-raised' onClick={handleOK}>Create Torrent</button>
-      </p>
-    </div>
-  )
+    )
 
-  function handleOK () {
-    var announceList = document.querySelector('.torrent-trackers').value
-      .split('\n')
-      .map((s) => s.trim())
-      .filter((s) => s !== '')
-    var isPrivate = document.querySelector('.torrent-is-private').checked
-    var comment = document.querySelector('.torrent-comment').value.trim()
-    var options = {
-      // We can't let the user choose their own name if we want WebTorrent
-      // to use the files in place rather than creating a new folder.
-      // If we ever want to add support for that:
-      // name: document.querySelector('.torrent-name').value
-      name: defaultName,
-      path: basePath,
-      files: files,
-      announce: announceList,
-      private: isPrivate,
-      comment: comment
+    function handleOK () {
+      // TODO: dcposch use React refs instead
+      var announceList = document.querySelector('.torrent-trackers').value
+        .split('\n')
+        .map((s) => s.trim())
+        .filter((s) => s !== '')
+      var isPrivate = document.querySelector('.torrent-is-private').checked
+      var comment = document.querySelector('.torrent-comment').value.trim()
+      var options = {
+        // We can't let the user choose their own name if we want WebTorrent
+        // to use the files in place rather than creating a new folder.
+        // If we ever want to add support for that:
+        // name: document.querySelector('.torrent-name').value
+        name: defaultName,
+        path: basePath,
+        files: files,
+        announce: announceList,
+        private: isPrivate,
+        comment: comment
+      }
+      dispatch('createTorrent', options)
     }
-    dispatch('createTorrent', options)
   }
 }
 
-function CreateTorrentErrorPage () {
-  return (
-    <div className='create-torrent'>
-      <h2>Create torrent</h2>
-      <p className='torrent-info'>
-        <p>
-          Sorry, you must select at least one file that is not a hidden file.
-        </p>
-        <p>
-          Hidden files, starting with a . character, are not included.
-        </p>
-      </p>
-      <p className='float-right'>
-        <button className='button-flat light' onClick={dispatcher('back')}>
-          Cancel
-        </button>
-      </p>
-    </div>
-  )
-}
-
 // Finds the longest common prefix
 function findCommonPrefix (a, b) {
   for (var i = 0; i < a.length && i < b.length; i++) {

src/renderer/views/header.js

@@ -1,39 +1,42 @@
-module.exports = Header
-
 const React = require('react')
 
 const {dispatcher} = require('../lib/dispatcher')
 
-function Header (state) {
-  return (
-    <div className='header'>
-      {getTitle()}
-      <div className='nav left float-left'>
-        <i
-          className={'icon back ' + (state.location.hasBack() ? '' : 'disabled')}
-          title='Back'
-          onClick={dispatcher('back')}>
-          chevron_left
-        </i>
-        <i
-          className={'icon forward ' + (state.location.hasForward() ? '' : 'disabled')}
-          title='Forward'
-          onClick={dispatcher('forward')}>
-          chevron_right
-        </i>
+module.exports = class Header extends React.Component {
+  render () {
+    var loc = this.props.state.location
+    return (
+      <div key='header' className='header'>
+        {this.getTitle()}
+        <div className='nav left float-left'>
+          <i
+            className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
+            title='Back'
+            onClick={dispatcher('back')}>
+            chevron_left
+          </i>
+          <i
+            className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
+            title='Forward'
+            onClick={dispatcher('forward')}>
+            chevron_right
+          </i>
+        </div>
+        <div className='nav right float-right'>
+          {this.getAddButton()}
+        </div>
       </div>
-      <div className='nav right float-right'>
-        {getAddButton()}
-      </div>
-    </div>
-  )
+    )
+  }
 
-  function getTitle () {
+  getTitle () {
     if (process.platform !== 'darwin') return null
+    var state = this.props.state
     return (<div className='title ellipsis'>{state.window.title}</div>)
   }
 
-  function getAddButton () {
+  getAddButton () {
+    var state = this.props.state
     if (state.location.url() !== 'home') return null
     return (
       <i

src/renderer/views/open-torrent-address-modal.js

@@ -1,23 +1,24 @@
-module.exports = OpenTorrentAddressModal
-
 const React = require('react')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
-function OpenTorrentAddressModal (state) {
-  return (
-    <div className='open-torrent-address-modal'>
-      <p><label>Enter torrent address or magnet link</label></p>
-      <p>
-        <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
-      </p>
-      <p className='float-right'>
-        <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-        <button className='button button-raised' onClick={handleOK}>OK</button>
-      </p>
-      <script>document.querySelector('#add-torrent-url').focus()</script>
-    </div>
-  )
+module.exports = class OpenTorrentAddressModal extends React.Component {
+  render () {
+    // TODO: dcposch remove janky inline <script>
+    return (
+      <div className='open-torrent-address-modal'>
+        <p><label>Enter torrent address or magnet link</label></p>
+        <p>
+          <input id='add-torrent-url' type='text' onKeyPress={handleKeyPress} />
+        </p>
+        <p className='float-right'>
+          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
+          <button className='button button-raised' onClick={handleOK}>OK</button>
+        </p>
+        <script>document.querySelector('#add-torrent-url').focus()</script>
+      </div>
+    )
+  }
 }
 
 function handleKeyPress (e) {
@@ -26,5 +27,6 @@ function handleKeyPress (e) {
 
 function handleOK () {
   dispatch('exitModal')
+  // TODO: dcposch use React refs instead
   dispatch('addTorrent', document.querySelector('#add-torrent-url').value)
 }

src/renderer/views/player.js

@@ -1,5 +1,3 @@
-module.exports = Player
-
 const React = require('react')
 const Bitfield = require('bitfield')
 const prettyBytes = require('prettier-bytes')
@@ -9,19 +7,22 @@ const TorrentSummary = require('../lib/torrent-summary')
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
 // Shows a streaming video player. Standard features + Chromecast + Airplay
-function Player (state) {
-  // Show the video as large as will fit in the window, play immediately
-  // If the video is on Chromecast or Airplay, show a title screen instead
-  var showVideo = state.playing.location === 'local'
-  return (
-    <div
-      className='player'
-      onWheel={handleVolumeWheel}
-      onMouseMove={dispatcher('mediaMouseMoved')}>
-      {showVideo ? renderMedia(state) : renderCastScreen(state)}
-      {renderPlayerControls(state)}
-    </div>
-  )
+module.exports = class Player extends React.Component {
+  render () {
+    // Show the video as large as will fit in the window, play immediately
+    // If the video is on Chromecast or Airplay, show a title screen instead
+    var state = this.props.state
+    var showVideo = state.playing.location === 'local'
+    return (
+      <div
+        className='player'
+        onWheel={handleVolumeWheel}
+        onMouseMove={dispatcher('mediaMouseMoved')}>
+        {showVideo ? renderMedia(state) : renderCastScreen(state)}
+        {renderPlayerControls(state)}
+      </div>
+    )
+  }
 }
 
 // Handles volume change by wheel

src/renderer/views/preferences.js

@@ -1,17 +1,18 @@
-module.exports = Preferences
-
 const React = require('react')
 const remote = require('electron').remote
 const dialog = remote.dialog
 
 const {dispatch} = require('../lib/dispatcher')
 
-function Preferences (state) {
-  return (
-    <div className='preferences'>
-      {renderGeneralSection(state)}
-    </div>
-  )
+module.exports = class Preferences extends React.Component {
+  render () {
+    var state = this.props.state
+    return (
+      <div className='preferences'>
+        {renderGeneralSection(state)}
+      </div>
+    )
+  }
 }
 
 function renderGeneralSection (state) {

src/renderer/views/remove-torrent-modal.js

@@ -1,27 +1,28 @@
-module.exports = RemoveTorrentModal
-
 const React = require('react')
 
 const {dispatch, dispatcher} = require('../lib/dispatcher')
 
-function RemoveTorrentModal (state) {
-  var message = state.modal.deleteData
-    ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
-    : 'Are you sure you want to remove this torrent from the list?'
-  var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
+module.exports = class RemoveTorrentModal extends React.Component {
+  render () {
+    var state = this.props.state
+    var message = state.modal.deleteData
+      ? 'Are you sure you want to remove this torrent from the list and delete the data file?'
+      : 'Are you sure you want to remove this torrent from the list?'
+    var buttonText = state.modal.deleteData ? 'Remove Data' : 'Remove'
 
-  return (
-    <div>
-      <p><strong>{message}</strong></p>
-      <p className='float-right'>
-        <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
-        <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
-      </p>
-    </div>
-  )
+    return (
+      <div>
+        <p><strong>{message}</strong></p>
+        <p className='float-right'>
+          <button className='button button-flat' onClick={dispatcher('exitModal')}>Cancel</button>
+          <button className='button button-raised' onClick={handleRemove}>{buttonText}</button>
+        </p>
+      </div>
+    )
 
-  function handleRemove () {
-    dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
-    dispatch('exitModal')
+    function handleRemove () {
+      dispatch('deleteTorrent', state.modal.infoHash, state.modal.deleteData)
+      dispatch('exitModal')
+    }
   }
 }

src/renderer/views/torrent-list.js

@@ -1,5 +1,3 @@
-module.exports = TorrentList
-
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
 
@@ -7,21 +5,25 @@ const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
 const {dispatcher} = require('../lib/dispatcher')
 
-function TorrentList (state) {
-  var torrentRows = state.saved.torrents.map(
-    (torrentSummary) => renderTorrent(torrentSummary)
-  )
+module.exports = class TorrentList extends React.Component {
+  render () {
+    var state = this.props.state
+    var torrentRows = state.saved.torrents.map(
+      (torrentSummary) => this.renderTorrent(torrentSummary)
+    )
 
-  return (
-    <div className='torrent-list'>
-      {torrentRows}
-      <div className='torrent-placeholder'>
-        <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
+    return (
+      <div className='torrent-list'>
+        {torrentRows}
+        <div className='torrent-placeholder'>
+          <span className='ellipsis'>Drop a torrent file here or paste a magnet link</span>
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 
-  function renderTorrent (torrentSummary) {
+  renderTorrent (torrentSummary) {
+    var state = this.props.state
     var infoHash = torrentSummary.infoHash
     var isSelected = infoHash && state.selectedInfoHash === infoHash
 
@@ -46,15 +48,15 @@ function TorrentList (state) {
       <div style={style} className={classes.join(' ')}
         onContextMenu={infoHash && dispatcher('openTorrentContextMenu', infoHash)}
         onClick={infoHash && dispatcher('toggleSelectTorrent', infoHash)}>
-        {renderTorrentMetadata(torrentSummary)}
-        {infoHash ? renderTorrentButtons(torrentSummary) : ''}
-        {isSelected ? renderTorrentDetails(torrentSummary) : ''}
+        {this.renderTorrentMetadata(torrentSummary)}
+        {infoHash ? this.renderTorrentButtons(torrentSummary) : null}
+        {isSelected ? this.renderTorrentDetails(torrentSummary) : null}
       </div>
     )
   }
 
   // Show name, download status, % complete
-  function renderTorrentMetadata (torrentSummary) {
+  renderTorrentMetadata (torrentSummary) {
     var name = torrentSummary.name || 'Loading torrent...'
     var elements = [(
       <div className='name ellipsis'>{name}</div>
@@ -132,7 +134,7 @@ function TorrentList (state) {
 
   // Download button toggles between torrenting (DL/seed) and paused
   // Play button starts streaming the torrent immediately, unpausing if needed
-  function renderTorrentButtons (torrentSummary) {
+  renderTorrentButtons (torrentSummary) {
     var infoHash = torrentSummary.infoHash
 
     var playIcon, playTooltip, playClass
@@ -164,7 +166,7 @@ function TorrentList (state) {
       torrentSummary.files[torrentSummary.defaultPlayFileIndex]
     if (defaultFile && defaultFile.currentTime && !willShowSpinner) {
       var fraction = defaultFile.currentTime / defaultFile.duration
-      positionElem = renderRadialProgressBar(fraction, 'radial-progress-large')
+      positionElem = this.renderRadialProgressBar(fraction, 'radial-progress-large')
       playClass = 'resume-position'
     }
 
@@ -202,7 +204,7 @@ function TorrentList (state) {
   }
 
   // Show files, per-file download status and play buttons, and so on
-  function renderTorrentDetails (torrentSummary) {
+  renderTorrentDetails (torrentSummary) {
     var filesElement
     if (!torrentSummary.files) {
       // We don't know what files this torrent contains
@@ -219,7 +221,7 @@ function TorrentList (state) {
           if (b.file.name < a.file.name) return 1
           return 0
         })
-        .map((object) => renderFileRow(torrentSummary, object.file, object.index))
+        .map((object) => this.renderFileRow(torrentSummary, object.file, object.index))
 
       filesElement = (
         <div className='files'>
@@ -238,7 +240,7 @@ function TorrentList (state) {
   }
 
   // Show a single torrentSummary file in the details view for a single torrent
-  function renderFileRow (torrentSummary, file, index) {
+  renderFileRow (torrentSummary, file, index) {
     // First, find out how much of the file we've downloaded
     // Are we even torrenting it?
     var isSelected = torrentSummary.selections && torrentSummary.selections[index]
@@ -254,7 +256,7 @@ function TorrentList (state) {
     var positionElem
     if (file.currentTime) {
       // Radial progress bar. 0% = start from 0:00, 270% = 3/4 of the way thru
-      positionElem = renderRadialProgressBar(file.currentTime / file.duration)
+      positionElem = this.renderRadialProgressBar(file.currentTime / file.duration)
     }
 
     // Finally, render the file as a table row
@@ -294,25 +296,25 @@ function TorrentList (state) {
       </tr>
     )
   }
-}
 
-function renderRadialProgressBar (fraction, cssClass) {
-  var rotation = 360 * fraction
-  var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
-  var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
+  renderRadialProgressBar (fraction, cssClass) {
+    var rotation = 360 * fraction
+    var transformFill = {transform: 'rotate(' + (rotation / 2) + 'deg)'}
+    var transformFix = {transform: 'rotate(' + rotation + 'deg)'}
 
-  return (
-    <div className={'radial-progress ' + cssClass}>
-      <div className='circle'>
-        <div className='mask full' style={transformFill}>
-          <div className='fill' style={transformFill}></div>
-        </div>
-        <div className='mask half'>
-          <div className='fill' style={transformFill}></div>
-          <div className='fill fix' style={transformFix}></div>
+    return (
+      <div className={'radial-progress ' + cssClass}>
+        <div className='circle'>
+          <div className='mask full' style={transformFill}>
+            <div className='fill' style={transformFill}></div>
+          </div>
+          <div className='mask half'>
+            <div className='fill' style={transformFill}></div>
+            <div className='fill fix' style={transformFix}></div>
+          </div>
         </div>
+        <div className='inset'></div>
       </div>
-      <div className='inset'></div>
-    </div>
-  )
+    )
+  }
 }

src/renderer/views/unsupported-media-modal.js

@@ -1,39 +1,39 @@
-module.exports = UnsupportedMediaModal
-
 const React = require('react')
 const electron = require('electron')
 
-const {dispatch, dispatcher} = require('../lib/dispatcher')
+const {dispatcher} = require('../lib/dispatcher')
 
-function UnsupportedMediaModal (state) {
-  var err = state.modal.error
-  var message = (err && err.getMessage)
-    ? err.getMessage()
-    : err
-  var actionButton = state.modal.vlcInstalled
-    ? (<button className='button-raised' onClick={onPlay}>Play in VLC</button>)
-    : (<button className='button-raised' onClick={onInstall}>Install VLC</button>)
-  var vlcMessage = state.modal.vlcNotFound
-    ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
-    : ''
-  return (
-    <div>
-      <p><strong>Sorry, we can't play that file.</strong></p>
-      <p>{message}</p>
-      <p className='float-right'>
-        <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
-        {actionButton}
-      </p>
-      <p className='error-text'>{vlcMessage}</p>
-    </div>
-  )
+module.exports = class UnsupportedMediaModal extends React.Component {
+  render () {
+    var state = this.props.state
+    var err = state.modal.error
+    var message = (err && err.getMessage)
+      ? err.getMessage()
+      : err
+    var actionButton = state.modal.vlcInstalled
+      ? (<button className='button-raised' onClick={dispatcher('vlcPlay')}>Play in VLC</button>)
+      : (<button className='button-raised' onClick={() => this.onInstall}>Install VLC</button>)
+    var vlcMessage = state.modal.vlcNotFound
+      ? 'Couldn\'t run VLC. Please make sure it\'s installed.'
+      : ''
+    return (
+      <div>
+        <p><strong>Sorry, we can't play that file.</strong></p>
+        <p>{message}</p>
+        <p className='float-right'>
+          <button className='button-flat' onClick={dispatcher('backToList')}>Cancel</button>
+          {actionButton}
+        </p>
+        <p className='error-text'>{vlcMessage}</p>
+      </div>
+    )
+  }
 
-  function onInstall () {
+  onInstall () {
     electron.shell.openExternal('http://www.videolan.org/vlc/')
+
+    // TODO: dcposch send a dispatch rather than modifying state directly
+    var state = this.props.state
     state.modal.vlcInstalled = true // Assume they'll install it successfully
   }
-
-  function onPlay () {
-    dispatch('vlcPlay')
-  }
 }

src/renderer/views/update-available-modal.js

@@ -1,29 +1,30 @@
-module.exports = UpdateAvailableModal
-
 const React = require('react')
 const electron = require('electron')
 
 const {dispatch} = require('../lib/dispatcher')
 
-function UpdateAvailableModal (state) {
-  return (
-    <div className='update-available-modal'>
-      <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
-      <p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
-      <p className='float-right'>
-        <button className='button button-flat' onClick={handleCancel}>Skip This Release</button>
-        <button className='button button-raised' onClick={handleOK}>Show Download Page</button>
-      </p>
-    </div>
-  )
+module.exports = class UpdateAvailableModal extends React.Component {
+  render () {
+    var state = this.props.state
+    return (
+      <div className='update-available-modal'>
+        <p><strong>A new version of WebTorrent is available: v{state.modal.version}</strong></p>
+        <p>We have an auto-updater for Windows and Mac. We don't have one for Linux yet, so you'll have to download the new version manually.</p>
+        <p className='float-right'>
+          <button className='button button-flat' onClick={handleCancel}>Skip This Release</button>
+          <button className='button button-raised' onClick={handleOK}>Show Download Page</button>
+        </p>
+      </div>
+    )
 
-  function handleOK () {
-    electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
-    dispatch('exitModal')
-  }
+    function handleOK () {
+      electron.shell.openExternal('https://github.com/feross/webtorrent-desktop/releases')
+      dispatch('exitModal')
+    }
 
-  function handleCancel () {
-    dispatch('skipVersion', state.modal.version)
-    dispatch('exitModal')
+    function handleCancel () {
+      dispatch('skipVersion', state.modal.version)
+      dispatch('exitModal')
+    }
   }
 }