fix: Resolve infinite loading state in Safari with MSE and on-demand stream type (#1257)

Closes muxinc/devextravaganza#190

### Problem
When using `prefer-playback="mse"` with `stream-type="on-demand"` on
`mux-player`, Safari experienced an infinite loading state.

## Changes
- Added `#hasLoaded` flag that is set to `true` when `loadstart` event
fires
- Only if the element has loaded return the storyboard URL, otherwise
return undefined

## Testing
When using `mux-player` with `prefer-playback="mse"` and
`stream-type="on-demand"` **in Safari**, the video now loads and plays
correctly without getting stuck. Try refreshing the page a couple of
times when testing this to make sure that there are no cache problems.

Code snippets to test:

HTML:

```html
<mux-player
  stream-type="on-demand"
  prefer-playback="mse"
  playback-id="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
/>
```

React:
```tsx
<MuxPlayer
  streamType="on-demand"
  preferPlayback="mse"
  playbackId="ihZa7qP1zY8oyLSQW9TS602VgwQvNdyIvlk9LInEGU2s"
/>
```

Author: Pintorado

packages/mux-audio/src/index.ts

@@ -67,7 +67,7 @@ class MuxAudioElement extends CustomAudioElement implements Partial<MuxMediaProp
 
   #core?: PlaybackCore;
   #loadRequested?: Promise<void> | null;
-  #defaultPlayerInitTime: number;
+  #defaultPlayerInitTime: number | undefined;
   #metadata: Readonly<Metadata> = {};
   #tokens: Tokens = {};
   #_hlsConfig?: Partial<HlsConfig>;

packages/mux-player/src/base.ts

@@ -127,7 +127,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
     playbackId: el.playbackId,
     hasSrc: !!el.playbackId || !!el.src || !!el.currentSrc,
     poster: el.poster,
-    storyboard: el.storyboard,
+    storyboard: el.media?.currentSrc && el.storyboard,
     storyboardSrc: el.getAttribute(PlayerAttributes.STORYBOARD_SRC),
     fullscreenElement: el.getAttribute(PlayerAttributes.FULLSCREEN_ELEMENT),
     placeholder: el.getAttribute('placeholder'),
@@ -285,7 +285,7 @@ const initialState = {
 const DEFAULT_EXTRA_PLAYLIST_PARAMS = { redundant_streams: true };
 
 class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
-  #defaultPlayerInitTime: number;
+  #defaultPlayerInitTime: number | undefined;
   #isInit = false;
   #tokens: Tokens = {};
   #userInactive = true;

packages/mux-player/test/player.test.js

@@ -543,7 +543,6 @@ describe('<mux-player>', () => {
 
     const muxVideo = player.media;
     const mediaPosterImage = player.mediaTheme.querySelector('media-poster-image');
-    const storyboardTrack = muxVideo.shadowRoot.querySelector("track[label='thumbnails']");
 
     await waitUntil(() => !!muxVideo.getAttribute('src'), '<mux-video> src never set');
     assert.equal(
@@ -557,7 +556,11 @@ describe('<mux-player>', () => {
       'https://image.mux.com/bos2bPV3qbFgpVPaQ900Xd5UcdM6WXTmz02WZSz01nJ00tY/thumbnail.webp?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik96VU90ek1nUWhPbkk2MDJ6SlFQbU52THR4MDBnSjJqTlBxN0tTTzAxQlozelEifQ.eyJleHAiOjE5NjE2MDE3MzYsImF1ZCI6InQiLCJzdWIiOiJib3MyYlBWM3FiRmdwVlBhUTkwMFhkNVVjZE02V1hUbXowMldaU3owMW5KMDB0WSJ9.gDe_efqmRB5E3e4ag6in8MfMK-Vn3c_3B4M-BiWw6lg2aaf2BOTv7ltxhn2cvg4G0iFi-esRjhDlHbMRTxwTGavsx8TRLFtJ8vyBzToaFQbQMrn9OZztq_XrCEwqkD8bUAVtdOT1YB606OZyy6XO-CxdMRrKMUsM-cGrfv0TxvzJjThJBY4SzFv_whtYRxqAypZojROU7IiTbqcsk_cSrRMjB7WyAOAvyPNKnr6RkVEuMJtlCtaf_e4DIJHebZUZb3JmVTG4jIWrD1QkN7uLUwCPPRvGhXwhet9JaJPyC5lmkcb9YmH-15V6GOpwSg7sDMGC3YS4aIb_RtVkan0t-w'
     );
 
-    await waitUntil(() => !!storyboardTrack.getAttribute('src'), 'storyboard <track> src never set');
+    let storyboardTrack;
+    await waitUntil(() => {
+      storyboardTrack = muxVideo.shadowRoot.querySelector("track[label='thumbnails']");
+      return storyboardTrack && !!storyboardTrack.getAttribute('src');
+    }, 'storyboard <track> src never set');
     assert.equal(
       storyboardTrack.getAttribute('src'),
       'https://image.mux.com/bos2bPV3qbFgpVPaQ900Xd5UcdM6WXTmz02WZSz01nJ00tY/storyboard.vtt?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik96VU90ek1nUWhPbkk2MDJ6SlFQbU52THR4MDBnSjJqTlBxN0tTTzAxQlozelEifQ.eyJleHAiOjE5NjE2MDE3NzcsImF1ZCI6InMiLCJzdWIiOiJib3MyYlBWM3FiRmdwVlBhUTkwMFhkNVVjZE02V1hUbXowMldaU3owMW5KMDB0WSJ9.aVd0dsOJUVeQko3BWd9YEhL41Eytf_ZfaBeNzHSSUqU_gREa_jJEVTlRfuiE4g71cKJLSiVTKP7f-F7Txh6DlL8E2SkonfIPB2H0f_3DQxYLso2E8qI4zuJkyxKORbQFLAEB_vSE-2lMbrHXfdpQhv6SrVyu6di9ku0LpFpoyz-_7fVJICr8nhlsqOGt66AYcaa99TXoZ582FWzBaePmWw-WWKYsLvtNjLS9UoxbdVaBRwNylohvhh-i1Y9dNilyNooJ7O8Cj4GuMjeh1pCj0BOrGagxrWrswm3HjUVNUqFq5JCWnJCxgjjwiV4RLZg_4z7gkBXyX7H2-i1dKA3Cpw&format=webp'

packages/mux-video/src/base.ts

@@ -104,7 +104,7 @@ export class MuxVideoBaseElement extends CustomVideoElement implements IMuxVideo
 
   #core?: PlaybackCore;
   #loadRequested?: Promise<void> | null;
-  #defaultPlayerInitTime: number;
+  #defaultPlayerInitTime: number | undefined;
   #metadata: Metadata = {};
   #tokens: Tokens = {};
   #_hlsConfig?: Partial<HlsConfig>;