docs: remove grunt and update usage of build scripts (#5656)

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,6 +244,7 @@ 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_.
@@ -249,4 +252,5 @@ It is generally recommended that you use _remote_ text tracks rather than these
   > The standard `addTextTrack` does **not** have a corresponding `removeTextTrack` method; so, we actually discourage the use of this method!
 
 * `TextTrackList()`
+
 * `TextTrack()`