fix: not showing default text tracks over video (#4217)

This allows default tracks or tracks with a `mode`of `showing` to be seen
when they are added (as we would expect). Rather than only being seen
after the first `modechange` event (aka a selection from the menu). This is done by watching for `loadstart` on Player.

src/js/control-bar/text-track-controls/text-track-menu-item.js

@@ -38,6 +38,7 @@ class TextTrackMenuItem extends MenuItem {
     if (tracks) {
       const changeHandler = Fn.bind(this, this.handleTracksChange);
 
+      player.on(['loadstart', 'texttrackchange'], changeHandler);
       tracks.addEventListener('change', changeHandler);
       this.on('dispose', function() {
         tracks.removeEventListener('change', changeHandler);

src/js/tech/tech.js

@@ -622,11 +622,15 @@ class Tech extends Component {
 
     textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
+    tracks.addEventListener('addtrack', textTracksChanges);
+    tracks.addEventListener('removetrack', textTracksChanges);
 
     this.on('dispose', function() {
       remoteTracks.off('addtrack', handleAddTrack);
       remoteTracks.off('removetrack', handleRemoveTrack);
       tracks.removeEventListener('change', textTracksChanges);
+      tracks.removeEventListener('addtrack', textTracksChanges);
+      tracks.removeEventListener('removetrack', textTracksChanges);
 
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];