simplified workaround

Author: Pintorado

packages/mux-player/src/base.ts

@@ -289,6 +289,7 @@ class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
   #isInit = false;
   #tokens: Tokens = {};
   #userInactive = true;
+  #hasLoaded = false;
   #hotkeys = new AttributeTokenList(this, 'hotkeys');
   #state: Partial<MuxTemplateProps> = {
     ...initialState,
@@ -378,29 +379,13 @@ class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
 
     // NOTE: Make sure we re-render when stream type changes to ensure other props-driven
     // template details get updated appropriately (e.g. thumbnails track) (CJP)
-    this.media?.addEventListener('streamtypechange', () => {
-      // After stream type is determined from manifest, generate storyboard URL if needed
-      // This avoids Safari timing issues with dynamic URL generation during initial render
-      if (
-        this.streamType === StreamTypes.ON_DEMAND &&
-        this.preferPlayback === PlaybackTypes.MSE &&
-        !this.#cachedStoryboardUrl
-      ) {
-        const { tokens } = this;
-        if (!this.audio && this.playbackId && (!tokens.playback || tokens.storyboard)) {
-          this.#cachedStoryboardUrl = getStoryboardURLFromPlaybackId(this.playbackId, {
-            customDomain: this.customDomain,
-            token: tokens.storyboard,
-            programStartTime: this.programStartTime,
-            programEndTime: this.programEndTime,
-          });
-        }
-      }
-      this.#render();
-    });
+    this.media?.addEventListener('streamtypechange', () => this.#render());
 
     // NOTE: Make sure we re-render when <source> tags are appended so hasSrc is updated.
-    this.media?.addEventListener('loadstart', () => this.#render());
+    this.media?.addEventListener('loadstart', () => {
+      this.#hasLoaded = true;
+      this.#render();
+    });
   }
 
   #setupCSSProperties() {
@@ -1008,20 +993,19 @@ class MuxPlayerElement extends VideoApiElement implements IMuxPlayerElement {
     }
   }
 
-  #cachedStoryboardUrl?: string;
   /**
    * Return the storyboard URL when a playback ID or storyboard-src is provided,
    * we aren't an audio player and the stream-type isn't live.
    */
   get storyboard() {
+    // NOTE: We don't want to return a storyboard until the media has loaded,
+    // otherwise iOS Safari would stall playback.
+    if (!this.#hasLoaded) return undefined;
+
     const { tokens } = this;
     // If the storyboardSrc has been explicitly set, assume it should be used
     if (this.storyboardSrc && !tokens.storyboard) return this.storyboardSrc;
 
-    const isOnDemandMse = this.streamType === StreamTypes.ON_DEMAND && this.preferPlayback === PlaybackTypes.MSE;
-    if (isOnDemandMse) {
-      return this.#cachedStoryboardUrl;
-    }
     if (
       // NOTE: Some audio use cases may have a storyboard (e.g. it's an audio+video stream being played *as* audio)
       // Consider supporting cases (CJP)