# Lite Player

>  The Lite Player is built upon Ray's **[IpcPlayer](https://developer.tuya.com/en/miniapp/develop/ray/component/media-component/ipc-player)**, combining essential UI components and streaming capabilities to help developers quickly integrate IPC playback features.


## Business Fit

If your business scenario doesn’t require the rich built-in capabilities of the fusion player and you prefer a certain degree of UI and interaction customization—without dealing with low-level streaming logic—it's recommended to integrate the lightweight player by following the steps below.

### Install Dependency

```bash
yarn add @ray-js/ray-ipc-player
```

### Usage Example

> **Note**: Real-time playback is currently not supported in IDE preview. Please test on a physical device.

```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';

function Page() {

  const deviceId = '1234567890xxxxxx';
  // Device online status
  const onlineStatus = true; 
  // Get player instance, you can call player methods via this context
  const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
  };
  // Monitor player stream status
  const onChangeStreamStatus = (status) => {
     console.log(status, 'status');
  };

  return (
    // playerContainer is the player wrapper, defining the size of the player
    <View className={Styles.playerContainer}>
      <IpcPlayer
          objectFit='contain'
          onCtx={onCtx}
          devId={deviceId}
          onlineStatus={onlineStatus}
          onChangeStreamStatus={onChangeStreamStatus}
        />
     </View>    
  )
}

```

**Player Container Style* 

```less
.playerContainer {
  width: 100%;
  height: 300px;
}
```

### Parameter Description

| Parameter            | Type                        | Required | Description                                                                    |
| -------------------- | --------------------------- | -------- | ------------------------------------------------------------------------------ |
| devId                | `string`                    | Yes      | Device ID                                                                      |
| onlineStatus         | `bool`                      | Yes      | Device online status                                                           |
| objectFit            | `'fillCrop'` or `'contain'` | No       | Video fit mode (Tip: Use different modes for landscape/portrait)               |
| privateState         | `bool`                      | No       | Privacy mode                                                                   |
| rotateZ              | `number`                    | No       | Video rotation angle                                                           |
| clarity              | `ClarityType`               | No       | Video clarity                                                                  |
| muted                | `bool`                      | No       | Mute playback                                                                  |
| scalable             | `bool`                      | No       | Allow pinch-to-zoom gesture                                                    |
| ptzControllable      | `bool`                      | No       | Enable PTZ (pan/tilt/zoom) control                                             |
| onCtx                | `function`                  | No       | Callback to get player instance                                                |
| onChangeStreamStatus | `function`                  | No       | Callback to monitor stream status                                              |
| onVideoTap           | `function`                  | No       | Tap on video event handler                                                     |
| extend               | `object`                    | No       | Dynamic extended options (default is `{}`), used for future feature expansions |


> For more generic attributes, see [IpcPlayer](https://developer.tuya.com/en/miniapp/develop/ray/component/media-component/ipc-player)


**Key Stream Status Codes**

| Code  | Description                         |
| ----- | ----------------------------------- |
| 1001  | Connection established successfully |
| -1001 | Failed to establish connection      |
| 1002  | Stream pulled successfully          |
| -1002 | Failed to pull stream               |

## Component Implementation

> **Tip**: You can also manually control the playback process using the basic **IpcPlayer** component along with **createIpcPlayerContext**.  

### IpcPlayer

```jsx
import { IpcPlayer } from '@ray-js/ray';
```

The core component used to render the video screen. For detailed usage, please refer to the official documentation: [IpcPlayer](https://developer.tuya.com/en/miniapp/develop/ray/component/media-component/ipc-player)


### IpcContext 

```jsx
import { createIpcPlayerContext } from '@ray-js/api';

```

Used to create a player instance and establish device binding relationships. For more details, please refer to: [createIpcPlayerContext](https://developer.tuya.com/en/miniapp/develop/miniapp/api/media/ipc/createIpcContext)

Serves as the context object for managing the player lifecycle and control commands. For more information, please refer to: [IpcContext](https://developer.tuya.com/en/miniapp/develop/miniapp/api/media/ipc/IpcContext)