From 0f2ee89df96baecbd3f0b62e59e8860993bd2461 Mon Sep 17 00:00:00 2001
From: Joey Parrish <joeyparrish@users.noreply.github.com>
Date: Fri, 18 Oct 2024 01:00:15 -0700
Subject: [PATCH] fix(UI): Fix auto-load with source tags (#7430)

In 4425dca2, we broke auto-loading content with `<source>` tags or
`src=` in the UI, such that we tried to load content before we had
attached a video element. That was almost a year ago. Oops!

This also adds an appropriate unit test.
---
 test/ui/ui_unit.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++
 ui/ui.js           |  4 ++--
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/test/ui/ui_unit.js b/test/ui/ui_unit.js
index be1ca808f..72d757caf 100644
--- a/test/ui/ui_unit.js
+++ b/test/ui/ui_unit.js
@@ -70,6 +70,59 @@ describe('UI', () => {
       });
     });
 
+    describe('set up with one container and src=', () => {
+      /** @type {!HTMLElement} */
+      let container;
+      /** @type {!HTMLVideoElement} */
+      let video;
+
+      beforeEach(async () => {
+        container =
+          /** @type {!HTMLElement} */ (document.createElement('div'));
+        document.body.appendChild(container);
+
+        video = shaka.test.UiUtils.createVideoElement();
+        video.src = 'test:sintel_multi_lingual_multi_res';
+        container.appendChild(video);
+
+        await UiUtils.createUIThroughDOMAutoSetup(
+            [container], [video]);
+      });
+
+      it('has loaded the video', () => {
+        expect(video.duration).not.toBeNaN();
+        expect(video.duration).not.toBe(0);
+      });
+    });
+
+    describe('set up with one container and source element', () => {
+      /** @type {!HTMLElement} */
+      let container;
+      /** @type {!HTMLVideoElement} */
+      let video;
+
+      beforeEach(async () => {
+        container =
+          /** @type {!HTMLElement} */ (document.createElement('div'));
+        document.body.appendChild(container);
+
+        video = shaka.test.UiUtils.createVideoElement();
+        container.appendChild(video);
+
+        const sourceElement = shaka.util.Dom.createSourceElement(
+            'test:sintel_multi_lingual_multi_res');
+        video.appendChild(sourceElement);
+
+        await UiUtils.createUIThroughDOMAutoSetup(
+            [container], [video]);
+      });
+
+      it('has loaded the video', () => {
+        expect(video.duration).not.toBeNaN();
+        expect(video.duration).not.toBe(0);
+      });
+    });
+
     describe('set up with several containers', () => {
       /** @type {!HTMLElement} */
       let container1;
diff --git a/ui/ui.js b/ui/ui.js
index 336d62254..7569fac9a 100644
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -497,6 +497,8 @@ shaka.ui.Overlay = class {
       video.removeChild(source);
     }
 
+    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
+
     for (const url of urls) {
       try { // eslint-disable-next-line no-await-in-loop
         await ui.getControls().getPlayer().load(url);
@@ -505,8 +507,6 @@ shaka.ui.Overlay = class {
         shaka.log.error('Error auto-loading asset', e);
       }
     }
-
-    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
   }