fixes

.github/workflows/ci.yml

@@ -12,8 +12,8 @@ jobs:
         node:
           - '16'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
       - run: npm install

.github/workflows/package.yml

@@ -5,11 +5,11 @@ jobs:
   package_linux:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v2
       with:
         node-version: '16'
-    - uses: actions/cache@v3
+    - uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -17,7 +17,7 @@ jobs:
           ${{ runner.os }}-node-
     - run: npm install
     - run: npm run package -- linux
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v2
       with:
         name: linux
         path: |
@@ -27,11 +27,11 @@ jobs:
   package_macos:
     runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v2
       with:
         node-version: '16'
-    - uses: actions/cache@v3
+    - uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -39,7 +39,7 @@ jobs:
           ${{ runner.os }}-node-
     - run: npm install
     - run: npm run package -- darwin
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v2
       with:
         name: macos
         path: |
@@ -48,11 +48,11 @@ jobs:
   package_windows:
     runs-on: windows-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v2
       with:
         node-version: '16'
-    - uses: actions/cache@v3
+    - uses: actions/cache@v2
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -60,7 +60,7 @@ jobs:
           ${{ runner.os }}-node-
     - run: npm install
     - run: npm run package -- win32
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v2
       with:
         name: windows
         path: |

.github/workflows/stale.yml

@@ -12,12 +12,12 @@ jobs:
       pull-requests: write
 
     steps:
-    - uses: actions/stale@v6
+    - uses: actions/stale@v4
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         stale-issue-message: 'Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?'
         stale-pr-message: 'Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?'
-        exempt-issue-labels: accepted,blocked,dependency,security,meta
+        exempt-issue-labels: accepted,blocked,bug,dependency,enhancement,'help wanted',question,security,meta
-        exempt-pr-labels: accepted,blocked,bug,dependency,security,meta
+        exempt-pr-labels: accepted,blocked,bug,dependency,enhancement,'help wanted',question,security,meta
         stale-issue-label: 'stale'
         stale-pr-label: 'stale'

README.md

@@ -147,7 +147,7 @@ to be installed. For example on Mac, first install
 [XQuartz](http://www.xquartz.org/), then run:
 
 ```
-$ brew install wine mono
+brew install wine mono
 ```
 
 (Requires the [Homebrew](http://brew.sh/) package manager.)

package.json

@@ -21,67 +21,67 @@
     "url": "https://github.com/webtorrent/webtorrent-desktop/issues"
   },
   "dependencies": {
-    "@electron/remote": "2.0.8",
+    "@electron/remote": "2.0.1",
-    "@material-ui/core": "4.12.4",
     "airplayer": "github:webtorrent/airplayer#fix-security",
     "application-config": "2.0.0",
     "arch": "2.2.0",
     "auto-launch": "5.0.5",
-    "bitfield": "4.1.0",
+    "bitfield": "4.0.0",
     "capture-frame": "4.0.0",
-    "chokidar": "3.5.3",
+    "chokidar": "3.5.2",
     "chromecasts": "1.10.2",
-    "create-torrent": "5.0.6",
+    "create-torrent": "5.0.1",
     "debounce": "1.2.1",
     "dlnacasts": "0.1.0",
     "drag-drop": "7.2.0",
     "es6-error": "4.1.1",
     "fn-getter": "1.0.0",
-    "iso-639-1": "2.1.15",
+    "iso-639-1": "2.1.9",
     "languagedetect": "2.0.0",
     "location-history": "1.1.2",
-    "music-metadata": "7.13.0",
+    "material-ui": "0.20.2",
+    "music-metadata": "7.11.4",
     "network-address": "1.1.2",
-    "parse-torrent": "9.1.5",
+    "parse-torrent": "9.1.4",
     "prettier-bytes": "1.0.4",
-    "prop-types": "15.8.1",
+    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
     "run-parallel": "1.2.0",
-    "semver": "7.3.8",
+    "semver": "7.3.5",
     "simple-concat": "1.0.1",
-    "simple-get": "4.0.1",
+    "simple-get": "4.0.0",
     "srt-to-vtt": "1.1.3",
     "vlc-command": "1.2.0",
-    "webtorrent": "1.8.32",
+    "webtorrent": "1.5.6",
     "winreg": "1.2.4"
   },
   "devDependencies": {
-    "@babel/cli": "7.19.3",
+    "@babel/cli": "7.15.7",
-    "@babel/core": "7.19.3",
+    "@babel/core": "7.15.8",
-    "@babel/eslint-parser": "7.19.1",
+    "@babel/eslint-parser": "7.15.8",
-    "@babel/plugin-transform-react-jsx": "7.19.0",
+    "@babel/plugin-transform-react-jsx": "7.14.9",
     "cross-zip": "4.0.0",
-    "depcheck": "1.4.3",
+    "depcheck": "1.4.2",
-    "electron": "15.5.7",
+    "electron": "15.1.2",
-    "electron-notarize": "1.2.1",
+    "electron-notarize": "1.1.1",
-    "electron-osx-sign": "0.6.0",
+    "electron-osx-sign": "0.5.0",
-    "electron-packager": "15.5.2",
+    "electron-packager": "15.4.0",
     "electron-winstaller": "5.0.0",
-    "gh-release": "6.0.4",
+    "gh-release": "6.0.1",
-    "minimist": "1.2.6",
+    "minimist": "1.2.5",
-    "nodemon": "2.0.20",
+    "nodemon": "2.0.13",
-    "open": "8.4.0",
+    "open": "8.3.0",
-    "plist": "3.0.6",
+    "plist": "3.0.4",
     "pngjs": "6.0.0",
     "run-series": "1.1.9",
-    "spectron": "19.0.0",
+    "spectron": "15.0.0",
-    "standard": "17.0.0",
+    "standard": "16.0.4",
-    "tape": "5.6.1"
+    "tape": "5.3.1"
   },
   "engines": {
-    "node": "^16.0.0 || ^18.0.0",
+    "node": "^16.0.0",
     "npm": "^7.10.0 || ^8.0.0"
   },
   "homepage": "https://webtorrent.io",
@@ -113,12 +113,10 @@
     "clean": "node ./bin/clean.js",
     "gh-release": "gh-release",
     "install-system-deps": "brew install fakeroot dpkg rpm",
-    "lint": "standard",
-    "lint:fix": "standard --fix",
     "open-config": "node ./bin/open-config.js",
     "package": "node ./bin/package.js",
     "start": "npm run build && electron --no-sandbox .",
-    "test": "npm run lint && depcheck --ignores=standard,@babel/eslint-parser --ignore-dirs=build,dist",
+    "test": "standard && depcheck --ignores=standard,@babel/eslint-parser --ignore-dirs=build,dist",
     "test-integration": "npm run build && node ./test",
     "update-authors": "./bin/update-authors.sh",
     "watch": "nodemon --exec \"npm run start\" --ext js,css --ignore build/ --ignore dist/"

src/renderer/components/delete-all-torrents-modal.js

@@ -16,7 +16,6 @@ module.exports = class DeleteAllTorrentsModal extends React.Component {
         <p><strong>{message}</strong></p>
         <ModalOKCancel
           cancelText='CANCEL'
-          color='secondary'
           onCancel={dispatcher('exitModal')}
           okText={buttonText}
           onOK={handleRemove}

src/renderer/components/header.js

@@ -11,7 +11,6 @@ class Header extends React.Component {
         onMouseMove={dispatcher('mediaMouseMoved')}
         onMouseEnter={dispatcher('mediaControlsMouseEnter')}
         onMouseLeave={dispatcher('mediaControlsMouseLeave')}
-        role='navigation'
       >
         {this.getTitle()}
         <div className='nav left float-left'>
@@ -19,9 +18,6 @@ class Header extends React.Component {
             className={'icon back ' + (loc.hasBack() ? '' : 'disabled')}
             title='Back'
             onClick={dispatcher('back')}
-            role='button'
-            aria-disabled={!loc.hasBack()}
-            aria-label='Back'
           >
             chevron_left
           </i>
@@ -29,9 +25,6 @@ class Header extends React.Component {
             className={'icon forward ' + (loc.hasForward() ? '' : 'disabled')}
             title='Forward'
             onClick={dispatcher('forward')}
-            role='button'
-            aria-disabled={!loc.hasForward()}
-            aria-label='Forward'
           >
             chevron_right
           </i>
@@ -57,7 +50,6 @@ class Header extends React.Component {
         className='icon add'
         title='Add torrent'
         onClick={dispatcher('openFiles')}
-        role='button'
       >
         add
       </i>

src/renderer/components/heading.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const grey = require('@material-ui/core/colors/grey').default
+const colors = require('material-ui/styles/colors')
 
 class Heading extends React.Component {
   static get propTypes () {
@@ -19,7 +19,7 @@ class Heading extends React.Component {
   render () {
     const HeadingTag = 'h' + this.props.level
     const style = {
-      color: grey['100'],
+      color: colors.grey100,
       fontSize: 20,
       marginBottom: 15,
       marginTop: 30

src/renderer/components/modal-ok-cancel.js

@@ -1,28 +1,26 @@
 const React = require('react')
-const Button = require('@material-ui/core/Button').default
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
 
 module.exports = class ModalOKCancel extends React.Component {
   render () {
     const cancelStyle = { marginRight: 10, color: 'black' }
-    const { cancelText, color = 'primary', onCancel, okText, onOK } = this.props
+    const { cancelText, onCancel, okText, onOK } = this.props
     return (
       <div className='float-right'>
-        <Button
+        <FlatButton
           className='control cancel'
-          onClick={onCancel}
           style={cancelStyle}
-        >
+          label={cancelText}
-          {cancelText}
+          onClick={onCancel}
-        </Button>
+        />
-        <Button
+        <RaisedButton
-          autoFocus
           className='control ok'
+          primary
+          label={okText}
           onClick={onOK}
-          color={color}
+          autoFocus
-          variant='contained'
+        />
-        >
-          {okText}
-        </Button>
       </div>
     )
   }

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

@@ -1,5 +1,5 @@
 const React = require('react')
-const TextField = require('@material-ui/core/TextField').default
+const TextField = require('material-ui/TextField').default
 const { clipboard } = require('electron')
 
 const ModalOKCancel = require('./modal-ok-cancel')

src/renderer/components/path-selector.js

@@ -1,12 +1,12 @@
 const path = require('path')
 
+const colors = require('material-ui/styles/colors')
 const remote = require('@electron/remote')
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const Button = require('@material-ui/core/Button').default
+const RaisedButton = require('material-ui/RaisedButton').default
-const TextField = require('@material-ui/core/TextField').default
+const TextField = require('material-ui/TextField').default
-const grey = require('@material-ui/core/colors/grey').default
 
 // Lets you pick a file or directory.
 // Uses the system Open File dialog.
@@ -53,8 +53,10 @@ class PathSelector extends React.Component {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
     }
+    const textareaStyle = {
+      color: colors.grey50
+    }
     const textFieldStyle = {
-      color: grey['50'],
       flex: '1'
     }
     const text = this.props.value || ''
@@ -68,20 +70,13 @@ class PathSelector extends React.Component {
           {this.props.title}:
         </div>
         <TextField
-          className='control'
+          className='control' disabled id={id} value={text}
-          disabled
+          inputStyle={textareaStyle} style={textFieldStyle}
-          id={id}
-          style={textFieldStyle}
-          value={text}
         />
-        <Button
+        <RaisedButton
-          className='control'
+          className='control' label='Change' onClick={this.handleClick}
-          onClick={this.handleClick}
           style={buttonStyle}
-          variant='contained'
+        />
-        >
-          Change
-        </Button>
       </div>
     )
   }

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

@@ -16,7 +16,6 @@ module.exports = class RemoveTorrentModal extends React.Component {
         <p><strong>{message}</strong></p>
         <ModalOKCancel
           cancelText='CANCEL'
-          color='secondary'
           onCancel={dispatcher('exitModal')}
           okText={buttonText}
           onOK={handleRemove}

src/renderer/components/show-more.js

@@ -1,7 +1,7 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const Button = require('@material-ui/core/Button').default
+const RaisedButton = require('material-ui/RaisedButton').default
 
 class ShowMore extends React.Component {
   static get propTypes () {
@@ -42,13 +42,11 @@ class ShowMore extends React.Component {
     return (
       <div className='show-more' style={this.props.style}>
         {this.state.expanded ? this.props.children : null}
-        <Button
+        <RaisedButton
           className='control'
           onClick={this.handleClick}
-          variant='contained'
+          label={label}
-        >
+        />
-          {label}
-        </Button>
       </div>
     )
   }

src/renderer/controllers/torrent-list-controller.js

@@ -113,10 +113,6 @@ module.exports = class TorrentListController {
     }
   }
 
-  setGlobalTrackers (globalTrackers) {
-    ipcRenderer.send('wt-set-global-trackers', globalTrackers)
-  }
-
   // TODO: use torrentKey, not infoHash
   toggleTorrent (infoHash) {
     const torrentSummary = TorrentSummary.getByKey(this.state, infoHash)

src/renderer/lib/cast.js

@@ -144,7 +144,7 @@ function chromecastPlayer () {
           'Access-Control-Allow-Origin': '*',
           'Transfer-Encoding': 'chunked'
         })
-        res.end(Buffer.from(selectedSubtitle.buffer.slice(21), 'base64'))
+        res.end(Buffer.from(selectedSubtitle.buffer.substr(21), 'base64'))
       }).listen(0, () => {
         const port = ret.subServer.address().port
         const subtitlesUrl = 'http://' + state.server.networkAddress + ':' + port + '/'

src/renderer/lib/state.js

@@ -3,7 +3,6 @@ const path = require('path')
 const { EventEmitter } = require('events')
 
 const config = require('../../config')
-const defaultAnnounceList = require('create-torrent').announceList.map((arr) => arr[0])
 
 const SAVE_DEBOUNCE_INTERVAL = 1000
 
@@ -80,7 +79,6 @@ function getDefaultState () {
     getPlayingTorrentSummary,
     getPlayingFileSummary,
     getExternalPlayerName,
-    getGlobalTrackers,
     shouldHidePlayerControls
   }
 }
@@ -131,8 +129,7 @@ function setupStateSaved () {
       soundNotifications: true,
       autoAddTorrents: false,
       torrentsFolderPath: '',
-      highestPlaybackPriority: true,
+      highestPlaybackPriority: true
-      globalTrackers: defaultAnnounceList
     },
     torrents: config.DEFAULT_TORRENTS.map(createTorrentObject),
     torrentsToResume: [],
@@ -201,15 +198,8 @@ function shouldHidePlayerControls () {
     new Date().getTime() - this.playing.mouseStationarySince > 2000 &&
     !this.playing.mouseInControls &&
     !this.playing.isPaused &&
-    this.playing.location === 'local'
+    this.playing.location === 'local' &&
-}
+    this.playing.playbackRate === 1
-
-function getGlobalTrackers () {
-  const trackers = this.saved.prefs.globalTrackers
-  if (!trackers) {
-    return defaultAnnounceList
-  }
-  return trackers
 }
 
 async function load (cb) {

src/renderer/main.js

@@ -124,9 +124,6 @@ function onState (err, _state) {
     }
   })
 
-  // Give global trackers
-  setGlobalTrackers()
-
   // Restart everything we were torrenting last time the app ran
   resumeTorrents()
 
@@ -317,7 +314,6 @@ const dispatchHandlers = {
   preferences: () => controllers.prefs().show(),
   updatePreferences: (key, value) => controllers.prefs().update(key, value),
   checkDownloadPath,
-  updateGlobalTrackers: (trackers) => setGlobalTrackers(trackers),
   startFolderWatcher: () => controllers.folderWatcher().start(),
   stopFolderWatcher: () => controllers.folderWatcher().stop(),
 
@@ -420,10 +416,6 @@ function escapeBack () {
   }
 }
 
-function setGlobalTrackers () {
-  controllers.torrentList().setGlobalTrackers(state.getGlobalTrackers())
-}
-
 // Starts all torrents that aren't paused on program startup
 function resumeTorrents () {
   state.saved.torrents

src/renderer/pages/app.js

@@ -1,9 +1,10 @@
+const colors = require('material-ui/styles/colors')
 const createGetter = require('fn-getter')
 const React = require('react')
 
-const { ThemeProvider, createTheme } = require('@material-ui/core/styles')
+const darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme').default
-const grey = require('@material-ui/core/colors/grey').default
+const getMuiTheme = require('material-ui/styles/getMuiTheme').default
-const red = require('@material-ui/core/colors/red').default
+const MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default
 
 const Header = require('../components/header')
 
@@ -32,8 +33,17 @@ const fontFamily = process.platform === 'win32'
   ? '"Segoe UI", sans-serif'
   : 'BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif'
 
-let darkTheme
+darkBaseTheme.fontFamily = fontFamily
-let lightTheme
+darkBaseTheme.userAgent = false
+darkBaseTheme.palette.primary1Color = colors.grey50
+darkBaseTheme.palette.primary2Color = colors.grey50
+darkBaseTheme.palette.primary3Color = colors.grey600
+darkBaseTheme.palette.accent1Color = colors.redA200
+darkBaseTheme.palette.accent2Color = colors.redA400
+darkBaseTheme.palette.accent3Color = colors.redA100
+
+let darkMuiTheme
+let lightMuiTheme
 
 class App extends React.Component {
   render () {
@@ -54,66 +64,19 @@ class App extends React.Component {
     if (state.window.isFocused) cls.push('is-focused')
     if (hideControls) cls.push('hide-video-controls')
 
-    if (!darkTheme) {
+    if (!darkMuiTheme) {
-      darkTheme = createTheme({
+      darkMuiTheme = getMuiTheme(darkBaseTheme)
-        overrides: {
-          MuiButton: {
-            contained: {
-              backgroundColor: '#303030',
-              color: 'white',
-              '&:hover': {
-                backgroundColor: '#414141',
-                // Reset on touch devices, it doesn't add specificity
-                '@media (hover: none)': {
-                  backgroundColor: '#303030',
-                  color: 'white'
-                }
-              }
-            }
-          },
-          MuiCheckbox: {
-            root: {
-              padding: '0px',
-              marginRight: '16px'
-            }
-          },
-          MuiFormControlLabel: {
-            label: {
-              color: 'white',
-              fontSize: '0.875rem'
-            },
-            root: {
-              marginLeft: '0px',
-              marginRight: '0px'
-            }
-          }
-        },
-        palette: {
-          primary: {
-            main: grey['50']
-          },
-          secondary: {
-            main: grey['50']
-          },
-          type: 'dark'
-        },
-        typography: {
-          fontFamily
-        }
-      }, {
-        userAgent: false
-      })
     }
 
     return (
-      <ThemeProvider theme={darkTheme}>
+      <MuiThemeProvider muiTheme={darkMuiTheme}>
         <div className={'app ' + cls.join(' ')}>
           <Header state={state} />
           {this.getErrorPopover()}
           <div key='content' className='content'>{this.getView()}</div>
           {this.getModal()}
         </div>
-      </ThemeProvider>
+      </MuiThemeProvider>
     )
   }
 
@@ -139,32 +102,23 @@ class App extends React.Component {
     const state = this.props.state
     if (!state.modal) return
 
-    if (!lightTheme) {
+    if (!lightMuiTheme) {
-      lightTheme = createTheme({
+      const lightBaseTheme = require('material-ui/styles/baseThemes/lightBaseTheme').default
-        palette: {
+      lightBaseTheme.fontFamily = fontFamily
-          secondary: {
+      lightBaseTheme.userAgent = false
-            main: red.A200
+      lightMuiTheme = getMuiTheme(lightBaseTheme)
-          },
-          type: 'light'
-        },
-        typography: {
-          fontFamily
-        }
-      }, {
-        userAgent: false
-      })
     }
 
     const ModalContents = Modals[state.modal.id]()
     return (
-      <ThemeProvider theme={lightTheme}>
+      <MuiThemeProvider muiTheme={lightMuiTheme}>
         <div key='modal' className='modal'>
           <div key='modal-background' className='modal-background' />
           <div key='modal-content' className='modal-content'>
             <ModalContents state={state} />
           </div>
         </div>
-      </ThemeProvider>
+      </MuiThemeProvider>
     )
   }
 

src/renderer/pages/create-torrent-page.js

@@ -3,16 +3,17 @@ const path = require('path')
 const prettyBytes = require('prettier-bytes')
 const React = require('react')
 
-const Button = require('@material-ui/core/Button').default
+const { dispatch, dispatcher } = require('../lib/dispatcher')
-const TextField = require('@material-ui/core/TextField').default
+
-const Checkbox = require('@material-ui/core/Checkbox').default
+const FlatButton = require('material-ui/FlatButton').default
+const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
+const Checkbox = require('material-ui/Checkbox').default
 
 const CreateTorrentErrorPage = require('../components/create-torrent-error-page')
 const Heading = require('../components/heading')
 const ShowMore = require('../components/show-more')
 
-const { dispatch, dispatcher } = require('../lib/dispatcher')
-
 // Shows a basic UI to create a torrent, from an already-selected file or folder.
 // Includes a "Show Advanced..." button and more advanced UI.
 class CreateTorrentPage extends React.Component {
@@ -98,23 +99,20 @@ class CreateTorrentPage extends React.Component {
           {this.renderAdvanced()}
         </ShowMore>
         <div className='float-right'>
-          <Button
+          <FlatButton
             className='control cancel'
-            onClick={dispatcher('cancel')}
+            label='Cancel'
             style={{
               marginRight: 10
             }}
-          >
+            onClick={dispatcher('cancel')}
-            Cancel
+          />
-          </Button>
+          <RaisedButton
-          <Button
             className='control create-torrent-button'
+            label='Create Torrent'
+            primary
             onClick={this.handleSubmit}
-            color='primary'
+          />
-            variant='contained'
-          >
-            Create Torrent
-          </Button>
         </div>
       </div>
     )
@@ -136,6 +134,10 @@ class CreateTorrentPage extends React.Component {
       fileElems.push(<div key='more'>+ {files.length - maxFileElems} more</div>)
     }
 
+    // Align the text fields
+    const textFieldStyle = { width: '' }
+    const textareaStyle = { margin: 0 }
+
     return (
       <div key='advanced' className='create-torrent-advanced'>
         <div key='private' className='torrent-attribute'>
@@ -144,32 +146,34 @@ class CreateTorrentPage extends React.Component {
             className='torrent-is-private control'
             style={{ display: '' }}
             checked={this.state.isPrivate}
-            onChange={this.handleSetIsPrivate}
+            onCheck={this.handleSetIsPrivate}
           />
         </div>
         <div key='trackers' className='torrent-attribute'>
           <label>Trackers:</label>
           <TextField
             className='torrent-trackers control'
-            fullWidth
+            style={textFieldStyle}
-            maxRows={10}
+            textareaStyle={textareaStyle}
-            minRows={2}
+            multiLine
-            multiline
+            rows={2}
-            onChange={this.handleSetTrackers}
+            rowsMax={10}
             value={this.state.trackers}
+            onChange={this.handleSetTrackers}
           />
         </div>
         <div key='comment' className='torrent-attribute'>
           <label>Comment:</label>
           <TextField
             className='torrent-comment control'
-            fullWidth
+            style={textFieldStyle}
-            maxRows={10}
+            textareaStyle={textareaStyle}
-            minRows={2}
+            hintText='Optionally describe your torrent...'
-            multiline
+            multiLine
-            onChange={this.handleSetComment}
+            rows={2}
-            placeholder='Optionally describe your torrent...'
+            rowsMax={10}
             value={this.state.comment}
+            onChange={this.handleSetComment}
           />
         </div>
         <div key='files' className='torrent-attribute'>

src/renderer/pages/player-page.js

@@ -1,5 +1,3 @@
-/* globals MediaMetadata */
-
 const React = require('react')
 const BitField = require('bitfield').default
 const prettyBytes = require('prettier-bytes')
@@ -37,7 +35,6 @@ module.exports = class Player extends React.Component {
     tag.pause()
     tag.src = ''
     tag.load()
-    navigator.mediaSession.metadata = null
   }
 }
 
@@ -54,28 +51,6 @@ function renderMedia (state) {
   // Get the <video> or <audio> tag
   const mediaElement = document.querySelector(state.playing.type)
   if (mediaElement !== null) {
-    if (navigator.mediaSession.metadata === null && mediaElement.played.length !== 0) {
-      navigator.mediaSession.metadata = new MediaMetadata({
-        title: state.playing.fileName
-      })
-      navigator.mediaSession.setActionHandler('pause', () => {
-        dispatch('playPause')
-      })
-      navigator.mediaSession.setActionHandler('play', () => {
-        dispatch('playPause')
-      })
-      if (Playlist.hasNext(state)) {
-        navigator.mediaSession.setActionHandler('nexttrack', () => {
-          dispatch('nextTrack')
-        })
-      }
-      if (Playlist.hasPrevious(state)) {
-        navigator.mediaSession.setActionHandler('previoustrack', () => {
-          dispatch('previousTrack')
-        })
-      }
-    }
-
     if (state.playing.isPaused && !mediaElement.paused) {
       mediaElement.pause()
     } else if (!state.playing.isPaused && mediaElement.paused) {
@@ -635,8 +610,6 @@ function renderPlayerControls (state) {
       key='skip-previous'
       className={'icon skip-previous float-left ' + prevClass}
       onClick={dispatcher('previousTrack')}
-      role='button'
-      aria-label='Previous track'
     >
       skip_previous
     </i>,
@@ -645,8 +618,6 @@ function renderPlayerControls (state) {
       key='play'
       className='icon play-pause float-left'
       onClick={dispatcher('playPause')}
-      role='button'
-      aria-label={state.playing.isPaused ? 'Play' : 'Pause'}
     >
       {state.playing.isPaused ? 'play_arrow' : 'pause'}
     </i>,
@@ -655,8 +626,6 @@ function renderPlayerControls (state) {
       key='skip-next'
       className={'icon skip-next float-left ' + nextClass}
       onClick={dispatcher('nextTrack')}
-      role='button'
-      aria-label='Next track'
     >
       skip_next
     </i>,
@@ -665,8 +634,6 @@ function renderPlayerControls (state) {
       key='fullscreen'
       className='icon fullscreen float-right'
       onClick={dispatcher('toggleFullScreen')}
-      role='button'
-      aria-label={state.window.isFullScreen ? 'Exit full screen' : 'Enter full screen'}
     >
       {state.window.isFullScreen ? 'fullscreen_exit' : 'fullscreen'}
     </i>
@@ -679,8 +646,6 @@ function renderPlayerControls (state) {
         key='subtitles'
         className={'icon closed-caption float-right ' + captionsClass}
         onClick={handleSubtitles}
-        role='button'
-        aria-label='Closed captions'
       >
         closed_caption
       </i>
@@ -762,8 +727,6 @@ function renderPlayerControls (state) {
       <i
         className='icon volume-icon float-left'
         onMouseDown={handleVolumeMute}
-        role='button'
-        aria-label='Mute'
       >
         {volumeIcon}
       </i>

src/renderer/pages/preferences-page.js

@@ -1,12 +1,9 @@
 const React = require('react')
 const PropTypes = require('prop-types')
 
-const Button = require('@material-ui/core/Button').default
+const colors = require('material-ui/styles/colors')
-const Checkbox = require('@material-ui/core/Checkbox').default
+const Checkbox = require('material-ui/Checkbox').default
-const FormControlLabel = require('@material-ui/core/FormControlLabel').default
+const RaisedButton = require('material-ui/RaisedButton').default
-const TextField = require('@material-ui/core/TextField').default
-const grey = require('@material-ui/core/colors/grey').default
-
 const Heading = require('../components/heading')
 const PathSelector = require('../components/path-selector')
 
@@ -31,15 +28,6 @@ class PreferencesPage extends React.Component {
 
     this.handleSoundNotificationsChange =
       this.handleSoundNotificationsChange.bind(this)
-
-    this.handleSetGlobalTrackers =
-      this.handleSetGlobalTrackers.bind(this)
-
-    const globalTrackers = this.props.state.getGlobalTrackers().join('\n')
-
-    this.state = {
-      globalTrackers
-    }
   }
 
   downloadPathSelector () {
@@ -65,15 +53,11 @@ class PreferencesPage extends React.Component {
   openExternalPlayerCheckbox () {
     return (
       <Preference>
-        <FormControlLabel
+        <Checkbox
-          control={
+          className='control'
-            <Checkbox
+          checked={!this.props.state.saved.prefs.openExternalPlayer}
-              className='control'
-              checked={!this.props.state.saved.prefs.openExternalPlayer}
-              onChange={this.handleOpenExternalPlayerChange}
-            />
-          }
           label='Play torrent media files using WebTorrent'
+          onCheck={this.handleOpenExternalPlayerChange}
         />
       </Preference>
     )
@@ -86,15 +70,11 @@ class PreferencesPage extends React.Component {
   highestPlaybackPriorityCheckbox () {
     return (
       <Preference>
-        <FormControlLabel
+        <Checkbox
-          control={
+          className='control'
-            <Checkbox
+          checked={this.props.state.saved.prefs.highestPlaybackPriority}
-              className='control'
-              checked={this.props.state.saved.prefs.highestPlaybackPriority}
-              onChange={this.handleHighestPlaybackPriorityChange}
-            />
-          }
           label='Highest Playback Priority'
+          onCheck={this.handleHighestPlaybackPriorityChange}
         />
         <p>Pauses all active torrents to allow playback to use all of the available bandwidth.</p>
       </Preference>
@@ -136,15 +116,11 @@ class PreferencesPage extends React.Component {
   autoAddTorrentsCheckbox () {
     return (
       <Preference>
-        <FormControlLabel
+        <Checkbox
-          control={
+          className='control'
-            <Checkbox
+          checked={this.props.state.saved.prefs.autoAddTorrents}
-              className='control'
-              checked={this.props.state.saved.prefs.autoAddTorrents}
-              onChange={(e, value) => { this.handleAutoAddTorrentsChange(e, value) }}
-            />
-          }
           label='Watch for new .torrent files and add them immediately'
+          onCheck={(e, value) => { this.handleAutoAddTorrentsChange(e, value) }}
         />
       </Preference>
     )
@@ -202,13 +178,11 @@ class PreferencesPage extends React.Component {
     return (
       <Preference>
         <p>WebTorrent is not currently the default torrent app.</p>
-        <Button
+        <RaisedButton
           className='control'
           onClick={this.handleSetDefaultApp}
-          variant='contained'
+          label='Make WebTorrent the default'
-        >
+        />
-          Make WebTorrent the default
-        </Button>
       </Preference>
     )
   }
@@ -224,15 +198,11 @@ class PreferencesPage extends React.Component {
 
     return (
       <Preference>
-        <FormControlLabel
+        <Checkbox
-          control={
+          className='control'
-            <Checkbox
+          checked={this.props.state.saved.prefs.startup}
-              className='control'
-              checked={this.props.state.saved.prefs.startup}
-              onChange={this.handleStartupChange}
-            />
-          }
           label='Open WebTorrent on startup'
+          onCheck={this.handleStartupChange}
         />
       </Preference>
     )
@@ -241,15 +211,11 @@ class PreferencesPage extends React.Component {
   soundNotificationsCheckbox () {
     return (
       <Preference>
-        <FormControlLabel
+        <Checkbox
-          control={
+          className='control'
-            <Checkbox
+          checked={this.props.state.saved.prefs.soundNotifications}
-              className='control'
-              checked={this.props.state.saved.prefs.soundNotifications}
-              onChange={this.handleSoundNotificationsChange}
-            />
-          }
           label='Enable sounds'
+          onCheck={this.handleSoundNotificationsChange}
         />
       </Preference>
     )
@@ -263,37 +229,9 @@ class PreferencesPage extends React.Component {
     dispatch('updatePreferences', 'isFileHandler', true)
   }
 
-  setGlobalTrackers () {
-    return (
-      <Preference>
-        <TextField
-          className='torrent-trackers control'
-          fullWidth
-          maxRows={10}
-          minRows={2}
-          multiline
-          onChange={this.handleSetGlobalTrackers}
-          value={this.state.globalTrackers}
-        />
-      </Preference>
-    )
-  }
-
-  handleSetGlobalTrackers (e, globalTrackers) {
-    this.setState({ globalTrackers })
-
-    const announceList = globalTrackers
-      .split('\n')
-      .map((s) => s.trim())
-      .filter((s) => s !== '')
-
-    dispatch('updatePreferences', 'globalTrackers', announceList)
-    dispatch('updateGlobalTrackers', announceList)
-  }
-
   render () {
     const style = {
-      color: grey['400'],
+      color: colors.grey400,
       marginLeft: 25,
       marginRight: 25
     }
@@ -316,9 +254,6 @@ class PreferencesPage extends React.Component {
           {this.setStartupCheckbox()}
           {this.soundNotificationsCheckbox()}
         </PreferencesSection>
-        <PreferencesSection title='Trackers'>
-          {this.setGlobalTrackers()}
-        </PreferencesSection>
       </div>
     )
   }

src/renderer/pages/torrent-list-page.js

@@ -1,8 +1,8 @@
 const React = require('react')
 const prettyBytes = require('prettier-bytes')
 
-const Checkbox = require('@material-ui/core/Checkbox').default
+const Checkbox = require('material-ui/Checkbox').default
-const LinearProgress = require('@material-ui/core/LinearProgress').default
+const LinearProgress = require('material-ui/LinearProgress').default
 
 const TorrentSummary = require('../lib/torrent-summary')
 const TorrentPlayer = require('../lib/torrent-player')
@@ -124,19 +124,19 @@ module.exports = class TorrentList extends React.Component {
       const isActive = ['downloading', 'seeding'].includes(torrentSummary.status)
       return (
         <Checkbox
-          checked={isActive}
-          className={'control download ' + torrentSummary.status}
           key='download-button'
-          onChange={dispatcher('toggleTorrent', infoHash)}
+          className={'control download ' + torrentSummary.status}
-          onClick={stopPropagation}
           style={{
             display: 'inline-block',
-            marginRight: '12px',
+            width: 32
-            '& .MuiSvgIconRoot': {
-              width: '20px',
-              height: '20px'
-            }
           }}
+          iconStyle={{
+            width: 20,
+            height: 20
+          }}
+          checked={isActive}
+          onClick={stopPropagation}
+          onCheck={dispatcher('toggleTorrent', infoHash)}
         />
       )
     }
@@ -155,7 +155,7 @@ module.exports = class TorrentList extends React.Component {
       }
       return (
         <div key='progress-bar' style={styles.wrapper}>
-          <LinearProgress style={styles.progress} value={progress} variant='determinate' />
+          <LinearProgress style={styles.progress} mode='determinate' value={progress} />
         </div>
       )
     }

src/renderer/webtorrent.js

@@ -4,6 +4,7 @@ console.time('init')
 
 const crypto = require('crypto')
 const util = require('util')
+const defaultAnnounceList = require('create-torrent').announceList
 const { ipcRenderer } = require('electron')
 const fs = require('fs')
 const mm = require('music-metadata')
@@ -15,6 +16,11 @@ const config = require('../config')
 const { TorrentKeyNotFoundError } = require('./lib/errors')
 const torrentPoster = require('./lib/torrent-poster')
 
+// Force use of webtorrent trackers on all torrents
+globalThis.WEBTORRENT_ANNOUNCE = defaultAnnounceList
+  .map((arr) => arr[0])
+  .filter((url) => url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0)
+
 /**
  * WebTorrent version.
  */
@@ -59,8 +65,6 @@ init()
 function init () {
   listenToClientEvents()
 
-  ipcRenderer.on('wt-set-global-trackers', (e, globalTrackers) =>
-    setGlobalTrackers(globalTrackers))
   ipcRenderer.on('wt-start-torrenting', (e, torrentKey, torrentID, path, fileModtimes, selections) =>
     startTorrenting(torrentKey, torrentID, path, fileModtimes, selections))
   ipcRenderer.on('wt-stop-torrenting', (e, infoHash) =>
@@ -95,11 +99,6 @@ function listenToClientEvents () {
   client.on('error', (err) => ipcRenderer.send('wt-error', null, err.message))
 }
 
-// Sets the default trackers
-function setGlobalTrackers (globalTrackers) {
-  globalThis.WEBTORRENT_ANNOUNCE = globalTrackers
-}
-
 // Starts a given TorrentID, which can be an infohash, magnet URI, etc.
 // Returns a WebTorrent object. See https://git.io/vik9M
 function startTorrenting (torrentKey, torrentID, path, fileModtimes, selections) {

static/main.css

@@ -354,7 +354,7 @@ textarea,
   text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
 }
 
-.torrent .metadata .ellipsis > span:not(:last-child):not(.control)::after {
+.torrent .metadata span:not(:last-child)::after {
   content: ' • ';
   opacity: 0.7;
   padding-left: 4px;