fix: improve enabling liveui when switching sources (#7510)

We try and enable the liveui on canplay, however, we only do it the first time after the LiveTracker is enabled. This means that if you change sources, we may not catch that the liveui should be enabled. This is particularly important for browsers where native playback is used, like Safari, as the metadata may not be available until canplay.

This is a follow-up from #7114 which enabled listening to canplay but didn't account for switching videos in the same player.

src/js/live-tracker.js

@@ -56,7 +56,7 @@ class LiveTracker extends Component {
     this.on(this.player_, 'durationchange', (e) => this.handleDurationchange(e));
     // we should try to toggle tracking on canplay as native playback engines, like Safari
     // may not have the proper values for things like seekableEnd until then
-    this.one(this.player_, 'canplay', () => this.toggleTracking());
+    this.on(this.player_, 'canplay', () => this.toggleTracking());
 
     // we don't need to track live playback if the document is hidden,
     // also, tracking when the document is hidden can

test/unit/live-tracker.test.js

@@ -90,6 +90,28 @@ QUnit.module('LiveTracker', () => {
     assert.equal(liveEdgeChange, 3, 'liveedgechange fired again');
   });
 
+  QUnit.test('with canplay', function(assert) {
+    let duration = Infinity;
+
+    this.player.seekable = () => createTimeRanges(0, 30);
+    this.player.duration = () => duration;
+
+    assert.notOk(this.liveTracker.isTracking(), 'not started');
+
+    this.player.trigger('canplay');
+    assert.ok(this.liveTracker.isTracking(), 'started');
+
+    // end the video by triggering a duration change so we toggle off the liveui
+    duration = 5;
+    this.player.trigger('durationchange');
+    assert.notOk(this.liveTracker.isTracking(), 'not started');
+
+    // pretend we loaded a new source and we got a canplay
+    duration = Infinity;
+    this.player.trigger('canplay');
+    assert.ok(this.liveTracker.isTracking(), 'started');
+  });
+
   QUnit.module('tracking', {
     beforeEach() {
       this.clock = sinon.useFakeTimers();