Update build, docs, lang and src images to 8.19.0

build/docs/styles/videojs.css

@@ -14,16 +14,53 @@ footer .copyright {
   float: left;
 }
 
-footer .other-links {
-  margin: 0;
-  padding: 0;
-  float: right;
+footer .logo {
+  display: none;
 }
 
-footer .other-links li {
-  display: inline;
+.sidebar-title {
+  background: center / contain no-repeat url(https://videojs.com/logo-white.png);
+  text-indent: -999em;
 }
 
-footer .logo {
-  display: none;
+.light .sidebar-title,
+.dark .link-vjs a:before,
+.dark .link-gh a:before,
+.dark .link-tw a:before {
+  -webkit-filter: invert(80%);
+  filter: invert(80%);
+}
+
+.link-vjs a:before,
+.link-gh a:before,
+.link-tw a:before {
+  content: "";
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  position: relative;
+  top: 0.1em;
+}
+
+.link-vjs a:before {
+  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3e%3c/svg%3e") no-repeat;
 }
+
+.link-gh a:before {
+  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'/%3e%3c/svg%3e") no-repeat;
+}
+
+.link-tw a:before {
+  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3e%3c/svg%3e") no-repeat;
+}
+
+.light .navbar {
+  background-color: #f7f7f7;
+  border-radius: 1rem;
+
+}
+
+.dark .navbar {
+  background-color: #222;
+  border-radius: 1rem;
+}

build/jsdoc-typeof-plugin.js

@@ -0,0 +1,12 @@
+/**
+ * The jsdoc plugin that will convert types like {typeof ClassName} into {Class<ClassName>}
+ */
+exports.handlers = {
+  jsdocCommentFound: event => {
+    event.comment = (event.comment || '').replace(/\{.*typeof\s+([^\s\|]+).*\}/g, typeExpression => {
+      return typeExpression.replace(/typeof\s+([^\s\|\}]+)/g, (expression, className) => {
+        return 'Class<' + className + '>';
+      });
+    });
+  }
+};

build/jsdoc-workarounds.js

@@ -0,0 +1,13 @@
+/**
+ * This jsdoc plugin works around some typescript-flavoured jsdoc that isn't actual jsdoc,
+ * so docs:api doesn't fail
+ */
+exports.handlers = {
+  jsdocCommentFound: event => {
+    // Special case for media-error.js
+    event.comment = (event.comment || '').replace(
+      '@typedef {{errorType: string, [key: string]: any}} ErrorMetadata',
+      '@typedef {Object} ErrorMetadata\n * @property {string} errorType Error type'
+    );
+  }
+};

build/netlify-docs.js

@@ -1,5 +1,6 @@
 const sh = require('shelljs');
 const semver = require('semver');
+const path = require('path');
 
 const GIT_LOG = `git log --format=%B -n 1 ${process.env.COMMIT_REF}`;
 const output = sh.exec(GIT_LOG, {async: false, silent: true}).stdout;
@@ -11,4 +12,12 @@ if (process.env.BRANCH === 'main' && semver.valid(output.trim()) === null) {
 } else {
   sh.exec('npm run docs:api');
   sh.cp('-R', 'docs/legacy-docs', 'docs/api/docs');
+
+  // move docs/_redirects into the root of the docs site
+  //
+  // this is needed because the root of the docs site is docs/api, which is not
+  // in version control.
+  const docsPath = path.join(__dirname, '..', 'docs');
+
+  sh.cp(path.join(docsPath, '_redirects'), path.join(docsPath, 'api', '_redirects'));
 }

build/netlify.js

@@ -22,14 +22,17 @@ sh.rm('-rf', deployDir);
 // make sure the directory exists
 sh.mkdir('-p', deployDir);
 
+// create sub-directory for images
+sh.mkdir('-p', `${deployDir}/src`);
+
 // create nested directories
 files
   .map((file) => path.dirname(file))
   .forEach((dir) => sh.mkdir('-p', path.join(deployDir, dir)));
 
 // copy files/folders to deploy dir
 files
-  .concat('dist', 'index.html', 'sandbox', 'docs')
+  .concat('dist', 'index.html', 'sandbox', 'docs', 'src/images')
   .forEach((file) => sh.cp('-r', file, path.join(deployDir, file)));
 
 sh.rm(path.join(deployDir, 'dist', `video-js-${pkg.version}.zip`));

build/readme-version.js

@@ -0,0 +1,16 @@
+/*
+Replaces the version number in the readme with the current package version.
+Looks for patterns like `/8.17.3/` and `/[email protected]/`
+*/
+
+const fs = require('fs');
+const path = require('path');
+const version = require('../package.json').version;
+
+let doc = fs.readFileSync(path.join(__dirname, '..', 'README.md'), 'utf8');
+
+doc = doc
+  .replace(/\/video.js@\d\.\d+\.\d+\//g, `/video.js@${version}/`)
+  .replace(/\/\d\.\d+\.\d+\//g, `/${version}/`);
+
+fs.writeFileSync(path.join(__dirname, '..', 'README.md'), doc, 'utf8');

build/rollup-exclude-lines.js

@@ -0,0 +1,41 @@
+/**
+ * Remove parts of files from outputs. Everything between a pair of `/* start-delete-from-build *\u002f`
+ * and `/* end-delete-from-build *\u002f` comments
+ *
+ * Based on https://github.com/se-panfilov/rollup-plugin-strip-code
+ */
+
+import { createFilter } from '@rollup/pluginutils';
+
+const START_COMMENT = 'start-delete-from-build';
+const END_COMMENT = 'end-delete-from-build';
+
+/**
+ * Remove lines of code surrounded by comments
+ *
+ * @param {Object} [options] Options
+ * @param {string} [options.include] Files to inlcude
+ * @param {string} [options.exclude] Files to exclude
+ * @param {string} [options.startComment] Starting keywork, default start-delete-from-build
+ * @param {string} [options.endComment] Eding keywork, default end-delete-from-build
+ * @param {RegExp} [options.pattern] Custom regex
+ * @return void
+ */
+export default function excludeLines(options = {}) {
+  // assume that the myPlugin accepts options of `options.include` and `options.exclude`
+  const filter = createFilter(options.include, options.exclude);
+
+  return {
+    transform(code, id) {
+      if (!filter(id)) {
+        return;
+      }
+
+      const startComment = options.startComment || START_COMMENT;
+      const endComment = options.endComment || END_COMMENT;
+      const defaultPattern = new RegExp(`([\\t ]*\\/\\* ?${startComment} ?\\*\\/)[\\s\\S]*?(\\/\\* ?${endComment} ?\\*\\/[\\t ]*\\n?)`, 'g');
+
+      return code.replace(options.pattern || defaultPattern, '');
+    }
+  };
+}

build/translations.js

@@ -21,6 +21,15 @@ filepaths.forEach((filepath) => {
   }
 
   const target = require(filepath);
+
+  // Special case for English, the assumption being that since the keys are English only
+  // a  few strings need to be altered for regional differences, e.g. en-GB.
+  if (filename.startsWith('en-')) {
+    console.log(`${filename} English - should be manually checked.`);
+    tableData.push([`${filename} (has ${Object.keys(target).length})`, 'Needs manual checking. Can safely use most default strings.']);
+    return;
+  }
+
   const missing = [];
 
   for (const string in source) {

docs/_redirects

@@ -0,0 +1,27 @@
+# Netlify redirects to redirect old tutorial pages to new guide pages
+/tutorial-angular.html            https://videojs.com/guides/angular/           301!
+/tutorial-audio-tracks.html       https://videojs.com/guides/audio-tracks/      301!
+/tutorial-components.html         https://videojs.com/guides/components/        301!
+/tutorial-debugging.html          https://videojs.com/guides/debugging/         301!
+/tutorial-embeds.html             https://videojs.com/guides/embeds/            301!
+/tutorial-event-target.html       https://videojs.com/guides/event-target/      301!
+/tutorial-faq.html                https://videojs.com/guides/faqs/              301!
+/tutorial-hooks.html              https://videojs.com/guides/hooks/             301!
+/tutorial-languages.html          https://videojs.com/guides/languages/         301!
+/tutorial-layout.html             https://videojs.com/guides/layout/            301!
+/tutorial-live.html               https://videojs.com/guides/live/              301!
+/tutorial-middleware.html         https://videojs.com/guides/middleware/        301!
+/tutorial-modal-dialog.html       https://videojs.com/guides/modal-dialog/      301!
+/tutorial-options.html            https://videojs.com/guides/options/           301!
+/tutorial-player-workflows.html   https://videojs.com/guides/player-workflows/  301!
+/tutorial-plugins.html            https://videojs.com/guides/plugins/           301!
+/tutorial-react.html              https://videojs.com/guides/react/             301!
+/tutorial-setup.html              https://videojs.com/guides/setup/             301!
+/tutorial-skins.html              https://videojs.com/guides/skins/             301!
+/tutorial-tech.html               https://videojs.com/guides/tech/              301!
+/tutorial-text-tracks.html        https://videojs.com/guides/text-tracks/       301!
+/tutorial-troubleshooting.html    https://videojs.com/guides/troubleshooting/   301!
+/tutorial-video-tracks.html       https://videojs.com/guides/video-tracks/      301!
+/tutorial-videojs.html            https://videojs.com/guides/videojs/           301!
+/tutorial-vue.html                https://videojs.com/guides/vue/               301!
+/tutorial-webpack.html            https://videojs.com/guides/webpack/           301!

docs/index.md

@@ -1,100 +1,29 @@
-# [Video.js][vjs-website] Documentation
+# [Video.js][vjs-website] API Documentation
 
-There are two categories of docs: [Guides](/docs/guides/) and [API docs][api].
+## Generated API docs
 
-Guides explain general topics and use cases (e.g. setup). API docs are automatically generated from the codebase and give specific details about functions, properties, and events.
+These [API docs][api] at [docs.videojs.com][vjs-docs] are automatically generated from the jsdoc comments in the code of the `main` branch of the [Video.js repository][vjs-gh]. You'll find specific details about functions, properties, and events.
 
-## Table of Contents
+The most useful API doc to start with is usually the [Player][api-player] class.
 
-* [Resolving Issues](#resolving-issues)
-  * [FAQ](#faq)
-  * [Troubleshooting](#troubleshooting)
-* [Guides](#guides)
-  * [Getting Started](#getting-started)
-    * [Setup](#setup)
-    * [Player Workflows](#player-workflows)
-    * [Options](#options)
-    * [Tracks](#tracks)
-  * [Customizing](#customizing)
-    * [Skins](#skins)
-    * [Plugins](#plugins)
-    * [Components](#components)
-    * [Tech](#tech)
-    * [Languages](#languages)
-    * [Hooks](#hooks)
-    * [Debugging](#debugging)
-* [API Docs](#api-docs)
+## Guides
 
-## Resolving Issues
+More in-depth instructional [guides][vjs-guides] are found on the main [Video.js website][vjs-website]. The guides explain general topics and use cases (e.g. setup).
 
-### [FAQ](/docs/guides/faq.md)
+The full list of articles is on the [guides page][vjs-guides]. If you are looking for troubleshooting information, try the [FAQ][vjs-faq] and [troubleshooting][vjs-troubleshooting] pages.
 
-The frequently asked questions for Video.js.
-
-### [Troubleshooting](/docs/guides/troubleshooting.md)
-
-Troubleshooting help for Video.js.
-
-## [Guides](/docs/guides/)
-
-### Getting Started
-
-#### [Setup](/docs/guides/setup.md)
-
-The setup guide covers all methods of setting up Video.js players.
-
-#### [Player Workflows](/docs/guides/player-workflows.md)
-
-After mastering the basics of setup move over to this guide for some more advanced player workflows.
-
-#### [Options](/docs/guides/options.md)
-
-There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.js specific options.
-
-#### [Tracks](/docs/guides/tracks.md)
-
-Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selecting different video tracks.
-
-### Customizing
-
-#### [Skins](/docs/guides/skins.md)
-
-You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together. For a list of skins you can check the [Video.js wiki][skins-list].
-
-#### [Plugins](/docs/guides/plugins.md)
-
-You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or [use one created by someone else][plugins-list].
-
-#### [Components](/docs/guides/components.md)
-
-Video.js is built around a collection of components. These are the building blocks of the player UI.
-
-#### [Tech](/docs/guides/tech.md)
-
-A "tech" is the shorthand we're using to describe any video playback technology - be it HTML5 video or a YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
-
-#### [Languages](/docs/guides/languages.md)
-
-Video.js has multi-language support! Follow this guide to see how you can contribute to and use languages.
-
-#### [Hooks](/docs/guides/hooks.md)
-
-A "hook" is functionality that wants to do when videojs creates a player. Right now only `beforesetup` and `setup` are supported. See the guide for more information on that.
-
-#### [Debugging](/docs/guides/debugging.md)
+[vjs-website]: https://videojs.com
 
-Follow this guide to see how you can use `videojs.log` for debugging purposes.
+[vjs-docs]: https://docs.videojs.com
 
-## [API Docs][api]
+[vjs-gh]: https://github.com/videojs/video.js
 
-You can refer to the [full list of API docs][api], but the most relevant API doc is for the [Player][api-player].
+[vjs-guides]: https://videojs.com/guides/
 
-[plugins-list]: https://videojs.com/plugins
+[vjs-faq]: https://videojs.com/guides/faqs/
 
-[skins-list]: https://github.com/videojs/video.js/wiki/Skins
+[vjs-troubleshooting]: https://videojs.com/guides/troubleshooting/
 
-[api]: https://docs.videojs.com/
+[api]: https://docs.videojs.com
 
 [api-player]: https://docs.videojs.com/Player.html
-
-[vjs-website]: https://videojs.com

docs/legacy-docs/api/assets/api-doc-template-min.html

@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="//use.edgefonts.net/source-code-pro.js"></script> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css"> <!-- there are many other style for highlighted code here: https://cdnjs.com/libraries/highlight.js --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"> <link rel="stylesheet" type="text/css" href="css/api-docs.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> </head> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="js/doc-data.js"></script> <script src="js/api-docs.js"></script> </body> </html>
+<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="//use.edgefonts.net/source-code-pro.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" rel="stylesheet" type="text/css"> <!-- there are many other style for highlighted code here: https://cdnjs.com/libraries/highlight.js --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"> <link rel="stylesheet" type="text/css" href="css/api-docs.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> </head> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="js/doc-data.js"></script> <script src="js/api-docs.js"></script> </body> </html>

docs/legacy-docs/api/assets/api-doc-template.html

@@ -1 +1 @@
-<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="//use.edgefonts.net/source-code-pro.js"></script> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <!-- there are many other style for highlighted code here: https://cdnjs.com/libraries/highlight.js --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"> <link rel="stylesheet" type="text/css" href="css/api-docs.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> </head> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="js/doc-data.js"></script> <script src="js/api-docs.js"></script> </body> </html>
+<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="//use.edgefonts.net/source-code-pro.js"></script> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'> <!-- there are many other style for highlighted code here: https://cdnjs.com/libraries/highlight.js --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"> <link rel="stylesheet" type="text/css" href="css/api-docs.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> </head> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <script src="js/doc-data.js"></script> <script src="js/api-docs.js"></script> </body> </html>