40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
/**
|
|
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
|
|
* SPDX-license-identifier: BSD-3-Clause
|
|
*/
|
|
|
|
import { useSelector } from 'react-redux';
|
|
import UserTag from '../UserTag';
|
|
import { RootState } from '@/store';
|
|
import style from './index.module.less';
|
|
import { useScene } from '@/lib/useCommon';
|
|
import { isMobile } from '@/utils/utils';
|
|
|
|
export const LocalFullID = 'local-full-player';
|
|
export const RemoteFullID = 'remote-full-player';
|
|
|
|
function FullScreenCard() {
|
|
const isFullScreen = useSelector((state: RootState) => state.room.isFullScreen);
|
|
const scene = useScene();
|
|
return (
|
|
<>
|
|
<div className={`${style.card} ${!isFullScreen ? style.hidden : ''}`} id={LocalFullID}>
|
|
<UserTag name="我" className={style.tag} />
|
|
</div>
|
|
<div
|
|
className={`${style.card} ${isFullScreen ? style.hidden : ''} ${style['blur-bg']}`}
|
|
style={{ backgroundImage: `url(${scene.avatarBgUrl})` }}
|
|
/>
|
|
<div
|
|
className={`${style.card} ${isFullScreen ? style.hidden : ''}`}
|
|
style={{ background: 'unset' }}
|
|
>
|
|
<div id={RemoteFullID} style={{ width: '60%', height: '100%' }} />
|
|
{!isMobile() ? <UserTag name="AI" className={style.tag} /> : null}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default FullScreenCard;
|