Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make Loader component standalone npm package #148

Open
davidrojo opened this issue Oct 7, 2021 · 0 comments
Open

Make Loader component standalone npm package #148

davidrojo opened this issue Oct 7, 2021 · 0 comments
Labels
enhancement New feature or request

Comments

@davidrojo
Copy link

Is your feature request related to a problem? Please describe.
My feature request is not related with a problem, it is an improvement request for the project.

Describe the solution you'd like
This project works fine for BBB installation, but if you want to integrate this project in another project, it is not easy, as Loader is directly coupled with how the BBB playback url works. MeetingId is required to be in the url with a specific format.

The Loader component, and all its dependencies, could be in a single project and added as npm package. And this project would be just the bridge to build the bbb playback html and load the Loader with the proper parameters.

The loader component, then will have to receive the source path where the playback files are stored via props, and all the configuration required via properties.

This could be an example of how to use it.

import { Loader } from 'bbb-react-playback-loader';
import config from './my-cystom-config';
...
render() {
  const { src } = this.props;
  return <Loader src={ src } config={ config } />;
}

With this change I could build my own html page and pass the meeting source files in the html code:

<div id="root" data-src="https://example.com/my-meetings/{{ meeting.externalId }}"></div>

And also I could even have several bbb playbacks in a single page, or even load them in a modal.

<h2>Meeting 1</h2>
<div class="bbb-playback" data-src="...."></div>

<h2>Meeting 1</h2>
<div class="bbb-playback" data-src="...."></div>

Aslo, with this change this could be integrated as part of any react application.

Additional context
I propose this solution as I have BBB integrated in a custom application.

My application receives an id for a virtual class, and then internally checks that the user has access to the class, and then has to load the playback, but as I've said, this only works if the meeting id is in the url, it cannot be passed as a property loaded from a database for example.

@pedrobmarin pedrobmarin added the enhancement New feature or request label Oct 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants