# Angular


A component for embedding Kinescope Player in Angular. It uses an iframe and the [IFrame API](https://docs.kinescope.com/player-docs/embedding/iframe-api/) under the hood. Repository: [kinescope/angular-kinescope-player](https://github.com/kinescope/angular-kinescope-player).

## Installation

```bash
npm install @kinescope/angular-kinescope-player --save
```

## Quick start

```ts
import { KinescopePlayerComponent } from '@kinescope/angular-kinescope-player'

@NgModule({
  imports: [KinescopePlayerComponent],
})
export class AppModule {}
```

```ts
import { AfterViewInit, Component, ViewChild } from '@angular/core'
import {
  KinescopePlayerComponent,
  KinescopePlayerConfig,
} from '@kinescope/angular-kinescope-player'

@Component({
  template: `<kinescope-player #kinescope [config]="config"></kinescope-player>`,
})
export class PlayerComponent implements AfterViewInit {
  config: KinescopePlayerConfig = {
    videoId: 'VIDEO_ID',
  }

  @ViewChild('kinescope') private kinescope!: KinescopePlayerComponent

  ngAfterViewInit() {
    // Methods are available after the player is initialized.
    // void this.kinescope.play()
  }
}
```

## Config (props)

Pass the parameters as an object to `[config]`.

| Field | Type | Default | Required |
| :--- | :--- | :--- | :--- |
| `videoId` | `string` | — | yes |
| `className` | `string` | — | no |
| `style` | `any` | — | no |
| `title` | `string` | — | no |
| `subtitle` | `string` | — | no |
| `poster` | `string` | — | no |
| `chapters` | [`Chapter[]`](#Chapter) | — | no |
| `vtt` | [`Vtt[]`](#Vtt) | — | no |
| `width` | `number \| string` | `100%` | no |
| `height` | `number \| string` | `100%` | no |
| `autoPlay` | `boolean \| 'viewable'` | `false` | no |
| `autoPause` | `boolean \| 'reset'` | `true` | no |
| `loop` | `boolean` | `false` | no |
| `playsInline` | `boolean` | `true` | no |
| `muted` | `boolean` | `false` | no |
| `language` | `'en' \| 'ru'` | auto | no |
| `controls` | `boolean` | `true` | no |
| `mainPlayButton` | `boolean` | `true` | no |
| `playbackRateButton` | `boolean` | `false` | no |
| `externalId` | `string` | — | no |
| `drmAuthToken` | `string` | — | no |
| `actions` | [`Action[]`](#Action) | — | no |
| `bookmarks` | [`Bookmark[]`](#Bookmark) | — | no |
| `watermark` | [`Watermark`](#Watermark) | — | no |
| `localStorage` | `boolean` | `true` | no |

### Config types {#config-types}

#### Chapter {#Chapter}

```ts
type Chapter = {
  position: number
  title: string
}
```

#### Vtt {#Vtt}

```ts
type Vtt = {
  label: string
  src: string
  srcLang: string
}
```

#### Action {#Action}

```ts
type Action = ActionToolBar | ActionCallToAction

type ActionToolBar = {
  id: string
  type: 'tool'
  title?: string
  icon: 'note'
}

type ActionCallToAction = {
  id: string
  type: 'cta'
  title: string
  description?: string
  skipable?: boolean
  buttonStyle?: CSSProperties
  trigger: {
    percentages: number[]
    timePoints: number[]
    pause: boolean
  }
}
```

#### Bookmark {#Bookmark}

```ts
type Bookmark = {
  id: string
  time: number
  title?: string
}
```

#### Watermark {#Watermark}

```ts
type Watermark =
  | string
  | {
      text: string
      mode?: 'random' | 'stripes'
      scale?: number
      displayTimeout?: number | { visible: number; hidden: number }
    }
```

## Events

| Event | Data |
| :--- | :--- |
| `onJSLoad` | — |
| `onJSLoadError` | — |
| `onReady` | `{ currentTime, duration, quality, qualityLevels }` |
| `onQualityChanged` | `{ quality }` |
| `onAutoQualityChanged` | `{ quality }` |
| `onSeekChapter` | `{ position }` |
| `onSizeChanged` | `{ width, height }` |
| `onPlay` | — |
| `onPlaying` | — |
| `onWaiting` | — |
| `onPause` | — |
| `onEnded` | — |
| `onTimeUpdate` | `{ currentTime }` |
| `onProgress` | `{ bufferedTime }` |
| `onDurationChange` | `{ duration }` |
| `onVolumeChange` | `{ muted, volume }` |
| `onPlaybackRateChange` | `{ playbackRate }` |
| `onSeeking` | — |
| `onFullscreenChange` | `{ isFullscreen, video }` |
| `onCallAction` | `{ id, title?, type }` |
| `onCallBookmark` | `{ id, time, title? }` |
| `onError` | `{ error }` |
| `onDestroy` | — |

## Methods

Call methods through `@ViewChild`, for example, `this.kinescope.play()`.

| Method | Parameters | Result |
| :--- | :--- | :--- |
| `isPaused` | — | `Promise<boolean>` |
| `isEnded` | — | `Promise<boolean>` |
| `play` | — | `Promise<void>` |
| `pause` | — | `Promise<boolean>` |
| `stop` | — | `Promise<void>` |
| `getCurrentTime` | — | `Promise<number>` |
| `getDuration` | — | `Promise<number>` |
| `seekTo` | `(time: number)` | `Promise<void>` |
| `isMuted` | — | `Promise<boolean>` |
| `mute` | — | `Promise<void>` |
| `unmute` | — | `Promise<void>` |
| `getVolume` | — | `Promise<number>` |
| `setVolume` | `(value: number)` | `Promise<void>` |
| `getPlaybackRate` | — | `Promise<number>` |
| `setPlaybackRate` | `(value: number)` | `Promise<void>` |
| `getVideoQualityList` | — | `Promise<VideoQuality[]>` |
| `getCurrentVideoQuality` | — | `Promise<VideoQuality>` |
| `setVideoQuality` | `(quality: VideoQuality)` | `Promise<void>` |
| `enableTextTrack` | `(lang: string)` | `Promise<void>` |
| `disableTextTrack` | — | `Promise<void>` |
| `closeCTA` | — | `Promise<void>` |
| `isFullscreen` | — | `Promise<boolean>` |
| `setFullscreen` | `(fullscreen: boolean)` | `Promise<void>` |

## Next steps

- [React](https://docs.kinescope.com/player-docs/libraries/react/)
- [Vue](https://docs.kinescope.com/player-docs/libraries/vue/)
- [IFrame API](https://docs.kinescope.com/player-docs/embedding/iframe-api/)