@tencent-rtc/mcp 1.0.7 → 1.1.6

package/resource/doc/livekit/vue/components/co-guest-panel.md

@@ -0,0 +1,130 @@
+This document provides a detailed introduction to **Link Management Panel (CoGuestPanel)**. You can refer to the sample code in this document for seamless integration of our pre-developed components in your existing project, or customize the style and layout according to your needs by following the customization section of components in the document.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/37463362991511f0961e52540099c741.png)
+
+
+## Core Features
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Feature Name**</td>
+
+<td rowspan="1" colSpan="1" >**Detailed Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Tab switchover**</td>
+
+<td rowspan="1" colSpan="1" >The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Application List**</td>
+
+<td rowspan="1" colSpan="1" >Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Anchor Operations**</td>
+
+<td rowspan="1" colSpan="1" >Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results.</td>
+</tr>
+</table>
+
+
+## Component Integration
+
+### Step 1: Configuring the Environment and Activating the Service
+
+Before performing quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896) to meet the related environment configuration and activate the corresponding service.
+
+### Step 2: Dependency Installation
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### Step 3: Integrating the Link Management Panel
+
+Introduce **Link Management Panel** in your project and use it. You can copy the following example code directly to your project to show the Link Management Panel.
+``` typescript
+<template>
+  <UIKitProvider theme="light" language="en-US">
+    <div class="app">
+      <CoGuestPanel class="co-guest-panel" />
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { CoGuestPanel, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+
+const { login, loginUserInfo } = useLoginState();
+const { joinLive } = useLiveState();
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppID, see Step 1 to get
+      userId: '',         // UserID, see Step 1 to get
+      userSig: '',        // userSig, see Step 1 to get
+    });
+  } catch (error) {
+    console.error('login error:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+  // enter live room by inputting corresponding liveId
+  await joinLive({
+    liveId: 'input corresponding live streaming room LiveId',     
+  });
+});
+</script>
+
+<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.co-guest-panel{width:100%;max-width:500px;padding: 24px;height:600px;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden}</style>
+```
+
+## Custom Style Customization
+
+The Link Management Panel supports style customization via CSS variables. You can override the following variables to adjust the component appearance. After completing **Step 3**, see the following example to adjust the UI of the Link Management Panel, or directly perform incremental copying of the sample code into your component to generate the effect example.
+``` typescript
+<template>
+   <CoGuestPanel class="co-guest-panel" />
+</template>
+
+<style>
+.co-guest-panel{--text-color-primary:#2d3748;--text-color-secondary:#93a3bb;--text-color-link:#20c9e7;--bg-color-primary:#ffffff;--bg-color-hover:#d6e7f3;--stroke-color-primary:#8bb6ef;--stroke-color-secondary:#90c0f4;--shadow-light:0 2px 8px rgba(69,67,67,0.08);--shadow-medium:0 4px 16px rgba(93,87,87,0.12);--transition:all 0.3s ease;}.co-guest-panel .panel-content{background:var(--bg-color-primary);border-radius:16px;border:1px solid var(--stroke-color-primary);box-shadow:var(--shadow-medium);transition:var(--transition);overflow:hidden;}.co-guest-panel .panel-content:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-2px);border-color:var(--stroke-color-secondary);}.co-guest-panel .user-item{padding:16px;margin:8px 0;background:var(--bg-color-primary);border:1px solid var(--stroke-color-primary);border-radius:12px;transition:var(--transition);cursor:pointer;}.co-guest-panel .user-item:hover{background:var(--bg-color-hover);border-color:var(--text-color-link);box-shadow:var(--shadow-light);transform:translateY(-1px);}.co-guest-panel .user-item:active{transform:translateY(0);transition:all 0.15s ease;}.co-guest-panel .user-item.selected{background:rgba(102,126,234,0.08);border-color:var(--text-color-link);box-shadow:var(--shadow-light);}
+</style>
+```
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Before modification**</td>
+
+<td rowspan="1" colSpan="1" >**After modification**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/e2fef49f991611f0b38f5254001c06ec.png)</td>
+
+<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/1b99086e991711f0b38f5254001c06ec.png)</td>
+</tr>
+</table>

package/resource/doc/livekit/vue/components/live-audience-list.md

@@ -0,0 +1,282 @@
+This document provides a detailed introduction to the **Audience List Component (LiveAudienceList)**. You can refer to the sample code in this document for seamless integration into your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/254194d798f511f081465254007c27c5.png)
+
+
+## Core Features
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Feature Category**</td>
+
+<td rowspan="1" colSpan="1" >**Specific capabilities**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Real-time audience show**</td>
+
+<td rowspan="1" colSpan="1" >Display the online audience list in the live streaming room in real time, support avatar and nickname display, and provide a clear audience information view, enabling hosts to intuitively understand audience composition.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Responsive design**</td>
+
+<td rowspan="1" colSpan="1" >Component support includes UI solutions for desktop and mobile terminals, automatically adapting to different device screen dimensions to provide consistent user experience and meet multi-platform live streaming needs.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Customizable UI**</td>
+
+<td rowspan="1" colSpan="1" >Provide flexible slot mechanism, support customization of audience tags, profile photo style and other elements, enabling you to customize the display effect of the audience list based on business needs, creating a unique visual experience.</td>
+</tr>
+</table>
+
+
+## Component Integration
+
+### Step 1: Configuring the Environment and Activating the Service
+
+Before performing quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896), meet the required environment configuration and activate the corresponding service.
+
+### Step 2: Dependency Installation
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### Step 3: Integrating the Audience List Component
+
+Introduce and use the **audience list component** in your project. You can copy the following example code directly to display the live broadcast audience list in your project.
+``` typescript
+<template>
+  <UIKitProvider theme="dark" language="zh-CN">
+    <div class="app">
+        <div class="live-audience-container">
+          <LiveAudienceList class="live-audience-list"/>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { LiveAudienceList, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
+
+const { login } = useLoginState();
+const { joinLive } = useLiveState();
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppID, see Step 1 to get
+      userId: '',         // UserID, see Step 1 to get
+      userSig: '',        // userSig, see Step 1 to get
+    });
+  } catch (error) {
+    console.error('login error:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();                    
+  await joinLive({
+    liveId: 'input the corresponding live streaming room LiveId',     // enter live room
+  });
+});
+</script>
+
+<style>.live-audience-container{display:flex;height:100%;width:300px;padding:20px}.live-audience-list{width:100%;height:100%}</style>
+```
+
+## Component Customization
+
+**Audience List Component** provides flexible custom slots, supporting adjustment of audience tags, unique identifiers and other elements' style and layout based on your needs. Below are slot usage examples.
+
+### Component Slot
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Name**</td>
+
+<td rowspan="1" colSpan="1" >**Parameter**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**customAudienceInfo**</td>
+
+<td rowspan="1" colSpan="1" >**audience: AudienceInfo**</td>
+
+<td rowspan="1" colSpan="1" >**Customize audience information display UI**</td>
+</tr>
+</table>
+
+``` typescript
+// Example of using the customAudienceInfo slot
+<LiveAudienceList>
+   <CustomAudienceInfo #customAudienceInfo />
+</LiveAudienceList>
+```
+
+`AudienceInfo` defines the basic info and status of each audience in a live streaming room:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Parameter**</td>
+
+<td rowspan="1" colSpan="1" >**Type**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`userId`</td>
+
+<td rowspan="1" colSpan="1" >`string`</td>
+
+<td rowspan="1" colSpan="1" >The audience's unique identifier must be unique across the entire system.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`userName`</td>
+
+<td rowspan="1" colSpan="1" >`string`</td>
+
+<td rowspan="1" colSpan="1" >The name displayed for the audience in the live stream supports Chinese and English characters. If empty, the userId is displayed.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`avatarUrl`</td>
+
+<td rowspan="1" colSpan="1" >`string`</td>
+
+<td rowspan="1" colSpan="1" >The complete URL of the audience avatar supports HTTPS protocol.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`isMessageDisabled`</td>
+
+<td rowspan="1" colSpan="1" >`boolean`</td>
+
+<td rowspan="1" colSpan="1" >Whether the audience is muted. true indicates muted, false indicates normal speaking.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`joinTime`</td>
+
+<td rowspan="1" colSpan="1" >`number`</td>
+
+<td rowspan="1" colSpan="1" >Timestamp of audience entering the live room, for sorting and statistics</td>
+</tr>
+</table>
+
+``` typescript
+interface AudienceInfo {
+  userId: string;              // Audience unique ID
+  userName?: string;           // Audience display name (optional)
+  avatarUrl?: string;          // Audience avatar URL (optional)
+  isMessageDisabled?: boolean; // Whether muted (optional)
+  joinTime?: number;           // Entry timestamp (optional)
+} 
+```
+
+### Component Properties
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Attribute name**</td>
+
+<td rowspan="1" colSpan="1" >**Type**</td>
+
+<td rowspan="1" colSpan="1" >**Default Value**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`height`</td>
+
+<td rowspan="1" colSpan="1" >`string`</td>
+
+<td rowspan="1" colSpan="1" >**'500px'**</td>
+
+<td rowspan="1" colSpan="1" >Component height, supports CSS units (px, %, vh)</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`style`</td>
+
+<td rowspan="1" colSpan="1" >`CSSProperties`</td>
+
+<td rowspan="1" colSpan="1" >**{}**</td>
+
+<td rowspan="1" colSpan="1" >Custom style object used to override component default style</td>
+</tr>
+</table>
+
+
+#### Custom Slot Example
+
+To help you better experience and understand the **audience list component**'s **customAudienceInfo** slot customization capability, we provide a **custom personal info** example scenario for your reference. You can refer to the above **step 3** and incrementally copy the following code into your project to achieve a similar effect.
+``` typescript
+<template>
+  <LiveAudienceList>
+    <template #customAudienceInfo="{ audience }">
+      <div class="custom-audience-info">
+        avatar
+        <img 
+          :src="audience.avatarUrl || defaultAvatar" 
+          :alt="audience.userName || audience.userId"
+          class="audience-avatar"
+        />
+        
+        audience information
+        <div class="audience-details">
+          <span class="audience-name">{{ audience.userName || audience.userId }}</span>
+          <span class="join-time">{{ formatJoinTime(audience.joinTime) }}</span>
+        </div>
+        
+        status indicator
+        <div v-if="audience.isMessageDisabled" class="muted-indicator">🔇</div>
+      </div>
+    </template>
+  </LiveAudienceList>
+</template>
+
+<script setup lang="ts">
+import { LiveAudienceList } from 'tuikit-atomicx-vue3';
+
+const defaultAvatar = 'xxx'; // Input default avatar Url
+
+const formatJoinTime = (timestamp?: number) => {  // Format join time
+  if (!timestamp) return 'just now join';
+  
+  const now = Date.now();
+  const diff = now - timestamp;
+  const minutes = Math.floor(diff / (1000 * 60));
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  
+  if (days > 0) return `${days} days ago join`;
+  if (hours > 0) return `${hours} hours ago join`;
+  if (minutes > 0) return `${minutes} minutes ago join`;
+  return 'just now join';
+};
+</script>
+
+<style scoped>.custom-audience-info{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;transition:background-color .2s ease}.custom-audience-info:hover{background-color:var(--uikit-color-gray-1)}.audience-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--uikit-color-gray-3)}.audience-details{flex:1;display:flex;flex-direction:column;gap:4px}.audience-name{font-size:14px;font-weight:500;color:var(--text-color-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.join-time{font-size:12px;color:var(--text-color-secondary)}.muted-indicator{font-size:16px;opacity:.6}</style>
+```

package/resource/doc/livekit/vue/components/live-list.md

@@ -0,0 +1,200 @@
+## Overview
+
+This document provides a detailed introduction to the **Live Stream List Page** in the TUILiveKit Demo. You can directly integrate our pre-developed live stream list page into your existing project as specified in this document, or customize the page style, layout, and feature items according to your needs.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/d86cf0b8986011f0b5725254001c06ec.png)
+
+
+## Quick Connection
+
+### Step 1: Configuring the Environment and Activating the Service
+
+Before performing quick connection, you need to refer to [Preparations](https://write.woa.com/document/189228990450999296) to meet the required environment configuration and activate the corresponding service.
+
+### Step 2: Dependency Installation
+
+You can choose any method below to install dependencies:
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+```
+
+### Step 3: Live Stream List Page Integration
+
+Create the **live-list.vue** file under your project. You can copy the following code directly to your project for seamless integration with the **Live Stream List Page**.
+``` javascript
+<template>
+  <UIKitProvider language="zh-CN">
+    <div class="container">
+      <header class="header">
+        <h1 class="title">Online Live Streaming</h1>
+      </header>
+      <main class="main">
+        <LiveList @live-room-click="handleLiveRoomClick" />
+      </main>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { LiveList, type LiveInfo, useLoginState } from 'tuikit-atomicx-vue3';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+
+const { login } = useLoginState();
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppID, see Step 1 to obtain
+      userId: '',         // UserID, see Step 1 to obtain
+      userSig: '',        // userSig, see Step 1 to obtain
+    });
+  } catch (error) {
+    console.error('login error:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+});
+</script>
+
+<style>:global(*),:global(::after),:global(::before){box-sizing:border-box;margin:0}.container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-color-default)}.header{display:flex;align-items:center;flex-shrink:0}.title{margin:0;font-size:24px;font-weight:600;color:var(--text-color-primary);letter-spacing:-.5px}.main{flex:1;padding:24px;overflow-y:auto;min-height:0}</style>
+```
+
+### Step 4: Starting a Project
+
+Run the command to generate the live stream list page. You can select the corresponding live streaming room to watch.
+``` bash
+npm run dev
+```
+
+## Tailor-Made
+
+As shown in the above feature diagram, we also support you to customize the live list webpage UI based on project requirements. The main customization options are as listed in the table below.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Category**</td>
+
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live Room List**</td>
+
+<td rowspan="1" colSpan="1" >Custom live room list display</td>
+
+<td rowspan="1" colSpan="1" >**Supported:**<br>- **Live room information text display/hide, UI customization**<br>- **Custom fixed quantity display per line/column in live room**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Personal information**</td>
+
+<td rowspan="1" colSpan="1" >Custom personal information display</td>
+
+<td rowspan="1" colSpan="1" >**Supported:**<br>- **Show/Hide personal info**<br>- **Personal info font, color UI customization**</td>
+</tr>
+</table>
+
+
+## Designate a Live Streaming Room
+
+To handle the redirect logic from the live list (or homepage) to the live streaming room, you need to configure Vue Router. In the `src` directory of your project, create a new `router` folder and create the `index.ts` file. Then, in your main file (such as **main.ts** or **index.ts**), import and use the router. See the [GitHub sample code](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the live list, see the documentation for the [Live Stream List Page](https://write.woa.com/document/189228992611065856).
+``` typescript
+// live-list.vue can be incrementally added to your code
+<template>
+  <UIKitProvider>
+     // .....abbreviated part see quick integration procedure 3 part
+     <LiveList @live-room-click="handleLiveRoomClick" />
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+function handleLiveRoomClick(liveInfo: LiveInfo) {
+  if (liveInfo?.liveId) {
+    router.push({ path: '/live-player', query: { ...route.query, liveId: liveInfo.liveId } });
+  }
+}
+
+<script>
+
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    // Route jumping to the viewing page
+    path: '/live-player',
+    component: () => import('../views/live-player.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;
+
+// src/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
+### Next Steps
+
+Congratulations! You have successfully integrated the live broadcast list page. Next, you can implement the anchor start page, audience viewing page, and other content. Please refer to the table below:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+
+<td rowspan="1" colSpan="1" >**Experience Link**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Host Streaming**</td>
+
+<td rowspan="1" colSpan="1" >The live streamer's entire live streaming process is supported, including pre-streaming preparation and post-streaming interactions.</td>
+
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/189497714561167360)</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Audience Viewing**</td>
+
+<td rowspan="1" colSpan="1" >Viewers can enter the live streamer's room to watch the live stream, connect to the microphone, view live stream room information, view online viewers, and display comments.</td>
+
+<td rowspan="1" colSpan="1" >[Audience Viewing](https://write.woa.com/document/189571398058663936)</td>
+</tr>
+</table>
+