52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
/**
|
|
* Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
|
|
* SPDX-license-identifier: BSD-3-Clause
|
|
*/
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Modal, Button } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { RootState } from '@/store';
|
|
import RtcClient from '@/lib/RtcClient';
|
|
import { clearAutoPlayFail } from '@/store/slices/room';
|
|
|
|
import styles from './index.module.less';
|
|
|
|
function AutoPlayModal() {
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
const room = useSelector((state: RootState) => state.room);
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
setVisible(!!room.autoPlayFailUser.length);
|
|
}, [room.autoPlayFailUser]);
|
|
|
|
const handleAutoPlay = () => {
|
|
const users: string[] = room.autoPlayFailUser;
|
|
if (users && users.length) {
|
|
users.forEach((user) => {
|
|
RtcClient?.engine.play(user);
|
|
});
|
|
}
|
|
dispatch(clearAutoPlayFail());
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
className={styles.container}
|
|
footer={null}
|
|
closable={false}
|
|
width={450}
|
|
visible={visible}
|
|
style={{ top: '20%', minHeight: 150 }}
|
|
>
|
|
<Button className={styles.button} block size="large" onClick={handleAutoPlay}>
|
|
{t('autoPlay')}
|
|
</Button>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default AutoPlayModal;
|