OVP UI

Online Video Platform UI written in React + Redux

Development

Prequisities

You will need to install NPM and Node if you have not already. You can follow the documentation found here or use the quick start guide below.

NODE QUICK START

• Install NPM: npm install -g npm
• Install NVM: OSX | WIN
• Install Node: nvm install node

Create npm token

1. Visit npm. Create an account if you have not, and log in.

2. If you do not already have an invitation to join the flowplayer organization for this account, bug the CTO.

3. Follow the NPM documentation guide to generate a legacy read-only access token.

4. Create a file in the project root named .npmrc with the following content (but with the actual token):

@flowplayer:registry=https://npm.pkg.github.com/
//registry.npmjs.org/:_authToken=YOUR_AUTH_TOKEN

Add FontAwesome Pro Token

1. Similarly, you need to set the FontAwesome pro token in your .npmrc file. Request the token from an administrator.

2. edit the project .npmrc and add the following (but with the actual token):

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=FONTAWESOME_ACCESS_TOKEN

Setting up

• Clone the repository: git clone https://github.com/flowplayer/ovp-ui.git
• Install packages: npm install

SSL Certificates

Generating

1. Install mkcert from Homebrew

brew install mkcert

2. Install a new Root CA

mkcert -install

3. Generate a new key for these domains

cd ../ && \
mkdir ssl && \
cd ssl && \
mkcert localhost local.wowza.com local.flowplayer.com

Local dev Hosts file Setup

1. Open /etc/hosts as sudo
2. Add the following lines somewhere below the localhost definition:

127.0.0.1 local.wowza.com
127.0.0.1 local.flowplayer.com

Running development server

• npm start if you want to connect to staging environment, or API_ORIGIN=http://localhost:3000 npm start if you want to connect to localhost (you may add the API_ORIGIN=http://localhost:3000 as Environment parameter in intellij Run/Debug Configuration)
• open https://dev.wowza.com:3333 or https://dev.flowplayer.com:3333

Run End-to-End Tests Locally

• Ensure the app is started by using npm start
• Ensure you have a local .env file (this is git ignored) with an APP_USER and E2E_PASSWORD
  • Ask a contributor to this repo on information to get access to these
• Run npm run e2e to run the end-to-end tests

Repository Contribution Guide

Read the full guide here

TLDR:

• OVP-UI uses a feature branch workflow strategy
• Follow the Conventional Commits specification
• Use descriptive language in commit messages.

Redux Data Flow

The OVP application is currently in the process of a full refactor. The documentation below may not reflect the status of all files you encounter.

Please refer to the Redux Guide for React and the Redux v4 Documentation for more details.

File Structure

Read the full guide here

TLDR:

• Adhere to the colocation principle and group related files together as often as possible
• When a react component is used by more than one component, migrate it to the ./components/ folder
• When a utility script is used by more than one component, migrate it to the ./common folder

Code Style

The OVP application is currently in the process of a full refactor. The documentation below may not reflect the status of all files you encounter.

TLDR:

• Follow the naming convention guide
• Prefer named exports for modules and avoide default exports
• ESLint will fix formatting issues automatically when possible. See links below for rules reference.

Naming Conventions
Please refer to this excellent guide by Sathish Kumar and adhere to the practices described there.

Code Style
OVP-UI adheres to the several ESLint recommended rule presets (below) in combination with bespoke rules in place to pre-empt common arguments, such as the "tabs vs spaces" meme. Refer to the application ESlint config file for more details.

Preset Docs
ESLint with Typescript recommended preset
Import Plugin recommended preset
JSX A11y recommended preset
ESLint React recommended preset ESlint React Hooks preset Storybook ESLint recommended preset (only aplies to .stories and .story files)

Preferred Programming Patterns

The OVP application is currently in the process of a full refactor. The documentation below may not reflect the status of all files you encounter.

TLDR:

• Prefer Typescript over Javascript
• Prefer Functional Programming over Object Oriented
• Prefer Declarative Over Imperative Patterns
• Prefer Composition Over Inheritance Patterns
• Follow Single Responsibility Principle

Programming Fundamentals Typescript
While application legacy code is in vanilla javscript, the Typescript transpiler is installed and Typescript development is supported. Thus, new features should be developed in Typescript while we incrementally migrate legacy features.

Functional Programming
Prefer Functional Programming vs Object-Oriented Patterns. Functional programming is much easier to read and to test than the old class-based approach. Nonetheless (and perhaps paradoxically), continue to adhere to SOLID principles within reason, most notably the Single Responsibility Principle. See also React (functional) component guide.

Declarative Programming
Prefer declarative programming patterns over imperative patterns. This is a tough one to explain so we again link to an external source that explains it well. Be sure to scroll down to the real-world javascript and React examples about halfway through the post.

Composition Pattern
Prefer the composition pattern over inheritance in your application design, which is easier to read and simpler to debug. While it is common knowledge that we should prefer composition over inheritance, it is sometimes difficult to know what that means. If you're struggling with the concepts, here is a solid explanation of the differences, and why composition is the better approach. Additionally, here is React's own guide to writing components following composition patterns.

React

Component Design
In accordance with the Functional Programming recommendation above, follow the React functional component pattern. In addition, please refer to this excellent guide for React component design (once again, written by Sathish Kumar).

Application Styling & Theme Provider (CSS)

Read more about using MUI ThemeProvider and the sx prop here.

Player Component & Token

The UI uses Flowplayer for playback preview. It is loaded as an external dependency from the published production distribution and needs a valid player token to allow playback.

The token is specified in the project as the environment variable called FP_PLAYER_TOKEN. It needs to be created in the Flowplayer OVP production environment. It does not matter which organization and workspace it is created in but by convention it is created in the workspace called Flowplayer (ID: 2b558698-b5a6-48c2-88b3-48f006fea279) in the organization called Test (ID: 7F000001:011D4302AD59:3213:01CB4B09) that we use for internal purposes.

Tech Stack Summary & External Documentation Links

• Typescript
• React 17
• Redux 4
• React Router 5
• Jest
• React Testing Library
• Playwright
• CircleCI
• ESLint
• Storybook
• Styled System Specification

Last updated 12/04/2020