Example 3 mode app (main, admin and embedded)

Introduction

This example shows how you can implement CloudUX plugin with single user app for main and embedded panel in Media Composer, and configuration settings for admin panel in Avid MediaCentral | CloudUX.

How to run example

1. Before running

   Configure package.json file:

   "alias": "your-avid-app-id",
   "secret": "your-app-secret-from-myavid-com"
   

   Configure connection in project.config.json:

   "connection": {
       "hostIp": "your-mediacentral-cloudux-machine-address",
   	"hostPort": "",
   	"proxyPort": "443"
   }
   

2. From plugin folder in cli type:

   npm install
   npm start
   

   Go to https://localhost:443/ in browser to see main app.

   Go to https://localhost:443/admin to see config settings in admin panel.

Structure of the plugin

View for config settings tab describes in ./avid_api/config/ViewConfig and imports into index.js. Making user app and config settings tab visible at the same time:

./src/index.js:

  {
    name: appConfig.identity.appName,
    provides: ['apps'],
    create: () => AppEntry,
},
{
    name: `${appConfig.identity.configName}`,
    provides: ['configuration-settings'],
    create: () => ViewConfig_settings,
}

./src/package.json:

"provides": {
    "apps": [
      {
        "name": "example-user-app-config-settings",
        "config": {
          "id": "example-user-app-config-settings",
          "title": {
            "en": "example-user-app-config-settings"
          },
          "dockable": false,
          "inspector": false
        },
      }
    ],
    "configuration-settings": [
      {
        "name": "config_test",
        "config": {
          "id": "config_test",
          "title": {
            "en": "config_test"
          },
          "dockable": false,
          "inspector": false
        }
      }
    ]
  }

User app function describes in ./src/app/main.js. Container for config settings tab describes in ./containers/MainPaneContainer and imports into ./src/app/index.jsx.

User App

When you open MediaCentral | Cloud UX in Main-View you will see simple user application.

After clicking you will see random generated image:

Press "Print this page" button to print current page:

Configuration Settings

When you open MediaCentral | Cloud UX in Admin-View click on the wrench icon to see configuration settings. You should be able to see "Simple config settings":

You can change theme of the window to light and revert to dark:

You can enter your name into input field and after pressing "Confirm" button you will get it back:

Embedded App

For able to open Media Central | Panel for Media Composer you need to have and apply the license for it. After aplying the license be sure that Media Central | Panel for Media Composer entitlement activated for a proper User group:

To display the Embedded app in the Media Composer® you need to open it, go to 'Tools' -> 'MediaCentral | Cloud UX':

After MediaCentral | Cloud UX will dislay you should see your Embedded app like this: