# Can't render custom UI

**URL:** <https://community.bitmovin.com/t/cant-render-custom-ui/1728>\
**Category:** Support\
**Tags:** bitmovin-player, bitmovin, web, player-ui\
**Created:** [February 22, 2023, 12:12pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728 "2023-02-22T12:12:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![niakros](https://avatars.discourse-cdn.com/v4/letter/n/9e8a1a/32.png) [@niakros](https://community.bitmovin.com/u/niakros)\
**Post date:** [February 22, 2023, 12:12pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/1 "2023-02-22T12:12:49Z")

</div>

Hi!

I’m trying to render custom UI using `ui: false` flag in player configuration + initializing `new UIManager` with my custom `UIContainer`. However it doesn’t completely work as expected. Default UI is gone indeed, however another UI does not appear on the screen, despite that part of that UI appears in page structure. Would appreciate any advise…

Here’s some samples:

```auto
if (!playerRef.current) {
      playerRef.current = new Player(playerContainerRef.current, conf);

      if (!uiManagerRef.current) {
        const uiConfig = {
          metadata: {
            title: product.title,
            description: product.description,
          }
        }

        uiManagerRef.current = new UIManager(
          playerRef.current,
          playerBitmovinUi({
            onForwardClick: () => {
              smtpeControllerRef.current?.step(1)
            },
            onRewindClick: () => {
              smtpeControllerRef.current?.step(-1)
            }
          }),
          uiConfig)

        console.debug('uiManager', uiManagerRef.current)
      }

```

```auto
const playerBitmovinUi = ({
  onForwardClick,
  onRewindClick
}: PlayerBitmovinUiProps) => {

  const buildNavigationButton = (buttonText: string, onClickHandler?: () => void): Button<ButtonConfig> => {
    const navigationButton = new Button({ text: UIManager.localize(buttonText) })
    navigationButton.onClick.subscribe((event: any) => {
      onClickHandler?.()
    })

    return navigationButton
  }

  const forwardButton = buildNavigationButton('Next frame', onForwardClick)
  const rewindButton = buildNavigationButton('Previous frame', onRewindClick)
  const shareFrameButton = buildNavigationButton('Share this frame', () => { toast('Clicked on share frame...') })
  const addToFavouritesButton = buildNavigationButton('Add to Favourites', () => { toast('Clicked on Add...') })
  const advancedOptionsButton = buildNavigationButton('Advanced Options', () => { toast('Clicked on Options...') })

  return new UIContainer({
    id: 'ui-root',
    components: [
      new PlaybackToggleOverlay(),
      new ControlBar({
        components: [
          new Container({
            components: [
              new SeekBar({
                label: new SeekBarLabel(),
                enableSeekPreview: false
              }),
            ],
            cssClasses: ['controlbar-top'],
          }),
        ],
      }),
      new ControlBar({
        id: 'pause-navigation',
        cssClasses: ['controlbar-bottom'],
        components: [
          new Container({
            id: 'container-left',
            role: 'button',
            ariaLabel: 'previous frame',
            components: [
              new Component({
                id: 'arrow-left',
                tag: 'div',
                cssClass: 'icon-arrow-left'
              }),
              rewindButton as Button<ButtonConfig>
            ]
          }),
          new Container({
            id: 'container-center-button',
            components: [
              shareFrameButton,
              addToFavouritesButton,
              advancedOptionsButton
            ]
          }),
          new Container({
            id: 'container-right',
            role: 'button',
            ariaLabel: 'next frame',
            components: [
              forwardButton as Button<ButtonConfig>,
              new Component({
                tag: 'div',
                cssClass: 'icon-arrow-right'
              }),
            ]
          }),
        ]
      })
    ],
    hideDelay: 1000
  })
}

```

---

<div class="post-metadata">

**Author:** ![thomas.huertas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/thomas.huertas/32/291_2.png) [@thomas.huertas](https://community.bitmovin.com/u/thomas.huertas)\
**Post date:** [February 23, 2023, 1:29am UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/2 "2023-02-23T01:29:52Z")

</div>

hello Niakros,

thanks for posting your question. In order to start with the troubleshooting, I’d like to confirm with you if you have been able to follow the instructions from the Bitmovin Custom UI repository? [GitHub - bitmovin/bitmovin-player-ui: The Bitmovin Adaptive Streaming Player UI](https://github.com/bitmovin/bitmovin-player-ui#building-a-custom-ui-structure)

thanks for sharing your code, `UIManager` creation looks correct. Have you tried testing for example creating only one `controlbar` object?  
I am particularly interested on the `controlbar` creation, please have a look at this example, where a `controlbar-top` and -`bottom` are created as 2 containers inside the same `controlbar` object: [bitmovin-player-web-samples/customForwardRewindButtons.html at main · bitmovin/bitmovin-player-web-samples · GitHub](https://github.com/bitmovin/bitmovin-player-web-samples/blob/main/playerUi/customForwardRewindButtons.html)

Could you for example try disabling one of your `controlbar` objects (remove temporarily your controlbar bottom) does it make any difference? is the rest of the UI rendered?

these other examples of custom UIs might be useful as well: [bitmovin-player-web-samples/playerUi/tv at main · bitmovin/bitmovin-player-web-samples · GitHub](https://github.com/bitmovin/bitmovin-player-web-samples/tree/main/playerUi/tv)

looking forward to your response

---

<div class="post-metadata">

**Author:** ![niakros](https://avatars.discourse-cdn.com/v4/letter/n/9e8a1a/32.png) [@niakros](https://community.bitmovin.com/u/niakros)\
**Post date:** [February 23, 2023, 1:24pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/3 "2023-02-23T13:24:19Z")

</div>

Hi ! Thanks for the response!

First of all - I want to mention that I make the UI appear if I set `ui: true` in the PlayerConfig, which makes default UI to not be rendered with the following warning BUT! then my custom UI appears on the screen:

```auto
Could not load UI TypeError: Cannot create property 'metadata' on boolean 'true'
    at new e (bitmovinplayer-ui.js:19:7026)
    at Object.ae [as buildModernUI] (bitmovinplayer-ui.js:19:634)
    at Object.t [as buildDefaultUI] (bitmovinplayer-ui.js:18:26371)
    at e.createUI (bitmovinplayer.js?97d2:11:2039699)
    at eval (bitmovinplayer.js?97d2:11:2039509)

```

However on next component render cycle that warning becomes error which crashes my app while it’s unhandled.

Regarding the guide in official repo - yes, it was the place where I learnt how to add custom UI.  
Now to your suggestion - I disabled controllbar with my custom buttons but nothing changed, ui still is not shown, however, it appear in page structure:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/bitmovin/original/1X/b8565e84d0a587688110fb2395d371e7802ef049.png)

Also, interesting behavior: I’m working with next-js (not sure if that matters), and like other react apps it supports hot reload. So, if I follow these steps, then my UI appear until I reload the page:

1. Open page with `ui: false`. UI didn’t appeared.
2. Remove UI property from PlayerConfig and trigger hot reload: component re-rendered and two UI appeared: default one + custom
3. Bring `ui: false` back into PlayerConfig and trigger reload: component re-rendered and only custom UI appeared.  
Hope that helps to understand the possible issue, while I’m quite out of ideas

---

<div class="post-metadata">

**Author:** ![thomas.huertas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/thomas.huertas/32/291_2.png) [@thomas.huertas](https://community.bitmovin.com/u/thomas.huertas)\
**Post date:** [February 23, 2023, 9:40pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/4 "2023-02-23T21:40:15Z")

</div>

thanks for your reply Niakros,

To summarise what you share:

- If you set `ui:true` while loading the custom UI, you receive a warning, however if you do this while implementing on `Next.JS` this becomes an error.

- as a separate finding: If you apply changes on your player config and save+ hot reload , you don’t see the applied changes until the second attempt of hot reload (that involves re-setting the previous changes).

These 2 issues sound to me very related with the implementation of your application on Next.js.

For the first issue, have you checked if you are using React StrictMode?. However since `ui:false` is the recommendation when using an external custom UI, I would not encourage investing much more time on figuring this option out.

For the second finding, hmm its hard to point out why this would happen. If you build this and run it , does it also fail to load the desired UI?

is there a chance you can share this example with us? we would like to take a deeper look.  
thanks!

-Thomas

---

<div class="post-metadata">

**Author:** ![niakros](https://avatars.discourse-cdn.com/v4/letter/n/9e8a1a/32.png) [@niakros](https://community.bitmovin.com/u/niakros)\
**Post date:** [February 23, 2023, 9:54pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/5 "2023-02-23T21:54:30Z")

</div>

Hi!

Correction:

> [@thomas.huertas](#):
>
> If you set `ui:true` while loading the custom UI, you receive a warning, however if you do this while implementing on `Next.JS` this becomes an error.

The app is allways running on next js. First time the page is loaded (first component render) - I recieve warning. next component render - it appeared as error.

> [@thomas.huertas](#):
>
> as a separate finding: If you apply changes on your player config and save+ hot reload , you don’t see the applied changes until the second attempt of hot reload (that involves re-setting the previous changes).

Both hot reload have changes. first time both UI appear, second time only custom ui appear. Both behaviors are undrestodable except the fact that regular component render (triggered by page reload) fails to load UI but render triggereded but hot-reload can do this.

> [@thomas.huertas](#):
>
> For the first issue, have you checked if you are using React StrictMode?.

yes, we were by default in strict mode, but I also tried to disable it, no change

> [@thomas.huertas](#):
>
> If you build this and run it , does it also fail to load the desired UI?

No difference with dev env

> [@thomas.huertas](#):
>
> is there a chance you can share this example with us? we would like to take a deeper look.  
> thanks!

I asked the product owner and I will reach back to you as soon as Ill get his answer.

Best regards!

---

<div class="post-metadata">

**Author:** ![niakros](https://avatars.discourse-cdn.com/v4/letter/n/9e8a1a/32.png) [@niakros](https://community.bitmovin.com/u/niakros)\
**Post date:** [February 23, 2023, 11:54pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/6 "2023-02-23T23:54:47Z")

</div>

Just got green light to add you to the repo so you could see the issue itself. If you can dm me your email would be nice.

---

<div class="post-metadata">

**Author:** ![thomas.huertas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/thomas.huertas/32/291_2.png) [@thomas.huertas](https://community.bitmovin.com/u/thomas.huertas)\
**Post date:** [February 24, 2023, 1:12pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/7 "2023-02-24T13:12:43Z")

</div>

Thanks Kirill, I just sent you a DM.

---

<div class="post-metadata">

**Author:** ![thomas.huertas](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/thomas.huertas/32/291_2.png) [@thomas.huertas](https://community.bitmovin.com/u/thomas.huertas)\
**Post date:** [March 6, 2023, 2:30pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/8 "2023-03-06T14:30:17Z")

</div>

hello Kirill,

I am back from holiday and very happy to see you were able to solve your issue.  
For completeness of this thread, I am adding the solution here. Please feel free to add anything else to consider necessary.

The issue was solved by adding the `location` configuration for css and js files of the custom UI:

```auto
  location: {
    ui: '//domain.tld/path/to/bitmovinplayer-ui.js',
    ui_css: 'styles/bitmovinplayer-ui.css',
  },

```

we are confirming with our engineering team wether this configuration should become mandatory and the documentation on our GH repo should be updated.

thanks

-Thomas

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/bitmovin/original/1X/1ab86334145095b0af9c5b924fa3ae6d920b6482.png) [@system](https://community.bitmovin.com/u/system)\
**Post date:** [March 6, 2023, 3:30pm UTC](https://community.bitmovin.com/t/cant-render-custom-ui/1728/9 "2023-03-06T15:30:22Z")

</div>

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