buildDefaultUi not available when attempting to manage UI internally

[talena6]

I've generated my js and css and added it to the player config. However, I'm getting the following error: Could not load UI TypeError: Cannot read property 'UIFactory' of undefined

It seems that it's due to this bit in the docs: The player constructs its internal UI instance from the UIFactory.buildDefaultUI(player) factory method, so this entry point must exist for this approach to work.

But I can't figure out how to create this entry point. It seems like I'm missing an important step but I've read through the docs thoroughly several times and can't piece it together.

[Mario Guggenberger]

Hi, how did you generate your JS and CSS files? And how does the UI-related part of the player config look? Your JS build needs to export the UIFactory with a function called buildDefaultUI, which is the case when building this repo according to the docs.

[talena6]

@protyposis I generated it by running gulp build-prod. I haven't even changed anything in the UI before generating the JS/CSS, so I know that I haven't removed any functions by accident.

Here's what I did:

1. Clone this repo and npm i
2. View demo with gulp serve and build project with gulp build-prod.
3. Copy the generated js/css files from the dist folder to my project
4. Point to files in my config in my project.

[Mario Guggenberger]

Point to files in my config in my project

How do you do that? How does the UI-related part of the player config look?

[Tanya Gamarian]

@protyposis

class BitmovinPlayer extends Component {
  config = {
    location: {
      ui: 'js/bitmovinplayer-ui.min.js',
      ui_css: 'css/bitmovinplayer-ui.css'
    }
  }

  state = {
    player: null,
    source: {}
  };

  componentDidMount() {
    this.setState({
      source: setSources(this.props.sources)
    }, this.setupPlayer)
  }

  componentWillUnmount() {
    this.destroyPlayer();
  }

  setupPlayer() {
    const { source } = this.state;
    const player = new Player(document.getElementById(this.props.id), this.config);
    player.load(source).then(() => {
      this.setState({ ...this.state, player });
    }, () => {
      console.log('Error while loading source');
    });
  }

  destroyPlayer() {
    if (this.state.player != null) {
      this.state.player.destroy();
      this.setState({ ...this.state, player: null });
    }
  }

  render() {
    const { id } = this.props;

    return <div id={id} />;
  }
}

export default BitmovinPlayer;

[Mario Guggenberger]

The ui and ui_css properties need to contain http(s) URLs, not (local) file paths, to the respective files (relative URLs are fine). Please validate that the requests from the player to these files work successfully (e.g. check network tab in Chrome dev tools).

[talena6]

@protyposis I have confirmed the files are being loaded successfully in my network tab, even if I load them the way I am now, but the JS does work as expected if I point to a remote file! Thank you for your help.