web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-10-31 00:08:01 +02:00
Code Releases Activity

feat: generate Typescript definitions (#7954)

Browse Source
This commit is contained in:
Grzegorz Blaszczyk
2022-11-21 23:11:22 +01:00
committed by Pat O'Neill
parent b7080f7d8a
commit 0545df5289
12 changed files with 214 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@@ -1670,9 +1670,9 @@
"dev": true
},
"@types/node": {
"version": "15.0.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-15.0.1.tgz",
"integrity": "sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==",
"version": "18.8.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.3.tgz",
"integrity": "sha512-0os9vz6BpGwxGe9LOhgP/ncvYN5Tx1fNcd2TM3rD/aCGBkysb+ZWpXEocG24h6ZzOi13+VB8HndAQFezsSOw1w==",
"dev": true
},
"@types/normalize-package-data": {
@@ -16113,6 +16113,15 @@
}
}
},
"videojs-contrib-quality-levels": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-2.2.0.tgz",
"integrity": "sha512-r4LFNhjyeBmlGk4Ul43xl+f7sNJ9vFyM6p4NcZNbPlvs1IvykEXCqxvsvaR6KTBjHoHGJnr26grXWcJiLFP+cA==",
"requires": {
"global": "^4.3.2",
"video.js": "^6 || ^7"
}
},
"videojs-font": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",

7
package.json
View File

@@ -5,6 +5,7 @@
"main": "./dist/video.cjs.js",
"module": "./dist/video.es.js",
"style": "./dist/video-js.css",
"types": "./dist/types/video.d.ts",
"copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
"license": "Apache-2.0",
"keywords": [
@@ -25,7 +26,7 @@
"postclean": "shx mkdir -p ./dist/lang ./test/dist",
"changelog": "conventional-changelog -p videojs -i CHANGELOG.md -s",
"build": "npm-run-all build-dev minify copy zip",
"build-dev": "npm-run-all clean lint-errors build:js build:css build:lang build:test",
"build-dev": "npm-run-all clean lint-errors build:js build:css build:lang build:test build:types",
"build:test": "npm-run-all build:test:*",
"build:test:a11y": "shx cp sandbox/descriptions.html.example sandbox/descriptions.test-a11y.html",
"build:test:browserify": "browserify test/require/browserify.js -o test/dist/browserify.js",
@@ -36,6 +37,7 @@
"build:js": "rollup -c",
"build:css": "npm-run-all build:css:*",
"build:css:cdn": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",
"build:types": "tsc",
"postbuild:css:cdn": "postcss --verbose --config postcss.config.js -d dist/alt dist/alt/video-js-cdn.css",
"build:css:default": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs.scss dist/video-js.css",
"postbuild:css:default": "postcss --verbose --config postcss.config.js -d dist/ dist/video-js.css",
@@ -52,6 +54,7 @@
"watch": "npm-run-all -p watch:*",
"watch:lang": "chokidar --initial 'lang/**/!(zh-Hans|zh-Hant)*.json' -c 'npm run build:lang'",
"watch:rollup": "rollup -c -w --no-progress",
"watch:types": "tsc -w",
"watch:css": "npm-run-all -p build:css:default build:css:cdn watch:css:*",
"watch:css:default": "npm run build:css:default -- --watch",
"watch:css:cdn": "npm run build:css:cdn -- --watch",
@@ -103,6 +106,7 @@
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@rollup/plugin-replace": "^2.4.1",
"@types/node": "^18.8.3",
"access-sniff": "^3.2.0",
"autoprefixer": "^10.2.5",
"bestzip": "^2.2.0",
@@ -156,6 +160,7 @@
"shx": "^0.3.2",
"sinon": "^11.1.1",
"tui-jsdoc-template": "^1.2.2",
"typescript": "^4.8.4",
"uglify-js": "^3.6.0",
"unified": "^7.0.2",
"videojs-generate-karma-config": "^8.0.1",

5
src/js/component.js
View File

@@ -25,7 +25,7 @@ class Component {
/**
* A callback that is called when a component is ready. Does not have any
* paramters and any callback value will be ignored.
* parameters and any callback value will be ignored.
*
* @callback Component~ReadyCallback
* @this Component
@@ -700,6 +700,9 @@ class Component {
* Different from event listeners in that if the ready event has already happened
* it will trigger the function immediately.
*
* @param {Component~ReadyCallback} fn
* Function that gets called when the `Component` is ready.
*
* @return {Component}
* Returns itself; method can be chained.
*/

273
src/js/event-target.js
View File

@@ -4,6 +4,8 @@
import * as Events from './utils/events.js';
import window from 'global/window';
let EVENT_MAP;
/**
* `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It
* adds shorthand functions that wrap around lengthy functions. For example:
@@ -12,12 +14,142 @@ import window from 'global/window';
* @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}
* @class EventTarget
*/
const EventTarget = function() {};
class EventTarget {
/**
* Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
* function that will get called when an event with a certain name gets triggered.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to call with `EventTarget`s
*/
on(type, fn) {
// Remove the addEventListener alias before calling Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => { };
Events.on(this, type, fn);
this.addEventListener = ael;
}
/**
* Removes an `event listener` for a specific event from an instance of `EventTarget`.
* This makes it so that the `event listener` will no longer get called when the
* named event happens.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to remove.
*/
off(type, fn) {
Events.off(this, type, fn);
}
/**
* This function will add an `event listener` that gets triggered only once. After the
* first trigger it will get removed. This is like adding an `event listener`
* with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to be called once for each event name.
*/
one(type, fn) {
// Remove the addEventListener aliasing Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => { };
Events.one(this, type, fn);
this.addEventListener = ael;
}
any(type, fn) {
// Remove the addEventListener aliasing Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => { };
Events.any(this, type, fn);
this.addEventListener = ael;
}
/**
* This function causes an event to happen. This will then cause any `event listeners`
* that are waiting for that event, to get called. If there are no `event listeners`
* for an event then nothing will happen.
*
* If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
* Trigger will also call the `on` + `uppercaseEventName` function.
*
* Example:
* 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
* `onClick` if it exists.
*
* @param {string|EventTarget~Event|Object} event
* The name of the event, an `Event`, or an object with a key of type set to
* an event name.
*/
trigger(event) {
const type = event.type || event;
// deprecation
// In a future version we should default target to `this`
// similar to how we default the target to `elem` in
// `Events.trigger`. Right now the default `target` will be
// `document` due to the `Event.fixEvent` call.
if (typeof event === 'string') {
event = { type };
}
event = Events.fixEvent(event);
if (this.allowedEvents_[type] && this['on' + type]) {
this['on' + type](event);
}
Events.trigger(this, event);
}
queueTrigger(event) {
// only set up EVENT_MAP if it'll be used
if (!EVENT_MAP) {
EVENT_MAP = new Map();
}
const type = event.type || event;
let map = EVENT_MAP.get(this);
if (!map) {
map = new Map();
EVENT_MAP.set(this, map);
}
const oldTimeout = map.get(type);
map.delete(type);
window.clearTimeout(oldTimeout);
const timeout = window.setTimeout(() => {
map.delete(type);
// if we cleared out all timeouts for the current target, delete its map
if (map.size === 0) {
map = null;
EVENT_MAP.delete(this);
}
this.trigger(event);
}, 0);
map.set(type, timeout);
}
}
/**
* A Custom DOM event.
*
* @typedef {Object} EventTarget~Event
* @typedef {EventTarget} Event
* @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}
*/
@@ -45,26 +177,6 @@ const EventTarget = function() {};
*/
EventTarget.prototype.allowedEvents_ = {};
/**
* Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a
* function that will get called when an event with a certain name gets triggered.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to call with `EventTarget`s
*/
EventTarget.prototype.on = function(type, fn) {
// Remove the addEventListener alias before calling Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => {};
Events.on(this, type, fn);
this.addEventListener = ael;
};
/**
* An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic
* the standard DOM API.
@@ -74,21 +186,6 @@ EventTarget.prototype.on = function(type, fn) {
*/
EventTarget.prototype.addEventListener = EventTarget.prototype.on;
/**
* Removes an `event listener` for a specific event from an instance of `EventTarget`.
* This makes it so that the `event listener` will no longer get called when the
* named event happens.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to remove.
*/
EventTarget.prototype.off = function(type, fn) {
Events.off(this, type, fn);
};
/**
* An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic
* the standard DOM API.
@@ -98,73 +195,6 @@ EventTarget.prototype.off = function(type, fn) {
*/
EventTarget.prototype.removeEventListener = EventTarget.prototype.off;
/**
* This function will add an `event listener` that gets triggered only once. After the
* first trigger it will get removed. This is like adding an `event listener`
* with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.
*
* @param {string|string[]} type
* An event name or an array of event names.
*
* @param {EventTarget~EventListener} fn
* The function to be called once for each event name.
*/
EventTarget.prototype.one = function(type, fn) {
// Remove the addEventListener aliasing Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => {};
Events.one(this, type, fn);
this.addEventListener = ael;
};
EventTarget.prototype.any = function(type, fn) {
// Remove the addEventListener aliasing Events.on
// so we don't get into an infinite type loop
const ael = this.addEventListener;
this.addEventListener = () => {};
Events.any(this, type, fn);
this.addEventListener = ael;
};
/**
* This function causes an event to happen. This will then cause any `event listeners`
* that are waiting for that event, to get called. If there are no `event listeners`
* for an event then nothing will happen.
*
* If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.
* Trigger will also call the `on` + `uppercaseEventName` function.
*
* Example:
* 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call
* `onClick` if it exists.
*
* @param {string|EventTarget~Event|Object} event
* The name of the event, an `Event`, or an object with a key of type set to
* an event name.
*/
EventTarget.prototype.trigger = function(event) {
const type = event.type || event;
// deprecation
// In a future version we should default target to `this`
// similar to how we default the target to `elem` in
// `Events.trigger`. Right now the default `target` will be
// `document` due to the `Event.fixEvent` call.
if (typeof event === 'string') {
event = {type};
}
event = Events.fixEvent(event);
if (this.allowedEvents_[type] && this['on' + type]) {
this['on' + type](event);
}
Events.trigger(this, event);
};
/**
* An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic
* the standard DOM API.
@@ -174,39 +204,4 @@ EventTarget.prototype.trigger = function(event) {
*/
EventTarget.prototype.dispatchEvent = EventTarget.prototype.trigger;
let EVENT_MAP;
EventTarget.prototype.queueTrigger = function(event) {
// only set up EVENT_MAP if it'll be used
if (!EVENT_MAP) {
EVENT_MAP = new Map();
}
const type = event.type || event;
let map = EVENT_MAP.get(this);
if (!map) {
map = new Map();
EVENT_MAP.set(this, map);
}
const oldTimeout = map.get(type);
map.delete(type);
window.clearTimeout(oldTimeout);
const timeout = window.setTimeout(() => {
map.delete(type);
// if we cleared out all timeouts for the current target, delete its map
if (map.size === 0) {
map = null;
EVENT_MAP.delete(this);
}
this.trigger(event);
}, 0);
map.set(type, timeout);
};
export default EventTarget;

1
src/js/fullscreen-api.js
View File

@@ -1,7 +1,6 @@
/**
* @file fullscreen-api.js
* @module fullscreen-api
* @private
*/
import document from 'global/document';

1
src/js/menu/menu-keys.js
View File

@@ -6,6 +6,7 @@
* All keys used for operation of a menu (`MenuButton`, `Menu`, and `MenuItem`)
* Note that 'Enter' and 'Space' are not included here (otherwise they would
* prevent the `MenuButton` and `MenuItem` from being keyboard-clickable)
*
* @typedef MenuKeys
* @array
*/

1
src/js/resize-manager.js
View File

@@ -14,6 +14,7 @@ import Component from './component.js';
*
* If the ResizeObserver is available natively, it will be used. A polyfill can be passed in as an option.
* If a `playerresize` event is not needed, the ResizeManager component can be removed from the player, see the example below.
*
* @example <caption>How to disable the resize manager</caption>
* const player = videojs('#vid', {
* resizeManager: false

2
src/js/tech/html5.js
View File

@@ -28,7 +28,7 @@ class Html5 extends Tech {
* @param {Object} [options]
* The key/value store of player options.
*
* @param {Component~ReadyCallback} ready
* @param {Component~ReadyCallback} [ready]
* Callback function to call when the `HTML5` Tech is ready.
*/
constructor(options, ready) {

2
src/js/tech/tech.js
View File

@@ -88,7 +88,7 @@ class Tech extends Component {
* @param {Object} [options]
* The key/value store of player options.
*
* @param {Component~ReadyCallback} ready
* @param {Component~ReadyCallback} [ready]
* Callback function to call when the `HTML5` Tech is ready.
*/
constructor(options = {}, ready = function() {}) {

49
src/js/tracks/html-track-element.js
View File

@@ -5,16 +5,6 @@
import EventTarget from '../event-target';
import TextTrack from '../tracks/text-track';
/**
* @memberof HTMLTrackElement
* @typedef {HTMLTrackElement~ReadyState}
* @enum {number}
*/
const NONE = 0;
const LOADING = 1;
const LOADED = 2;
const ERROR = 3;
/**
* A single track represented in the DOM.
*
@@ -98,14 +88,14 @@ class HTMLTrackElement extends EventTarget {
}
});
readyState = NONE;
readyState = HTMLTrackElement.NONE;
/**
* @listens TextTrack#loadeddata
* @fires HTMLTrackElement#load
*/
track.addEventListener('loadeddata', () => {
readyState = LOADED;
readyState = HTMLTrackElement.LOADED;
this.trigger({
type: 'load',
@@ -119,9 +109,36 @@ HTMLTrackElement.prototype.allowedEvents_ = {
load: 'load'
};
HTMLTrackElement.NONE = NONE;
HTMLTrackElement.LOADING = LOADING;
HTMLTrackElement.LOADED = LOADED;
HTMLTrackElement.ERROR = ERROR;
/**
* The text track not loaded state.
*
* @type {number}
* @static
*/
HTMLTrackElement.NONE = 0;
/**
* The text track loading state.
*
* @type {number}
* @static
*/
HTMLTrackElement.LOADING = 1;
/**
* The text track loaded state.
*
* @type {number}
* @static
*/
HTMLTrackElement.LOADED = 2;
/**
* The text track failed to load state.
*
* @type {number}
* @static
*/
HTMLTrackElement.ERROR = 3;
export default HTMLTrackElement;

9
src/js/video.js
View File

@@ -49,6 +49,13 @@ import { use as middlewareUse, TERMINATOR } from './tech/middleware.js';
*/
const normalizeId = (id) => id.indexOf('#') === 0 ? id.slice(1) : id;
/**
* A callback that is called when a component is ready. Does not have any
* parameters and any callback value will be ignored. See: {@link Component~ReadyCallback}
*
* @callback ReadyCallback
*/
/**
* The `videojs()` function doubles as the main function for users to create a
* {@link Player} instance as well as the main library namespace.
@@ -110,7 +117,7 @@ const normalizeId = (id) => id.indexOf('#') === 0 ? id.slice(1) : id;
* Options object for providing settings.
* See: [Options Guide](https://docs.videojs.com/tutorial-options.html).
*
* @param {Component~ReadyCallback} [ready]
* @param {ReadyCallback} [ready]
* A function to be called when the {@link Player} and {@link Tech} are
* ready.
*

13
tsconfig.json Normal file
View File

@@ -0,0 +1,13 @@
{
"include": ["src/js/**/*"],
"compilerOptions": {
"allowJs": true,
"declaration": true,
"emitDeclarationOnly": true,
"outDir": "dist/types",
"declarationMap": true,
"skipLibCheck": true,
"checkJs": false,
"preserveWatchOutput": true
}
}