Tracking de l'application VApp (IHM du jeu)

This commit is contained in:
2025-05-11 18:04:12 +02:00
commit 89e9db9b62
17763 changed files with 3718499 additions and 0 deletions

View File

@ -0,0 +1,30 @@
# CONTRIBUTING
We welcome contributions from everyone!
## Getting Started
Make sure you have Node.js 8 or higher and npm installed.
1. Fork this repository and clone your fork
1. Install dependencies: `npm install`
1. Run a development server: `npm start`
### Making Changes
Refer to the [video.js plugin conventions][conventions] for more detail on best practices and tooling for video.js plugin authorship.
When you've made your changes, push your commit(s) to your fork and issue a pull request against the original repository.
### Running Tests
Testing is a crucial part of any software project. For all but the most trivial changes (typos, etc) test cases are expected. Tests are run in actual browsers using [Karma][karma].
- In all available and supported browsers: `npm test`
- In a specific browser: `npm run test:chrome`, `npm run test:firefox`, etc.
- While development server is running (`npm start`), navigate to [`http://localhost:9999/test/`][local]
[karma]: http://karma-runner.github.io/
[local]: http://localhost:9999/test/
[conventions]: https://github.com/videojs/generator-videojs-plugin/blob/master/docs/conventions.md

View File

@ -0,0 +1,13 @@
Copyright Brightcove, Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@ -0,0 +1,210 @@
# videojs-contrib-quality-levels
[![Build Status](https://travis-ci.org/videojs/videojs-contrib-quality-levels.svg?branch=master)](https://travis-ci.org/videojs/videojs-contrib-quality-levels)
[![Greenkeeper badge](https://badges.greenkeeper.io/videojs/videojs-contrib-quality-levels.svg)](https://greenkeeper.io/)
[![Slack Status](http://slack.videojs.com/badge.svg)](http://slack.videojs.com)
[![NPM](https://nodei.co/npm/videojs-contrib-quality-levels.png?downloads=true&downloadRank=true)](https://nodei.co/npm/videojs-contrib-quality-levels/)
A plugin that provides a framework of working with source quality levels.
Maintenance Status: Stable
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Installation](#installation)
- [Using](#using)
- [Supporting Quality Levels for your source](#supporting-quality-levels-for-your-source)
- [Populating the list](#populating-the-list)
- [Triggering the 'change' event](#triggering-the-change-event)
- [Supported Projects](#supported-projects)
- [Including the Plugin](#including-the-plugin)
- [`<script>` Tag](#script-tag)
- [Browserify](#browserify)
- [RequireJS/AMD](#requirejsamd)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Installation
- [Installation](#installation)
- [Using](#using)
- [Populating the list](#populating-the-list)
- [HLS](#hls)
- [Including the Plugin](#including-the-plugin)
- [`<script>` Tag](#script-tag)
- [Browserify](#browserify)
- [RequireJS/AMD](#requirejsamd)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Installation
```sh
npm install --save videojs-contrib-quality-levels
```
The npm installation is preferred, but Bower works, too.
```sh
bower install --save videojs-contrib-quality-levels
```
## Using
The list of `QualityLevels` can be accessed using `qualityLevels()` on the Player object.
With this list, you can:
* See which quality levels are available for the current source
* Enable or disable specific quality levels to change which levels are selected by ABR
* See which quality level is currently selected by ABR
* Detect when the selected quality level changes
Example
```js
let player = videojs('my-video');
let qualityLevels = player.qualityLevels();
// disable quality levels with less than 720 horizontal lines of resolution when added
// to the list.
qualityLevels.on('addqualitylevel', function(event) {
let qualityLevel = event.qualityLevel;
if (qualityLevel.height >= 720) {
qualityLevel.enabled = true;
} else {
qualityLevel.enabled = false;
}
});
// example function that will toggle quality levels between SD and HD, defining and HD
// quality as having 720 horizontal lines of resolution or more
let toggleQuality = (function() {
let enable720 = true;
return function() {
for (let qualityLevel of qualityLevels) {
if (qualityLevel.height >= 720) {
qualityLevel.enabled = enable720;
} else {
qualityLevel.enabled = !enable720;
}
}
enable720 = !enable720;
};
})();
let currentSelectedQualityLevelIndex = qualityLevels.selectedIndex; // -1 if no level selected
// Listen to change events for when the player selects a new quality level
qualityLevels.on('change', function() {
console.log('Quality Level changed!');
console.log('New level:', qualityLevels[qualityLevels.selectedIndex]);
});
```
## Supporting Quality Levels for your source
This project provides the framework for working with source quality levels. Just including this project alongside videojs does not necessarily mean that there will be levels available in the list or that any events will be triggered. Some projects within the videojs org supports this project and automatically populates the list and triggers `change` events when the selected quality level changes. See the [Supported Projects](#supported-projects) section for a list of these projects.
If you are not using one of the supported projects, but still want to use quality levels with your source, you will have to implement your own plugin that populates the list and triggers change events when selected level changes. Implementing such a plugin is very specific to the source in question, so it is difficult to provide specific examples, but will most likely require a custom middleware, source handler, or tech.
### Populating the list
Initially the list of quality levels will be empty. You can add quality levels to the list by using `QualityLevelList.addQualityLevel` for each quality level specific to your source. `QualityLevelList.addQualityLevel` takes in a `Representation` object (or generic object with the required properties). All properties are required except `width`, `height` and `frameRate`.
Example Representation
```js
Representation {
id: string,
width: number,
height: number,
bitrate: number,
frameRate: number,
enabled: function
}
```
The `enabled` function should take an optional boolean to enable or disable the representation and return whether it is currently enabled.
You can also remove quality levels from the list using `QualityLevelList.removeQualityLevel`. Call this function with the reference to the `QualityLevel` object you wish to remove. The `QualityLevelList.selectedIndex` property will automatically be updated when a quality level is removed so that it still refers to the correct level. If the currently selected level is removed, the `selectedIndex` will be set to `-1`.
### Triggering the 'change' event
When your playback plugin changes the selected quality for playback, you will also have to trigger the `change` event on the `QualityLevelList` and update the `QualityLevelList.selectedIndex_`, as it does not have knowledge of which quality is active in playback.
```js
let player = videojs('my-video');
let qualityLevels = player.qualityLevels();
qualityLevels.selectedIndex_ = 0;
qualityLevels.trigger({ type: 'change', selectedIndex: 0 });
```
### Supported Projects
The following projects have built-in support for videojs-contrib-quality-levels and will automatically populate the list with available levels and trigger `change` events when the quality level changes.
* HLS
* [@videojs/http-streaming](https://github.com/videojs/http-streaming)
* Recommended for HLS
* http-streaming is included by default with video.js version 7+
* [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)
* version 4.1+
* DASH
* [@videojs/http-streaming](https://github.com/videojs/http-streaming)
* http-streaming is included by default with video.js version 7+
## Including the Plugin
To include videojs-contrib-quality-levels on your website or web application, use any of the following methods.
### `<script>` Tag
This is the simplest case. Get the script in whatever way you prefer and include the plugin _after_ you include [video.js][videojs], so that the `videojs` global is available.
```html
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-contrib-quality-levels.min.js"></script>
<script>
var player = videojs('my-video');
player.qualityLevels();
</script>
```
### Browserify
When using with Browserify, install videojs-contrib-quality-levels via npm and `require` the plugin as you would any other module.
```js
var videojs = require('video.js');
// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-contrib-quality-levels');
var player = videojs('my-video');
player.qualityLevels();
```
### RequireJS/AMD
When using with RequireJS (or another AMD library), get the script in whatever way you prefer and `require` the plugin as you normally would:
```js
require(['video.js', 'videojs-contrib-quality-levels'], function(videojs) {
var player = videojs('my-video');
player.qualityLevels();
});
```
## License
Apache-2.0. Copyright (c) Brightcove, Inc.
[videojs]: http://videojs.com/

View File

@ -0,0 +1,18 @@
export default qualityLevels;
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
declare function qualityLevels(options: any): QualityLevelList;
declare namespace qualityLevels {
export { VERSION };
}
import QualityLevelList from './quality-level-list.js';
//# sourceMappingURL=plugin.d.ts.map

View File

@ -0,0 +1 @@
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.js"],"names":[],"mappings":";AA+BA;;;;;;;;;;GAUG;AACH,8CAFY,gBAAgB,CAI3B;;;;6BA3C4B,yBAAyB"}

View File

@ -0,0 +1,75 @@
export default QualityLevelList;
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
declare class QualityLevelList extends videojs.EventTarget {
levels_: any[];
selectedIndex_: number;
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation: Representation | any): QualityLevel;
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel: QualityLevel): QualityLevel | null;
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id: string): QualityLevel | null;
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose(): void;
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
allowedEvents_: {
change: string;
addqualitylevel: string;
removequalitylevel: string;
};
[Symbol.iterator]: () => IterableIterator<any>;
}
import videojs from 'video.js';
import QualityLevel from './quality-level.js';
//# sourceMappingURL=quality-level-list.d.ts.map

View File

@ -0,0 +1 @@
{"version":3,"file":"quality-level-list.d.ts","sourceRoot":"","sources":["../../src/quality-level-list.js"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;;;;;GAmBG;AACH;IASI,eAAiB;IACjB,uBAAwB;IA+B1B;;;;;;;;;;;;OAYG;IACH,gCAVW,oBAAqB,GAOpB,YAAY,CA+BvB;IAED;;;;;;OAMG;IACH,iCAJW,YAAY,GACX,YAAY,GAAC,IAAI,CA2B5B;IAED;;;;;;OAMG;IACH,wBAJW,MAAM,GACL,YAAY,GAAC,IAAI,CAY5B;IAED;;;;OAIG;IACH,gBAGC;IAGH;;;;OAIG;IACH;;;;MAAyC;IAnHrC,+CAAmD;CA4GtD;oBAvKmB,UAAU;yBACL,oBAAoB"}

View File

@ -0,0 +1,36 @@
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
export default class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation: Representation | any);
id: any;
label: any;
width: any;
height: any;
bitrate: any;
frameRate: any;
enabled_: any;
}
//# sourceMappingURL=quality-level.d.ts.map

View File

@ -0,0 +1 @@
{"version":3,"file":"quality-level.d.ts","sourceRoot":"","sources":["../../src/quality-level.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH;IAEE;;;;;;;;;;OAUG;IACH,4BARW,oBAAqB,EAyC/B;IA7BC,QAA4B;IAC5B,WAAsB;IACtB,WAAkC;IAClC,YAAoC;IACpC,aAAwC;IACxC,eAA0C;IAC1C,cAAuC;CAwB1C"}

View File

@ -0,0 +1,281 @@
/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
'use strict';
var videojs = require('video.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation) {
let level = this; // eslint-disable-line
level.id = representation.id;
level.label = level.id;
level.width = representation.width;
level.height = representation.height;
level.bitrate = representation.bandwidth;
level.frameRate = representation.frameRate;
level.enabled_ = representation.enabled;
Object.defineProperty(level, 'enabled', {
/**
* Get whether the QualityLevel is enabled.
*
* @return {boolean} True if the QualityLevel is enabled.
*/
get() {
return level.enabled_();
},
/**
* Enable or disable the QualityLevel.
*
* @param {boolean} enable true to enable QualityLevel, false to disable.
*/
set(enable) {
level.enabled_(enable);
}
});
return level;
}
}
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
class QualityLevelList extends videojs__default["default"].EventTarget {
/**
* Creates a QualityLevelList.
*/
constructor() {
super();
let list = this; // eslint-disable-line
list.levels_ = [];
list.selectedIndex_ = -1;
/**
* Get the index of the currently selected QualityLevel.
*
* @returns {number} The index of the selected QualityLevel. -1 if none selected.
* @readonly
*/
Object.defineProperty(list, 'selectedIndex', {
get() {
return list.selectedIndex_;
}
});
/**
* Get the length of the list of QualityLevels.
*
* @returns {number} The length of the list.
* @readonly
*/
Object.defineProperty(list, 'length', {
get() {
return list.levels_.length;
}
});
list[Symbol.iterator] = () => list.levels_.values();
return list;
}
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation) {
let qualityLevel = this.getQualityLevelById(representation.id);
// Do not add duplicate quality levels
if (qualityLevel) {
return qualityLevel;
}
const index = this.levels_.length;
qualityLevel = new QualityLevel(representation);
if (!('' + index in this)) {
Object.defineProperty(this, index, {
get() {
return this.levels_[index];
}
});
}
this.levels_.push(qualityLevel);
this.trigger({
qualityLevel,
type: 'addqualitylevel'
});
return qualityLevel;
}
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel) {
let removed = null;
for (let i = 0, l = this.length; i < l; i++) {
if (this[i] === qualityLevel) {
removed = this.levels_.splice(i, 1)[0];
if (this.selectedIndex_ === i) {
this.selectedIndex_ = -1;
} else if (this.selectedIndex_ > i) {
this.selectedIndex_--;
}
break;
}
}
if (removed) {
this.trigger({
qualityLevel,
type: 'removequalitylevel'
});
}
return removed;
}
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id) {
for (let i = 0, l = this.length; i < l; i++) {
const level = this[i];
if (level.id === id) {
return level;
}
}
return null;
}
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose() {
this.selectedIndex_ = -1;
this.levels_.length = 0;
}
}
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
QualityLevelList.prototype.allowedEvents_ = {
change: 'change',
addqualitylevel: 'addqualitylevel',
removequalitylevel: 'removequalitylevel'
};
// emulate attribute EventHandler support to allow for feature detection
for (const event in QualityLevelList.prototype.allowedEvents_) {
QualityLevelList.prototype['on' + event] = null;
}
var version = "4.1.0";
/**
* Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
* event handlers.
*
* @param {Player} player Player object.
* @param {Object} options Plugin options object.
* @return {QualityLevelList} a list of QualityLevels
*/
const initPlugin = function (player, options) {
const originalPluginFn = player.qualityLevels;
const qualityLevelList = new QualityLevelList();
const disposeHandler = function () {
qualityLevelList.dispose();
player.qualityLevels = originalPluginFn;
player.off('dispose', disposeHandler);
};
player.on('dispose', disposeHandler);
player.qualityLevels = () => qualityLevelList;
player.qualityLevels.VERSION = version;
return qualityLevelList;
};
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
const qualityLevels = function (options) {
return initPlugin(this, videojs__default["default"].obj.merge({}, options));
};
// Register the plugin with video.js.
videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
// Include the version number.
qualityLevels.VERSION = version;
module.exports = qualityLevels;

View File

@ -0,0 +1,275 @@
/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
import videojs from 'video.js';
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation) {
let level = this; // eslint-disable-line
level.id = representation.id;
level.label = level.id;
level.width = representation.width;
level.height = representation.height;
level.bitrate = representation.bandwidth;
level.frameRate = representation.frameRate;
level.enabled_ = representation.enabled;
Object.defineProperty(level, 'enabled', {
/**
* Get whether the QualityLevel is enabled.
*
* @return {boolean} True if the QualityLevel is enabled.
*/
get() {
return level.enabled_();
},
/**
* Enable or disable the QualityLevel.
*
* @param {boolean} enable true to enable QualityLevel, false to disable.
*/
set(enable) {
level.enabled_(enable);
}
});
return level;
}
}
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
class QualityLevelList extends videojs.EventTarget {
/**
* Creates a QualityLevelList.
*/
constructor() {
super();
let list = this; // eslint-disable-line
list.levels_ = [];
list.selectedIndex_ = -1;
/**
* Get the index of the currently selected QualityLevel.
*
* @returns {number} The index of the selected QualityLevel. -1 if none selected.
* @readonly
*/
Object.defineProperty(list, 'selectedIndex', {
get() {
return list.selectedIndex_;
}
});
/**
* Get the length of the list of QualityLevels.
*
* @returns {number} The length of the list.
* @readonly
*/
Object.defineProperty(list, 'length', {
get() {
return list.levels_.length;
}
});
list[Symbol.iterator] = () => list.levels_.values();
return list;
}
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation) {
let qualityLevel = this.getQualityLevelById(representation.id);
// Do not add duplicate quality levels
if (qualityLevel) {
return qualityLevel;
}
const index = this.levels_.length;
qualityLevel = new QualityLevel(representation);
if (!('' + index in this)) {
Object.defineProperty(this, index, {
get() {
return this.levels_[index];
}
});
}
this.levels_.push(qualityLevel);
this.trigger({
qualityLevel,
type: 'addqualitylevel'
});
return qualityLevel;
}
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel) {
let removed = null;
for (let i = 0, l = this.length; i < l; i++) {
if (this[i] === qualityLevel) {
removed = this.levels_.splice(i, 1)[0];
if (this.selectedIndex_ === i) {
this.selectedIndex_ = -1;
} else if (this.selectedIndex_ > i) {
this.selectedIndex_--;
}
break;
}
}
if (removed) {
this.trigger({
qualityLevel,
type: 'removequalitylevel'
});
}
return removed;
}
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id) {
for (let i = 0, l = this.length; i < l; i++) {
const level = this[i];
if (level.id === id) {
return level;
}
}
return null;
}
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose() {
this.selectedIndex_ = -1;
this.levels_.length = 0;
}
}
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
QualityLevelList.prototype.allowedEvents_ = {
change: 'change',
addqualitylevel: 'addqualitylevel',
removequalitylevel: 'removequalitylevel'
};
// emulate attribute EventHandler support to allow for feature detection
for (const event in QualityLevelList.prototype.allowedEvents_) {
QualityLevelList.prototype['on' + event] = null;
}
var version = "4.1.0";
/**
* Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
* event handlers.
*
* @param {Player} player Player object.
* @param {Object} options Plugin options object.
* @return {QualityLevelList} a list of QualityLevels
*/
const initPlugin = function (player, options) {
const originalPluginFn = player.qualityLevels;
const qualityLevelList = new QualityLevelList();
const disposeHandler = function () {
qualityLevelList.dispose();
player.qualityLevels = originalPluginFn;
player.off('dispose', disposeHandler);
};
player.on('dispose', disposeHandler);
player.qualityLevels = () => qualityLevelList;
player.qualityLevels.VERSION = version;
return qualityLevelList;
};
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
const qualityLevels = function (options) {
return initPlugin(this, videojs.obj.merge({}, options));
};
// Register the plugin with video.js.
videojs.registerPlugin('qualityLevels', qualityLevels);
// Include the version number.
qualityLevels.VERSION = version;
export { qualityLevels as default };

View File

@ -0,0 +1,285 @@
/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
typeof define === 'function' && define.amd ? define(['video.js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.videojsContribQualityLevels = factory(global.videojs));
})(this, (function (videojs) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var videojs__default = /*#__PURE__*/_interopDefaultLegacy(videojs);
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation) {
let level = this; // eslint-disable-line
level.id = representation.id;
level.label = level.id;
level.width = representation.width;
level.height = representation.height;
level.bitrate = representation.bandwidth;
level.frameRate = representation.frameRate;
level.enabled_ = representation.enabled;
Object.defineProperty(level, 'enabled', {
/**
* Get whether the QualityLevel is enabled.
*
* @return {boolean} True if the QualityLevel is enabled.
*/
get() {
return level.enabled_();
},
/**
* Enable or disable the QualityLevel.
*
* @param {boolean} enable true to enable QualityLevel, false to disable.
*/
set(enable) {
level.enabled_(enable);
}
});
return level;
}
}
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
class QualityLevelList extends videojs__default["default"].EventTarget {
/**
* Creates a QualityLevelList.
*/
constructor() {
super();
let list = this; // eslint-disable-line
list.levels_ = [];
list.selectedIndex_ = -1;
/**
* Get the index of the currently selected QualityLevel.
*
* @returns {number} The index of the selected QualityLevel. -1 if none selected.
* @readonly
*/
Object.defineProperty(list, 'selectedIndex', {
get() {
return list.selectedIndex_;
}
});
/**
* Get the length of the list of QualityLevels.
*
* @returns {number} The length of the list.
* @readonly
*/
Object.defineProperty(list, 'length', {
get() {
return list.levels_.length;
}
});
list[Symbol.iterator] = () => list.levels_.values();
return list;
}
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation) {
let qualityLevel = this.getQualityLevelById(representation.id);
// Do not add duplicate quality levels
if (qualityLevel) {
return qualityLevel;
}
const index = this.levels_.length;
qualityLevel = new QualityLevel(representation);
if (!('' + index in this)) {
Object.defineProperty(this, index, {
get() {
return this.levels_[index];
}
});
}
this.levels_.push(qualityLevel);
this.trigger({
qualityLevel,
type: 'addqualitylevel'
});
return qualityLevel;
}
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel) {
let removed = null;
for (let i = 0, l = this.length; i < l; i++) {
if (this[i] === qualityLevel) {
removed = this.levels_.splice(i, 1)[0];
if (this.selectedIndex_ === i) {
this.selectedIndex_ = -1;
} else if (this.selectedIndex_ > i) {
this.selectedIndex_--;
}
break;
}
}
if (removed) {
this.trigger({
qualityLevel,
type: 'removequalitylevel'
});
}
return removed;
}
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id) {
for (let i = 0, l = this.length; i < l; i++) {
const level = this[i];
if (level.id === id) {
return level;
}
}
return null;
}
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose() {
this.selectedIndex_ = -1;
this.levels_.length = 0;
}
}
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
QualityLevelList.prototype.allowedEvents_ = {
change: 'change',
addqualitylevel: 'addqualitylevel',
removequalitylevel: 'removequalitylevel'
};
// emulate attribute EventHandler support to allow for feature detection
for (const event in QualityLevelList.prototype.allowedEvents_) {
QualityLevelList.prototype['on' + event] = null;
}
var version = "4.1.0";
/**
* Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
* event handlers.
*
* @param {Player} player Player object.
* @param {Object} options Plugin options object.
* @return {QualityLevelList} a list of QualityLevels
*/
const initPlugin = function (player, options) {
const originalPluginFn = player.qualityLevels;
const qualityLevelList = new QualityLevelList();
const disposeHandler = function () {
qualityLevelList.dispose();
player.qualityLevels = originalPluginFn;
player.off('dispose', disposeHandler);
};
player.on('dispose', disposeHandler);
player.qualityLevels = () => qualityLevelList;
player.qualityLevels.VERSION = version;
return qualityLevelList;
};
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
const qualityLevels = function (options) {
return initPlugin(this, videojs__default["default"].obj.merge({}, options));
};
// Register the plugin with video.js.
videojs__default["default"].registerPlugin('qualityLevels', qualityLevels);
// Include the version number.
qualityLevels.VERSION = version;
return qualityLevels;
}));

View File

@ -0,0 +1,2 @@
/*! @name videojs-contrib-quality-levels @version 4.1.0 @license Apache-2.0 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).videojsContribQualityLevels=t(e.videojs)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=t(e);class i{constructor(e){let t=this;return t.id=e.id,t.label=t.id,t.width=e.width,t.height=e.height,t.bitrate=e.bandwidth,t.frameRate=e.frameRate,t.enabled_=e.enabled,Object.defineProperty(t,"enabled",{get:()=>t.enabled_(),set(e){t.enabled_(e)}}),t}}class s extends l.default.EventTarget{constructor(){super();let e=this;return e.levels_=[],e.selectedIndex_=-1,Object.defineProperty(e,"selectedIndex",{get:()=>e.selectedIndex_}),Object.defineProperty(e,"length",{get:()=>e.levels_.length}),e[Symbol.iterator]=()=>e.levels_.values(),e}addQualityLevel(e){let t=this.getQualityLevelById(e.id);if(t)return t;const l=this.levels_.length;return t=new i(e),""+l in this||Object.defineProperty(this,l,{get(){return this.levels_[l]}}),this.levels_.push(t),this.trigger({qualityLevel:t,type:"addqualitylevel"}),t}removeQualityLevel(e){let t=null;for(let l=0,i=this.length;l<i;l++)if(this[l]===e){t=this.levels_.splice(l,1)[0],this.selectedIndex_===l?this.selectedIndex_=-1:this.selectedIndex_>l&&this.selectedIndex_--;break}return t&&this.trigger({qualityLevel:e,type:"removequalitylevel"}),t}getQualityLevelById(e){for(let t=0,l=this.length;t<l;t++){const l=this[t];if(l.id===e)return l}return null}dispose(){this.selectedIndex_=-1,this.levels_.length=0}}s.prototype.allowedEvents_={change:"change",addqualitylevel:"addqualitylevel",removequalitylevel:"removequalitylevel"};for(const e in s.prototype.allowedEvents_)s.prototype["on"+e]=null;var n="4.1.0";const d=function(e){return function(e,t){const l=e.qualityLevels,i=new s,d=function(){i.dispose(),e.qualityLevels=l,e.off("dispose",d)};return e.on("dispose",d),e.qualityLevels=()=>i,e.qualityLevels.VERSION=n,i}(this,l.default.obj.merge({},e))};return l.default.registerPlugin("qualityLevels",d),d.VERSION=n,d}));

View File

@ -0,0 +1,113 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>videojs-contrib-quality-levels Demo</title>
<link href="/node_modules/video.js/dist/video-js.css" rel="stylesheet">
<style>
button.enabled {
background: SkyBlue;
}
button.selected {
background: SpringGreen;
}
button.disabled {
background: red;
}
</style>
</head>
<body>
<div id="fixture">
</div>
<div id="quality-levels">
<h2>Quality Levels:</h2>
</div>
<ul>
<li><a href="/test/debug.html">Run unit tests in browser.</a></li>
<li><a href="/docs/api/">Read generated docs.</a></li>
</ul>
<script src="/node_modules/video.js/dist/video.js"></script>
<script src="/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<script src="/dist/videojs-contrib-quality-levels.js"></script>
<script>
function createQualityButton(qualityLevel, parent) {
var button = document.createElement('button');
var classes = button.classList;
if (qualityLevel.enabled) {
classes.add('enabled');
} else {
classes.add('disabled');
}
button.innerHTML = qualityLevel.id + ': ' + qualityLevel.bitrate + ' kbps';
button.id = 'quality-level-' + qualityLevel.id;
button.onclick = function() {
var old = qualityLevel.enabled;
qualityLevel.enabled = !old;
button.classList.toggle('enabled');
button.classList.toggle('disabled');
}
parent.appendChild(button);
}
function createPlayer(callback) {
var video = document.createElement('video');
video.id = 'videojs-contrib-quality-levels-player';
video.className = 'video-js vjs-default-skin';
video.setAttribute('controls', true);
video.setAttribute('height', 300);
video.setAttribute('width', 600);
document.querySelector('#fixture').appendChild(video);
var options = {
autoplay: false,
qualityLevels: {}
};
var url = 'https://hslsslak-a.akamaihd.net/3303963094001/3303963094001_5147618278001_5147609827001.m3u8?pubId=3303963094001&videoId=5147609827001';
var type = 'application/x-mpegURL';
try {
window.player = videojs(video.id, options);
window.player.src({
src: url,
type: type
});
callback(window.player);
} catch(err) {
console.log("caught an error trying to create and add src to player:", err);
}
}
function setup(player) {
player.ready(function() {
var qualityLevels = player.qualityLevels();
var container = document.getElementById('quality-levels');
qualityLevels.on('addqualitylevel', function(event) {
createQualityButton(event.qualityLevel, container);
});
qualityLevels.on('change', function(event) {
for (var i = 0; i < qualityLevels.length; i++) {
var level = qualityLevels[i];
var button = document.getElementById('quality-level-' + level.id);
button.classList.remove('selected');
}
var selected = qualityLevels[event.selectedIndex];
var button = document.getElementById('quality-level-' + selected.id);
button.classList.add('selected');
})
});
}
(function(window, videojs) {
createPlayer(setup);
})(window, window.videojs);
</script>
</body>
</html>

View File

@ -0,0 +1,109 @@
{
"name": "videojs-contrib-quality-levels",
"version": "4.1.0",
"description": "Exposes a list of quality levels available for the source.",
"main": "dist/videojs-contrib-quality-levels.cjs.js",
"types": "dist/types/plugin.d.ts",
"jsnext:main": "src/plugin.js",
"generator-videojs-plugin": {
"version": "8.0.0"
},
"repository": "videojs/videojs-contrib-quality-levels",
"scripts": {
"prebuild": "npm run clean",
"build": "npm-run-all -s clean -p build:*",
"build-prod": "cross-env-shell NO_TEST_BUNDLE=1 'npm run build'",
"build-test": "cross-env-shell TEST_BUNDLE_ONLY=1 'npm run build'",
"build:js": "rollup -c scripts/rollup.config.js",
"build:types": "tsc",
"clean": "shx rm -rf ./dist ./test/dist ./cjs ./es && shx mkdir -p ./dist ./test/dist ./cjs ./es",
"postclean": "shx mkdir -p ./dist ./test/dist",
"docs": "npm-run-all docs:*",
"docs:api": "jsdoc src -c scripts/jsdoc.config.json -r -d docs/api",
"docs:toc": "doctoc --notitle README.md",
"lint": "vjsstandard",
"server": "karma start scripts/karma.conf.js --singleRun=false --auto-watch",
"start": "npm-run-all -p server watch",
"pretest": "npm-run-all lint build",
"test": "npm-run-all lint build-test && karma start scripts/karma.conf.js",
"posttest": "shx cat test/dist/coverage/text.txt",
"update-changelog": "conventional-changelog -p videojs -i CHANGELOG.md -s",
"preversion": "npm test",
"version": "is-prerelease || npm run update-changelog && git add CHANGELOG.md",
"watch": "npm-run-all -p watch:*",
"watch:js": "npm run build:js -- -w",
"prepublishOnly": "npm-run-all build-prod && vjsverify --verbose --skip-es-check",
"prepare": "husky install"
},
"keywords": [
"videojs",
"videojs-plugin"
],
"author": "Brightcove, Inc.",
"license": "Apache-2.0",
"copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
"videojs-plugin": {
"script": "dist/videojs-contrib-quality-levels.min.js"
},
"vjsstandard": {
"ignore": [
"cjs",
"dist",
"docs",
"ejs",
"test/dist"
]
},
"files": [
"CONTRIBUTING.md",
"dist/",
"docs/",
"index.html",
"scripts/",
"src/",
"test/"
],
"dependencies": {
"global": "^4.4.0"
},
"peerDependencies": {
"video.js": "^8"
},
"devDependencies": {
"@babel/cli": "^7.13.16",
"@babel/runtime": "^7.14.0",
"@videojs/babel-config": "^0.2.0",
"@videojs/generator-helpers": "~2.0.2",
"conventional-changelog-cli": "^2.0.1",
"conventional-changelog-videojs": "^3.0.0",
"doctoc": "^1.3.1",
"husky": "^8.0.3",
"jsdoc": "^3.6.11",
"karma": "^6.3.2",
"lint-staged": "^7.2.2",
"not-prerelease": "^1.0.1",
"npm-merge-driver-install": "^1.0.0",
"npm-run-all": "^4.1.5",
"pkg-ok": "^2.2.0",
"rollup": "^2.46.0",
"semver": "^5.1.0",
"shx": "^0.3.2",
"sinon": "^9.1.0",
"typescript": "^5.4.2",
"video.js": "^8",
"videojs-generate-karma-config": "~8.0.0",
"videojs-generate-rollup-config": "^7.0.0",
"videojs-generator-verify": "^4.1.0",
"videojs-standard": "^9.0.1"
},
"module": "dist/videojs-contrib-quality-levels.es.js",
"lint-staged": {
"*.js": "vjsstandard --fix",
"README.md": "doctoc --notitle"
},
"browser": "dist/videojs-contrib-quality-levels.js",
"engines": {
"node": ">=16",
"npm": ">=8"
}
}

View File

@ -0,0 +1,4 @@
{
"plugins": ["plugins/markdown"]
}

View File

@ -0,0 +1,12 @@
const generate = require('videojs-generate-karma-config');
module.exports = function(config) {
// see https://github.com/videojs/videojs-generate-karma-config
// for options
const options = {};
config = generate(config, options);
// any other custom stuff not supported by options here!
};

View File

@ -0,0 +1,11 @@
const generate = require('videojs-generate-rollup-config');
// see https://github.com/videojs/videojs-generate-rollup-config
// for options
const options = {};
const config = generate(options);
// Add additonal builds/customization here!
// export the builds to rollup
export default Object.values(config.builds);

View File

@ -0,0 +1,53 @@
import videojs from 'video.js';
import QualityLevelList from './quality-level-list.js';
import {version as VERSION} from '../package.json';
/**
* Initialization function for the qualityLevels plugin. Sets up the QualityLevelList and
* event handlers.
*
* @param {Player} player Player object.
* @param {Object} options Plugin options object.
* @return {QualityLevelList} a list of QualityLevels
*/
const initPlugin = function(player, options) {
const originalPluginFn = player.qualityLevels;
const qualityLevelList = new QualityLevelList();
const disposeHandler = function() {
qualityLevelList.dispose();
player.qualityLevels = originalPluginFn;
player.off('dispose', disposeHandler);
};
player.on('dispose', disposeHandler);
player.qualityLevels = () => qualityLevelList;
player.qualityLevels.VERSION = VERSION;
return qualityLevelList;
};
/**
* A video.js plugin.
*
* In the plugin function, the value of `this` is a video.js `Player`
* instance. You cannot rely on the player being in a "ready" state here,
* depending on how the plugin is invoked. This may or may not be important
* to you; if not, remove the wait for "ready"!
*
* @param {Object} options Plugin options object
* @return {QualityLevelList} a list of QualityLevels
*/
const qualityLevels = function(options) {
return initPlugin(this, videojs.obj.merge({}, options));
};
// Register the plugin with video.js.
videojs.registerPlugin('qualityLevels', qualityLevels);
// Include the version number.
qualityLevels.VERSION = VERSION;
export default qualityLevels;

View File

@ -0,0 +1,186 @@
import videojs from 'video.js';
import QualityLevel from './quality-level.js';
/**
* A list of QualityLevels.
*
* interface QualityLevelList : EventTarget {
* getter QualityLevel (unsigned long index);
* readonly attribute unsigned long length;
* readonly attribute long selectedIndex;
*
* void addQualityLevel(QualityLevel qualityLevel)
* void removeQualityLevel(QualityLevel remove)
* QualityLevel? getQualityLevelById(DOMString id);
*
* attribute EventHandler onchange;
* attribute EventHandler onaddqualitylevel;
* attribute EventHandler onremovequalitylevel;
* };
*
* @extends videojs.EventTarget
* @class QualityLevelList
*/
class QualityLevelList extends videojs.EventTarget {
/**
* Creates a QualityLevelList.
*/
constructor() {
super();
let list = this; // eslint-disable-line
list.levels_ = [];
list.selectedIndex_ = -1;
/**
* Get the index of the currently selected QualityLevel.
*
* @returns {number} The index of the selected QualityLevel. -1 if none selected.
* @readonly
*/
Object.defineProperty(list, 'selectedIndex', {
get() {
return list.selectedIndex_;
}
});
/**
* Get the length of the list of QualityLevels.
*
* @returns {number} The length of the list.
* @readonly
*/
Object.defineProperty(list, 'length', {
get() {
return list.levels_.length;
}
});
list[Symbol.iterator] = () => list.levels_.values();
return list;
}
/**
* Adds a quality level to the list.
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
* @return {QualityLevel} the QualityLevel added to the list
* @method addQualityLevel
*/
addQualityLevel(representation) {
let qualityLevel = this.getQualityLevelById(representation.id);
// Do not add duplicate quality levels
if (qualityLevel) {
return qualityLevel;
}
const index = this.levels_.length;
qualityLevel = new QualityLevel(representation);
if (!('' + index in this)) {
Object.defineProperty(this, index, {
get() {
return this.levels_[index];
}
});
}
this.levels_.push(qualityLevel);
this.trigger({
qualityLevel,
type: 'addqualitylevel'
});
return qualityLevel;
}
/**
* Removes a quality level from the list.
*
* @param {QualityLevel} qualityLevel The QualityLevel to remove from the list.
* @return {QualityLevel|null} the QualityLevel removed or null if nothing removed
* @method removeQualityLevel
*/
removeQualityLevel(qualityLevel) {
let removed = null;
for (let i = 0, l = this.length; i < l; i++) {
if (this[i] === qualityLevel) {
removed = this.levels_.splice(i, 1)[0];
if (this.selectedIndex_ === i) {
this.selectedIndex_ = -1;
} else if (this.selectedIndex_ > i) {
this.selectedIndex_--;
}
break;
}
}
if (removed) {
this.trigger({
qualityLevel,
type: 'removequalitylevel'
});
}
return removed;
}
/**
* Searches for a QualityLevel with the given id.
*
* @param {string} id The id of the QualityLevel to find.
* @return {QualityLevel|null} The QualityLevel with id, or null if not found.
* @method getQualityLevelById
*/
getQualityLevelById(id) {
for (let i = 0, l = this.length; i < l; i++) {
const level = this[i];
if (level.id === id) {
return level;
}
}
return null;
}
/**
* Resets the list of QualityLevels to empty
*
* @method dispose
*/
dispose() {
this.selectedIndex_ = -1;
this.levels_.length = 0;
}
}
/**
* change - The selected QualityLevel has changed.
* addqualitylevel - A QualityLevel has been added to the QualityLevelList.
* removequalitylevel - A QualityLevel has been removed from the QualityLevelList.
*/
QualityLevelList.prototype.allowedEvents_ = {
change: 'change',
addqualitylevel: 'addqualitylevel',
removequalitylevel: 'removequalitylevel'
};
// emulate attribute EventHandler support to allow for feature detection
for (const event in QualityLevelList.prototype.allowedEvents_) {
QualityLevelList.prototype['on' + event] = null;
}
export default QualityLevelList;

View File

@ -0,0 +1,62 @@
/**
* A single QualityLevel.
*
* interface QualityLevel {
* readonly attribute DOMString id;
* attribute DOMString label;
* readonly attribute long width;
* readonly attribute long height;
* readonly attribute long bitrate;
* attribute boolean enabled;
* };
*
* @class QualityLevel
*/
export default class QualityLevel {
/**
* Creates a QualityLevel
*
* @param {Representation|Object} representation The representation of the quality level
* @param {string} representation.id Unique id of the QualityLevel
* @param {number=} representation.width Resolution width of the QualityLevel
* @param {number=} representation.height Resolution height of the QualityLevel
* @param {number} representation.bandwidth Bitrate of the QualityLevel
* @param {number=} representation.frameRate Frame-rate of the QualityLevel
* @param {Function} representation.enabled Callback to enable/disable QualityLevel
*/
constructor(representation) {
let level = this; // eslint-disable-line
level.id = representation.id;
level.label = level.id;
level.width = representation.width;
level.height = representation.height;
level.bitrate = representation.bandwidth;
level.frameRate = representation.frameRate;
level.enabled_ = representation.enabled;
Object.defineProperty(level, 'enabled', {
/**
* Get whether the QualityLevel is enabled.
*
* @return {boolean} True if the QualityLevel is enabled.
*/
get() {
return level.enabled_();
},
/**
* Enable or disable the QualityLevel.
*
* @param {boolean} enable true to enable QualityLevel, false to disable.
*/
set(enable) {
level.enabled_(enable);
}
});
return level;
}
}

View File

@ -0,0 +1,59 @@
import document from 'global/document';
import QUnit from 'qunit';
import sinon from 'sinon';
import videojs from 'video.js';
import plugin from '../src/plugin';
const Player = videojs.getComponent('Player');
QUnit.test('the environment is sane', function(assert) {
assert.strictEqual(typeof Array.isArray, 'function', 'es5 exists');
assert.strictEqual(typeof sinon, 'object', 'sinon exists');
assert.strictEqual(typeof videojs, 'function', 'videojs exists');
assert.strictEqual(typeof plugin, 'function', 'plugin is a function');
});
QUnit.module('videojs-contrib-quality-levels', {
beforeEach() {
// Mock the environment's timers because certain things - particularly
// player readiness - are asynchronous in video.js 5. This MUST come
// before any player is created; otherwise, timers could get created
// with the actual timer methods!
this.clock = sinon.useFakeTimers();
this.fixture = document.getElementById('qunit-fixture');
this.video = document.createElement('video');
this.fixture.appendChild(this.video);
this.player = videojs(this.video);
},
afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('registers itself with video.js', function(assert) {
assert.strictEqual(
typeof Player.prototype.qualityLevels,
'function',
'videojs-contrib-quality-levels plugin was registered'
);
});
QUnit.test('player qualityLevels method returns the proper object', function(assert) {
const qualityLevels = this.player.qualityLevels();
assert.equal(
qualityLevels.length,
0,
'the returned object contained the length property with the proper value'
);
assert.equal(
qualityLevels.selectedIndex,
-1,
'the returned object contained the selectedIndex property with the proper value'
);
});

View File

@ -0,0 +1,127 @@
import QUnit from 'qunit';
import QualityLevelList from '../src/quality-level-list';
import { representations } from './test-helpers';
QUnit.module('QualityLevelList', {
beforeEach() {
this.qualityLevels = new QualityLevelList();
this.levels = representations;
}
});
QUnit.test('the QualityLevelList is iterable', function(assert) {
assert.ok(Symbol.iterator in this.qualityLevels, 'is iterable');
});
QUnit.test('Properly adds QualityLevels to the QualityLevelList', function(assert) {
let addCount = 0;
this.qualityLevels.on('addqualitylevel', (event) => {
addCount++;
});
const expected0 = this.qualityLevels.addQualityLevel(this.levels[0]);
assert.equal(this.qualityLevels.length, 1, 'added quality level');
assert.equal(addCount, 1, 'emmitted addqualitylevel event');
assert.strictEqual(this.qualityLevels[0], expected0, 'can access quality level with index');
const expected1 = this.qualityLevels.addQualityLevel(this.levels[1]);
assert.equal(this.qualityLevels.length, 2, 'added quality level');
assert.equal(addCount, 2, 'emmitted addqualitylevel event');
assert.strictEqual(this.qualityLevels[1], expected1, 'can access quality level with index');
const expectedDuplicate = this.qualityLevels.addQualityLevel(this.levels[0]);
assert.equal(this.qualityLevels.length, 2, 'does not add duplicate quality level');
assert.equal(addCount, 2, 'no event emitted on dulicate');
assert.strictEqual(this.qualityLevels[3], undefined, 'no index property defined');
assert.strictEqual(this.qualityLevels[0], expected0, 'quality level unchanged');
assert.strictEqual(this.qualityLevels[0], expectedDuplicate, 'adding duplicate returns same reference');
assert.strictEqual(this.qualityLevels[1], expected1, 'quality level unchanged');
});
QUnit.test('Properly removes QualityLevels from the QualityLevelList', function(assert) {
let removeCount = 0;
const expected = [];
this.levels.forEach((qualityLevel) => {
expected.push(this.qualityLevels.addQualityLevel(qualityLevel));
});
this.qualityLevels.on('removequalitylevel', (event) => {
removeCount++;
});
// Mock an initial selected quality level
this.qualityLevels.selectedIndex_ = 2;
assert.equal(this.qualityLevels.length, 4, '4 initial quality levels');
let removed = this.qualityLevels.removeQualityLevel(expected[3]);
assert.equal(this.qualityLevels.length, 3, 'removed quality level');
assert.equal(removeCount, 1, 'emitted removequalitylevel event');
assert.strictEqual(removed, expected[3], 'returned removed level');
assert.notStrictEqual(this.qualityLevels[3], expected[3], 'nothing at index');
removed = this.qualityLevels.removeQualityLevel(expected[1]);
assert.equal(this.qualityLevels.length, 2, 'removed quality level');
assert.equal(removeCount, 2, 'emitted removequalitylevel event');
assert.strictEqual(removed, expected[1], 'returned removed level');
assert.notStrictEqual(this.qualityLevels[1], expected[1], 'quality level not at index');
assert.strictEqual(
this.qualityLevels[this.qualityLevels.selectedIndex],
expected[2],
'selected index properly adjusted on quality level removal'
);
removed = this.qualityLevels.removeQualityLevel(expected[3]);
assert.equal(this.qualityLevels.length, 2, 'no quality level removed if not found');
assert.equal(removed, null, 'returned null when nothing removed');
assert.equal(removeCount, 2, 'no event emitted when quality level not found');
removed = this.qualityLevels.removeQualityLevel(expected[2]);
assert.equal(this.qualityLevels.length, 1, 'quality level removed');
assert.equal(removeCount, 3, 'emitted removequalitylevel event');
assert.strictEqual(removed, expected[2], 'returned removed level');
assert.equal(this.qualityLevels.selectedIndex, -1, 'selectedIndex set to -1 when removing selected quality level');
});
QUnit.test('can get quality level by id', function(assert) {
const expected = [];
this.levels.forEach((qualityLevel) => {
expected.push(this.qualityLevels.addQualityLevel(qualityLevel));
});
assert.strictEqual(
this.qualityLevels.getQualityLevelById('0'),
expected[0],
'found quality level with id "0"'
);
assert.strictEqual(
this.qualityLevels.getQualityLevelById('1'),
expected[1],
'found quality level with id "1"'
);
assert.strictEqual(
this.qualityLevels.getQualityLevelById('2'),
expected[2],
'found quality level with id "2"'
);
assert.strictEqual(
this.qualityLevels.getQualityLevelById('3'),
expected[3],
'found quality level with id "3"'
);
assert.strictEqual(
this.qualityLevels.getQualityLevelById('4'),
null,
'no quality level with id "4" found'
);
});

View File

@ -0,0 +1,42 @@
export const representations = [
{
id: '0',
width: 100,
height: 100,
bandwidth: 100,
frameRate: 29.956,
enabled() {
return true;
}
},
{
id: '1',
width: 200,
height: 200,
bandwidth: 200,
frameRate: 29.956,
enabled() {
return true;
}
},
{
id: '2',
width: 300,
height: 300,
bandwidth: 300,
frameRate: 30,
enabled() {
return true;
}
},
{
id: '3',
width: 400,
height: 400,
bandwidth: 400,
frameRate: 60,
enabled() {
return true;
}
}
];