html5-skin

An open-source HTML5 UI skin based on React.js that overlays Ooyala V4 core player. This README contains introduction, setup and customization sections.

High Level Overview

html5-skin is a JS file that is made available externally to Ooyala core V4 player. It accepts and triggers general Ooyala Message Bus events from and to core player to change the behavior of video playback. All static files necessary to create and run video playback are hosted and can be accessed publicly. This skin repo are available to be git cloned or forked and be modified by developers (terms and condition apply).

Plug and Play capability

core.js is a lightweight core player that enables basic video playback functionality and provides Message Bus environment. Most of additional capabilities such as ads, discovery and skin are separated from core player JS. You may want to load additional plugins.

Examples

We have a sample HTML page ready for you. Check out sample page

This simple test HTML page can also be hosted on your environment to showcase html5 skin.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- V4 JS core and at least one video plugin is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
  <script src="//player.ooyala.com/static/v4/production/latest/core.min.js"></script>
  <script src="//player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.min.js"></script>
  <script src="//player.ooyala.com/static/v4/production/latest/video-plugin/bit_wrapper.min.js"></script>
  <!-- Change these html5-skin.min.css and html5-skin.min.js to your local build if necessary -->
  <script src="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js"></script>
  <link rel="stylesheet" href="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"/>
</head>

<body>
<div id='container'></div>
<script>
  var playerParam = {
    "pcode": "YOUR_PCODE",
    "playerBrandingId": "YOUR_PLAYER_ID",
    "debug":true,
    "skin": {
      // config contains the configuration setting for player skin. Change to your local config when necessary.
      "config": ""
    }
  };

  OO.ready(function() {
    window.pp = OO.Player.create('container', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', playerParam);
  });
</script>

</body>
</html>

Developer Setup

Install git
[Install Node.js] (https://nodejs.org/download/release/v8.11.3/) v8.11.3
Install gulp globally by running: npm install --global gulp-cli
Clone project: git clone https://github.com/ooyala/html5-skin.git
After cloning, just cd in there, install dependencies by running npm install
This project also makes use of git submodule for the config directory. This needs to be initialized using git submodule commands:
```
    git submodule init
    git submodule update
    git pull
```
The init and update should only need to be run once, afterward git pull will update the submodule as well as the parent repo.
Build the project by running: gulp

This will perform an initial build and start a watch that will update the build/ folder with any changes made in js/ or scss/ folders.

Once the app is built a webserver will start and serve sample.html in your browser http://0.0.0.0:4444/.

You can also use webpack-dev-server instead of gulp:

Start dev-server by running: npm start

This will start webpack dev-server in your browser http://localhost:4444/.
Build the project by running: npm run build or npm run build-prod

This will perform an initial build and start a watch that will update the build/ folder with any changes made in js/ or scss/ folders.

Style

We use Sass (SCSS) for CSS preprocessor.

Our 4-1 architecture pattern splits the Sass codebase over several files that are compiled into a single, minified stylesheet deployed to production.

This approach maintains modular, decoupled style without impacting performance.

scss/
|
|– base/
|   |– _normalize.scss   # makes browsers render elements more consistently
|   |– _reset.scss       # resets to common HTML elements, Adds additional rules on top of _normalize.scss
|   |– _variables.scss   # variables, colors, measurements, flags to enable/disable features
|   |– _base.scss        # boilerplate, app level styles
|   |– _type.scss        # typography rules, fonts, icons
|   ...
|
|– components/           # style to correspond to app views and components
|   |– _buttons.scss
|   |– _forms.scss
|   |– _[screen].scss
|   |– _[component].scss
|   ...
|
|– mixins/               # Sass tools and helpers used across project
|   |– _mixins.scss      # groups of reusable CSS functions
|   ...
|
|– skins/
|   |– _default.scss     # default skin, values pulled from /skin-plugin/config/skin.json
|   |– _alien.scss       # :alien: skin
|   ...
|
|
`– html5-skin.scss       # main Sass file

Testing

To run tests, run this command:

npm test

Add test files to directory tests/.

Test file should have same location and name as js/ file with -test after test file name.

For example, component file js/components/sharePanel.js will have test file tests/components/sharePanel-test.js.

Customization

Relative Paths

Note that some necessary files are located with relative paths. Please verify that those files are properly placed in your web application. This includes:

localization files
asset files

Simple Customization

Simple customization can be achieved by modifying skin.json settings. Furthermore, you are able to override skin setting during player create time. The example below hides description text and render playButton blue on start screen.

var playerParam = {
  "skin": {
    "config": "//player.ooyala.com/static/v4/production/latest/skin-plugin/skin.json",
    "inline": {
      "startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
    }
  }
};

Advanced Customization

Advanced customization is readily available by modifying JS files. Follow Developer Setup section to create a local repository and to run build script. Built files are available inside build folder. You are welcomed to host your built skin javascript to be run with your player.

How to Contribute

If you send a pull request, please do it against the master branch. We maintain stable branches separately but we don't accept pull requests to them directly.

We will do our best to keep the master branch in good shape, with tests passing at all times. But our master branch is under active development and may contain changes that your application might not be compatible with. We recommend using latest stable version for production.

Submitting a Pull Request

The core team monitors pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation.

Before submitting a pull request, please make sure the following is done:

Fork the repository and create your branch from master.
If you've added code that should be tested, add tests!
Ensure the test suite passes (npm test).

Style Guide

We mostly follow Airbnb's Style Guide.

Name		Name	Last commit message	Last commit date
Latest commit History 4,316 Commits
assets		assets
config @ 3dceb96		config @ 3dceb96
docs/img		docs/img
js		js
scripts		scripts
scss		scss
tests		tests
.babelrc		.babelrc
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.gitmodules		.gitmodules
.nvmrc		.nvmrc
Jenkinsfile		Jenkinsfile
README.md		README.md
amp_iframe.html		amp_iframe.html
gulpfile.js		gulpfile.js
iframe.html		iframe.html
index.html		index.html
jsdoc_conf.json		jsdoc_conf.json
npm-shrinkwrap.json		npm-shrinkwrap.json
package.json		package.json
sample.html		sample.html
sonar-project.properties		sonar-project.properties
webpack.config.js		webpack.config.js

ooyala/html5-skin

Folders and files

Latest commit

History

Repository files navigation