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

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

@@ -36,6 +36,7 @@ class TextTrackMenuItem extends MenuItem {
     this.track = track;
     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

@@ -595,11 +595,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];