Update Node.js to version 20 (LTS)

Update GitHub action dependencies:
- `actions/checkout`
- `actions/setup-node`
- `actions/cache`
- `actions/upload-artifact`

.github/workflows/ci.yml

@@ -10,10 +10,10 @@ jobs:
         os:
           - ubuntu-latest
         node:
-          - '16'
+          - '20'
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         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@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
-    - uses: actions/cache@v2
+        node-version: '20'
+    - uses: actions/cache@v3
       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@v2
+    - uses: actions/upload-artifact@v4
       with:
         name: linux
         path: |
@@ -27,11 +27,11 @@ jobs:
   package_macos:
     runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
-    - uses: actions/cache@v2
+        node-version: '20'
+    - uses: actions/cache@v4
       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@v2
+    - uses: actions/upload-artifact@v4
       with:
         name: macos
         path: |
@@ -48,11 +48,11 @@ jobs:
   package_windows:
     runs-on: windows-latest
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
-    - uses: actions/cache@v2
+        node-version: '20'
+    - uses: actions/cache@v4
       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@v2
+    - uses: actions/upload-artifact@v4
       with:
         name: windows
         path: |

.github/workflows/stale.yml

@@ -12,12 +12,12 @@ jobs:
       pull-requests: write
 
     steps:
-    - uses: actions/stale@v4
+    - uses: actions/stale@v6
       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,bug,dependency,enhancement,'help wanted',question,security,meta
-        exempt-pr-labels: accepted,blocked,bug,dependency,enhancement,'help wanted',question,security,meta
+        exempt-issue-labels: accepted,blocked,dependency,security,meta
+        exempt-pr-labels: accepted,blocked,bug,dependency,security,meta
         stale-issue-label: 'stale'
         stale-pr-label: 'stale'

README.md

@@ -13,7 +13,7 @@
 
 <p align="center">
   <a href="https://discord.gg/cnXkm4Z"><img src="https://img.shields.io/discord/612575111718895616" alt="discord"></a>
-  <a href="https://travis-ci.org/webtorrent/webtorrent-desktop"><img src="https://img.shields.io/travis/webtorrent/webtorrent-desktop/master.svg" alt="travis"></a>
+  <a href="https://github.com/webtorrent/webtorrent-desktop/actions/workflows/ci.yml"><img src="https://github.com/webtorrent/webtorrent-desktop/actions/workflows/ci.yml/badge.svg" alt="GitHub CI action"></a>
   <a href="https://github.com/webtorrent/webtorrent-desktop/releases"><img src="https://img.shields.io/github/release/webtorrent/webtorrent-desktop.svg" alt="github release version"></a>
   <a href="https://github.com/webtorrent/webtorrent-desktop/releases"><img src="https://img.shields.io/github/downloads/webtorrent/webtorrent-desktop/total.svg" alt="github release downloads"></a>
   <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="Standard - JavaScript Style Guide"></a>
@@ -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,68 +21,68 @@
     "url": "https://github.com/webtorrent/webtorrent-desktop/issues"
   },
   "dependencies": {
-    "@electron/remote": "2.0.1",
+    "@electron/remote": "2.1.2",
     "airplayer": "github:webtorrent/airplayer#fix-security",
     "application-config": "2.0.0",
     "arch": "2.2.0",
     "auto-launch": "5.0.5",
-    "bitfield": "4.0.0",
+    "bitfield": "4.1.0",
     "capture-frame": "4.0.0",
-    "chokidar": "3.5.2",
+    "chokidar": "3.5.3",
     "chromecasts": "1.10.2",
-    "create-torrent": "5.0.1",
+    "create-torrent": "5.0.9",
     "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.9",
+    "iso-639-1": "2.1.15",
     "languagedetect": "2.0.0",
     "location-history": "1.1.2",
     "material-ui": "0.20.2",
-    "music-metadata": "7.11.4",
+    "music-metadata": "7.14.0",
     "network-address": "1.1.2",
-    "parse-torrent": "9.1.4",
+    "parse-torrent": "9.1.5",
     "prettier-bytes": "1.0.4",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rimraf": "3.0.2",
+    "rimraf": "4.4.0",
     "run-parallel": "1.2.0",
-    "semver": "7.3.5",
+    "semver": "7.3.8",
     "simple-concat": "1.0.1",
-    "simple-get": "4.0.0",
+    "simple-get": "4.0.1",
     "srt-to-vtt": "1.1.3",
     "vlc-command": "1.2.0",
-    "webtorrent": "1.5.6",
+    "webtorrent": "1.9.7",
     "winreg": "1.2.4"
   },
   "devDependencies": {
-    "@babel/cli": "7.15.7",
-    "@babel/core": "7.15.8",
-    "@babel/eslint-parser": "7.15.8",
-    "@babel/plugin-transform-react-jsx": "7.14.9",
+    "@babel/cli": "7.24.8",
+    "@babel/core": "7.25.2",
+    "@babel/eslint-parser": "7.25.1",
+    "@babel/plugin-transform-react-jsx": "7.25.2",
     "cross-zip": "4.0.0",
-    "depcheck": "1.4.2",
-    "electron": "15.2.0",
-    "electron-notarize": "1.1.1",
-    "electron-osx-sign": "0.5.0",
-    "electron-packager": "15.4.0",
-    "electron-winstaller": "5.0.0",
-    "gh-release": "6.0.1",
-    "minimist": "1.2.5",
-    "nodemon": "2.0.13",
-    "open": "8.3.0",
-    "plist": "3.0.4",
-    "pngjs": "6.0.0",
+    "depcheck": "1.4.7",
+    "electron": "27.3.11",
+    "electron-notarize": "1.2.2",
+    "electron-osx-sign": "0.6.0",
+    "electron-packager": "17.1.2",
+    "electron-winstaller": "5.3.1",
+    "gh-release": "7.0.2",
+    "minimist": "1.2.8",
+    "nodemon": "2.0.22",
+    "open": "8.4.2",
+    "plist": "3.1.0",
+    "pngjs": "7.0.0",
     "run-series": "1.1.9",
-    "spectron": "15.0.0",
-    "standard": "16.0.4",
-    "tape": "5.3.1"
+    "spectron": "19.0.0",
+    "standard": "17.0.0",
+    "tape": "5.8.1"
   },
   "engines": {
-    "node": "^16.0.0",
-    "npm": "^7.10.0 || ^8.0.0"
+    "node": "^16.0.0 || ^18.0.0",
+    "npm": "^7.10.0 || ^8.0.0 || ^9.0.0 || ^10.0.0"
   },
   "homepage": "https://webtorrent.io",
   "keywords": [
@@ -99,8 +99,8 @@
   "main": "index.js",
   "optionalDependencies": {
     "appdmg": "^0.6.0",
-    "electron-installer-debian": "^3.1.0",
-    "electron-installer-redhat": "^3.3.0"
+    "electron-installer-debian": "^3.2.0",
+    "electron-installer-redhat": "^3.4.0"
   },
   "private": true,
   "productName": "WebTorrent",

src/main/windows/main.js

@@ -91,11 +91,11 @@ function init (state, options) {
   })
 
   win.on('move', debounce(e => {
-    send('windowBoundsChanged', e.sender.getBounds())
+    send('windowBoundsChanged', main.win.getBounds())
   }, 1000))
 
   win.on('resize', debounce(e => {
-    send('windowBoundsChanged', e.sender.getBounds())
+    send('windowBoundsChanged', main.win.getBounds())
   }, 1000))
 
   win.on('close', e => {

src/renderer/components/header.js

@@ -11,6 +11,7 @@ class Header extends React.Component {
         onMouseMove={dispatcher('mediaMouseMoved')}
         onMouseEnter={dispatcher('mediaControlsMouseEnter')}
         onMouseLeave={dispatcher('mediaControlsMouseLeave')}
+        role='navigation'
       >
         {this.getTitle()}
         <div className='nav left float-left'>
@@ -18,6 +19,9 @@ 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>
@@ -25,6 +29,9 @@ 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>
@@ -50,6 +57,7 @@ class Header extends React.Component {
         className='icon add'
         title='Add torrent'
         onClick={dispatcher('openFiles')}
+        role='button'
       >
         add
       </i>

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

@@ -113,6 +113,10 @@ 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.substr(21), 'base64'))
+        res.end(Buffer.from(selectedSubtitle.buffer.slice(21), 'base64'))
       }).listen(0, () => {
         const port = ret.subServer.address().port
         const subtitlesUrl = 'http://' + state.server.networkAddress + ':' + port + '/'

src/renderer/lib/state.js

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

src/renderer/main.js

@@ -124,6 +124,9 @@ function onState (err, _state) {
     }
   })
 
+  // Give global trackers
+  setGlobalTrackers()
+
   // Restart everything we were torrenting last time the app ran
   resumeTorrents()
 
@@ -314,6 +317,7 @@ 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(),
 
@@ -416,6 +420,10 @@ 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/player-page.js

@@ -1,3 +1,5 @@
+/* globals MediaMetadata */
+
 const React = require('react')
 const BitField = require('bitfield').default
 const prettyBytes = require('prettier-bytes')
@@ -35,6 +37,7 @@ module.exports = class Player extends React.Component {
     tag.pause()
     tag.src = ''
     tag.load()
+    navigator.mediaSession.metadata = null
   }
 }
 
@@ -51,6 +54,28 @@ 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) {
@@ -610,6 +635,8 @@ 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>,
@@ -618,6 +645,8 @@ 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>,
@@ -626,6 +655,8 @@ 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>,
@@ -634,6 +665,8 @@ 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>
@@ -646,6 +679,8 @@ function renderPlayerControls (state) {
         key='subtitles'
         className={'icon closed-caption float-right ' + captionsClass}
         onClick={handleSubtitles}
+        role='button'
+        aria-label='Closed captions'
       >
         closed_caption
       </i>
@@ -727,6 +762,8 @@ 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

@@ -4,6 +4,7 @@ const PropTypes = require('prop-types')
 const colors = require('material-ui/styles/colors')
 const Checkbox = require('material-ui/Checkbox').default
 const RaisedButton = require('material-ui/RaisedButton').default
+const TextField = require('material-ui/TextField').default
 const Heading = require('../components/heading')
 const PathSelector = require('../components/path-selector')
 
@@ -28,6 +29,15 @@ 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 () {
@@ -229,6 +239,39 @@ class PreferencesPage extends React.Component {
     dispatch('updatePreferences', 'isFileHandler', true)
   }
 
+  setGlobalTrackers () {
+    // Align the text fields
+    const textFieldStyle = { width: '100%' }
+    const textareaStyle = { margin: 0 }
+
+    return (
+      <Preference>
+        <TextField
+          className='torrent-trackers control'
+          style={textFieldStyle}
+          textareaStyle={textareaStyle}
+          multiLine
+          rows={2}
+          rowsMax={10}
+          value={this.state.globalTrackers}
+          onChange={this.handleSetGlobalTrackers}
+        />
+      </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: colors.grey400,
@@ -254,6 +297,9 @@ class PreferencesPage extends React.Component {
           {this.setStartupCheckbox()}
           {this.soundNotificationsCheckbox()}
         </PreferencesSection>
+        <PreferencesSection title='Trackers'>
+          {this.setGlobalTrackers()}
+        </PreferencesSection>
       </div>
     )
   }

src/renderer/webtorrent.js

@@ -4,7 +4,6 @@ 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')
@@ -16,11 +15,6 @@ 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.
  */
@@ -65,6 +59,8 @@ 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) =>
@@ -99,6 +95,11 @@ 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

@@ -71,7 +71,6 @@ table {
 
 .app {
   -webkit-user-select: none;
-  -webkit-app-region: drag;
   height: 100%;
   display: flex;
   flex-flow: column;
@@ -143,6 +142,7 @@ table {
  */
 
 .header {
+  -webkit-app-region: drag;
   background: rgb(40, 40, 40);
   border-bottom: 1px solid rgb(30, 30, 30);
   height: 38px; /* vertically center OS menu buttons (OS X) */