<template>
  <UIKitProvider theme="dark" language="zh-CN">
    <div class="app">
      <LiveScenePanel class="live-scene-panel" />
      <StreamMixer class="live-stream-mixer" />
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { LiveScenePanel, StreamMixer, useLoginState, useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();
const { createLive } = useLiveState();
const { sendCoGuestRequest } = useCoGuestState();

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();                                                          
  // After the anchor creates a live streaming room
  // StreamMixer automatically pushes the local composite video stream to the room
  await createLive({               
    liveId: `live_${loginUserInfo.value.userId}`,
    liveName: `${loginUserInfo.value?.userName}'s live streaming room`,
  });
  // The client can join the live room by calling the method and switch on/off mic as needed. 
  // After the audience succeeds in going on mic, StreamMixer starts TRTC streaming automatically
  await sendCoGuestRequest();     
});
</script>

<style>.app {width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}</style>

npm run dev

// Example of using the seatViewUI slot
<StreamMixer>
  <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
</StreamMixer>

interface SeatInfo {
  index: number;           // Seat index
  isLocked: boolean;       // Whether the seat is locked
  userInfo?: SeatUserInfo; // User information on the seat (optional)
  region?: RegionInfo;     // Region information of the seat in the canvas (optional)
} 

interface SeatUserInfo {
  roomId: string;                    // Live streaming room ID
  userId: string;                    // User ID
  userName: string;                  // User Display Name
  avatarUrl: string;                 // User Avatar URL
  microphoneStatus: DeviceStatus;    // mic status
  allowOpenMicrophone: boolean;      // whether to allow turning on microphone
  cameraStatus: DeviceStatus;        // camera status
  allowOpenCamera: boolean;          // whether to allow turning on camera
}

export type SeatUserInfo = {
  liveId: string;                                // Live streaming room ID
  userId: string;                                // User ID
  userName: string;                              // User Display Name
  avatarUrl: string;                             // User Avatar URL
  microphoneStatus: DeviceStatus;                // mic status
  microphoneStatusReason: DeviceStatusReason;    // reason for change
  cameraStatus: DeviceStatus;                    // camera status
  cameraStatusReason: DeviceStatusReason;        // reason for change
}

interface RegionInfo {
  x: number;      // Top-left X-axis coordinate of the region
  y: number;      // Top-left Y-axis coordinate of the region
  w: number;      // Region width
  h: number;      // Region height
  zOrder: number; // Z-order
}

<template>
  <StreamMixer>
    <template #seatViewUI="{ userInfo }">
      <div 
        class="live-stream-view"
        :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
      >
        User information overlay
        <div class="user-overlay">
          <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">
            {{ isAnchor(userInfo) ? 'Anchor' : 'Audience' }}
          </div>
          <div class="user-name">{{ userInfo.userName }}</div>
          <div class="device-status">
            <span :class="['mic', userInfo.microphoneStatus]"></span>
            <span :class="['camera', userInfo.cameraStatus]"></span>
          </div>
        </div>
      </div>
    </template>
  </StreamMixer>
</template>

<script setup lang="ts">
import { StreamMixer } from 'tuikit-atomicx-vue3';
import type { SeatUserInfo } from 'tuikit-atomicx-vue3';

// Determine whether it is an anchor (based on business logic)
const isAnchor = (userInfo: SeatUserInfo) => {
  // Here access can be judged based on uid and role
  return userInfo.userId.includes('anchor') || userInfo.userName.includes('Anchor');
};
</script>

<style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>