Commit 441f3a6f authored by liujiaxin's avatar liujiaxin

fea make button in component

parent ec88b4d8
import React, { useEffect, useRef, useState } from 'react';
import './toast.scss';
import {useGlobalState, useRoomState} from '../containers/root-container';
import { isEmpty } from 'lodash';
import {roomStore} from "../stores/room";
import EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
import {eventBus} from "../stores/EventBus";
import Link from "@material-ui/core/Link";
import EmojiEventsOutlinedIcon from '@material-ui/icons/EmojiEventsOutlined';
import {makeStyles} from "@material-ui/core/styles";
const useStyles = makeStyles({
emojiEvent: {
width: 18,
marginLeft: 3,
marginRight: 3,
height: 24,
color: '#fff',
lineHeight: 24,
opacity: .8,
cursor:'pointer'
}
});
export enum StarsButtonType {
BIG, SMALL, TEXT
}
interface AddStarsButtonProps {
type: StarsButtonType
uid: number
}
// const VideoPlayer: React.FC<VideoPlayerProps> = ({}) => {}
export default function AddStarsButton({type, uid}: AddStarsButtonProps) {
const me = useRoomState().me;
const style = useStyles();
const addStar = async () => {
if (me.role != 'teacher') {
return
}
eventBus.emit('showAddStartDialog', {uid})
}
return (
<>
{
StarsButtonType.BIG === type
?<div className="tool-btn" onClick={addStar}><EmojiEventsIcon/></div>
: null
}
{
StarsButtonType.SMALL === type
? <EmojiEventsOutlinedIcon onClick={addStar} className={style.emojiEvent}></EmojiEventsOutlinedIcon>
: null
}
{
StarsButtonType.TEXT === type
? <Link component="button" onClick={addStar}>奖励</Link>
: null
}
</>
)
}
......@@ -10,6 +10,7 @@ import PanToolIcon from '@material-ui/icons/PanTool';
import {roomStore} from "../stores/room";
import UserStars from "./user-stars";
import {eventBus} from "../stores/EventBus";
import AddStarsButton, { StarsButtonType } from './add-stars-btn';
const contentMode = 0;
interface MemberHolderProps {
......@@ -258,7 +259,8 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
{/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/}
{me.role === 'teacher' ?
<>
<Link component="button" onClick={addStar}>奖励</Link>
{/*<Link component="button" onClick={addStar}>奖励</Link>*/}
<AddStarsButton type={StarsButtonType.TEXT} uid={streamID}></AddStarsButton>
<Link component="button" onClick={onStageUp}>上台</Link>
</>
: null}
......
......@@ -15,6 +15,7 @@ import SettingsPowerIcon from '@material-ui/icons/SettingsPower';
import {TOOL_TYPE} from "../utils/types";
import EmojiEventsIcon from '@material-ui/icons/EmojiEvents';
import {eventBus} from "../stores/EventBus";
import AddStarsButton, {StarsButtonType} from './add-stars-btn';
type Props = {
// zoomScale: number
......@@ -52,9 +53,9 @@ export default function RoomToolsBar (props: any) {
console.log('allStudentMuteOff');
await roomStore.allStudentMuteOff()
}
const allAddStar = async () => {
eventBus.emit('showAddStartDialog', {uid: 0})
}
// const allAddStar = async () => {
// eventBus.emit('showAddStartDialog', {uid: 0})
// }
const randomStageUp = async () => {
await roomStore.randomStageUp()
}
......@@ -65,7 +66,8 @@ export default function RoomToolsBar (props: any) {
{roomStore.state.me.role == 'teacher' ?
<>
<div className="tool-btn" onClick={allAddStar}><EmojiEventsIcon/></div>
<AddStarsButton type={StarsButtonType.BIG} uid={0}></AddStarsButton>
{/*<div className="tool-btn" onClick={allAddStar}><EmojiEventsIcon/></div>*/}
{muteAudio
? <div className="tool-btn" onClick={allMuteOff}><RecordVoiceOverIcon/></div>
: <div onClick={allMuteOn} className="tool-btn"><VoiceOverOffIcon/></div>
......
......@@ -10,8 +10,9 @@ import {roomStore} from "../stores/room";
import BuildIcon from '@material-ui/icons/Build';
import {eventBus} from "../stores/EventBus";
// import StarIcon from '@material-ui/icons/Star';
import EmojiEventsOutlinedIcon from '@material-ui/icons/EmojiEventsOutlined';
// import EmojiEventsOutlinedIcon from '@material-ui/icons/EmojiEventsOutlined';
import UserStars from './user-stars';
import AddStarsButton, {StarsButtonType} from "./add-stars-btn";
const useStyles = makeStyles({
stageDown : {
......@@ -394,7 +395,8 @@ return (
{id != roomStore.state.course.teacherId
?
<>
<EmojiEventsOutlinedIcon onClick={addStar} className={style.emojiEvent}></EmojiEventsOutlinedIcon>
{/*<EmojiEventsOutlinedIcon onClick={addStar} className={style.emojiEvent}></EmojiEventsOutlinedIcon>*/}
<AddStarsButton type={StarsButtonType.SMALL} uid={streamID}></AddStarsButton>
<ArrowDownwardIcon onClick={onStageDownClick} className={style.stageDown}></ArrowDownwardIcon>
</>
:<BuildIcon onClick={fixUserStream} className={style.fixStream}></BuildIcon>}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment