six-dimension-aigc/src/pages/MainPage/MainArea/Antechamber/index.tsx

67 lines
1.8 KiB
TypeScript

/**
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useSearchParams } from 'react-router-dom';
import InvokeButton from '@/pages/MainPage/MainArea/Antechamber/InvokeButton';
import HeaderGroup from '@/pages/MainPage/MainArea/Antechamber/HeaderGroup';
import MyInput from '@/pages/MainPage/MainArea/Antechamber/MyInput';
import { useJoin } from '@/lib/useCommon';
import style from './index.module.less';
import { updateAIConfig } from '@/store/slices/room';
import { requestPostMethod } from '@/app/base';
function Antechamber() {
const dispatch = useDispatch()
const [joining, dispatchJoin] = useJoin();
const [isDisable,setDisable] = useState(true)
const [searchParams] = useSearchParams();
const userId = searchParams.get('userId') || '0'
const username = userId;
const roomId = `${userId}-${new Date().getTime()}`;
const getToken = async () => {
const queryData = await requestPostMethod(`/api/token`)({roomId,userId:username})
const res = await queryData?.json();
if(res.code === 200){
dispatch(updateAIConfig({user_token:res.data.token}))
setDisable(false)
}
}
useEffect(() => {
getToken()
},[])
const handleJoinRoom = async() => {
if (!isDisable &&!joining) {
await dispatchJoin(
{
username,
roomId,
publishAudio: true,
},
false
);
}
};
return (
<div className={style.wrapper}>
<HeaderGroup toRoom={handleJoinRoom} />
<MyInput toRoom={handleJoinRoom} />
<InvokeButton onClick={handleJoinRoom} disable={isDisable} loading={joining} className={style['invoke-btn']} />
</div>
);
}
export default Antechamber;