Nextjs App crashes when ui=true

Support
,
1

Got this error in my Nextjs App.

5734-7d20cb167a8dbd4f.js:1 TypeError: Cannot create property ‘metadata’ on boolean ‘true’
at new e (2723-75573e019eea807d.js:1:255807)
at e.buildModernUI (2723-75573e019eea807d.js:1:253430)
at e.buildDefaultUI (2723-75573e019eea807d.js:1:252959)
at 2723-75573e019eea807d.js:1:273153
at aW (fd9d1056-5524b1ed0f4887ec.js:1:73244)
at oe (fd9d1056-5524b1ed0f4887ec.js:1:84685)
at e (fd9d1056-5524b1ed0f4887ec.js:1:85827)
at e (fd9d1056-5524b1ed0f4887ec.js:1:86113)
at e (fd9d1056-5524b1ed0f4887ec.js:1:85814)

const config = {
key: process.env.NEXT_PUBLIC_BITMOVIN_KEY!,
playback: {
muted: autoplay ?? false,
autoplay: autoplay ?? false,
seeking: true,
pictureInPicture: false,
},
logs: {
level: LogLevel.DEBUG,
bitmovin: true,
},
ui: true,
style: {
aspectratio: isMobile ? “4:3” : “16:9”,
controls: true,
fullscreen: isMobile,
},
};

const handlePlayerRef = (player: PlayerAPI) => {
playerRef.current = player;
console.log(“Player initialized”, player);
if (player && !isPlaying && player.isPlaying()) {
player.pause();
}
player.on(PlayerEvent.Play, () => {});
player.on(PlayerEvent.Paused, () => {});
player.on(PlayerEvent.PlaybackFinished, () => {
player.seek(0);
});
};

const source = {
hls: media,
poster: poster,
};
return (

<div
ref={containerRef}
id={id}
style={{
position: “relative”,
maxWidth: “100%”,
height: height || “100%”,
background: “black”,
display: “flex”,
justifyContent: “center”,
flexDirection: “column”,
}}
>



);
}

2

Hi @raysamtob, welcome to our community.

Looking at your player configuration, it looks like you have a wrong property passed to the ui property.

const config = {
  key: process.env.NEXT_PUBLIC_BITMOVIN_KEY!,
  ...
  ui: true, // <-- This should be an object representing the UIConfig instead of a boolean
  style: {
    aspectratio: isMobile ? “4:3” : “16:9”,
    controls: true,
    fullscreen: isMobile,
  },
};

If the ui property is not set to false it should contain an object which can contain customization options for our UI. See available options here in our UIConfig documentation.

If you do not want to customize our UI, you can just omit the ui property and it should work then.

Hope that helps,
BR David

1 Like
3

Thanks . Removing the ui property resokce the issue.

Please can i get an example on how to customise the UI

4

We have recently revamped our UI documentation, providing more details on customizing our UI. You can find it here: Customising the UI

Please feel free to contact us if you have any questions or require further input.

5

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