# playkit-js-advanced-audio-description

[![Build Status](https://github.com/kaltura/playkit-js-advanced-audio-description/blob/master/.github/workflows/run_canary.yaml/badge.svg)](https://github.com/kaltura/playkit-js-advanced-audio-description/blob/master/.github/workflows/run_canary.yaml)
[![](https://img.shields.io/npm/v/@playkit-js/extended-audio-description/latest.svg)](https://www.npmjs.com/package/@playkit-js/extended-audio-description)
[![](https://img.shields.io/npm/v/@playkit-js/extended-audio-description/canary.svg)](https://www.npmjs.com/package/@playkit-js/extended-audio-description/v/canary)


playkit-js-advanced-audio-description is a [kaltura player] plugin that Audio description gives detail and imagery in order to make visual content accessible to individuals who are blind or have low vision and provide these viewers with a similar experience to a sighted viewer.

It relies on [kaltura player] core API for managing UI features.

playkit-advanced-audio-description is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly typed superset of ES6),
and transpiled in ECMAScript5 using [Babel](https://babeljs.io/) and the [TypeScript compiler].

[Webpack] is used to build the distro bundle and serve the local development environment.

[kaltura player]: https://github.com/kaltura/kaltura-player-js.
[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[typescript]: https://www.typescriptlang.org/
[typescript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html
[webpack]: https://webpack.js.org/

## Features

Extended Audio Description is a service that pauses the video to allow for longer descriptions when there is not enough space to sufficiently describe the visuals in your video.

“Extended Audio Description“ is a type of audio description that is suitable for videos that have few natural pauses, but that contains a lot of visual content.

“Extended Audio Description“ workflow → when a user press play, the video, and description begin playing. Then, the source video pauses temporarily, while the description continues. After that portion of the description is complete, the video resumes playing again

## Getting started with development

```sh
# First, checkout the repository and install the required dependencies
git clone https://github.com/Kaltura-PS/playkit-js-advanced-audio-description.git

# Navigate to the repo dir
cd playkit-js-advanced-audio-description

# Run dev-server for demo page (recompiles on file-watch, and write to actual dist fs artifacts)
npm run dev

# this command will run:

# 1. types check
# 2. lint check
# 3. generate/update types
# 4. generate/update docs
```

The dev server will host files on port 800x. Once started, the demo can be found running at http://localhost:800x/

Before submitting a PR, please see our [contribution guidelines](CONTRIBUTING.md).


### How to config
```js
plugins: {
  kalturaCuepoints: {}, // AAD plugins dependency
  pluginAdvancedAudioDescription: { // for adding the plugin
    fullScreenOverlay: false, // `false` is default
    autoEnable: false // `false` is default
  }
}
```


### Linter (ESlint)

Run linter:

```
npm run lint:check
```

Run linter with auto-fix mode:

```
npm run lint:fix
```

### Formatting Code

Run prettier to format code

```
npm run prettier:fix
```

### Type Check

Run type-check to verify TypeScript types

```
npm run types:check
```

### Automated e2e tests (Cypress)

Run all tests at once:

```
npm test
```

Run unit tests in watch mode:

```
npm run test:watch
```

## Design

An overview of this project's design, can be found [here](https://kaltura.atlassian.net/wiki/spaces/PROD/pages/3554412657/Side+Panel+Manager+-+Design+Document).

## API docs

[API docs](https://kaltura.github.io/playkit-plugin-advanced-audio-description/docs/api/index.html)

## Usage guide

[usage guide](./docs/guide.md)

## Demo

[https://kaltura.github.io/playkit-advanced-audio-description/demo/index.html](https://kaltura.github.io/playkit-advanced-audio-description/demo/index.html)

## External Demo
[https://externaltests.dev.kaltura.com/player/sandBox/playerv7/aad/](https://externaltests.dev.kaltura.com/player/sandBox/playerv7/aad/)

## Compatibility

playkit-advanced-audio-description is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.

playkit-advanced-audio-description.js is supported on:

- Chrome 39+ for Android
- Chrome 39+ for Desktop
- Firefox 41+ for Android
- Firefox 42+ for Desktop
- IE11 for Windows 8.1+
- Edge for Windows 10+
- Safari 8+ for MacOS 10.10+
- Safari for ipadOS 13+

## License

test2

playkit-advanced-audio-description.js is released under [Apache 2.0 License](LICENSE)