npm package: @kpoint/angular-sdks
Description: Angular UI components for Kpoint player integration
Author: KPOINT Team
Latest version: 0.0.4

# @kpoint/angular-sdks

Angular SDK for integrating **Kpoint video players** into Angular applications.

---

##  Overview

`@kpoint/angular-sdks` provides Angular components for embedding and controlling Kpoint video players in angular projects.  
It offers:

- Inline video playback with KpointPlayer
- Full control over video (play, pause, mute, seek, replay)
- Event callbacks for state, load, time updates, and errors
- Type-safe Angular inputs and outputs

---

## Installation

Install the library via npm:

```bash
npm install @kpoint/angular-sdks
```

# KPoint Player Integration (Angular)

This guide demonstrates how to integrate the **KPoint Video Player** in an Angular application using the `@kpoint/angular-sdks` package.

---

## Import the library module in your Angular app

```
import { AngularSdks } from 'kpoint-angular-sdks';

imports: [BrowserModule, AppComponent, AngularSdks]

```


## Import the Component

```ts

import { KpointPlayer } from '@kpoint/angular-sdks';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, KpointPlayer],
  templateUrl: `
    <kpoint-player
        #player
        [videoId]="videoId"
        [videoHost]="videoHost"
        [onStateChange]="handleStateChange"
      >
      </kpoint-player>

      <div style="margin-top: 20px; display:flex; flex-wrap:wrap; gap:10px;">
      <button (click)="playVideo()">Play</button>
      <button (click)="pauseVideo()">Pause</button>
      </div>

  `

})
export class AppComponent {
  @ViewChild('player', { static: false }) player!: KpointPlayer;

  videoId = "gcc-900ea128-12ec-403f-9fff";
  videoHost = "ktpl.kpoint.com";

  handleStateChange = (args: any) => {
    console.log('Player state changed:', args);
  };

  playVideo() {
    this.player.playVideo();
  }

  pauseVideo() {
    this.player.pauseVideo();
  }

}

```

## Kpoint VX Player (Reels Player)

Import and play Reels directly in your Angular application.

#### Importing Component and Usage

```ts

import { KpointVxPlayer } from '@kpoint/angular-sdks';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, KpointVxPlayer],
  template: `

    <kpoint-vx-player
      #player
      [videoIds]="videoId"
      [videoHost]="videoHost"
      [vxType]="vxType"
      [autoScroll]="autoScroll"
      [loop]="loop"
    >
      </kpoint-vx-player>
  `
})
export class AppComponent {

  @ViewChild('player', { static: false }) player!: KpointVxPlayer;

   videoId = [
        "gcc-a80e1d84-bc6a-4bc6-aadf-7e483885b793",
        "gcc-198d1270-4cef-480e-a98f-97ac5ebb3e71",
        "gcc-eb666d9a-720c-4bf8-b05a-1ee261d41810",
        "gcc-ebd5ea4c-1d5f-451e-9e26-814a0296e332"
      ]
  vxType = "reels"
  videoHost = "demos.kpoint.com"
  autoScroll = true;
  loop=true;

}

```

#### Input Parameters

| **Parameter**             | **Type**   | **Description**                                                   |
| ------------------------- | ---------- | ----------------------------------------------------------------- |
| `videoHost`               | `string`   | Host name of your KPOINT server.                                  |
| `vxType`                  | `string`   | Type of the fab experience (reels / stories).                     |
| `videoIds`                | `string[]` | Array of video IDs that should be contained in reels.             |
| `screenToFit`             | `string`   | none / stretched / zoomed.                                        |
| `showScrollDownIndicator` | `boolean`  | Shows a scroll down indicator in the mobile device.               |
| `loop`                    | `boolean`  | Videos playing continuously in a sequence.                        |
| `token`                   | `string`   | JWT Token for private video playback. (private videos)            |
| `kcid`                    | `string`   | KPOINT Client ID used for token verification.                     |
| `token_expiry_time`       | `number`   | The expiration time for the JWT token, specified in minutes.      |
| `embedId`                 | `string`   | A unique identifier used for tracking which page or embed code.   |
| `clientId`                | `string`   | Client identifier for analytics or personalization.               |
| `widgets`                 | `object`   | KPOINT Interactive widgets config.                                |
| `autoScroll`              | `boolean`  | Next videos continuously when videos end                          |