Permalink
Browse files

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

  • Loading branch information...
gkatsev committed Dec 5, 2018
1 parent b7aafdc commit 62f9e78cf298a9cfbf1ad8245de61455098de04e
@@ -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.

@@ -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.
@@ -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)
@@ -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
@@ -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

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

@@ -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()`
@@ -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 |
@@ -1174,4 +1175,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 -->
@@ -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>
@@ -157,7 +157,6 @@
},
"vjsstandard": {
"ignore": [
"**/Gruntfile.js",
"**/es5/**",
"**/build/**",
"!build/rollup.js",
@@ -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">
@@ -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>

@@ -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>

@@ -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>

@@ -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">
@@ -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">
@@ -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

0 comments on commit 62f9e78

Please sign in to comment.