Merge remote-tracking branch 'origin/master' into feature/remove-atta…

…ch-detach * origin/master: (42 commits) Update package.json repository Make background color override gradient in config match default CSS Improve time slider above gradient on white video frames Fix README formatting Bringing back a style to position menu overlays when jw-flag-time-slider-above is active Show control bar on vpaid if vpaid-controls is set Running `grunt karma:browserstack` will run tests on Chrome, Firefox and IE11 Work around exceptions thrown in intersection-observer polyfill when run in IE9-11 Integrating Mobile UI and Casting New docs (#1654) Adds some comments and ensures auto height Align time/cuepoint tooltip in timeSliderAbove mode More cast icon cleanup Switching from px to em Update cast icon Display replay icon in controlbar in complete state Move background gradient to control bar element Enable small player color override styles Resume flash streams after cast disconnection PR change ...
jwplayer · Jan 6, 2017 · bd61be7 · bd61be7
2 parents dadd328 + 7f632c9
commit bd61be7
Show file tree

Hide file tree

Showing 36 changed files with 580 additions and 324 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,109 @@
+# Contributing to JW Player
+Thanks for considering contributing to our repo! We appreciate all contributions to the player, large or small. Please take the time to read through this document before making a contribution to ensure a fun and effective process for everyone involved.
+
+## General Guidelines
+Are you having trouble getting started with JW Player, configuration, or customization? If so, please check the [support docs](https://support.jwplayer.com/) before submitting an issue here. 
+
+As contributors and maintainers of this repo, we'll do our best to help you out as soon as we can - however, we ask you to be respectful of our time. Our team is based in NYC and works in EST time, Monday - Friday. If your issue has been around for a while and hasn't been responded to, feel free to ping @johnBartos in the comment of your issue.
+
+## Official Support
+This guide is focused specifically for developers contributing towards this open-source project. If you pay for JW Player, you're entitled to direct help from our support team [here](https://support.jwplayer.com/customer/portal/emails/new).
+
+## Bug Reports
+A bug is a *demonstrable* problem caused by code in the repository. Bug reports are very helpful! If you think you've found a bug in the player we'd love to know about it (and fix it).
+
+#### Hold Up!
+Before submitting an issue, please do your best to confirm that your issue is *reproducible* and a problem with our player by running through this checklist. Afterwards, if you're still unsure about the cause of your problem, please feel free to submit an issue and we'll do our best to help. For issues building & developing the player, skip this guide and submit a report directly.
+
+##### Issue Checklist
+1. Check the console:
+    - Are there any network errors (`404`, `403`, `500`, etc)?
+    - Is there a CORS error (`access-control-allow-origin`)?
+    - Are there errors thrown by third-party code?
+2. Check your player:
+    - Are you using the [latest version](https://developer.jwplayer.com/jw-player/docs/developer-guide/release_notes/release_notes_7)?
+        - You can test streams with the latest version [here](https://developer.jwplayer.com/tools/stream-tester/).
+    - Are you using Flash?
+        - Ensure you're using the latest version of Flash.
+        - We're in the process of deprecating Flash and will only fix
+         critical bugs.
+    - Is your [Configuration](https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/) valid?
+3. Check your browser:
+    - Are you using a [supported browser](https://support.jwplayer.com/customer/portal/articles/1403653-browser-device-reference#desktop
+    )?
+    - Are you using the latest version?
+    - Does the browser support the feature you're trying to use?
+    - Do we implement the feature you're using?
+        - For example, we use native HLS playback where available (Safari, Edge, Mobile).
+4. Check your OS (Mobile):
+    - Are you using a [supported device](https://support.jwplayer.com/customer/portal/articles/1403653-browser-device-reference#mobile)?
+    - Are you running the latest version?
+5. Check your code:
+    - Are you using a [supported media type](https://support.jwplayer.com/customer/portal/articles/1403635-media-format-reference)?
+    - Are you using the [API](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/) correctly?
+6. Check through our [issues](https://github.com/jwplayer/jwplayer/issues)
+ and make sure your's isn't already reported or resolved.
+
+
+#### You've Found an Issue
+Great! Please [create an issue](https://github.com/jwplayer/jwplayer/issues/new) and follow the guidelines as best as you can - each ask gives us information necessary to solve your problem. If submitting a playback issue, make sure we can access your video at all times. If live, ensure that you provide us with the failing segments. And if you're able to, please isolate your issue by creating a standalone test page.
+
+##### Test Page Template:
+````
+<html>
+    <head>
+        <script src='LINK_TO_YOUR_PLAYER'></script>
+        <script>jwplayer.key='YOUR_KEY';</script>
+    </head>
+    <body>
+        <div id="player">Loading the player...</div>
+        <script>
+            var player = jwplayer('player').setup({ ... });
+        </script>
+    </body>
+</html>
+````
+
+## Pull Requests
+Pull requests are a great way to help out and improve JW Player. Before embarking on a large PR, please ask us first - we may not need your changes in the repo and don't want you to waste your energy.
+
+To get your repo up and running, please refer to BUILDING.md.
+
+#### First Timers
+If you've never contributed before, don't worry - we'll do the best we can to help you throughout the process. Unsure of where to begin? Check out our [beginner bugs](https://github.com/jwplayer/jwplayer/labels/beginner), or refer to the Questions/Discussions section and drop us a line. 
+
+#### General Guidelines
+While far from comprehensive, following these guidelines will get the easy stuff out of the way and speed the process along. In addition, please include a good description of what you've changed and why you've changed it.
+
+##### Branch Naming
+- Bugfixes: `bugfix/your-branch`
+- Features: `feature/your-branch`
+- Hotfixes: `hotfix/your-branch`
+
+##### Style
+1. **Code written must work across all supported browsers and devices without transpilation - Chrome, FF, Safari, Edge, and IE 9-11**
+    - Usually this means writing in pure ES5, but ES6 features are allowed if they work everywhere
+2. Ensure that your code follows our styleguide by passing our ESLint rules
+3. Ensure that your code passes static analysis by running Flow
+4. Do your best to match our naming conventions and conform to the style of the code around you
+5. If you have a large or messy commit history, please rebase & squash your commit history
+
+##### Tests
+1. Ensure that all existing tests pass
+2. We don't demand 100% coverage, but please write tests that cover at least the happy paths
+    - Some code is hard to test or untestable - we won't hold it against you if you're working in a particularly difficult area. Just let us know if you've had some trouble
+3. If your changes cannot be automated, include a manual test page that demonstrates the functionality of your changes
+
+##### Size
+1. Do your best to keep your PRs as small and focused as possible
+    - If your PR is large, consider breaking it into smaller ones
+2. **Large additions to the code base must be justified** - we strive to keep the player as small as possible
+3. Additions to `package.json` must be backed by good reasons
+
+## Feature Requests
+Feature requests are also welcome, but may not fit within the scope of the player. It's up to you to make the case for your feature and convince us that it's worth implementing. We encourage you to try and solve your problem using the [API](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/) or [Configuration](https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/)  first. As always, you're free to fork the player and implement what you want - feel free to ask questions by following our Questions/Discussions guidelines.
+
+## Questions/Discussions
+We love to answer questions and talk with developers! Feel free to ask questions via [gitter](https://gitter.im/jwplayer/jwplayer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge), the [video-dev-slack](https://video-dev.slack.com/messages/general/whats_new/), or by [creating an issue](https://github.com/jwplayer/jwplayer/issues/new) . And if you're in the NYC area, you can come and meet us and other video devs in the flesh  at the [Video Tech NYC Meetup](https://www.meetup.com/Video-Tech-NYC/).
+
+
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -233,35 +233,37 @@ module.exports = function(grunt) {
                 },
                 concurrency: 1
             },
-            phantomjs : {
+            phantomjs: {
                 browsers: ['PhantomJS']
             },
-            chrome : {
+            chrome: {
                 browsers: ['Chrome']
             },
-            firefox : {
+            firefox: {
                 browsers: ['Firefox']
             },
-            safari : {
+            safari: {
                 browsers: ['Safari']
             },
-            // browserstack_all: { browsers: Object.keys( require( './test/qunit/karma/browserstack-launchers' ) ) },
-            browserstack : {
+            browserstack: {
+                browsers: ['chrome', 'firefox', 'ie11_windows']
+            },
+            browserstack_chrome: {
                 browsers: ['chrome']
             },
-            browserstack_firefox : {
+            browserstack_firefox: {
                 browsers: ['firefox']
             },
-            browserstack_edge : {
+            browserstack_edge: {
                 browsers: ['edge']
             },
-            browserstack_ie11 : {
+            browserstack_ie11: {
                 browsers: ['ie11_windows']
             },
-            browserstack_ie10 : {
+            browserstack_ie10: {
                 browsers: ['ie10_windows']
             },
-            browserstack_ie9 : {
+            browserstack_ie9: {
                 browsers: ['ie9_windows']
             }
         },

diff --git a/README.md b/README.md
@@ -3,64 +3,107 @@
 [![Join the chat at https://gitter.im/jwplayer/jwplayer](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/jwplayer/jwplayer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 > Plays everywhere, every time.
-> 
-> JW Player is -the- solution for making video playback seamless across browsers and file types. 
-> It empowers the developer to interact with video programmatically to create unique and awesome user experiences.
- 
-[Developer API Examples and Demos](https://developer.jwplayer.com/jw-player/demos/)
-
-[Documentation and Support](http://support.jwplayer.com/)
-
-
-## Example
-
-The example below will find the element with an id of *my_video* and render a video player into it. 
-
-```js
-    // Create a jwplayer instance
-    jwplayer('my_video').setup({
-        file: '/uploads/example.mp4',
-    });
-
-    // Add a custom callback for when user pauses playback
-    jwplayer('my_video').on('pause', function(event) {
-        alert('Why did my user pause their video instead of watching it?');
-    });
-```
-
-Other callbacks that we provide include
-* **play / complete**
-* **seek / pause**
-* **volume / mute**
-* **[and more](http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles)**
-
-You also have the power to programatically set any configuration within the player. 
-
-```js
-    function bumpIt() {
-    	var vol = player.getVolume();
-        player.setVolume(vol + 10 );
-    }
-```
 
+ Live on over 2 million sites with 1.3 billion unique plays per month, JW Player is the solution for seamless video playback across browsers and media types. It empowers the developer to interact with video programmatically to create unique and awesome user experiences.
+
+## Official Documentation
+- [Developer Portal](https://developer.jwplayer.com/)
+- [API Reference](https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/) 
+- [Configuration Reference](https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference/)
+- [Demos](https://developer.jwplayer.com/jw-player/demos/)
+- [Support](http://support.jwplayer.com/)
+
+
+## A Simple Example
+
+The example below will render a video player into the div with the `player` id, listens to an event, and makes a few calls using the API.
+
+````
+<html>
+    <head>
+        <script src='LINK_TO_YOUR_PLAYER'></script>
+        <script>jwplayer.key='YOUR_KEY';</script>
+    </head>
+    <body>
+        <div id="player">Loading the player...</div>
+        <script>
+            // Setup the player
+            const player = jwplayer('player').setup({
+                file: 'LINK_TO_YOUR_FILE.mp4'
+             });
+             
+            // Listen to an event
+            player.on('pause', (event) => {
+                alert('Why did my user pause their video instead of watching it?');
+            });
+            
+            // Call the API
+            const bumpIt = () => {
+                const vol = player.getVolume();
+                player.setVolume(vol + 10);
+            }
+            bumpIt();
+        </script>
+    </body>
+</html>
+````
+Check out an interactive example in this [JSFiddle](https://jsfiddle.net/Lgs0ou8s/4/).
 ## Contributing
+ We appreciate all contributions towards the player! Before submitting an issue or PR, please see our contributing docs [here](CONTRIBUTING.md).
 
-### Build Instructions
-
- 1. Install [Node.js](https://nodejs.org/download)
- 1. Install [Java](https://java.com/en/download/)
-
-```sh
-    # First time set up
-    npm install -g grunt
-    npm install
-
-    # Build using
-    grunt
-```
-
-After build, the assets will be available in the `bin-release` folder.
+## Building the Player
+We use `grunt` and a few `npm scripts` to build the player, lint code, and run tests. Debug code is built to `/bin-debug`, while minified & uglified code is built to `/bin-release`. Code is built with `webpack`, linted with `eslint` and `flow`, and tested with `karma` and `qunit`.
 
+#### Requirements:
+ 1. [Node.js](https://nodejs.org/download)
+ 2. [Java](https://java.com/en/download/)* 
+
+ \* Optional, but required for building Flash. If not installed you must `grunt` with the `--force` flag. 
+
+#### Steps:
+
+1. Fork the project, clone your fork, and set up the remotes:
+ ````
+ # Clone your fork of the repo into the current directory
+ git clone https://github.com/<your-username>/jwplayer
+ # Navigate to the newly cloned directory
+ cd jwplayer
+ # Assign the original repo to a remote called "upstream"
+ git remote add upstream https://github.com/jwplayer/jwplayer
+ ````
+
+2. Install the dependencies:
+ ````
+ # Install grunt globally
+ npm install -g grunt
+ npm install
+ # Optionally, install webpack-dev-server
+ npm install -g webpack-dev-server
+ ````
+
+3. Build the player:
+ ````
+ # Build once, Flash and JS
+ grunt
+ # Complete Watch - builds FLash and JS, lints, and tests on each change
+ grunt serve
+ # Quick JS Watch - build only. Requires webpack-dev-server to be installed globally
+  webpack-dev-server --only debug -w --port 8888 --output-public-path /bin-debug/
+ ````
+
+4. Test your code:
+ ````
+ # All browsers
+ grunt test
+ # Individual browsers - chrome, firefox, ie11, ie10, ie9
+ grunt karma:{BROWSER} e.g. grunt karma:chrome
+ ````
+
+5. Lint your code:
+ ````
+ npm run lint
+ npm run flow
+ ````
 
 ## Software License
 The use of this library is governed by a [Creative Commons license](http://creativecommons.org/licenses/by-nc-sa/3.0/). You can use, modify, copy, and distribute this edition as long as it’s for non-commercial use, you provide attribution, and share under a similar license.

diff --git a/assets/fonts/jw-icons.eot b/assets/fonts/jw-icons.eot