Skip to content

Latest commit

 

History

History
177 lines (133 loc) · 8.38 KB

README.md

File metadata and controls

177 lines (133 loc) · 8.38 KB
Raw

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

  1. Install git

  2. [Install Node.js] (https://nodejs.org/download/release/v8.11.3/) v8.11.3

  3. Install gulp globally by running: npm install --global gulp-cli

  4. Clone project: git clone https://github.com/ooyala/html5-skin.git

  5. After cloning, just cd in there, install dependencies by running npm install

  6. 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.

  7. 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:

  1. Start dev-server by running: npm start

    This will start webpack dev-server in your browser http://localhost:4444/.

  2. 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:

  1. Fork the repository and create your branch from master.

  2. If you've added code that should be tested, add tests!

  3. Ensure the test suite passes (npm test).

Style Guide

We mostly follow Airbnb's Style Guide.