Commit 788c9a76 authored by liujiaxin's avatar liujiaxin

feat:调整userstars 为频道属性

parent 441f3a6f
...@@ -61,5 +61,6 @@ export default function AddStarsButton({type, uid}: AddStarsButtonProps) { ...@@ -61,5 +61,6 @@ export default function AddStarsButton({type, uid}: AddStarsButtonProps) {
: null : null
} }
</> </>
) )
} }
.hands-circle{
width: 32px;
height: 32px;
margin-top: 4px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16px;
background: #4381f7;
}
@keyframes blink{
0%{opacity: 1;}
25%{opacity: .5;}
50%{opacity: .0;}
75%{opacity: .5;}
100%{opacity: 1;}
}
.hands-btn{
//width: 16px!important;
//height: 40px!important;
color: #fff;
margin-left: -2px;
}
.blink{
//color: #dd4814;
animation: blink 1s linear infinite;
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
import React, {useEffect, useMemo, useRef, useState} from 'react';
import { useRoomState} from '../containers/root-container';
import { isEmpty } from 'lodash';
import {roomStore} from "../stores/room";
import PanToolIcon from "@material-ui/icons/PanTool";
import './hands-up-icon.scss';
interface UserStarsProps {
id?: string,
streamID: number
// stars: number
}
export default function HandsUpIcon({id, streamID}: UserStarsProps) {
const state = useRoomState();
// const isHandUp = useMemo(() => {
// const hu = roomStore.state.handsUpStudents[streamID];
// console.log('HandsUpIcon', streamID, hu)
// return hu
// }, [state.handsUpStudents]);
const isHandUp = useMemo(() => {
const hu = roomStore.state.handsUpStudents[streamID];
console.log(streamID, hu)
return hu
}, [roomStore.state.handsUpStudents]);
return (
<>
{
isHandUp ?
<div className="hands-circle">
<PanToolIcon className='hands-btn blink'></PanToolIcon>
</div>
:null
}
</>
)
}
...@@ -10,12 +10,14 @@ ...@@ -10,12 +10,14 @@
flex: 1; flex: 1;
} }
} }
/*
.hands-btn{ .hands-btn{
width: 16px!important; width: 16px!important;
height: 40px!important; height: 40px!important;
color: #dd4814; color: #dd4814;
} }
/*.medal{ .medal{
width: 16px; width: 16px;
z-index: 99; z-index: 99;
background-size: contain; background-size: contain;
...@@ -57,7 +59,7 @@ ...@@ -57,7 +59,7 @@
/*
@keyframes blink{ @keyframes blink{
0%{opacity: 1;} 0%{opacity: 1;}
25%{opacity: .5;} 25%{opacity: .5;}
...@@ -74,6 +76,8 @@ ...@@ -74,6 +76,8 @@
-ms-animation: blink 1s linear infinite; -ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite; -o-animation: blink 1s linear infinite;
} }
*/
.holder-avatar{ .holder-avatar{
width: 40px!important; width: 40px!important;
height: 40px!important; height: 40px!important;
......
...@@ -11,6 +11,7 @@ import {roomStore} from "../stores/room"; ...@@ -11,6 +11,7 @@ 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'; import AddStarsButton, { StarsButtonType } from './add-stars-btn';
import HandsUpIcon from "./hands-up-icon";
const contentMode = 0; const contentMode = 0;
interface MemberHolderProps { interface MemberHolderProps {
...@@ -116,11 +117,11 @@ const MemberHolder: React.FC<MemberHolderProps> = ({ ...@@ -116,11 +117,11 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
}, [domId, stream]); }, [domId, stream]);
*/ */
const isHandUp = useMemo(() => { // const isHandUp = useMemo(() => {
const hu = roomStore.state.handsUpStudents[streamID]; // const hu = roomStore.state.handsUpStudents[streamID];
console.log(streamID, hu) // console.log(streamID, hu)
return hu // return hu
}, [roomStore.state.handsUpStudents]); // }, [roomStore.state.handsUpStudents]);
useEffect(() => { useEffect(() => {
if (stream && platform === 'web') { if (stream && platform === 'web') {
...@@ -247,15 +248,17 @@ const MemberHolder: React.FC<MemberHolderProps> = ({ ...@@ -247,15 +248,17 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
<div className="user-profile"> <div className="user-profile">
<span className="account">{account}</span> <span className="account">{account}</span>
{/*me.uid === id ||*/} {/*me.uid === id ||*/}
<UserStars id={id} streamID={streamID}></UserStars>
{me.role === 'teacher' ? {me.role === 'teacher' ?
<span className="media-btn"> <span className="media-btn">
{
{/*
isHandUp ? isHandUp ?
<PanToolIcon className='hands-btn blink'></PanToolIcon>: <PanToolIcon className='hands-btn blink'></PanToolIcon>:
<div className='hands-btn'></div> <div className='hands-btn'></div>
} */}
<HandsUpIcon id={id} streamID={streamID}></HandsUpIcon>
<UserStars id={id} streamID={streamID}></UserStars>
{/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/} {/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/}
{me.role === 'teacher' ? {me.role === 'teacher' ?
<> <>
...@@ -266,7 +269,7 @@ const MemberHolder: React.FC<MemberHolderProps> = ({ ...@@ -266,7 +269,7 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
: null} : null}
{/*<Icon onClick={onAudioClick} className={audio ? "icon-speaker-on" : "icon-speaker-off"} data={"audio"} />*/} {/*<Icon onClick={onAudioClick} className={audio ? "icon-speaker-on" : "icon-speaker-off"} data={"audio"} />*/}
{/*<Icon onClick={onVideoClick} className={video ? "icons-camera-unmute-s" : "icons-camera-mute-s"} data={"video"} />*/} {/*<Icon onClick={onVideoClick} className={video ? "icons-camera-unmute-s" : "icons-camera-mute-s"} data={"video"} />*/}
</span> : null} </span> : <UserStars id={id} streamID={streamID}></UserStars>}
</div> </div>
: null} : null}
</div> </div>
......
...@@ -17,20 +17,22 @@ export default function UserStars({id, streamID}: UserStarsProps) { ...@@ -17,20 +17,22 @@ export default function UserStars({id, streamID}: UserStarsProps) {
useEffect(() => { useEffect(() => {
console.log('roomStore.state.userStars change, streamID',streamID) console.log('roomStore.state.userStars change, streamID',streamID)
if (streamID) { if (streamID) {
const u = roomStore.state.users.get(`${streamID}`) // const u = roomStore.state.users.get(`${streamID}`)
if (u) { const num = roomStore.state.userStars[`${streamID}`];
console.log('u.stars', u.stars); if (num) {
setStar(u.stars || 0); console.log('u.stars', num);
setStar(num || 0);
} }
} }
// setStar() // setStar()
}, [roomStore.state.users]); }, [roomStore.state.userStars]);
return ( return (
// <></>
<div className='star'> <div className='star'>
<div className="medal"></div> <div className="medal"></div>
<div className="medal-bg"> <div className="medal-bg">
...@@ -38,7 +40,6 @@ export default function UserStars({id, streamID}: UserStarsProps) { ...@@ -38,7 +40,6 @@ export default function UserStars({id, streamID}: UserStarsProps) {
{star} {star}
</span> </span>
</div> </div>
</div> </div>
) )
} }
...@@ -13,6 +13,12 @@ ...@@ -13,6 +13,12 @@
border: 0; border: 0;
} }
} }
.hands-wrapper{
position: absolute;
right: 4px;
top: 0;
z-index: 12;
}
.media-btn>.icon.disabled{ .media-btn>.icon.disabled{
cursor: not-allowed; cursor: not-allowed;
} }
......
...@@ -13,6 +13,7 @@ import {eventBus} from "../stores/EventBus"; ...@@ -13,6 +13,7 @@ import {eventBus} from "../stores/EventBus";
// 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"; import AddStarsButton, {StarsButtonType} from "./add-stars-btn";
import HandsUpIcon from "./hands-up-icon";
const useStyles = makeStyles({ const useStyles = makeStyles({
stageDown : { stageDown : {
...@@ -372,7 +373,13 @@ return ( ...@@ -372,7 +373,13 @@ return (
account ? account ?
<> <>
{ streamID > 0 && id != teacherId? { streamID > 0 && id != teacherId?
<UserStars id={id} streamID={streamID}></UserStars> <>
<UserStars id={id} streamID={streamID}></UserStars>
<div className="hands-wrapper">
<HandsUpIcon id={id} streamID={streamID}></HandsUpIcon>
</div>
</>
/*<div className='star'> /*<div className='star'>
<div className="medal"></div> <div className="medal"></div>
<div className="medal-bg"> <div className="medal-bg">
......
...@@ -147,7 +147,7 @@ export function RoomPage({ children }: any) { ...@@ -147,7 +147,7 @@ export function RoomPage({ children }: any) {
dialogLock.current = true; dialogLock.current = true;
let titleTxt = '全部学生' let titleTxt = '全部学生'
if (data.uid) { if (data.uid) {
const stu = roomStore.state.users.get(data.uid); const stu = roomStore.state.users.get(`${data.uid}`);
titleTxt = `学生:${stu?.account}` titleTxt = `学生:${stu?.account}`
} }
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
.hands_up.disabled{ .hands_up.disabled{
background: #dbe2e5; background: #dbe2e5;
} }
.video-marquee-container { .video-marquee-container {
display: flex; display: flex;
min-width: 990px; min-width: 990px;
......
...@@ -100,15 +100,12 @@ export default function SmallClass() { ...@@ -100,15 +100,12 @@ export default function SmallClass() {
? <MediaBoard /> ? <MediaBoard />
: <CourseWareFrame></CourseWareFrame>} : <CourseWareFrame></CourseWareFrame>}
{roomStore.state.me.role === 'student' && !roomState.studentsOrder.includes(+roomStore.state.me.uid) ?
<> <Icon
<Icon data='hands_up'
data='hands_up' onClick={handleClick}
onClick={handleClick} className={`items hands_up ${false ? 'active' : ''}`}
className={`items hands_up ${false ? 'active' : ''}`} />
/>
</>
:null}
{/*{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}*/} {/*{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}*/}
</div> </div>
......
...@@ -130,7 +130,14 @@ function HomePage() { ...@@ -130,7 +130,14 @@ function HomePage() {
console.log(userInfo); console.log(userInfo);
session.roomName = userInfo["class_id"];// userInfo["class_id"]; session.roomName = userInfo["class_id"];// userInfo["class_id"];
// session.yourName = userInfo["nick_name"]; // session.yourName = userInfo["nick_name"];
session.role = userInfo["classRole"]==="tea"?"teacher":"student" if (userInfo["classRole"]==="tea") {
session.role = "teacher"
} else if (userInfo["classRole"]==="developer"){
session.role = "developer"
} else {
session.role = "student"
}
// session.role = userInfo["classRole"]==="tea"?"teacher":"student"
session.roomType = 1; session.roomType = 1;
if (!roomTypes[session.roomType]) return; if (!roomTypes[session.roomType]) return;
......
import { AgoraFetch } from "../utils/fetch"; import { AgoraFetch } from "../utils/fetch";
import jwt_decode from 'jwt-decode'; import jwt_decode from 'jwt-decode';
import {roomStore} from "../stores/room"; import {roomStore} from "../stores/room";
import GlobalStorage from "../utils/custom-storage";
const ENDPOINT: string = process.env.REACT_APP_AGORA_ENDPOINT as string; const ENDPOINT: string = process.env.REACT_APP_AGORA_ENDPOINT as string;
...@@ -44,6 +45,7 @@ export interface RoomParams { ...@@ -44,6 +45,7 @@ export interface RoomParams {
} }
export function goHome(history: any){ export function goHome(history: any){
GlobalStorage.clear('agora_room');
window.location.href = 'http://iteachabc.com' window.location.href = 'http://iteachabc.com'
} }
export function goLogin(){ export function goLogin(){
...@@ -110,7 +112,7 @@ export class EndPoint { ...@@ -110,7 +112,7 @@ export class EndPoint {
async login(data: any, local=false) { async login(data: any, local=false) {
if (local) { if (local) {
return { const info = {
id: `${data.username}`, id: `${data.username}`,
class_id: `${data.classid}`, class_id: `${data.classid}`,
classRole: (`${data.username}`==="1" || `${data.username}`==="11")?"tea":"", classRole: (`${data.username}`==="1" || `${data.username}`==="11")?"tea":"",
...@@ -119,6 +121,10 @@ export class EndPoint { ...@@ -119,6 +121,10 @@ export class EndPoint {
// data.username: session.yourName, // data.username: session.yourName,
// data.password: session.yourPass // data.password: session.yourPass
} }
if (data.username.startsWith('dev')) {
info.classRole = 'developer'
}
return info;
} }
const host = getApiServerHost(true); const host = getApiServerHost(true);
let url = `${host}/api/login`; let url = `${host}/api/login`;
......
...@@ -146,7 +146,7 @@ export type RoomState = { ...@@ -146,7 +146,7 @@ export type RoomState = {
messages: List<ChatMessage> messages: List<ChatMessage>
studentsOrder: number[] studentsOrder: number[]
userUsage: userUsageType, userUsage: userUsageType,
// userStars: userStarsType, userStars: userStarsType,
handsUpStudents: handsUpUser, // immuMap<number, any> handsUpStudents: handsUpUser, // immuMap<number, any>
cwLink: string, cwLink: string,
} }
...@@ -233,7 +233,7 @@ export class RoomStore { ...@@ -233,7 +233,7 @@ export class RoomStore {
messages: List<ChatMessage>(), messages: List<ChatMessage>(),
studentsOrder: [], studentsOrder: [],
userUsage: {}, userUsage: {},
// userStars:{}, userStars:{},
handsUpStudents: {}, // immuMap<number, any>(), handsUpStudents: {}, // immuMap<number, any>(),
...GlobalStorage.read('agora_room') ...GlobalStorage.read('agora_room')
}); });
...@@ -363,17 +363,18 @@ export class RoomStore { ...@@ -363,17 +363,18 @@ export class RoomStore {
const data = {star: value, users: []}; const data = {star: value, users: []};
console.log('addStarToUser', uid, value); console.log('addStarToUser', uid, value);
const stuChannelData: any = {}; const stuChannelData: any = {};
// const userStars = {...this.state.userStars}; const userStars = {...this.state.userStars};
if (uid !== 0) { if (uid !== 0) {
const stu = this.state.users.get(`${uid}`); const stu = this.state.users.get(`${uid}`);
(data.users as number[]).push(uid) (data.users as number[]).push(uid)
let uStar = 0; let uStar = 0;
if (stu) { if (stu) {
uStar = stu.stars; uStar = userStars[`${uid}`];//stu.stars;
if (!uStar || isNaN(uStar)) { if (!uStar || isNaN(uStar)) {
uStar = 0; uStar = 0;
} }
stu.stars = uStar + value; // stu.stars = uStar + value;
userStars[`${uid}`] = uStar + value;
stuChannelData[uid] = stu stuChannelData[uid] = stu
} }
...@@ -381,18 +382,25 @@ export class RoomStore { ...@@ -381,18 +382,25 @@ export class RoomStore {
} else { } else {
this.state.users.forEach((u, _uid) => { this.state.users.forEach((u, _uid) => {
if (u.role === 'student') { if (u.role === 'student') {
(data.users as number[]).push(+_uid) (data.users as number[]).push(+_uid);
u.stars = u.stars + value; let uStar = userStars[`${_uid}`];//stu.stars;
if (!uStar || isNaN(uStar)) {
uStar = 0;
}
// u.stars = u.stars + value;
userStars[`${_uid}`] = uStar + value;
stuChannelData[_uid] = u stuChannelData[_uid] = u
} }
}) })
} }
try{
const host = getApiServerHost(true);
var blob = new Blob([JSON.stringify(data)], {
type: 'text/plain'
});
navigator.sendBeacon(`${host}/api/classroom/stars`, blob);
} catch(e){}
const host = getApiServerHost(true);
var blob = new Blob([JSON.stringify(data)], {
type: 'text/plain'
});
navigator.sendBeacon(`${host}/api/classroom/stars`, blob);
// this.state = { // this.state = {
// ...this.state, // ...this.state,
...@@ -400,6 +408,7 @@ export class RoomStore { ...@@ -400,6 +408,7 @@ export class RoomStore {
// } // }
console.log(stuChannelData) console.log(stuChannelData)
if (Object.keys(stuChannelData).length > 0) { if (Object.keys(stuChannelData).length > 0) {
stuChannelData['userStars'] = userStars;
await this.rtmClient.addOrUpdateChannelAttributes(stuChannelData); await this.rtmClient.addOrUpdateChannelAttributes(stuChannelData);
} }
} }
...@@ -422,7 +431,7 @@ export class RoomStore { ...@@ -422,7 +431,7 @@ export class RoomStore {
async studentHandsUp(uid: number) { async studentHandsUp(uid: number) {
const hu = this.state.handsUpStudents[uid]; const hu = this.state.handsUpStudents[uid];
if (!hu && !this.state.studentsOrder.includes(uid)) { // !hu && !this.state.studentsOrder.includes(uid)
const handleId = setTimeout(() => { const handleId = setTimeout(() => {
this.cancelHandsUp(uid); this.cancelHandsUp(uid);
}, 8000); }, 8000);
...@@ -433,7 +442,6 @@ export class RoomStore { ...@@ -433,7 +442,6 @@ export class RoomStore {
handsUpStudents: hus, handsUpStudents: hus,
}; };
await this.commit(this.state); await this.commit(this.state);
}
} }
testStudentsOrder() { testStudentsOrder() {
console.log('studentsOrder', this.state.studentsOrder); console.log('studentsOrder', this.state.studentsOrder);
...@@ -1656,7 +1664,7 @@ export class RoomStore { ...@@ -1656,7 +1664,7 @@ export class RoomStore {
} }
async updateRoomAttrs ({teacher, accounts, room, studentsOrder/*, userStars*/}: {teacher: any, accounts: any, room: any, studentsOrder: number[]/*, userStars: any*/}) { async updateRoomAttrs ({teacher, accounts, room, studentsOrder, userStars}: {teacher: any, accounts: any, room: any, studentsOrder: number[], userStars: any}) {
console.log("[agora-board], room: ",teacher, accounts, room, studentsOrder); console.log("[agora-board], room: ",teacher, accounts, room, studentsOrder);
const currentRoomUsers = this.state.users.toArray(); const currentRoomUsers = this.state.users.toArray();
const exitUserIds = []; const exitUserIds = [];
...@@ -1797,7 +1805,7 @@ export class RoomStore { ...@@ -1797,7 +1805,7 @@ export class RoomStore {
...newClassState ...newClassState
}, },
// studentsOrder: newStudentsOrder // studentsOrder: newStudentsOrder
// userStars userStars
} }
console.log('update orders?', cos, uos) console.log('update orders?', cos, uos)
if (cos != uos) { if (cos != uos) {
...@@ -1902,10 +1910,10 @@ export class RoomStore { ...@@ -1902,10 +1910,10 @@ export class RoomStore {
} catch(e) {} } catch(e) {}
const webClient = roomStore.rtcClient as AgoraWebClient; const webClient = roomStore.rtcClient as AgoraWebClient;
setTimeout(()=>{ // setTimeout(()=>{
// alert('clear2') // alert('clear2')
GlobalStorage.clear('agora_room'); GlobalStorage.clear('agora_room');
}) // })
await this.removeRtcListener(); await this.removeRtcListener();
// await this.rtcClient.exit(); // await this.rtcClient.exit();
......
...@@ -266,14 +266,14 @@ export function resolveChannelAttrs(json: object) { ...@@ -266,14 +266,14 @@ export function resolveChannelAttrs(json: object) {
} }
delete (json as any).studentsOrder; delete (json as any).studentsOrder;
// let userStars: any = {}; let userStars: any = {};
// if ((json as any).userStars && (json as any).userStars.value) { if ((json as any).userStars && (json as any).userStars.value) {
// userStars = JSON.parse((json as any).userStars.value) || []; userStars = JSON.parse((json as any).userStars.value) || [];
// Object.keys(userStars).forEach(k => { Object.keys(userStars).forEach(k => {
// userStars[k] = +userStars[k]; userStars[k] = +userStars[k];
// }) })
// } }
// delete (json as any).userStars; delete (json as any).userStars;
const teacherJson = jsonParse(_.get(json, 'teacher.value')); const teacherJson = jsonParse(_.get(json, 'teacher.value'));
...@@ -365,7 +365,7 @@ export function resolveChannelAttrs(json: object) { ...@@ -365,7 +365,7 @@ export function resolveChannelAttrs(json: object) {
accounts, accounts,
room, room,
studentsOrder, studentsOrder,
// userStars userStars
}; };
} }
......
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