
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Online Video Platform UI written in React + Redux
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
Visit npm. Create an account if you have not, and log in.
If you do not already have an invitation to join the flowplayer organization for this account, bug the CTO.
Follow the NPM documentation guide to generate a legacy read-only access token.
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
Similarly, you need to set the FontAwesome pro token in your .npmrc
file. Request the token from an administrator.
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
git clone https://github.com/flowplayer/ovp-ui.git
npm install
brew install mkcert
mkcert -install
cd ../ && \
mkdir ssl && \
cd ssl && \
mkcert localhost local.wowza.com local.flowplayer.com
127.0.0.1 local.wowza.com
127.0.0.1 local.flowplayer.com
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
npm start
npm run e2e
to run the end-to-end testsTLDR:
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.
TLDR:
./components/
folder./common
folderThe 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:
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)
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:
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).
Read more about using MUI ThemeProvider and the sx
prop here.
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.
Last updated 12/04/2020
FAQs
OVP client-side UI
The npm package ovp-ui receives a total of 0 weekly downloads. As such, ovp-ui popularity was classified as not popular.
We found that ovp-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.