Commit 788c9a76 authored by liujiaxin's avatar liujiaxin

feat:调整userstars 为频道属性

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