Merge pull request #14 from clappr/fix/switch-audio-issues-safari

fix(audio): resolve muted audio issues when switching audio

Author: pedrochamberlain

src/html5_playback.js

@@ -60,7 +60,8 @@ export default class HTML5TVsPlayback extends Playback {
     if (!this.el.audioTracks) return null
 
     const track = Object.values(this.el.audioTracks).find(track => track.enabled)
-    return this._formatAudioTrack(track)
+
+    return track && this._formatAudioTrack(track)
   }
 
   get isLive() { return this.mediaType === Playback.LIVE }
@@ -331,7 +332,10 @@ export default class HTML5TVsPlayback extends Playback {
     const track = this.el.audioTracks?.getTrackById(id)
     if (!track || track.enabled) return
 
-    track.enabled = true
+    Object.values(this.el.audioTracks).forEach(track => {
+      track.enabled = track.id === id
+    })
+
     this.trigger(Events.PLAYBACK_AUDIO_CHANGED, this._formatAudioTrack(track))
   }
 

src/html5_playback.test.js

@@ -31,41 +31,28 @@ const setupTest = (options = {}) => {
 // https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList
 const createAudioTrackListStub = () => {
   const tracks = {}
-  const updateEnabledProperty = (trackId, value) => {
-    Object.values(tracks).forEach(track => {
-      if (track.id === trackId)
-        track._enabled = value
-      else
-        track._enabled = value ? false : this._enabled
-    })
-  }
-  const createAudioTrack = trackInfo => ({
-    ...trackInfo,
-    get enabled() { return this._enabled },
-    set enabled(value) { updateEnabledProperty(this.id, value) },
-  })
 
   Object.defineProperties(tracks, {
     addEventListener: { value: jest.fn() },
     getTrackById: { value: id => tracks[id] },
     0: {
-      value: createAudioTrack({
+      value: {
         id: '0',
         language: 'en',
         kind: 'description',
         label: 'English (describes video)',
-        _enabled: true,
-      }),
+        enabled: true,
+      },
       enumerable: true,
     },
     1: {
-      value: createAudioTrack({
+      value: {
         id: '1',
         language: 'en',
         kind: 'main',
         label: 'English',
-        _enabled: false,
-      }),
+        enabled: false,
+      },
       enumerable: true,
     },
     length: { value: 2 },
@@ -252,10 +239,18 @@ describe('HTML5TVsPlayback', function() {
       })
     })
 
-    test('returns null if audioTracks property doesn\'t exist on media element', () => {
+    test('does not return anything if no audio track is enabled', () => {
+      Object.values(this.playback.el.audioTracks).forEach(t => {
+        t.enabled = false
+      })
+
+      expect(this.playback.currentAudioTrack).toBeFalsy()
+    })
+
+    test('does not return anything if audioTracks property doesn\'t exist on media element', () => {
       delete window.HTMLMediaElement.prototype.audioTracks
 
-      expect(this.playback.currentAudioTrack).toBeNull()
+      expect(this.playback.currentAudioTrack).toBeFalsy()
     })
   })