MediaCentral | UX UI Plugin development

MCUX UI plugins are deployed as code bundles that consist of Javascript, HTML and CSS. All plugins are located on the server under the /plugin path and are automatically discovered at load time.

To simplify plugin development the MCUX UI Plugin toolkit contains a proxy that can be run in front of a running MCUX installation and which will inject the plugin into the normal load process. This way developers can run and test their code on top of a regular MCUX server installation without having to maintain their own special development server.

Once code should be available on the server it has to be wrapped up and installed on the correct directories on the server(s). This is usually achieved using RPM installation packages. This is described at the end of this guide.

This development process is supported starting with MediaCentral 2.6. Earlier versions have a different API and deployment model.

Prerequisites

Installation

This download package contains everything you will need for development. Note that since the bootstrap uses node modules that are not available publicly you should not delete the node_modules directory.

Using the proxy tool

The proxy tool is a simple local proxy that exposes the code in the static-plugin-example directory as if it were installed on the server. To test your code you need to run gulp webpack in the root of static-plugin-example folder, then run the server and connect it to the http port of your MCUX server.

Note: Use the HTTP endpoint of the MediaCentral URL. This is usually <hostname>:8480.

Linux or Mac:

node_modules/.bin/avid-mcux dev --backend-url <URL to the running MC instance>

Windows:

node_modules\\.bin\\avid-mcux.cmd dev --backend-url <URL to the running MC instance>

Or simply use:

npm start

This will launch the proxy which will serve your plugin to the MediaCentral|UX. Navigate to http://localhost:8090 and ensure that the plugin was loaded. The Static Plugin Example menu item should be present in the Panes Menu.

Troubleshooting

If you do not get the Static Plugin Example in the panes menu check the following to make sure the proxy is working correctly:

  • Make sure the proxy is injecting the code.
  • Check the console output for [avid-mcux] Plugins import failed
  • Reset the cache of your browser
  • Reset the layout

Development

For more details on how to add features to your MCUX UI Plugin see the development introduction

Bundling your plugin

To pack your plugin into a bundle, run:

gulp webpack

You will be required to update the entry point in your package.json file:

"main": "index.js", --> "main": "dist/index.js",

This example uses webpack as a module bundler and gulp as a building tool.

Using the platform-ui-theme

Example settings view uses styling provided by the platform-ui-theme package. This package requires styles to be written as Sass. If you change the styles.scss file, be sure to compile it into the regular .css:

npm run build-scss

When using webpack, you can require .scss files directly and the above command is not needed.

Please see platform-ui-theme's README for details.

Using the html loader

To be able to load HTML with require syntax this plugin contains loader-html as a dependency. All loaders you want to use must be named according to the template which looks like loader-<extension>.

All loaders are to be located at the git repo: https://git.devops-int.avid.com/incubator/static-loaders.

Testing

To run tests, run:

npm test

This runs the next sequence:

  • Run gulp webpack to bundle sources.
  • Start an HTTP server to point Selenium driver to.
  • Run mocha test framework, pointed to the test directory.
  • Stop the HTTP server.

Please feel free to explore the 'test/' directory and gulp test task.

CI

  • This project uses gitlab-ci.
  • Currently, linting and unit tests are implemented.
  • .gitlab-ci.yml describes all existing jobs.

Distribution

RPM building gulp task uses gulp-brass. Gulp-brass is a wrapper around rpmbuild command and SPEC file generator is done in gulp way.

Note. Make sure the rpm-build software is installed.

Creating an RPM for the module

To pack your plugin into an rpm package:

Step 1. Configure required data in the rpm/config.js file

  • specify name, version, license, description of the plugin
  • specify a directory to pack

Note. By default, dist is a directory for packaging (the directory where webpack task disposes its results). If you choose another directory, be sure that it contains package.json file and main field is correctly specified in this file.

Step 2. Run in the console:

gulp plugin-rpm-build

This way is possible if your sources are packed into a bundle before. Also, you can use combined gulp task that pack into a bundle and after that build an rpm package:

gulp pack-and-build

Step 3. Find the created rpm package in the folder your_plugin_folder/brass_build/RPMS/noarch/

Step 4. To check the created rpm package, install it within the console:

rpm -ivh your_plugin.rpm

After installation, you should see the folder with all resources configured on the step 1 in the folder:

opt/avid/share/avid/media-central/htdocs/plugins/your_plugin_name

Step 5. To uninstall the rpm package, run:

rpm -e your_plugin-version

Check that the following folder is removed from your file system:

opt/avid/share/avid/media-central/htdocs/plugins/your_plugin_name

Your package is ready for distribution!