fix(title-bar): component remains displayed after player reset (#8481)

When `player.reset` is called the `titleBar` component is not reset.

- Sets the properties `title` and `description` to `undefined` when `player.titleBar.update` is called so that the component is properly reset.

Author: amtins

src/js/player.js

@@ -3607,6 +3607,13 @@ class Player extends Component {
 
     this.error(null);
 
+    if (this.titleBar) {
+      this.titleBar.update({
+        title: undefined,
+        description: undefined
+      });
+    }
+
     if (isEvented(this)) {
       this.trigger('playerreset');
     }

test/unit/reset-ui.test.js

@@ -160,3 +160,24 @@ QUnit.test('Calling reset player method should reset both error display and play
 
   player.dispose();
 });
+
+QUnit.test('Calling reset player method should reset title bar', function(assert) {
+  const player = TestHelpers.makePlayer();
+
+  player.titleBar.update({
+    title: 'Title',
+    description: 'Description'
+  });
+
+  assert.notOk(player.titleBar.hasClass('vjs-hidden'), 'TitleBar is visible if not empty');
+  assert.strictEqual(player.titleBar.els.title.textContent, 'Title', 'TitleBar title element has content');
+  assert.strictEqual(player.titleBar.els.description.textContent, 'Description', 'TitleBar description element has content');
+
+  player.reset();
+
+  assert.ok(player.titleBar.hasClass('vjs-hidden'), 'TitleBar is not visible if empty');
+  assert.strictEqual(player.titleBar.els.title.textContent, '', 'TitleBar title element has no content');
+  assert.strictEqual(player.titleBar.els.description.textContent, '', 'TitleBar description element has no content');
+
+  player.dispose();
+});