Could not load UI – SvelteKit (Outdated Optimize Dep)

Support
, , ,
1

I’m running in to a strange issue where the UI is failing to load under any number of circumstances.

This is a complete Svelte page which should load the player so far as I’m aware.

<script>
  let Player;

  // Check if running on the client side
  if (typeof window !== 'undefined') {
    // Import the library only on the client side
    import('bitmovin-player')
      .then((bitmovin) => {
        Player = bitmovin.Player;

        // Set player configuration
        let conf = {
          key: import.meta.env.PLAYER_KEY
        };

        let source = {
          dash: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
          hls: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
          progressive: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
          poster: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
        };

        const playerContainer = document.getElementById('player-container');
        const player = new Player(playerContainer, conf);

        player.load(source).then(() => {
          console.log('Successfully loaded source');
        }, function () {
          console.log('Error while loading source');
        });
      })
      .catch((error) => {
        console.error('Error during dynamic import:', error);
      });
  }
</script>

<div id="player-container" />

In practice, when loading from the browser I get a net::ERR_ABORTED 504 (Outdated Optimize Dep) and an event from the Bitmovin player: Could not load UI.

Yet, my console log indicates that I’ve successfully loaded the source.

I tried separating out the UI with UI Factory, but I nevertheless run into the Outdated Optimize Dep issue.

This may not be the right place to discuss, as I’m thinking the issue has to do with Vite, which SvelteKit uses as its web compiler, given the Optimize Dep part of this whole thing. I attempted to exclude bitmovin-player and bitmovin-player-ui from the Vite dependency optimizer, but the only effect that it had was that it no longer loaded any of the libs.

Has anyone experienced anything similar, or any other ideas to try? Been banging my head on this for several hours.

TIA!

2

I figured this out using UIFactory. The issue was that I hadn’t force restarted the dev server to reoptimize files. A working example of a Player component:

<script>
	export let source;
	let Player;
	let UIFactory;

	// Check if running on the client side
	if (typeof window !== 'undefined') {
		// Import the library only on the client side
		import('bitmovin-player')
			.then((bitmovin) => {
				Player = bitmovin.Player;

				import('bitmovin-player-ui')
					.then((bitmovinui) => {
						UIFactory = bitmovinui.UIFactory;
						import('bitmovin-player-ui/dist/css/bitmovinplayer-ui.min.css')

						// Set player configuration
						let conf = {
							key: import.meta.env.PLAYER_KEY,
							ui: false
						};

						const playerContainer = document.getElementById('player-container');
						const player = new Player(playerContainer, conf);
						const playerUI = UIFactory.buildDefaultUI(player);

						player.load(source).then(() => {
							console.info('Successfully loaded source');
						}, function() {
							console.log('Error while loading source');
						});

					});

			})
			.catch((error) => {
				console.error('Error during dynamic import:', error);
			});
	}
</script>

<div id="player-container"></div>

Hope this helps someone else in the future!

3

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.