No description, website, or topics provided.
Switch branches/tags
Clone or download
dallen42 Merge pull request #1143 from ooyala/PLAYER-4385b
[PLAYER-4385] Updating config subrepo
Latest commit 83ae6e7 Oct 17, 2018
Permalink
Failed to load latest commit information.
assets [player-4067] Taking out old svg files. The pictures are in the font … Sep 13, 2018
config @ bc9ec26 [PLAYER-4385] Updating config subrepo Oct 17, 2018
docs/img [first-sample] Fix Image documentation. Apr 6, 2015
js [PLAYER-4385] Addressed PR comments Oct 17, 2018
scripts [player-3765] Jun 26, 2018
scss [PLAYER-4508] Add cast-button from cast SDK, Remove custom cast-butto… Oct 2, 2018
tests [PLAYER-4385] Now reacting to playerType page-level param Oct 16, 2018
.babelrc [player-3765] Jun 26, 2018
.eslintignore fix eslint errors [21 remaining] May 15, 2018
.eslintrc [bugfix/PLAYER-4220] fix pauseScreen for eslint rules Aug 24, 2018
.gitignore [PLAYER-3859] Muted state now overrides volume for VoiceOver (Narrato… Sep 19, 2018
.gitmodules [feature/PLAYER-3993] remove spaces and change value for this.languag… Jul 24, 2018
.nvmrc [feature/nvmrc] update node version, add engines field Apr 6, 2018
README.md [update-readme] Aug 17, 2018
amp_iframe.html [PLAYER-509] Update references from stable/latest to production/lates… Mar 22, 2017
gulpfile.js [player-3765] Jun 26, 2018
iframe.html [PLAYER-509] Update references from stable/latest to production/lates… Mar 22, 2017
jsdoc_conf.json Adding JSDoc processor to generate documentation from comments Nov 5, 2015
npm-shrinkwrap.json [4.28.10.buildfix] Fixing subrepo and update shrinkwrap. Sep 21, 2018
package.json [4.28.8.buildfix] Returned @babel/core and @babel/preset-env to ^7.1.… Sep 21, 2018
sample.html [update-readme] Aug 17, 2018

README.md

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

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.