docs: remove grunt and update usage of build scripts

COLLABORATOR_GUIDE.md

@@ -19,8 +19,8 @@
     * [GitHub personal access token](#github-personal-access-token)
   * [Deciding what type of version release](#deciding-what-type-of-version-release)
   * [Doing a release](#doing-a-release)
-    * [Video.js 6](#videojs-6)
-    * [Video.js 5](#videojs-5)
+    * [Current Video.js](#current-videojs)
+    * [Legacy Video.js (5)](#legacy-videojs-5)
       * [Edit git-semver-tags](#edit-git-semver-tags)
     * [And now for the release](#and-now-for-the-release)
   * [Deploy as a patch to the CDN](#deploy-as-a-patch-to-the-cdn)
@@ -332,7 +332,7 @@ git clone git@github.com:videojs/video.js.git videojs-6-release
 git clone git@github.com:videojs/video.js.git videojs-5-release
 ```
 
-#### Video.js 6
+#### Current Video.js
 
 Make sure go to the master branch and grab the latest updates.
 
@@ -378,7 +378,7 @@ you can run it manually:
 VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=123 node build/gh-release.js --prelease
 ```
 
-#### Video.js 5
+#### Legacy Video.js (5)
 
 Make sure to go to the 5.x branch and grab the latest updates.
 

CONTRIBUTING.md

@@ -97,19 +97,6 @@ To contibute code you'll need to be able to build a copy of Video.js and run tes
 * Node.js
   Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
 
-* `grunt-cli`
-  Optionally, install `grunt-cli` globally to use grunt directly. It can always be run via an npm script:
-
-```sh
-npm run grunt
-```
-
-```sh
-npm install -g grunt-cli
-```
-
-Depending on how you have node and npm set up, you may need to run the global install (`-g`) as a superuser by prepending `sudo`.
-
 ### Building video.js locally
 
 #### Forking and cloning the repository
@@ -199,17 +186,11 @@ This ties in nicely with the sandbox directory. You can always open the `sandbox
 > Flash files (`.swf`) that are local and loaded into a locally accessed page (file:///) will NOT run.
 > To get around this you must use a local web server.
 
-To run the local webserver, you can run it in a couple of ways.
-
-```sh
-grunt connect
-open http://localhost:9999/sandbox/index.html
-```
-
-or
+To run the local webserver:
 
 ```sh
 npm start
+open http://localhost:9999/sandbox/index.html
 ```
 
 The latter does some extra work which will be described in the next section.

docs/guides/components.md

@@ -16,6 +16,7 @@ The architecture of the Video.js player is centered around components. The `Play
   * [Using trigger](#using-trigger)
 * [Default Component Tree](#default-component-tree)
 * [Specific Component Details](#specific-component-details)
+  * [Play Toggle](#play-toggle)
   * [Volume Panel](#volume-panel)
   * [Text Track Settings](#text-track-settings)
   * [Resize Manager](#resize-manager)

docs/guides/languages.md

@@ -60,9 +60,9 @@ Each file's name should be the [standard language code][lang-codes] that is most
 If there is a [missing translation](/docs/translations-needed.md), mistake, or room for improvement in an existing translation, don't hesitate to open a pull request!
 
 1. Edit the relevant JSON file and make the necessary changes.
-1. Verify the language compiles by running `grunt dist`.
+1. Verify the language compiles by running the language specific build `npm run build:lang` or the full build `npm run build`.
 1. Verify the translation appears properly in the player UI.
-1. Run `grunt check-translations` to update the [missing translation document](/docs/translations-needed.md).
+1. Run `npm run docs:lang` to update the [missing translation document](/docs/translations-needed.md).
 1. Commit and open a pull request on GitHub.
 
 ### Writing a New Translation

docs/guides/layout.md

@@ -114,15 +114,15 @@ Responsive mode is independent of fluid mode or fill mode - it only deals with t
 
 A player in responsive mode will add and remove classes based on its size breakpoints. The default breakpoints, classes, and sizes are outlined below:
 
-Name     | Class                | Min. Width | Max. Width
----------|----------------------|------------|-----------
-`tiny`   | `vjs-layout-tiny`    | 0          | 210
-`xsmall` | `vjs-layout-x-small` | 211        | 320
-`small`  | `vjs-layout-small`   | 321        | 425
-`medium` | `vjs-layout-medium`  | 426        | 768
-`large`  | `vjs-layout-large`   | 769        | 1440
-`xlarge` | `vjs-layout-x-large` | 1441       | 2560
-`huge`   | `vjs-layout-huge`    | 2561       | Infinity
+| Name     | Class                | Min. Width | Max. Width |
+| -------- | -------------------- | ---------- | ---------- |
+| `tiny`   | `vjs-layout-tiny`    | 0          | 210        |
+| `xsmall` | `vjs-layout-x-small` | 211        | 320        |
+| `small`  | `vjs-layout-small`   | 321        | 425        |
+| `medium` | `vjs-layout-medium`  | 426        | 768        |
+| `large`  | `vjs-layout-large`   | 769        | 1440       |
+| `xlarge` | `vjs-layout-x-large` | 1441       | 2560       |
+| `huge`   | `vjs-layout-huge`    | 2561       | Infinity   |
 
 ### Enabling Responsive Mode
 

docs/guides/options.md

@@ -21,6 +21,7 @@
 * [Video.js-specific Options](#videojs-specific-options)
   * [aspectRatio](#aspectratio)
   * [autoSetup](#autosetup)
+  * [breakpoints](#breakpoints)
   * [children](#children)
   * [fluid](#fluid)
   * [inactivityTimeout](#inactivitytimeout)
@@ -30,6 +31,7 @@
   * [notSupportedMessage](#notsupportedmessage)
   * [playbackRates](#playbackrates)
   * [plugins](#plugins)
+  * [responsive](#responsive)
   * [sources](#sources)
   * [techCanOverridePoster](#techcanoverrideposter)
   * [techOrder](#techorder)
@@ -171,15 +173,15 @@ When used with the [`responsive` option](#responsive), sets breakpoints that wil
 
 By default, the breakpoints are:
 
-Class Name           | Width Range
----------------------|------------
-`vjs-layout-tiny`    | 0-210
-`vjs-layout-x-small` | 211-320
-`vjs-layout-small`   | 321-425
-`vjs-layout-medium`  | 426-768
-`vjs-layout-large`   | 769-1440
-`vjs-layout-x-large` | 1441-2560
-`vjs-layout-huge`    | 2561+
+| Class Name           | Width Range |
+| -------------------- | ----------- |
+| `vjs-layout-tiny`    | 0-210       |
+| `vjs-layout-x-small` | 211-320     |
+| `vjs-layout-small`   | 321-425     |
+| `vjs-layout-medium`  | 426-768     |
+| `vjs-layout-large`   | 769-1440    |
+| `vjs-layout-x-large` | 1441-2560   |
+| `vjs-layout-huge`    | 2561+       |
 
 While the class names cannot be changed, the width ranges can be configured via an object like this:
 

docs/guides/text-tracks.md

@@ -21,7 +21,7 @@ Text tracks are a feature of HTML5 for displaying time-triggered text to the end
 * [Text Track Precedence](#text-track-precedence)
 * [API](#api)
   * [Remote Text Tracks](#remote-text-tracks)
-  * [Text Tracks](#text-tracks-1)
+  * [Text Tracks](#text-tracks)
 
 ## A Note on "Remote" Text Tracks
 
@@ -221,7 +221,9 @@ For more complete information, refer to the [Video.js API docs](https://docs.vid
 As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represent the recommended API offered by Video.js as they can be removed.
 
 * `Player#remoteTextTracks()`
+
 * `Player#remoteTextTrackEls()`
+
 * `Player#addRemoteTextTrack(Object options)`
 
   Available options are the same as the [available `track` attributes](#track-attributes). And `language` is a supported option as an alias for the `srclang` attribute - either works here.
@@ -242,11 +244,13 @@ As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represen
 It is generally recommended that you use _remote_ text tracks rather than these purely programmatic text tracks for the majority of use-cases.
 
 * `Player#textTracks()`
+
 * `Player#addTextTrack(String kind, [String label [, String language]])`
 
   > **Note:** Non-remote text tracks are intended for _purely programmatic usage_ of tracks and have the important limitation that they _cannot be removed once created_.
   >
   > The standard `addTextTrack` does **not** have a corresponding `removeTextTrack` method; so, we actually discourage the use of this method!
 
 * `TextTrackList()`
+
 * `TextTrack()`

docs/translations-needed.md

@@ -13,6 +13,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
 ## Status of translations
 
 <!-- START langtable -->
+
 | Language file           | Missing translations                                                                |
 | ----------------------- | ----------------------------------------------------------------------------------- |
 | ar.json (missing 51)    | Audio Player                                                                        |
@@ -1218,4 +1219,5 @@ This default value is hardcoded as a default to the localize method in the SeekB
 |                         | {1} is loading.                                                                     |
 | zh-TW.json (missing 2)  | progress bar timing: currentTime={1} duration={2}                                   |
 |                         | {1} is loading.                                                                     |
+
 <!-- END langtable -->

index.html

@@ -15,10 +15,13 @@ <h2>Navigation</h2>
     <li><a href="sandbox/icons.html">Icons Demo</a></li>
     <li><a href="sandbox/focus-visible.html">Focus Visible Demo</a></li>
     <li><a href="sandbox/flash.html">Flash Demo</a></li>
-    <li><a href="sandbox/fake-live.html">Fake Live Demo</a></li>
     <li><a href="sandbox/embeds.html">Embeds Demo</a></li>
     <li><a href="sandbox/descriptions.html">Descriptions Demo</a></li>
     <li><a href="sandbox/combined-tracks.html">Combined Tracks Demo</a></li>
+    <li><a href="sandbox/live.html">Live Demo</a></li>
+    <li><a href="sandbox/liveui.html">LiveUI Demo</a></li>
+    <li><a href="sandbox/vertical-volume.html">Vertical Volume Demo</a></li>
+    <li><a href="sandbox/language.html">Laungage Demo</a></li>
   </ul>
 
   <h2>Simple Demo (in an iframe)</h2>

package.json

@@ -157,7 +157,6 @@
   },
   "vjsstandard": {
     "ignore": [
-      "**/Gruntfile.js",
       "**/es5/**",
       "**/build/**",
       "!build/rollup.js",

sandbox/combined-tracks.html.example

@@ -16,10 +16,9 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>npm run start</pre>
-    <pre>open http://localhost:9999/sandbox/index.html</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the combined-tracks.html</p>
+    <pre>npm start</pre>
+    <pre>open http://localhost:9999/sandbox/combined-tracks.html</pre>
   </div>
 
   <video id="vid1" class="video-js" lang="en" controls preload="auto" width="640" height="360" poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">

sandbox/flash.html.example

@@ -17,9 +17,8 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/flash.html.example sandbox/flash.html</pre>
-    <pre>npm run start</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the flash.html</p>
+    <pre>npm start</pre>
     <pre>open http://localhost:9999/sandbox/flash.html</pre>
   </div>
 

sandbox/focus-visible.html.example

@@ -16,8 +16,8 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre><b>npm start</b> will automatically copy these files over from .example if they don't already exist.</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the focus-visible.html</p>
+    <pre>npm start</pre>
     <pre>open http://localhost:9999/sandbox/focus-visible.html</pre>
   </div>
 

sandbox/index.html.example

@@ -8,9 +8,8 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>npm run start</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p>
+    <pre>npm start</pre>
     <pre>open http://localhost:9999/sandbox/index.html</pre>
   </div>
 

sandbox/live.html.example

@@ -8,10 +8,9 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>npm run start</pre>
-    <pre>open http://localhost:9999/sandbox/index.html</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the live.html</p>
+    <pre>npm start</pre>
+    <pre>open http://localhost:9999/sandbox/live.html</pre>
   </div>
 
   <video-js id="vid1" controls preload="auto" width="640"  height="264">

sandbox/liveui.html.example

@@ -8,10 +8,9 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>npm run start</pre>
-    <pre>open http://localhost:9999/sandbox/index.html</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the liveui.html</p>
+    <pre>npm start</pre>
+    <pre>open http://localhost:9999/sandbox/liveui.html</pre>
   </div>
 
   <video-js id="vid1" controls preload="auto" width="640"  height="264">

sandbox/vertical-volume.html.example

@@ -8,10 +8,9 @@
 </head>
 <body>
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
-    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
-    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>npm run start</pre>
-    <pre>open http://localhost:9999/sandbox/index.html</pre>
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the vertical-volume.html</p>
+    <pre>npm start</pre>
+    <pre>open http://localhost:9999/sandbox/vertical-volume.html</pre>
   </div>
 
   <video-js