# @trtc/calls-uikit-wx-uniapp-engine

TUICallKit WeChat mini-program UIKit for UniApp (Vue 3 + @trtc/call-engine-lite-wx).

Provides composable hooks, call service logic, Vue components, and static assets for building 1v1 and group audio/video call experiences on WeChat mini-programs via UniApp.

## Installation

```bash
pnpm add @trtc/calls-uikit-wx-uniapp-engine
```

### Peer Dependencies

This package requires the following peer dependencies to be installed:

```bash
pnpm add @trtc/call-engine-lite-wx @trtc/call-ring-wx @tencentcloud/lite-chat @tencentcloud/trtc-component-uniapp vue
```

## Usage

### Login

```ts
import { useLoginState } from '@trtc/calls-uikit-wx-uniapp-engine';

const { login, logout, loginUserInfo } = useLoginState();

await login({ userId: 'user1', userSig: '...', sdkAppId: 12345678 });
```

### Call

```ts
import { useCallListState, useCallParticipantState, useDeviceState } from '@trtc/calls-uikit-wx-uniapp-engine';
import { CallMediaType } from '@trtc/call-engine-lite-wx';

const { calls, accept, reject, hangup, mediaType, duration } = useCallListState();
const { callParticipantInfo } = useCallParticipantState();
const { openLocalCamera, closeLocalCamera, switchCamera } = useDeviceState();

// Initiate a call
await calls({ userIDList: ['user2'], type: CallMediaType.VIDEO });
```

### Vue Components

The package ships Vue SFC components as source files for the UniApp build toolchain:

```vue
<script setup>
import CallView from '@trtc/calls-uikit-wx-uniapp-engine/src/components/CallView/CallView.vue';
import GroupCallView from '@trtc/calls-uikit-wx-uniapp-engine/src/plugin/groupCall/components/GroupCallView.vue';
</script>

<template>
  <CallView />
  <GroupCallView />
</template>
```

### UI Customization

```ts
import { TUICallKitAPI, FeatureButton, LayoutMode } from '@trtc/calls-uikit-wx-uniapp-engine';

// Hide the switch-camera button
TUICallKitAPI.hideFeatureButton(FeatureButton.SwitchCamera);

// Set layout mode
TUICallKitAPI.setLayoutMode(LayoutMode.LocalInLargeView);

// Set background images
TUICallKitAPI.setLocalViewBackgroundImage('https://example.com/bg.png');
TUICallKitAPI.setRemoteViewBackgroundImage('*', 'https://example.com/remote-bg.png');
```

## Architecture

```
src/
├── index.ts                    # Main entry (composable hooks + exports)
├── index.d.ts                  # Type definitions
├── states/
│   ├── CallListState.ts        # Call operations composable
│   ├── CallParticipantState.ts # Participant info composable
│   ├── DeviceState.ts          # Device control composable
│   ├── UIConfigState.ts        # UI config composable
│   ├── LoginState.ts           # Login/logout composable
│   └── TUICallService/         # Core call service (singleton)
├── components/
│   ├── Avatar/Avatar.vue       # Avatar component
│   ├── CallView/CallView.vue   # 1v1 call view
├── plugin/
│   ├── ring/                           # Ring plugin
│   └── groupCall/                      # Group call plugin
│       ├── components/
│       │   └── GroupCallView.vue       # Group call view
├── constants/                  # Enums and constants
├── types/                      # TypeScript interfaces
├── utils/                      # Utilities (permission, format, etc.)
├── TUIBridge/                  # Event bus for Chat integration
└── assets/                     # Static images (svg, png)
```

## Build

```bash
pnpm build
```

Produces:
- `dist/index.esm.mjs` — ES Module
- `dist/index.cjs.js` — CommonJS
- `dist/index.mp.js` — Minified CJS for mini-program
- `dist/components/` — Vue SFC source files
- `dist/assets/` — Static assets

## License

MIT