Brightcove Workflow

Parts of the Brightcove Workflow (non-Drupal)

1. The Brightcove Player Repository (Gitlab)
2. The Brightcove Studio (Brightcove's Player builder)

The Brightcove Player Repository

Repository Structure

/scss/*.scss: the Pega Player sass files.

.gitignore and .prettierrc: configuration files (no need to touch these).

*.js: these are Brightcove plugins that will be used on the Pega Player.

brightcove.css: this is the styling for the Pega Player.

video-test.html: the file that allows a local development with Brightcove.

package.json: controls the build (mainly compiles the sass to CSS).

Local Workflow

Create a branch off of the qa branch with the feature[TICKET NUMBER] naming pattern.

Modifying the CSS

1. From the root of the Brightcove Player repository run yarn css.
2. This task will compile the sass files from the ./sass/ directory into the brightcove.css file
3. To watch the sass files, run yarn css:watch from the root.
4. Any changes within the /sass/ directory will trigger a build (yarn css).

Modifying an existing Brightcove Plugins

1. Include the local plugin within the video-test.html file.

• Note: You can do this by adding a script tag with the path to the plugin immediately after the <script src="https://players.brightcove.net/1900410236/O3FkeBiaDz_default/index.min.js"></script>. This will overwrite the plugin that is being delivered upstream from Brightcove Studio.

2. Edit the contents of the included plugin and save.
3. Refresh the video-test.html file.

Adding an Brightcove Plugin

1. Create a new file in the root with the [PLUGIN NAME]_plugin.js naming pattern.
2. In the newly created [PLUGIN NAME]_plugin.js file, create a register plugin function with the following code.

videojs.registerPlugin("[UNIQUE PLUGIN NAME]", function () {
   [PLUGIN CONTENT]
});

3. Include the local plugin within the video-test.html file. (see Modifying an existing Brightcove Plugins step 1 note).
4. Within the videoInit function in the video-test.html file, initialize the newly created plugin by placing this.[UNIQUE PLUGIN NAME](); (this method name should match the registerPlugin [UNIQUE PLUGIN NAME] value).
5. Refresh the video-test.html file.

When Work is Done

1. Push branch up to the Gitlab repository.
2. Create a MR that is pointing to the qa branch.
3. Fill in the description and add design system team members as reviewers.

Brightcove Studio Workflow

Brightcove Studio is a web based tool that allows a user to manipulate the Brightcove player settings. For the sake of this document we will only go over two specific workflows, updating an existing JS plugin and adding a new JS plugin (CSS adjustments and additions will follow a similar workflow).

Note: Access to the Brightcove Studio will be limited so most likely you will have to reach out to a team member to do the following steps

Brightcove Studio Organization

Currently there are four different Brightcove players (two for marketing and two for enablement). Each branch of Pega IT has a QA player (Pega Player (QA)) and a production player (Pega Player (Prod)) that utilizes the same code base. For example, both the Marketing and Enablement player utilizes the same qa or prod branches from the Brightcove Player repository on Gitlab. So from a developer standpoint, there is only one point (the Gitlab code) that will be distributed between multiple end points (the Brightcove studio players, which must publish updates independently).

Modifying an Existing Plugin

1. After the MR has been merged (outlined in the Local Workflow/When Work is Done section), sign into Brightcove Studio.
2. Navigate to the intended player that should reflect the changes (either the Marketing or Enablement player).

• Note: Utilize the QA Player in order to test changes in a Drupal environment, the Prod Player is only used when pushing changes live.

3. Click on the "Publish & Embed" button on the top right of the screen.
4. Press the "Publish Changes" button in the modal.
5. The changes will be visible in a couple minutes.

Adding a New Plugin

1. After the MR has been merged (outlined in the Local Workflow/When Work is Done section), sign into Brightcove Studio.
2. Navigate to the intended player that should reflect the changes (either the Marketing or Enablement player).

• Note: Utilize the QA Player in order to test changes in a Drupal environment, the Prod Player is only used when pushing changes live.

3. Go to the "Plugins" tab in the left hand menu.
4. Click on the "Scripts" tab and click on the "Add Script" button.
5. In the "Javascript URL" input you will need to put the path to the plugin within the Brightcove Player repository on Gitlab, and click "Save".

• Note: Refer to existing examples for a file path example.

6. Click on the "Publish & Embed" button on the top right of the screen.
7. Press the "Publish Changes" button in the modal.
8. The changes will be visible in a couple minutes.