# Angular


Компонент для встраивания Kinescope Player в Angular. Под капотом — iframe и [IFrame API](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api/). Репозиторий: [kinescope/angular-kinescope-player](https://github.com/kinescope/angular-kinescope-player).

## Установка

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

## Быстрый старт

```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() {
    // методы доступны после инициализации плеера
    // void this.kinescope.play()
  }
}
```

## Config (props)

Параметры передаются объектом в `[config]`.

| Поле | Тип | По умолчанию | Обязательный |
| :--- | :--- | :--- | :--- |
| `videoId` | `string` | — | да |
| `className` | `string` | — | нет |
| `style` | `any` | — | нет |
| `title` | `string` | — | нет |
| `subtitle` | `string` | — | нет |
| `poster` | `string` | — | нет |
| `chapters` | [`Chapter[]`](#Chapter) | — | нет |
| `vtt` | [`Vtt[]`](#Vtt) | — | нет |
| `width` | `number \| string` | `100%` | нет |
| `height` | `number \| string` | `100%` | нет |
| `autoPlay` | `boolean \| 'viewable'` | `false` | нет |
| `autoPause` | `boolean \| 'reset'` | `true` | нет |
| `loop` | `boolean` | `false` | нет |
| `playsInline` | `boolean` | `true` | нет |
| `muted` | `boolean` | `false` | нет |
| `language` | `'en' \| 'ru'` | auto | нет |
| `controls` | `boolean` | `true` | нет |
| `mainPlayButton` | `boolean` | `true` | нет |
| `playbackRateButton` | `boolean` | `false` | нет |
| `externalId` | `string` | — | нет |
| `drmAuthToken` | `string` | — | нет |
| `actions` | [`Action[]`](#Action) | — | нет |
| `bookmarks` | [`Bookmark[]`](#Bookmark) | — | нет |
| `watermark` | [`Watermark`](#Watermark) | — | нет |
| `localStorage` | `boolean` | `true` | нет |

### Типы config {#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 }
    }
```

## События

| Событие | Данные |
| :--- | :--- |
| `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` | — |

## Методы

Вызов через `@ViewChild` (например `this.kinescope.play()`).

| Метод | Параметры | Результат |
| :--- | :--- | :--- |
| `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>` |

## Что дальше?

- [React](https://docs.kinescope.ru/dokumentaciya-pleera/biblioteki/react/)
- [Vue](https://docs.kinescope.ru/dokumentaciya-pleera/biblioteki/vue/)
- [IFrame API](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api/)