Merge pull request #1712 from hicom150/change_audio_tracks

Add support for multiple audio tracks

src/renderer/controllers/audio-tracks-controller.js

@@ -0,0 +1,17 @@
+const { dispatch } = require('../lib/dispatcher')
+
+module.exports = class AudioTracksController {
+ constructor (state) {
+ this.state = state
+ }
+
+ selectAudioTrack (ix) {
+ this.state.playing.audioTracks.selectedIndex = ix
+ dispatch('skip', 0.2) // HACK: hardcoded seek value for smooth audio change
+ }
+
+ toggleAudioTracksMenu () {
+ const audioTracks = this.state.playing.audioTracks
+ audioTracks.showMenu = !audioTracks.showMenu
+ }
+}

src/renderer/lib/state.js

@@ -105,6 +105,11 @@ function getDefaultPlayState () {
  selectedIndex: -1, /* current subtitle track */
  showMenu: false /* popover menu, above the video */
  },
+ audioTracks: {
+ tracks: [],
+ selectedIndex: 0, /* current audio track */
+ showMenu: false /* popover menu, above the video */
+ },
  aspectRatio: 0 /* aspect ratio of the video */
  }
 }

src/renderer/main.js

@@ -99,6 +99,10 @@ function onState (err, _state) {
  const SubtitlesController = require('./controllers/subtitles-controller')
  return new SubtitlesController(state)
  }),
+ audioTracks: createGetter(() => {
+ const AudioTracksController = require('./controllers/audio-tracks-controller')
+ return new AudioTracksController(state)
+ }),
  torrent: createGetter(() => {
  const TorrentController = require('./controllers/torrent-controller')
  return new TorrentController(state)
@@ -281,6 +285,10 @@ const dispatchHandlers = {
  checkForSubtitles: () => controllers.subtitles().checkForSubtitles(),
  addSubtitles: (files, autoSelect) => controllers.subtitles().addSubtitles(files, autoSelect),
 
+ // Audio Tracks
+ selectAudioTrack: (index) => controllers.audioTracks().selectAudioTrack(index),
+ toggleAudioTracksMenu: () => controllers.audioTracks().toggleAudioTracksMenu(),
+
  // Local media: <video>, <audio>, external players
  mediaStalled: () => controllers.media().mediaStalled(),
  mediaError: (err) => controllers.media().mediaError(err),

src/renderer/pages/player-page.js

@@ -95,6 +95,13 @@ function renderMedia (state) {
  delete file.selectedSubtitle
  }
 
+ // Switch to selected audio track
+ const audioTracks = mediaElement.audioTracks || []
+ for (let j = 0; j < audioTracks.length; j++) {
+ const isSelectedTrack = j === state.playing.audioTracks.selectedIndex
+ audioTracks[j].enabled = isSelectedTrack
+ }
+
  state.playing.volume = mediaElement.volume
  }
 
@@ -167,6 +174,18 @@ function renderMedia (state) {
 
  // As soon as we know the video dimensions, resize the window
  dispatch('setDimensions', dimensions)
+
+ // set audioTracks
+ const tracks = []
+ for (let i = 0; i < mediaElement.audioTracks.length; i++) {
+ tracks.push({
+ label: mediaElement.audioTracks[i].label || `Track ${i + 1}`,
+ language: mediaElement.audioTracks[i].language
+ })
+ }
+
+ state.playing.audioTracks.tracks = tracks
+ state.playing.audioTracks.selectedIndex = 0
  }
 
  // check if we can decode audio track
@@ -481,6 +500,27 @@ function renderSubtitleOptions (state) {
  )
 }
 
+function renderAudioTrackOptions (state) {
+ const audioTracks = state.playing.audioTracks
+ if (!audioTracks.tracks.length || !audioTracks.showMenu) return
+
+ const items = audioTracks.tracks.map(function (track, ix) {
+ const isSelected = state.playing.audioTracks.selectedIndex === ix
+ return (
+ <li key={ix} onClick={dispatcher('selectAudioTrack', ix)}>
+ <i className='icon'>{'radio_button_' + (isSelected ? 'checked' : 'unchecked')}</i>
+ {track.label}
+ </li>
+ )
+ })
+
+ return (
+ <ul key='audio-track-options' className='options-list'>
+ {items}
+ </ul>
+ )
+}
+
 function renderPlayerControls (state) {
  const positionPercent = 100 * state.playing.currentTime / state.playing.duration
  const playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 3px)' }
@@ -489,6 +529,9 @@ function renderPlayerControls (state) {
  : state.playing.subtitles.selectedIndex >= 0
  ? 'active'
  : ''
+ const multiAudioClass = state.playing.audioTracks.tracks.length > 1
+ ? 'active'
+ : 'disabled'
  const prevClass = Playlist.hasPrevious(state) ? '' : 'disabled'
  const nextClass = Playlist.hasNext(state) ? '' : 'disabled'
 
@@ -553,6 +596,14 @@ function renderPlayerControls (state) {
  >
  closed_caption
  </i>
+ ), (
+ <i
+ key='audio-tracks'
+ className={'icon multi-audio float-right ' + multiAudioClass}
+ onClick={handleAudioTracks}
+ >
+ library_music
+ </i>
  ))
  }
 
@@ -659,6 +710,7 @@ function renderPlayerControls (state) {
  {elements}
  {renderCastOptions(state)}
  {renderSubtitleOptions(state)}
+ {renderAudioTrackOptions(state)}
  </div>
  )
 
@@ -702,6 +754,10 @@ function renderPlayerControls (state) {
  dispatch('toggleSubtitlesMenu')
  }
  }
+
+ function handleAudioTracks (e) {
+ dispatch('toggleAudioTracksMenu')
+ }
 }
 
 // Renders the loading bar. Shows which parts of the torrent are loaded, which

static/main.css

@@ -623,6 +623,11 @@ body.drag .app::after {
  margin-top: 6px;
 }
 
+.player .controls .icon.multi-audio {
+ font-size: 26px;
+ margin-top: 6px;
+}
+
 .player .controls .icon.fullscreen {
  font-size: 26px;
  margin-right: 15px;