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'; ...@@ -10,6 +10,7 @@ import PanToolIcon from '@material-ui/icons/PanTool';
import {roomStore} from "../stores/room"; import {roomStore} from "../stores/room";
import UserStars from "./user-stars"; import UserStars from "./user-stars";
import {eventBus} from "../stores/EventBus"; import {eventBus} from "../stores/EventBus";
import AddStarsButton, { StarsButtonType } from './add-stars-btn';
const contentMode = 0; const contentMode = 0;
interface MemberHolderProps { interface MemberHolderProps {
...@@ -258,7 +259,8 @@ const MemberHolder: React.FC<MemberHolderProps> = ({ ...@@ -258,7 +259,8 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
{/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/} {/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/}
{me.role === 'teacher' ? {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> <Link component="button" onClick={onStageUp}>上台</Link>
</> </>
: null} : null}
......
...@@ -15,6 +15,7 @@ import SettingsPowerIcon from '@material-ui/icons/SettingsPower'; ...@@ -15,6 +15,7 @@ import SettingsPowerIcon from '@material-ui/icons/SettingsPower';
import {TOOL_TYPE} from "../utils/types"; import {TOOL_TYPE} from "../utils/types";
import EmojiEventsIcon from '@material-ui/icons/EmojiEvents'; import EmojiEventsIcon from '@material-ui/icons/EmojiEvents';
import {eventBus} from "../stores/EventBus"; import {eventBus} from "../stores/EventBus";
import AddStarsButton, {StarsButtonType} from './add-stars-btn';
type Props = { type Props = {
// zoomScale: number // zoomScale: number
...@@ -52,9 +53,9 @@ export default function RoomToolsBar (props: any) { ...@@ -52,9 +53,9 @@ export default function RoomToolsBar (props: any) {
console.log('allStudentMuteOff'); console.log('allStudentMuteOff');
await roomStore.allStudentMuteOff() await roomStore.allStudentMuteOff()
} }
const allAddStar = async () => { // const allAddStar = async () => {
eventBus.emit('showAddStartDialog', {uid: 0}) // eventBus.emit('showAddStartDialog', {uid: 0})
} // }
const randomStageUp = async () => { const randomStageUp = async () => {
await roomStore.randomStageUp() await roomStore.randomStageUp()
} }
...@@ -65,7 +66,8 @@ export default function RoomToolsBar (props: any) { ...@@ -65,7 +66,8 @@ export default function RoomToolsBar (props: any) {
{roomStore.state.me.role == 'teacher' ? {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 {muteAudio
? <div className="tool-btn" onClick={allMuteOff}><RecordVoiceOverIcon/></div> ? <div className="tool-btn" onClick={allMuteOff}><RecordVoiceOverIcon/></div>
: <div onClick={allMuteOn} className="tool-btn"><VoiceOverOffIcon/></div> : <div onClick={allMuteOn} className="tool-btn"><VoiceOverOffIcon/></div>
......
...@@ -10,8 +10,9 @@ import {roomStore} from "../stores/room"; ...@@ -10,8 +10,9 @@ import {roomStore} from "../stores/room";
import BuildIcon from '@material-ui/icons/Build'; import BuildIcon from '@material-ui/icons/Build';
import {eventBus} from "../stores/EventBus"; import {eventBus} from "../stores/EventBus";
// import StarIcon from '@material-ui/icons/Star'; // 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 UserStars from './user-stars';
import AddStarsButton, {StarsButtonType} from "./add-stars-btn";
const useStyles = makeStyles({ const useStyles = makeStyles({
stageDown : { stageDown : {
...@@ -394,7 +395,8 @@ return ( ...@@ -394,7 +395,8 @@ return (
{id != roomStore.state.course.teacherId {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> <ArrowDownwardIcon onClick={onStageDownClick} className={style.stageDown}></ArrowDownwardIcon>
</> </>
:<BuildIcon onClick={fixUserStream} className={style.fixStream}></BuildIcon>} :<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