Commit 3a2d2dba authored by liujiaxin's avatar liujiaxin

添加iframe和白板切换

parent 4e8f74c3
...@@ -25,7 +25,7 @@ const useStyles = makeStyles({ ...@@ -25,7 +25,7 @@ const useStyles = makeStyles({
flex: 1 flex: 1
}, },
style4: { style4: {
height: 30, height: 36,
width: 100, width: 100,
flex: 0 flex: 0
}, },
...@@ -39,7 +39,6 @@ const CourseWareFrame: React.FC = () => { ...@@ -39,7 +39,6 @@ const CourseWareFrame: React.FC = () => {
const ref = useRef<any>(''); const ref = useRef<any>('');
const [src, setSrc] = useState('') const [src, setSrc] = useState('')
const changSrc = (evt: any) => { const changSrc = (evt: any) => {
debugger
setSrc(ref.current.value); setSrc(ref.current.value);
} }
......
...@@ -23,6 +23,7 @@ import AgoraWebClient, { SHARE_ID } from '../utils/agora-rtc-client'; ...@@ -23,6 +23,7 @@ import AgoraWebClient, { SHARE_ID } from '../utils/agora-rtc-client';
import "white-web-sdk/style/index.css"; import "white-web-sdk/style/index.css";
import { ViewMode } from 'white-web-sdk'; import { ViewMode } from 'white-web-sdk';
const pathName = (path: string): string => { const pathName = (path: string): string => {
const reg = /\/([^/]*)\//g; const reg = /\/([^/]*)\//g;
reg.exec(path); reg.exec(path);
...@@ -560,7 +561,7 @@ const items = [ ...@@ -560,7 +561,7 @@ const items = [
<UploadPanel /> <UploadPanel />
{children ? children : null} {children ? children : null}
</div> </div>
{me.role === 'teacher' && room ? {/*me.role === 'teacher' && room ?
<ScaleController <ScaleController
zoomScale={scale} zoomScale={scale}
onClick={() => { onClick={() => {
...@@ -577,8 +578,7 @@ const items = [ ...@@ -577,8 +578,7 @@ const items = [
}} }}
/> />
: :
null null*/}
}
{ showControl ? { showControl ?
<Control <Control
notice={globalState.notice} notice={globalState.notice}
......
...@@ -234,7 +234,7 @@ const MemberHolder: React.FC<MemberHolderProps> = ({ ...@@ -234,7 +234,7 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
{me.uid === id || me.role === 'teacher' ? {me.uid === id || me.role === 'teacher' ?
<span className="media-btn"> <span className="media-btn">
<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link> <Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>
<Link component="button" onClick={onStageUp}>上台</Link> {me.role === 'teacher' ? <Link component="button" onClick={onStageUp}>上台</Link> : 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> : null}
......
...@@ -9,7 +9,7 @@ export default function Roomboard (props: any) { ...@@ -9,7 +9,7 @@ export default function Roomboard (props: any) {
messages, sendMessage, handleChange messages, sendMessage, handleChange
} = useChatText(); } = useChatText();
const [active, setActive] = useState('chatroom'); const [active, setActive] = useState('studentList');
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
const toggleCollapse = (evt: any) => { const toggleCollapse = (evt: any) => {
...@@ -22,7 +22,7 @@ export default function Roomboard (props: any) { ...@@ -22,7 +22,7 @@ export default function Roomboard (props: any) {
{visible ? {visible ?
<div className={`small-class chat-board`}> <div className={`small-class chat-board`}>
<div className="menu"> <div className="menu">
<div onClick={() => { setActive('chatroom') }} className={`item ${active === 'chatroom' ? 'active' : ''}`}>Chatroom</div> {/*<div onClick={() => { setActive('chatroom') }} className={`item ${active === 'chatroom' ? 'active' : ''}`}>Chatroom</div>*/}
<div onClick={() => { setActive('studentList') }} className={`item ${active === 'studentList' ? 'active' : ''}`}>Student List</div> <div onClick={() => { setActive('studentList') }} className={`item ${active === 'studentList' ? 'active' : ''}`}>Student List</div>
</div> </div>
{ {
......
...@@ -22,13 +22,14 @@ ...@@ -22,13 +22,14 @@
font-weight:400; font-weight:400;
color:rgba(3,3,3,1); color:rgba(3,3,3,1);
line-height:17px; line-height:17px;
max-width: 113px; //max-width: 113px;
min-width: 113px; //min-width: 113px;
flex: 1;
} }
.attrs-group { .attrs-group {
display: flex; display: flex;
min-width: 148px; //min-width: 148px;
max-width: 148px; //max-width: 148px;
justify-content: space-evenly; justify-content: space-evenly;
.items { .items {
margin: 4px; margin: 4px;
......
...@@ -89,8 +89,8 @@ export default function StudentList ({ ...@@ -89,8 +89,8 @@ export default function StudentList ({
<div key={key} className="item"> <div key={key} className="item">
<div className="nickname">{item.account}</div> <div className="nickname">{item.account}</div>
<div className="attrs-group"> <div className="attrs-group">
<CustomIcon type="grantBoard" id={item.uid} value={Boolean(item.grantBoard)} icon="connect" onClick={handleClick} /> {/*<CustomIcon type="grantBoard" id={item.uid} value={Boolean(item.grantBoard)} icon="connect" onClick={handleClick} />*/}
<CustomIcon type="chat" id={item.uid} value={Boolean(item.chat)} icon="chat" onClick={handleClick} /> {/*<CustomIcon type="chat" id={item.uid} value={Boolean(item.chat)} icon="chat" onClick={handleClick} />*/}
<CustomIcon type="audio" id={item.uid} value={Boolean(item.audio)} icon="audio" onClick={handleClick} /> <CustomIcon type="audio" id={item.uid} value={Boolean(item.audio)} icon="audio" onClick={handleClick} />
<CustomIcon type="video" id={item.uid} value={Boolean(item.video)} icon="video" onClick={handleClick} /> <CustomIcon type="video" id={item.uid} value={Boolean(item.video)} icon="video" onClick={handleClick} />
</div> </div>
......
import React from 'react';
import BuildIcon from '@material-ui/icons/Build';
import {makeStyles} from "@material-ui/core/styles";
import {Link} from "react-router-dom";
export type ToolsSwitcherControllerProps = {
// zoomScale: number
// zoomChange: (scale: number) => void
onClick: () => void
// onClickBoardLock: () => void
};
const toolsStyle = makeStyles({
button: {
width: '42px!important',
lineHeight: 42,
cursor: 'pointer',
userSelect: 'none',
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
position: 'absolute',
left: 10,
bottom: 10,
height: 42,
background: '#fff',
boxShadow: '0 2px 4px 0 rgba(0,0,0,.1)',
borderRadius: 6,
border: '1px solid #dbe2e5',
zIndex:9,
},
icon: {
margin: '0 auto'
}
});
export const ToolsSwitcherController: React.FC<ToolsSwitcherControllerProps> = ({onClick}) => {
const classes = toolsStyle();
return (
<div className={`tool-switcher-controls ${classes.button}`} onClick={() => onClick()}>
<BuildIcon className={classes.icon}></BuildIcon>
{/*<div className="zoom-icon" onClick={() => this.props.onClick()}>*/}
{/*</div>*/}
{/*<div className="zoom-hold"></div>*/}
{/*<div className="zoom-size">{Math.ceil(this.props.zoomScale * 100)} %</div>*/}
{/*<div className="zoom-items">*/}
{/* <div className="item zoom-in" onClick={() => this.moveRuleIndex(-1)}>-</div>*/}
{/* <div className="item zoom-out" onClick={() => this.moveRuleIndex(+1)}>+</div>*/}
{/*</div>*/}
{/*<div className="lock-board" onClick={() => this.props.onClickBoardLock() }></div>*/}
</div>
);
}
...@@ -11,8 +11,8 @@ import MemberHolder from "./member-holder"; ...@@ -11,8 +11,8 @@ import MemberHolder from "./member-holder";
function VideoShowList() { function VideoShowList() {
const {teacher, stageStudents, onPlayerClick} = useStream();
const {teacher, students, onPlayerClick} = useStream();
...@@ -65,7 +65,7 @@ function VideoShowList() { ...@@ -65,7 +65,7 @@ function VideoShowList() {
// return <div className="camera"> // return <div className="camera">
// <div key={`stage${i}`} className="agora-video-view camera-holder">{i}</div> // <div key={`stage${i}`} className="agora-video-view camera-holder">{i}</div>
// </div> ; // </div> ;
const student = stageStudents.stage && stageStudents.stage[i]; const student = students && students.slice(0,STAGE_NUM)[i];
return <div className="camera" key={`stage_video${i}`}> return <div className="camera" key={`stage_video${i}`}>
{student ? <VideoPlayer {student ? <VideoPlayer
...@@ -122,7 +122,7 @@ function VideoShowList() { ...@@ -122,7 +122,7 @@ function VideoShowList() {
)*/} )*/}
{ stageStudents.wait ? stageStudents.wait.map((student: AgoraMediaStream, key: number) => ( { students ? students.slice(STAGE_NUM).map((student: AgoraMediaStream, key: number) => (
// <VideoPlayer // <VideoPlayer
// role="student" // role="student"
// domId={`dom-${student.streamID}`} // domId={`dom-${student.streamID}`}
......
...@@ -135,7 +135,7 @@ export default function Control({ ...@@ -135,7 +135,7 @@ export default function Control({
: null} : null}
</div> </div>
<div className="controls"> <div className="controls">
{!sharing && role === 'teacher' ? {/*!sharing && role === 'teacher' ?
<> <>
<ControlItem name={`first_page`} <ControlItem name={`first_page`}
active={'first_page' === current} active={'first_page' === current}
...@@ -154,14 +154,14 @@ export default function Control({ ...@@ -154,14 +154,14 @@ export default function Control({
onClick={onClick} /> onClick={onClick} />
<div className="menu-split" style={{ marginLeft: '7px', marginRight: '7px' }}></div> <div className="menu-split" style={{ marginLeft: '7px', marginRight: '7px' }}></div>
</> : null </> : null
} */}
{role === 'teacher' ? {role === 'teacher' ?
<> <>
<ControlItem {/*<ControlItem*/}
name={whiteboard.state.recording ? 'stop_recording' : 'recording'} {/*name={whiteboard.state.recording ? 'stop_recording' : 'recording'}*/}
onClick={onRecordButtonClick} {/*onClick={onRecordButtonClick}*/}
active={false} {/*active={false}*/}
/> {/*/>*/}
<ControlItem <ControlItem
name={sharing ? 'quit_screen_sharing' : 'screen_sharing'} name={sharing ? 'quit_screen_sharing' : 'screen_sharing'}
onClick={onClick} onClick={onClick}
......
...@@ -7,8 +7,7 @@ import {STAGE_NUM} from "../utils/consts"; ...@@ -7,8 +7,7 @@ import {STAGE_NUM} from "../utils/consts";
type StreamValue ={ type StreamValue ={
teacher: any teacher: any
students?: any[] students: any[]
stageStudents: {stage:any[], wait:any[]}
sharedStream: any sharedStream: any
currentHost: any currentHost: any
onPlayerClick: (type: string, streamID: number, uid: string) => Promise<any> onPlayerClick: (type: string, streamID: number, uid: string) => Promise<any>
...@@ -61,7 +60,7 @@ export default function useStream () { ...@@ -61,7 +60,7 @@ export default function useStream () {
roomState.rtc.remoteStreams, roomState.rtc.remoteStreams,
roomState.rtc.localStream roomState.rtc.localStream
]); ]);
/*
const students__ = useMemo(() => { const students__ = useMemo(() => {
const userAttrs = roomStore.state.users; const userAttrs = roomStore.state.users;
if (!me.uid || userAttrs.count() === 0) return []; if (!me.uid || userAttrs.count() === 0) return [];
...@@ -125,19 +124,32 @@ export default function useStream () { ...@@ -125,19 +124,32 @@ export default function useStream () {
roomState.rtc.remoteStreams, roomState.rtc.remoteStreams,
roomState.rtc.localStream roomState.rtc.localStream
]); ]);
const students_old = useMemo(() => { */
const students = useMemo(() => {
const userAttrs = roomStore.state.users; const userAttrs = roomStore.state.users;
if (!me.uid || userAttrs.count() === 0) return []; if (!me.uid || userAttrs.count() === 0) return [];
const teacherUid = course.teacherId; const teacherUid = course.teacherId;
const peerUsers = roomState.rtc.users; const peerUsers = roomState.rtc.users;
// exclude teacher and me // exclude teacher and me
let studentIds = peerUsers.filter((it: number) => it !== +teacherUid && it !== +me.uid && it !== SHARE_ID); let studentIds = peerUsers.filter((it: number) => it !== +teacherUid && it !== +me.uid && it !== SHARE_ID);
studentIds = studentIds.add(+me.uid);
const studentStreams: any[] = []; const studentStreams: any[] = [];
const myAttr = userAttrs.get(me.uid); const myAttr = userAttrs.get(me.uid);
const studentsOrder = roomStore.state.studentsOrder || [];
console.log(100000, studentsOrder);
console.log(11111111, studentIds.toArray());
studentIds = studentIds.sort(function(a, b){
return studentsOrder.indexOf(+a) - studentsOrder.indexOf(+b);
});
console.log(222222, studentIds.toArray());
// when i m student // when i m student
if (me.role === 'student') {
// capture all remote streams
for (let studentId of studentIds) {
if (me.role === 'student' && +me.uid == studentId) {
if (myAttr && roomState.rtc.localStream) { if (myAttr && roomState.rtc.localStream) {
const _tmpStream = { const _tmpStream = {
...roomState.rtc.localStream, ...roomState.rtc.localStream,
...@@ -147,11 +159,9 @@ export default function useStream () { ...@@ -147,11 +159,9 @@ export default function useStream () {
local: true, local: true,
} }
studentStreams.push(_tmpStream); studentStreams.push(_tmpStream);
continue
} }
} }
// capture all remote streams
for (let studentId of studentIds) {
const studentAttr = userAttrs.get(''+studentId); const studentAttr = userAttrs.get(''+studentId);
const stream = roomState.rtc.remoteStreams.get(+studentId); const stream = roomState.rtc.remoteStreams.get(+studentId);
if (studentAttr) { if (studentAttr) {
...@@ -173,6 +183,7 @@ export default function useStream () { ...@@ -173,6 +183,7 @@ export default function useStream () {
studentStreams.push(_tmpStream); studentStreams.push(_tmpStream);
} }
} }
console.log('studentStreams', studentStreams);
return studentStreams; return studentStreams;
}, [ }, [
course, course,
...@@ -182,6 +193,7 @@ export default function useStream () { ...@@ -182,6 +193,7 @@ export default function useStream () {
roomState.rtc.localStream roomState.rtc.localStream
]); ]);
/*
const stageStudents: { wait: any[]; stage: any[] } = useMemo(() => { const stageStudents: { wait: any[]; stage: any[] } = useMemo(() => {
const userAttrs = roomStore.state.users; const userAttrs = roomStore.state.users;
if (!me.uid || userAttrs.count() === 0) return { wait: [], stage:[] }; if (!me.uid || userAttrs.count() === 0) return { wait: [], stage:[] };
...@@ -191,7 +203,8 @@ export default function useStream () { ...@@ -191,7 +203,8 @@ export default function useStream () {
let studentIds = peerUsers.filter((it: number) => it !== +teacherUid && it !== +me.uid && it !== SHARE_ID); let studentIds = peerUsers.filter((it: number) => it !== +teacherUid && it !== +me.uid && it !== SHARE_ID);
const studentStreams: any[] = []; const studentStreams: any[] = [];
userAttrs.forEach(u => { userAttrs.forEach(u => {
if (me.role === 'student' && `${u.uid}` === `${me.uid}`) { const uid = u.uid;
if (me.role === 'student' && `${uid}` === `${me.uid}`) {
if (roomState.rtc.localStream) { if (roomState.rtc.localStream) {
const _tmpStream = { const _tmpStream = {
...roomState.rtc.localStream, ...roomState.rtc.localStream,
...@@ -203,11 +216,11 @@ export default function useStream () { ...@@ -203,11 +216,11 @@ export default function useStream () {
studentStreams.push(_tmpStream); studentStreams.push(_tmpStream);
} }
} else { } else {
const studentAttr = userAttrs.get(`${u.uid}`); const studentAttr = userAttrs.get(`${uid}`);
const stream = roomState.rtc.remoteStreams.get(+u.uid); const stream = roomState.rtc.remoteStreams.get(+uid);
if (studentAttr) { if (studentAttr) {
let _tmpStream = { let _tmpStream = {
streamID: u.uid, streamID: uid,
account: studentAttr.account, account: studentAttr.account,
video: studentAttr.video, video: studentAttr.video,
audio: studentAttr.audio, audio: studentAttr.audio,
...@@ -215,7 +228,7 @@ export default function useStream () { ...@@ -215,7 +228,7 @@ export default function useStream () {
if (stream) { if (stream) {
_tmpStream = { _tmpStream = {
...stream, ...stream,
streamID: u.uid, streamID: uid,
account: studentAttr.account, account: studentAttr.account,
video: studentAttr.video, video: studentAttr.video,
audio: studentAttr.audio, audio: studentAttr.audio,
...@@ -225,55 +238,6 @@ export default function useStream () { ...@@ -225,55 +238,6 @@ export default function useStream () {
} }
} }
}) })
/*
const myAttr = userAttrs.get(me.uid);
const ss = [];
// when i m student
if (me.role === 'student') {
if (myAttr && roomState.rtc.localStream) {
const _tmpStream = {
...roomState.rtc.localStream,
account: myAttr.account,
video: myAttr.video,
audio: myAttr.audio,
local: true,
}
studentStreams.push(_tmpStream);
ss.push(me.uid)
}
}
for (let studentId of studentIds) {
ss.push(studentId)
}
console.log('studentIds', ss.join(', '))
// capture all remote streams
for (let studentId of studentIds) {
const studentAttr = userAttrs.get(''+studentId);
const stream = roomState.rtc.remoteStreams.get(+studentId);
if (studentAttr) {
let _tmpStream = {
streamID: studentId,
account: studentAttr.account,
video: studentAttr.video,
audio: studentAttr.audio,
}
if (stream) {
_tmpStream = {
...stream,
streamID: studentId,
account: studentAttr.account,
video: studentAttr.video,
audio: studentAttr.audio,
}
}
studentStreams.push(_tmpStream);
}
}*/
console.log('studentStreams', studentStreams) console.log('studentStreams', studentStreams)
return { return {
stage: [...studentStreams.slice(0,STAGE_NUM)], stage: [...studentStreams.slice(0,STAGE_NUM)],
...@@ -286,6 +250,8 @@ export default function useStream () { ...@@ -286,6 +250,8 @@ export default function useStream () {
roomState.rtc.remoteStreams, roomState.rtc.remoteStreams,
roomState.rtc.localStream roomState.rtc.localStream
]); ]);
*/
const sharedStream = useMemo(() => { const sharedStream = useMemo(() => {
const sharedUid = SHARE_ID; const sharedUid = SHARE_ID;
...@@ -358,8 +324,8 @@ export default function useStream () { ...@@ -358,8 +324,8 @@ export default function useStream () {
const value: StreamValue = { const value: StreamValue = {
teacher: teacher, teacher: teacher,
// students: students, students: students,
stageStudents, // stageStudents,
sharedStream: sharedStream, sharedStream: sharedStream,
currentHost: currentHost, currentHost: currentHost,
onPlayerClick: async (type: string, streamID: number, uid: string) => { onPlayerClick: async (type: string, streamID: number, uid: string) => {
......
...@@ -141,6 +141,7 @@ export function RoomPage({ children }: any) { ...@@ -141,6 +141,7 @@ export function RoomPage({ children }: any) {
if (platform === 'web') { if (platform === 'web') {
const webClient = rtcClient as AgoraWebClient; const webClient = rtcClient as AgoraWebClient;
if (!webClient.published) return; if (!webClient.published) return;
console.log('unpublish' ,2);
webClient webClient
.unpublishLocalStream() .unpublishLocalStream()
.then(() => { .then(() => {
...@@ -181,7 +182,7 @@ export function RoomPage({ children }: any) { ...@@ -181,7 +182,7 @@ export function RoomPage({ children }: any) {
webClient webClient
.publishLocalStream(streamSpec) .publishLocalStream(streamSpec)
.then(() => { .then(() => {
console.log("[agora-web] publish local stream"); console.log("[agora-web] publish local stream", roomStore.state.me.uid);
}).catch(console.warn) }).catch(console.warn)
.finally(() => { .finally(() => {
publishLock.current = false; publishLock.current = false;
...@@ -234,6 +235,7 @@ export function RoomPage({ children }: any) { ...@@ -234,6 +235,7 @@ export function RoomPage({ children }: any) {
roomStore.addLocalStream(_stream); roomStore.addLocalStream(_stream);
}); });
webClient.rtc.on('stream-subscribed', ({ stream }: any) => { webClient.rtc.on('stream-subscribed', ({ stream }: any) => {
console.log('stream', 2, 'stream-subscribed')
const streamID = stream.getId(); const streamID = stream.getId();
// when streamID is not share_id use switch high or low stream in dual stream mode // when streamID is not share_id use switch high or low stream in dual stream mode
if (location.pathname.match(/small-class/) && streamID !== SHARE_ID) { if (location.pathname.match(/small-class/) && streamID !== SHARE_ID) {
...@@ -247,11 +249,13 @@ export function RoomPage({ children }: any) { ...@@ -247,11 +249,13 @@ export function RoomPage({ children }: any) {
console.log("[agora-web] dual stream set low for student"); console.log("[agora-web] dual stream set low for student");
} }
} }
console.log('stream', 3, 'addRemoteStream to play')
const _stream = new AgoraStream(stream, stream.getId(), false); const _stream = new AgoraStream(stream, stream.getId(), false);
console.log("[agora-web] subscribe remote stream, id: ", stream.getId()); console.log("[agora-web] subscribe remote stream, id: ", stream.getId());
roomStore.addRemoteStream(_stream); roomStore.addRemoteStream(_stream);
}); });
webClient.rtc.on('stream-added', ({ stream }: any) => { webClient.rtc.on('stream-added', ({ stream }: any) => {
console.log('stream', 1, 'stream-added')
console.log("[agora-web] added remote stream, id: ", stream.getId()); console.log("[agora-web] added remote stream, id: ", stream.getId());
webClient.subscribe(stream); webClient.subscribe(stream);
}); });
...@@ -316,6 +320,8 @@ export function RoomPage({ children }: any) { ...@@ -316,6 +320,8 @@ export function RoomPage({ children }: any) {
for (let eventName of events) { for (let eventName of events) {
webClient.rtc.off(eventName, () => {}); webClient.rtc.off(eventName, () => {});
} }
console.log("[agora-web] rtmClient logout");
roomStore.rtmClient.logout();
console.log("[agora-web] remove event listener"); console.log("[agora-web] remove event listener");
!rtc.current && webClient.exit().then(() => { !rtc.current && webClient.exit().then(() => {
console.log("[agora-web] do remove event listener"); console.log("[agora-web] do remove event listener");
......
import React, {useLayoutEffect, useRef} from 'react'; import React, {useLayoutEffect, useMemo, useRef, useState} from 'react';
// import VideoMarquee from '../../components/video-marquee'; // import VideoMarquee from '../../components/video-marquee';
// import MediaBoard from '../../components/mediaboard'; import MediaBoard from '../../components/mediaboard';
import Roomboard from '../../components/roomboard'; import Roomboard from '../../components/roomboard';
import './small-class.scss'; import './small-class.scss';
import CourseWareFrame from "../../components/courseware-frame"; import CourseWareFrame from "../../components/courseware-frame";
import VideoShowList from "../../components/video-stage-list"; import VideoShowList from "../../components/video-stage-list";
import {ToolsSwitcherController} from "../../components/tools-switcher-controller";
export default function SmallClass() { export default function SmallClass() {
// let search = window.location.search; const [tool, setTool] = useState(true);
// let params = new URLSearchParams(search);
// let src = params.get('src');
// console.log(9999, src)
// useLayoutEffect(() => {
// }, [src]);
return ( return (
<div className="room-container"> <div className="room-container">
{/*<VideoMarquee />*/} {/*<VideoMarquee />*/}
<VideoShowList/> <VideoShowList/>
<div className="container"> <div className="container">
{/*<MediaBoard />*/} <ToolsSwitcherController onClick={() => {
<CourseWareFrame></CourseWareFrame> setTool(!tool);
}}/>
{tool ? <MediaBoard /> : <CourseWareFrame></CourseWareFrame>}
<Roomboard currentActive={'media'} /> <Roomboard currentActive={'media'} />
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ import { platform } from './../utils/platform'; ...@@ -2,7 +2,7 @@ import { platform } from './../utils/platform';
import { AgoraElectronClient } from './../utils/agora-electron-client'; import { AgoraElectronClient } from './../utils/agora-electron-client';
import { ChatMessage, AgoraStream } from '../utils/types'; import { ChatMessage, AgoraStream } from '../utils/types';
import {Subject} from 'rxjs'; import {Subject} from 'rxjs';
import {OrderedMap, Set, List, OrderedSet} from 'immutable'; import {OrderedMap, List, OrderedSet} from 'immutable';
import AgoraRTMClient, { RoomMessage } from '../utils/agora-rtm-client'; import AgoraRTMClient, { RoomMessage } from '../utils/agora-rtm-client';
import {globalStore} from './global'; import {globalStore} from './global';
import AgoraWebClient from '../utils/agora-rtc-client'; import AgoraWebClient from '../utils/agora-rtc-client';
...@@ -13,7 +13,7 @@ import { whiteboard } from './whiteboard'; ...@@ -13,7 +13,7 @@ import { whiteboard } from './whiteboard';
import {STAGE_NUM} from "../utils/consts"; import {STAGE_NUM} from "../utils/consts";
import {jsonParse} from "../utils/helper"; import {jsonParse} from "../utils/helper";
function canJoin({onlineStatus, roomType, channelCount, role}: {onlineStatus: any, role: string, channelCount: number, roomType: number}) { function canJoin({uid, onlineStatus, roomType, channelCount, role}: { uid: any, onlineStatus: any, role: string, channelCount: number, roomType: number}) {
const result = { const result = {
permitted: true, permitted: true,
reason: '' reason: ''
...@@ -31,7 +31,7 @@ function canJoin({onlineStatus, roomType, channelCount, role}: {onlineStatus: an ...@@ -31,7 +31,7 @@ function canJoin({onlineStatus, roomType, channelCount, role}: {onlineStatus: an
const totalCount: number = get(onlineStatus, 'totalCount', 0); const totalCount: number = get(onlineStatus, 'totalCount', 0);
if (role === 'teacher') { if (role === 'teacher') {
const isOnline = teacher; const isOnline = teacher && `${uid}` !== `${onlineStatus.teacherId}`;
if (isOnline) { if (isOnline) {
result.permitted = false; result.permitted = false;
result.reason = 'Teacher already existed'; result.reason = 'Teacher already existed';
...@@ -192,6 +192,7 @@ export class RoomStore { ...@@ -192,6 +192,7 @@ export class RoomStore {
microphone: 0 microphone: 0
}, },
messages: List<ChatMessage>(), messages: List<ChatMessage>(),
studentsOrder: [],
...GlobalStorage.read('agora_room') ...GlobalStorage.read('agora_room')
}); });
...@@ -209,7 +210,6 @@ export class RoomStore { ...@@ -209,7 +210,6 @@ export class RoomStore {
} }
async stageUpRtc(uid: string) { async stageUpRtc(uid: string) {
debugger
let store = this._state.rtc.users; let store = this._state.rtc.users;
let itemsList = store.toList(); let itemsList = store.toList();
const idx = itemsList.indexOf(+uid); const idx = itemsList.indexOf(+uid);
...@@ -234,7 +234,6 @@ export class RoomStore { ...@@ -234,7 +234,6 @@ export class RoomStore {
this.commit(this.state); this.commit(this.state);
} }
async stageDownRtc(uid: string) { async stageDownRtc(uid: string) {
debugger
let store = this._state.rtc.users; let store = this._state.rtc.users;
console.log(store); console.log(store);
// let uid = 2; // let uid = 2;
...@@ -261,8 +260,7 @@ export class RoomStore { ...@@ -261,8 +260,7 @@ export class RoomStore {
} }
this.commit(this.state); this.commit(this.state);
} }
async stageUp(uid: string) { async stageUp1(uid: string) {
debugger
const attrs = await this.rtmClient.getChannelAttrs(); const attrs = await this.rtmClient.getChannelAttrs();
let studentsOrder: any[] = []; let studentsOrder: any[] = [];
// if ((attrs as any).studentsOrder && (attrs as any).studentsOrder.value) { // if ((attrs as any).studentsOrder && (attrs as any).studentsOrder.value) {
...@@ -272,12 +270,11 @@ export class RoomStore { ...@@ -272,12 +270,11 @@ export class RoomStore {
const onlineStatus = JSON.parse(attrs) const onlineStatus = JSON.parse(attrs)
const target = jsonParse(get(onlineStatus[uid], 'value')); const target = jsonParse(get(onlineStatus[uid], 'value'));
// 上台需要开启视频 // 上台需要开启视频
if (!+target.video) { // if (!+target.video) {
target.video = 1 target.video = 1;
data[uid] = JSON.stringify(target) data[uid] = JSON.stringify(target)
} // }
debugger
const tmp: [string, AgoraUser][] =[]; const tmp: [string, AgoraUser][] =[];
this._state.users.forEach((v, k)=>{ this._state.users.forEach((v, k)=>{
if (/^[0-9]+$/.test(k)) { if (/^[0-9]+$/.test(k)) {
...@@ -294,12 +291,12 @@ export class RoomStore { ...@@ -294,12 +291,12 @@ export class RoomStore {
tmp.unshift(uidObj); tmp.unshift(uidObj);
tmp.push(stageEndObj) tmp.push(stageEndObj)
// 下台关闭音视频 // 下台关闭音视频
stageEndObj[1].audio = 0; // stageEndObj[1].audio = 0;
stageEndObj[1].video = 0; // stageEndObj[1].video = 0;
data[stageEndObj[1].uid] = JSON.stringify(stageEndObj[1]) data[stageEndObj[1].uid] = JSON.stringify(stageEndObj[1])
tmp.forEach(o => { tmp.forEach(o => {
studentsOrder.push(o[0]); studentsOrder.push(+o[0]);
}); });
// const queue = {'studentsOrder': JSON.stringify(studentsOrder)}; // const queue = {'studentsOrder': JSON.stringify(studentsOrder)};
data['studentsOrder'] = JSON.stringify(studentsOrder) data['studentsOrder'] = JSON.stringify(studentsOrder)
...@@ -308,16 +305,15 @@ export class RoomStore { ...@@ -308,16 +305,15 @@ export class RoomStore {
const users = OrderedMap(tmp); const users = OrderedMap(tmp);
this.state = { // this.state = {
...this.state, // ...this.state,
users // users
} // }
// this.commit(this.state); // this.commit(this.state);
} }
async stageDown(uid: string) { async stageDown(uid: string) {
debugger
const tmp: [string, AgoraUser][] =[]; const tmp: [string, AgoraUser][] =[];
this._state.users.forEach((v, k)=>{ this._state.users.forEach((v, k)=>{
tmp.push([k, v]) tmp.push([k, v])
...@@ -339,8 +335,61 @@ export class RoomStore { ...@@ -339,8 +335,61 @@ export class RoomStore {
} }
this.commit(this.state); this.commit(this.state);
} }
async stageUp(uid: string) {
debugger
const attrs = await this.rtmClient.getChannelAttrs();
let studentsOrder: any[] = [];
// if ((attrs as any).studentsOrder && (attrs as any).studentsOrder.value) {
// studentsOrder = JSON.parse((attrs as any).studentsOrder.value) || [];
// }
const data: any = {};
const onlineStatus = JSON.parse(attrs)
const target = jsonParse(get(onlineStatus[uid], 'value'));
// 上台需要开启视频
// if (!+target.video) {
target.video = 1;
data[uid] = JSON.stringify(target)
// }
const tmp: [string, AgoraUser][] =[];
this._state.users.forEach((v, k)=>{
if (/^[0-9]+$/.test(k)) {
tmp.push([k, v])
}
})
const uidIdx = tmp.findIndex((o) => {
return `${o[0]}` == `${uid}`
})
const uidObj = tmp[uidIdx]
tmp.splice(uidIdx, 1)
const stageEndObj = tmp[STAGE_NUM - 1]
tmp.splice(STAGE_NUM - 1, 1)
tmp.unshift(uidObj);
tmp.push(stageEndObj)
// 下台关闭音视频
// stageEndObj[1].audio = 0;
// stageEndObj[1].video = 0;
data[stageEndObj[1].uid] = JSON.stringify(stageEndObj[1])
tmp.forEach(o => {
studentsOrder.push(+o[0]);
});
// const queue = {'studentsOrder': JSON.stringify(studentsOrder)};
data['studentsOrder'] = JSON.stringify(studentsOrder)
const aa = await this.rtmClient.addOrUpdateChannelAttributes(data);
console.log(aa)
const users = OrderedMap(tmp);
// this.state = {
// ...this.state,
// users
// }
// this.commit(this.state);
}
initialize() { initialize() {
...@@ -712,23 +761,89 @@ export class RoomStore { ...@@ -712,23 +761,89 @@ export class RoomStore {
} }
async loginAndJoin(payload: any, pass: boolean = false) { async loginAndJoin(payload: any, pass: boolean = false) {
debugger
const {roomType, role, uid, rid, token} = payload; const {roomType, role, uid, rid, token} = payload;
await this.rtmClient.login(uid, token); await this.rtmClient.login(uid, token);
const channelMemberCount = await this.rtmClient.getChannelMemberCount([rid]); const channelMemberCount = await this.rtmClient.getChannelMemberCount([rid]);
const channelCount = channelMemberCount[rid]; const channelCount = channelMemberCount[rid];
let accounts = await this.rtmClient.getChannelAttributeBy(rid); let accounts = await this.rtmClient.getChannelAttributeBy(rid);
const onlineStatus = await this.rtmClient.queryOnlineStatusBy(accounts); const onlineStatus = await this.rtmClient.queryOnlineStatusBy(accounts);
// debugger
/*
const me = accounts.find((o)=>{return `${payload.uid}` === `${o.uid}`});
if (onlineStatus[payload.uid]) {
payload.audio = me.audio;
payload.video = me.video;
} else {
if (accounts.length >= STAGE_NUM) {
payload.audio = 0;
payload.video = 0;
// payload.stage = 0;
} else {
// payload.stage = 1;
payload.audio = 0;
payload.video = 1;
}
}*/
if (role === 'teacher') {
payload.audio = 1;
payload.video = 1;
}
// for test
payload.audio = 0;
payload.video = 0;
const argsJoin = { const argsJoin = {
uid,
channelCount, channelCount,
onlineStatus, onlineStatus,
role, role,
accounts, accounts,
roomType roomType
}; };
const result = pass === false ? canJoin(argsJoin) : {permitted: true, reason: ''}; let result = pass === false ? canJoin(argsJoin) : {permitted: true, reason: ''};
// if (uid == this._state.course.teacherId) {
// result = {permitted: false, reason: 'same with teacher id'}
// }
let studentsOrder: number[] = [];
if (result.permitted) { if (result.permitted) {
studentsOrder = this.state.studentsOrder;
if (!studentsOrder.length) {
accounts.forEach(a => {
if (!studentsOrder.includes(+a.uid)) {
studentsOrder.push(+a.uid);
}
})
} else {
debugger
const accIds = accounts.map(a=> +a.uid);
// if (accIds.length >= studentsOrder.length) {
let a = new Set(accIds);
let b = new Set(studentsOrder);
let diff = new Set([...a].filter(x => !b.has(x)));
diff.forEach(d => {
if (!studentsOrder.includes(+d)) {
studentsOrder.push(+d);
}
})
debugger
// }
}
if (!studentsOrder.includes(+uid)) {
studentsOrder.push(+uid);
} else {
if (!pass) {
const i = studentsOrder.indexOf(+uid)
studentsOrder.splice(i,1)
studentsOrder.push(+uid)
}
}
let res = await this.rtmClient.join(rid); let res = await this.rtmClient.join(rid);
this.state = { this.state = {
...this.state, ...this.state,
...@@ -739,7 +854,7 @@ export class RoomStore { ...@@ -739,7 +854,7 @@ export class RoomStore {
} }
const grantBoard = role === 'teacher' ? 1 : 0; const grantBoard = role === 'teacher' ? 1 : 0;
console.log(">>>>>>>>>>#room: ", grantBoard); console.log(">>>>>>>>>>#room: ", grantBoard);
await this.updateMe({...payload, grantBoard}); await this.updateMe({...payload, grantBoard}, studentsOrder);
this.commit(this.state); this.commit(this.state);
return; return;
} }
...@@ -828,7 +943,7 @@ export class RoomStore { ...@@ -828,7 +943,7 @@ export class RoomStore {
// return res; // return res;
} }
async updateMe(user: any) { async updateMe(user: any, studentsOrder: number[] = []) {
const {role, uid, account, rid, video, audio, chat, boardId, linkId, sharedId, muteChat, grantBoard} = user; const {role, uid, account, rid, video, audio, chat, boardId, linkId, sharedId, muteChat, grantBoard} = user;
const key = role === 'teacher' ? 'teacher' : uid; const key = role === 'teacher' ? 'teacher' : uid;
const me = this.state.me; const me = this.state.me;
...@@ -876,14 +991,19 @@ export class RoomStore { ...@@ -876,14 +991,19 @@ export class RoomStore {
} }
const data: any = {}; const data: any = {};
data[key] = attrs; data[key] = attrs;
if (studentsOrder && studentsOrder.length) {
data['studentsOrder'] = studentsOrder;
}
await this.rtmClient.updateChannelAttrsByKey(data); await this.rtmClient.updateChannelAttrsByKey(data);
// let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs); // let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs);
// return res; // return res;
} }
updateRoomAttrs ({teacher, accounts, room}: any) { updateRoomAttrs ({teacher, accounts, room, studentsOrder}: any) {
console.log("[agora-board], room: ", room, " teacher: ", teacher, "accounts ", accounts); console.log("[agora-board], room: ", room, " teacher: ", teacher, "accounts ", accounts);
const users = accounts.reduce((acc: Map<string, AgoraUser>, it: any) => {
const users = accounts.reduce((acc: OrderedMap<string, AgoraUser>, it: any) => {
return acc.set(it.uid, { return acc.set(it.uid, {
role: it.role, role: it.role,
account: it.account, account: it.account,
...@@ -899,6 +1019,25 @@ export class RoomStore { ...@@ -899,6 +1019,25 @@ export class RoomStore {
}); });
}, OrderedMap<string, AgoraUser>()); }, OrderedMap<string, AgoraUser>());
/*
let users = OrderedMap<string, AgoraUser>();
for (const it of accounts) {
users = users.set(it.uid, {
role: it.role,
account: it.account,
uid: it.uid,
video: it.video,
audio: it.audio,
chat: it.chat,
boardId: it.whiteboard_uid,
sharedId: it.shared_uid,
linkId: it.link_uid,
lockBoard: it.lock_board,
grantBoard: it.grant_board,
})
}
*/
console.log('users 4', users.toArray());
const me = this.state.me; const me = this.state.me;
if (users.get(me.uid)) { if (users.get(me.uid)) {
...@@ -911,6 +1050,8 @@ export class RoomStore { ...@@ -911,6 +1050,8 @@ export class RoomStore {
boardId: room.whiteboard_uid, boardId: room.whiteboard_uid,
lockBoard: room.lock_board, lockBoard: room.lock_board,
}) })
//教师维护学生顺序,并更新到频道属性
} }
const newClassState: ClassState = {} as ClassState; const newClassState: ClassState = {} as ClassState;
...@@ -936,7 +1077,8 @@ export class RoomStore { ...@@ -936,7 +1077,8 @@ export class RoomStore {
course: { course: {
...this.state.course, ...this.state.course,
...newClassState ...newClassState
} },
studentsOrder
} }
this.commit(this.state); this.commit(this.state);
} }
......
...@@ -155,7 +155,7 @@ class AgoraRTCClient { ...@@ -155,7 +155,7 @@ class AgoraRTCClient {
this._bus.off(evtName, cb); this._bus.off(evtName, cb);
} }
async publish() { async publish() { console.log('rtc publish')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (this._published) { if (this._published) {
return resolve(); return resolve();
...@@ -170,7 +170,7 @@ class AgoraRTCClient { ...@@ -170,7 +170,7 @@ class AgoraRTCClient {
}) })
} }
async unpublish() { async unpublish() {console.log('unpublish' , 1);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!this._published || !this._localStream) { if (!this._published || !this._localStream) {
return resolve(); return resolve();
...@@ -234,7 +234,7 @@ class AgoraRTCClient { ...@@ -234,7 +234,7 @@ class AgoraRTCClient {
}) })
} }
async leave () { async leave () { console.log(9999, 'rtc leave');
if (this._client) { if (this._client) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this._client.leave(resolve, reject); this._client.leave(resolve, reject);
...@@ -341,7 +341,7 @@ export default class AgoraWebClient { ...@@ -341,7 +341,7 @@ export default class AgoraWebClient {
roomStore.setRTCJoined(true); roomStore.setRTCJoined(true);
} }
async leaveChannel() { async leaveChannel() { console.log('unpublish leaveChannel' , 3);
this.localUid = 0; this.localUid = 0;
this.channel = ''; this.channel = '';
await this.unpublishLocalStream(); await this.unpublishLocalStream();
...@@ -357,17 +357,17 @@ export default class AgoraWebClient { ...@@ -357,17 +357,17 @@ export default class AgoraWebClient {
} }
async publishLocalStream(data: AgoraStreamSpec) { async publishLocalStream(data: AgoraStreamSpec) {
console.log(" publish local stream ", this.published); console.log(" publish local stream ", roomStore.state.me.uid);
if (this.published) { if (this.published) {
await this.unpublishLocalStream(); await this.unpublishLocalStream();
console.log("[agora-web] unpublished", this.published); console.log("[agora-web] unpublished", roomStore.state.me.uid);
} }
await this.rtc.createLocalStream(data); await this.rtc.createLocalStream(data);
await this.rtc.publish(); await this.rtc.publish();
this.published = true; this.published = true;
} }
async unpublishLocalStream() { async unpublishLocalStream() { console.log('unpublish LocalStream' , 4);
console.log("[agora-web] invoke unpublishStream"); console.log("[agora-web] invoke unpublishStream");
await this.rtc.unpublish(); await this.rtc.unpublish();
this.published = false; this.published = false;
......
...@@ -54,8 +54,8 @@ export default class AgoraRTMClient { ...@@ -54,8 +54,8 @@ export default class AgoraRTMClient {
this._channelAttrsKey = null; this._channelAttrsKey = null;
this._client = AgoraRTM.createInstance(APP_ID, { enableLogUpload: false, logFilter }); this._client = AgoraRTM.createInstance(APP_ID, { enableLogUpload: false, logFilter });
} }
async addOrUpdateChannelAttributes(data: any): Promise<string> { async addOrUpdateChannelAttributes(data: any, enableNotificationToChannelMembers = true): Promise<string> {
return await this._client.addOrUpdateChannelAttributes(this._currentChannelName, data, {enableNotificationToChannelMembers: true}); return await this._client.addOrUpdateChannelAttributes(this._currentChannelName, data, {enableNotificationToChannelMembers});
} }
public removeAllListeners(): any { public removeAllListeners(): any {
...@@ -83,6 +83,7 @@ export default class AgoraRTMClient { ...@@ -83,6 +83,7 @@ export default class AgoraRTMClient {
} }
async login (uid: string, token?: string) { async login (uid: string, token?: string) {
this._channelAttrsKey = uid;
await this._client.login({uid, token}); await this._client.login({uid, token});
this._client.on("ConnectionStateChanged", (newState: string, reason: string) => { this._client.on("ConnectionStateChanged", (newState: string, reason: string) => {
this._bus.emit("ConnectionStateChanged", {newState, reason}); this._bus.emit("ConnectionStateChanged", {newState, reason});
...@@ -96,6 +97,7 @@ export default class AgoraRTMClient { ...@@ -96,6 +97,7 @@ export default class AgoraRTMClient {
async logout () { async logout () {
if (!this._logged) return; if (!this._logged) return;
await this.leave(this._currentChannelName);
await this._client.logout(); await this._client.logout();
this.destroy(); this.destroy();
this._logged = false; this._logged = false;
...@@ -155,6 +157,9 @@ export default class AgoraRTMClient { ...@@ -155,6 +157,9 @@ export default class AgoraRTMClient {
async sendChannelMessage(msg: string) { async sendChannelMessage(msg: string) {
return this._currentChannel.sendMessage({ text: msg }); return this._currentChannel.sendMessage({ text: msg });
} }
async setChannelAttrsKey(key: any) {
this._channelAttrsKey = `${key}`;
}
async updateChannelAttrsByKey (data: {[key: string]: string}/*key: string, attrs: any*/) { async updateChannelAttrsByKey (data: {[key: string]: string}/*key: string, attrs: any*/) {
// this._channelAttrsKey = key; // this._channelAttrsKey = key;
const channelAttributes: {[key: string]: string} = {}; const channelAttributes: {[key: string]: string} = {};
...@@ -217,6 +222,7 @@ export default class AgoraRTMClient { ...@@ -217,6 +222,7 @@ export default class AgoraRTMClient {
const teacher = accounts.find((it: any) => it.role === 'teacher'); const teacher = accounts.find((it: any) => it.role === 'teacher');
if (teacher && results[teacher.uid]) { if (teacher && results[teacher.uid]) {
results.teacher = results[teacher.uid]; results.teacher = results[teacher.uid];
results.teacherId = teacher.uid;
results.teacherCount = 1; results.teacherCount = 1;
} }
results.totalCount = accounts.filter((it: any) => results[it.uid]).length; results.totalCount = accounts.filter((it: any) => results[it.uid]).length;
...@@ -240,6 +246,10 @@ export default class AgoraRTMClient { ...@@ -240,6 +246,10 @@ export default class AgoraRTMClient {
} }
continue; continue;
} }
// if (key === 'studentsOrder') {
// continue
// }
if (/^[0-9]+$/.test(key)) {
const student = jsonParse(_.get(json, `${key}.value`)); const student = jsonParse(_.get(json, `${key}.value`));
// when student is not empty object // when student is not empty object
if (student && Object.keys(student).length) { if (student && Object.keys(student).length) {
...@@ -247,6 +257,7 @@ export default class AgoraRTMClient { ...@@ -247,6 +257,7 @@ export default class AgoraRTMClient {
accounts.push(student); accounts.push(student);
} }
} }
}
return accounts; return accounts;
} }
......
...@@ -226,6 +226,7 @@ export function resolveChannelAttrs(json: object) { ...@@ -226,6 +226,7 @@ export function resolveChannelAttrs(json: object) {
let studentsOrder: number[] = []; let studentsOrder: number[] = [];
if ((json as any).studentsOrder && (json as any).studentsOrder.value) { if ((json as any).studentsOrder && (json as any).studentsOrder.value) {
studentsOrder = JSON.parse((json as any).studentsOrder.value) || []; studentsOrder = JSON.parse((json as any).studentsOrder.value) || [];
studentsOrder = studentsOrder.map(id => +id)
} }
delete (json as any).studentsOrder; delete (json as any).studentsOrder;
...@@ -249,52 +250,32 @@ export function resolveChannelAttrs(json: object) { ...@@ -249,52 +250,32 @@ export function resolveChannelAttrs(json: object) {
} }
} }
} }
const students = []; let students: any[] = [];
for (let key of Object.keys(json)) { for (let key of Object.keys(json)) {
if (key === 'teacher') continue; if (key === 'teacher') continue;
const student = jsonParse(_.get(json, `${key}.value`)); const student = jsonParse(_.get(json, `${key}.value`));
if (student && Object.keys(student).length) { if (student && Object.keys(student).length) {
student.uid = key; student.uid = key;
student.role = 'student';
students.push(student); students.push(student);
} }
} }
console.log('resolveChannelAttrs 1', students);
console.log('resolveChannelAttrs 2', studentsOrder); // const orderedStudents: any[] = [];
/* // students.sort(function(a, b){
const studentsMeta = []; // return studentsOrder.indexOf(+a.uid) - studentsOrder.indexOf(+b.uid);
for (let key of Object.keys(json)) { // });
if (key === 'teacher') continue;
// if (!/^[0-9]+$/.test(key)) continue;
// const student = jsonParse(_.get(json, `${key}.value`));
// @ts-ignore
const studentMeta = json[key];
studentMeta.key = key;
studentsMeta.push(studentMeta)
// if (student && Object.keys(student).length) {
// student.uid = key;
// students.push(student);
// }
}
studentsMeta.sort((a, b)=>{
return a.lastUpdateTs - b.lastUpdateTs
})
let i = 0;
for (const s of studentsMeta) {
// const studentMeta = jsonParse(s);
const student = jsonParse(_.get(json, `${s.key}.value`));
if (student && Object.keys(student).length) {
student.uid = s.key;
// student.posIdx = i;
students.push(student);
i++;
}
}*/
// console.log('resolveChannelAttrs', studentsMeta);
// console.log('resolveChannelAttrs 1', students);
// console.log('resolveChannelAttrs 2', studentsOrder);
const accounts = [];
const accounts:any[] = [];
if (teacherJson && Object.keys(teacherJson).length) { if (teacherJson && Object.keys(teacherJson).length) {
accounts.push({ accounts.push({
role: 'teacher', role: 'teacher',
...@@ -324,33 +305,15 @@ export function resolveChannelAttrs(json: object) { ...@@ -324,33 +305,15 @@ export function resolveChannelAttrs(json: object) {
grant_board: +student.grant_board, grant_board: +student.grant_board,
}); });
} }
// console.log('resolveChannelAttrs 3', accounts);
if (studentsOrder.length == 0) {
accounts.forEach(a => {
studentsOrder.push(+a.uid);
})
} else {
const notInOrder = [];
accounts.forEach(a => {
if (!studentsOrder.includes(+a.uid)) {
notInOrder.push(+a.uid)
}
})
const aUids = accounts.map(a => {
return +a.uid;
});
const a = new Set(studentsOrder);
const b = new Set(aUids);
}
return { return {
teacher: teacherJson, teacher: teacherJson,
students: students, students: students,
accounts, accounts,
room, room,
studentsOrder
}; };
} }
......
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