Commit fee05a58 authored by liujiangnan's avatar liujiangnan

Merge branch 'master' of http://vcs.ireadabc.com/ljx0517/live

parents f083bac1 1c46b56e
...@@ -14,7 +14,7 @@ const useStyles = makeStyles({ ...@@ -14,7 +14,7 @@ const useStyles = makeStyles({
style1 : { style1 : {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
width: 'calc(100% - 280px)', width: '100%', // 'calc(100% - 280px)'
height: '100%' height: '100%'
}, },
style2 : { style2 : {
......
.room-tool-box{
right: 10px;
width: 46px;
border: 1px solid #dbe2e5;
bottom: 10px;
cursor: pointer;
display: flex;
z-index: 9;
position: absolute;
//background: #fff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
box-sizing: border-box;
align-items: center;
line-height: 42;
user-select: none;
border-radius: 6px;
top: 10px;
flex-direction: column;
height: 90px;
padding: 3px;
background-color: rgba(51, 51, 51, 0.4);
.tool-btn{
cursor: pointer;
display: flex;
height: 38px;
width: 38px;
margin: 2px;
border-radius: 4px;
background: #565656;
box-sizing: border-box;
color: #eee;
svg {
width: 38px;
height: 38px;
display: block;
}
}
}
import React, {useMemo, useState} from 'react';
import ChatPanel from './chat/panel';
import StudentList from './student-list';
import useChatText from '../hooks/use-chat-text';
import { VolumeOff, VolumeUp, ImportExport } from '@material-ui/icons';
import {roomStore} from "../stores/room";
import {useRoomState} from "../containers/root-container";
import './room-tools-bar.scss';
export default function RoomToolsBar (props: any) {
const roomState = useRoomState();
const {muteAudio} = useMemo(() => {
return {
muteAudio: roomState.course.muteAudio
}
}, [roomState.course]);
const audioOn = async () => {
console.log('audioOn');
await roomStore.allStudentMuteOn()
}
const audioOff = async () => {
console.log('audioOff');
await roomStore.allStudentMuteOff()
}
const randomStageUp = async () => {
await roomStore.randomStageUp()
}
return (
<>
<div className={'room-tool-box'}>
{muteAudio ? <div className="tool-btn" onClick={audioOn}><VolumeUp></VolumeUp></div> : <div onClick={audioOff} className="tool-btn"><VolumeOff></VolumeOff></div> }
<div className="tool-btn"><ImportExport onClick={randomStageUp}></ImportExport></div>
</div>
</>
)
}
...@@ -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('studentList'); const [active, setActive] = useState('chatroom');
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>
{ {
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
width: 58px; width: 58px;
margin-right: 10px; margin-right: 10px;
} }
.media-btn>.icon.disabled{
cursor: not-allowed;
}
.agora-video-view.show-placeholder { .agora-video-view.show-placeholder {
.video-profile { .video-profile {
...@@ -132,4 +135,4 @@ ...@@ -132,4 +135,4 @@
flex: 1 flex: 1
} }
} }
} }
\ No newline at end of file
...@@ -246,7 +246,13 @@ return ( ...@@ -246,7 +246,13 @@ return (
<span className="media-btn"> <span className="media-btn">
<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> :
<span className="media-btn">
<Icon className={audio ? "icon-speaker-on disabled" : "icon-speaker-off disabled"} data={"audio"} />
<Icon className={video ? "icons-camera-unmute-s disabled" : "icons-camera-mute-s disabled"} data={"video"} />
</span>
}
</div> </div>
: null : null
} }
...@@ -255,4 +261,4 @@ return ( ...@@ -255,4 +261,4 @@ return (
) )
} }
export default React.memo(VideoPlayer); export default React.memo(VideoPlayer);
\ No newline at end of file
...@@ -232,6 +232,9 @@ ...@@ -232,6 +232,9 @@
display: flex; display: flex;
top: 10px; top: 10px;
pointer-events: none; pointer-events: none;
//
top: 110px;
right: 10px;
.upload-btn { .upload-btn {
user-select: none; user-select: none;
width:225px; width:225px;
...@@ -434,4 +437,4 @@ ...@@ -434,4 +437,4 @@
} }
} }
} }
\ No newline at end of file
...@@ -130,8 +130,9 @@ export default function useStream () { ...@@ -130,8 +130,9 @@ export default function useStream () {
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;
const studentsOrder = roomStore.state.studentsOrder || [];
// 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) => studentsOrder.includes(it) && `${it}` !== `${teacherUid}` && `${it}` !== `${me.uid}` && `${it}` !== `${SHARE_ID}`);
if (me.role != 'teacher') { if (me.role != 'teacher') {
studentIds = studentIds.add(+me.uid); studentIds = studentIds.add(+me.uid);
} }
...@@ -139,7 +140,7 @@ export default function useStream () { ...@@ -139,7 +140,7 @@ export default function useStream () {
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(100000, studentsOrder);
console.log(11111111, studentIds.toArray()); console.log(11111111, studentIds.toArray());
studentIds = studentIds.sort(function(a, b){ studentIds = studentIds.sort(function(a, b){
...@@ -149,7 +150,7 @@ export default function useStream () { ...@@ -149,7 +150,7 @@ export default function useStream () {
}); });
console.log(222222, studentIds.toArray()); console.log(222222, studentIds.toArray());
// when i m student
// capture all remote streams // capture all remote streams
for (let studentId of studentIds) { for (let studentId of studentIds) {
...@@ -160,7 +161,7 @@ export default function useStream () { ...@@ -160,7 +161,7 @@ export default function useStream () {
...roomState.rtc.localStream, ...roomState.rtc.localStream,
account: myAttr.account, account: myAttr.account,
video: myAttr.video, video: myAttr.video,
audio: myAttr.audio, audio: roomState.course.muteAudio ? 0 : myAttr.audio,
local: true, local: true,
} }
studentStreams.push(_tmpStream); studentStreams.push(_tmpStream);
...@@ -174,7 +175,7 @@ export default function useStream () { ...@@ -174,7 +175,7 @@ export default function useStream () {
streamID: studentId, streamID: studentId,
account: studentAttr.account, account: studentAttr.account,
video: studentAttr.video, video: studentAttr.video,
audio: studentAttr.audio, audio: roomState.course.muteAudio ? 0 : studentAttr.audio,
} }
if (stream) { if (stream) {
_tmpStream = { _tmpStream = {
...@@ -182,12 +183,28 @@ export default function useStream () { ...@@ -182,12 +183,28 @@ export default function useStream () {
streamID: studentId, streamID: studentId,
account: studentAttr.account, account: studentAttr.account,
video: studentAttr.video, video: studentAttr.video,
audio: studentAttr.audio, audio: roomState.course.muteAudio ? 0 : studentAttr.audio,
} }
} }
studentStreams.push(_tmpStream); studentStreams.push(_tmpStream);
} }
} }
userAttrs.forEach((v, k) => {
if (!studentIds.includes(+v.uid)) {
if (`${v.uid}` != `${teacherUid}`) {
const s: any = {
streamID: +v.uid,
account: v.account,
video: v.video,
audio: roomState.course.muteAudio ? 0 : v.audio,
}
if (`${me.uid}` == `${v.uid}`) {
s.local = true;
}
studentStreams.push(s)
}
}
})
console.log('studentStreams', studentStreams); console.log('studentStreams', studentStreams);
return studentStreams; return studentStreams;
}, [ }, [
......
...@@ -159,11 +159,15 @@ export function RoomPage({ children }: any) { ...@@ -159,11 +159,15 @@ export function RoomPage({ children }: any) {
}, [me.role, location.pathname, course.linkId]); }, [me.role, location.pathname, course.linkId]);
useEffect(() => { useEffect(() => {
const webClient = roomStore.rtcClient as AgoraWebClient;
if (!rtcJoined) {
webClient.unpublishLocalStream()
}
if (!rtcJoined || rtc.current) return; if (!rtcJoined || rtc.current) return;
if (platform === 'web') { if (platform === 'web') {
const webClient = roomStore.rtcClient as AgoraWebClient; // const webClient = roomStore.rtcClient as AgoraWebClient;
const uid = +roomStore.state.me.uid as number; const uid = +roomStore.state.me.uid as number;
const streamSpec: AgoraStreamSpec = { const streamSpec: AgoraStreamSpec = {
streamID: uid, streamID: uid,
...@@ -209,15 +213,16 @@ export function RoomPage({ children }: any) { ...@@ -209,15 +213,16 @@ export function RoomPage({ children }: any) {
]); ]);
useEffect(() => { useEffect(() => {
debugger
if (!roomState.me.uid || !roomState.course.rid) return; if (!roomState.me.uid || !roomState.course.rid) return;
if (classroom) { if (classroom) {
debugger
if (platform === 'web') { if (platform === 'web') {
const webClient = roomStore.rtcClient as AgoraWebClient; const webClient = roomStore.rtcClient as AgoraWebClient;
if (webClient.joined) { if (webClient.joined) {
return; return;
} }
console.log("[agora-rtc] add event listener"); console.log("[agora-rtc] add event listener");
/*
webClient.rtc.on('onTokenPrivilegeWillExpire', (evt: any) => { webClient.rtc.on('onTokenPrivilegeWillExpire', (evt: any) => {
// you need obtain the `newToken` token from server side // you need obtain the `newToken` token from server side
const newToken = ''; const newToken = '';
...@@ -294,6 +299,7 @@ export function RoomPage({ children }: any) { ...@@ -294,6 +299,7 @@ export function RoomPage({ children }: any) {
const msg = attr === 0 ? 'resume to a&v mode' : 'fallback to audio mode'; const msg = attr === 0 ? 'resume to a&v mode' : 'fallback to audio mode';
console.info(`[agora-web] stream: ${uid} fallback: ${msg}`); console.info(`[agora-web] stream: ${uid} fallback: ${msg}`);
}) })
*/
rtc.current = true; rtc.current = true;
debugger debugger
// WARN: IF YOU ENABLED APP CERTIFICATE, PLEASE SIGN YOUR TOKEN IN YOUR SERVER SIDE AND OBTAIN IT FROM YOUR OWN TRUSTED SERVER API // WARN: IF YOU ENABLED APP CERTIFICATE, PLEASE SIGN YOUR TOKEN IN YOUR SERVER SIDE AND OBTAIN IT FROM YOUR OWN TRUSTED SERVER API
...@@ -433,10 +439,21 @@ export function RoomPage({ children }: any) { ...@@ -433,10 +439,21 @@ export function RoomPage({ children }: any) {
}, [roomState.me.uid, roomState.course.rid]); }, [roomState.me.uid, roomState.course.rid]);
useEffect(() => { useEffect(() => {
const webClient = roomStore.rtcClient as AgoraWebClient; const webClient = roomStore.rtcClient as AgoraWebClient;
if (!webClient.joined) { if (!webClient.joined) {
return; return;
} }
if (me.role == 'student') {
if (studentsOrder.includes(+me.uid)) {
console.log(1.15,'stageup?', 1111111 );
roomStore.publishMeStream();
} else {
console.log(1.15,'stagedown?', 222222 );
roomStore.unPublishMeStream();
}
}
console.log(1.2 ,studentsOrder, 'studentsOrder changed publish stream'); console.log(1.2 ,studentsOrder, 'studentsOrder changed publish stream');
......
...@@ -12,6 +12,7 @@ import {platform} from "../../utils/platform"; ...@@ -12,6 +12,7 @@ import {platform} from "../../utils/platform";
import AgoraWebClient from "../../utils/agora-rtc-client"; import AgoraWebClient from "../../utils/agora-rtc-client";
import {AgoraElectronClient} from "../../utils/agora-electron-client"; import {AgoraElectronClient} from "../../utils/agora-electron-client";
import {useRoomState} from "../../containers/root-container"; import {useRoomState} from "../../containers/root-container";
import RoomToolsBar from "../../components/room-tools-bar";
export default function SmallClass() { export default function SmallClass() {
const [tool, setTool] = useState(true); const [tool, setTool] = useState(true);
...@@ -45,7 +46,9 @@ export default function SmallClass() { ...@@ -45,7 +46,9 @@ export default function SmallClass() {
{currentTool == TOOL_TYPE.WHITEBOARD {currentTool == TOOL_TYPE.WHITEBOARD
? <MediaBoard /> ? <MediaBoard />
: <CourseWareFrame></CourseWareFrame>} : <CourseWareFrame></CourseWareFrame>}
{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}
{ roomStore.state.me.role == 'teacher' ? <RoomToolsBar /> : null}
{/*{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}*/}
</div> </div>
</div> </div>
) )
......
...@@ -69,7 +69,7 @@ function HomePage() { ...@@ -69,7 +69,7 @@ function HomePage() {
const [required, setRequired] = useState<any>({} as any); const [required, setRequired] = useState<any>({} as any);
const handleSubmit = () => { const handleSubmit = () => {
if (!session.yourName) { if (!session.yourName) {
setRequired({...required, yourName: 'missing your name'}); setRequired({...required, yourName: 'missing your name'});
return; return;
...@@ -78,8 +78,9 @@ function HomePage() { ...@@ -78,8 +78,9 @@ function HomePage() {
if (!session.yourPass) { if (!session.yourPass) {
setRequired({...required, yourPass: 'missing your password'}); setRequired({...required, yourPass: 'missing your password'});
return; return;
} }
endPoint.login({username: session.yourName, password: session.yourPass}).then((userInfo: any) => { endPoint.login({username: session.yourName, password: session.yourPass}).then((userInfo: any) => {
console.log(userInfo);
session.roomName = userInfo["class_id"]; session.roomName = userInfo["class_id"];
session.yourName = userInfo["nick_name"]; session.yourName = userInfo["nick_name"];
session.role = userInfo["classRole"]==="tea"?"teacher":"student"; session.role = userInfo["classRole"]==="tea"?"teacher":"student";
...@@ -88,8 +89,8 @@ function HomePage() { ...@@ -88,8 +89,8 @@ function HomePage() {
if (!roomTypes[session.roomType]) return; if (!roomTypes[session.roomType]) return;
const path = roomTypes[session.roomType].path const path = roomTypes[session.roomType].path
const payload = { const payload = {
uid: userInfo["uuid"], // genUid(), uid: `${userInfo["id"]}`, // genUid(),
rid: session.roomName, // `${session.roomType}${MD5(session.roomName)}`, rid: `${session.roomName}`, // `${session.roomType}${MD5(session.roomName)}`,
role: session.role, role: session.role,
roomName: session.roomName, roomName: session.roomName,
roomType: session.roomType, roomType: session.roomType,
...@@ -164,7 +165,7 @@ function HomePage() { ...@@ -164,7 +165,7 @@ function HomePage() {
<div className="position-top card-menu"> <div className="position-top card-menu">
<HomeBtn handleSetting={handleSetting}/> <HomeBtn handleSetting={handleSetting}/>
</div> </div>
<div className="position-content flex-direction-column"> <div className="position-content flex-direction-column">
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>
<FormInput Label={"User Name"} value={session.yourName} onChange={ <FormInput Label={"User Name"} value={session.yourName} onChange={
(val: string) => { (val: string) => {
...@@ -186,7 +187,7 @@ function HomePage() { ...@@ -186,7 +187,7 @@ function HomePage() {
}} }}
requiredText={required.yourPass} requiredText={required.yourPass}
/> />
</FormControl> </FormControl>
<Button name={"Join"} onClick={handleSubmit}/> <Button name={"Join"} onClick={handleSubmit}/>
</div> </div>
</div> </div>
......
...@@ -45,11 +45,11 @@ export interface RoomParams { ...@@ -45,11 +45,11 @@ export interface RoomParams {
export class EndPoint { export class EndPoint {
appID: string = ''; appID: string = '';
roomId: string = ''; roomId: string = '';
userToken: string = ''; userToken: string = '';
recordId: string = ''; recordId: string = '';
async login(data: any) { async login(data: any) {
let json = await AgoraFetchJson({ let json = await AgoraFetchJson({
url: `${ENDPOINT}/api/login`, url: `${ENDPOINT}/api/login`,
method: 'POST', method: 'POST',
...@@ -60,25 +60,25 @@ export class EndPoint { ...@@ -60,25 +60,25 @@ export class EndPoint {
} }
let token = json.data; let token = json.data;
this.userToken = token; this.userToken = token;
try { try {
let userInfo = jwt_decode(token); let userInfo = jwt_decode(token);
return userInfo; return userInfo;
} catch (Error) { } catch (Error) {
return null; return null;
} }
} }
getUserInfo(){ getUserInfo(){
try { try {
let userInfo = jwt_decode(this.userToken); let userInfo = jwt_decode(this.userToken);
return userInfo; return userInfo;
} catch (Error) { } catch (Error) {
return null; return null;
} }
} }
getCourseUrl(){ getCourseUrl(){
return `${ENDPOINT}/airclass_ol?token=${this.userToken}`; return `http://staging-ac.ireadabc.com/airclass_ol?token=${this.userToken}`;
} }
async config() { async config() {
...@@ -104,7 +104,7 @@ export class EndPoint { ...@@ -104,7 +104,7 @@ export class EndPoint {
method: 'POST', method: 'POST',
data: params data: params
}); });
this.roomId = json.data.room.roomId; this.roomId = json.data.room.roomId;
this.userToken = json.data.user.userToken; this.userToken = json.data.user.userToken;
return { return {
...@@ -132,7 +132,7 @@ export class EndPoint { ...@@ -132,7 +132,7 @@ export class EndPoint {
/** /**
* updateRoom * updateRoom
* @param params * @param params
*/ */
async updateRoom(params: RoomParams) { async updateRoom(params: RoomParams) {
let json = await AgoraFetchJson({ let json = await AgoraFetchJson({
...@@ -213,4 +213,4 @@ export class EndPoint { ...@@ -213,4 +213,4 @@ export class EndPoint {
} }
export const endPoint = new EndPoint(); export const endPoint = new EndPoint();
\ No newline at end of file
...@@ -5,11 +5,12 @@ import {Subject} from 'rxjs'; ...@@ -5,11 +5,12 @@ import {Subject} from 'rxjs';
import {List, OrderedMap, OrderedSet} from 'immutable'; import {List, OrderedMap, 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, {SHARE_ID} from '../utils/agora-rtc-client';
import {get} from 'lodash'; import {get} from 'lodash';
import {isElectron} from '../utils/platform'; import {isElectron} from '../utils/platform';
import GlobalStorage from '../utils/custom-storage'; import GlobalStorage from '../utils/custom-storage';
import {STAGE_NUM} from "../utils/consts"; import {STAGE_NUM} from "../utils/consts";
import {useLocation} from "react-router-dom";
function canJoin({uid, onlineStatus, roomType, channelCount, role}: { uid: any, 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 = {
...@@ -74,7 +75,8 @@ export interface ClassState { ...@@ -74,7 +75,8 @@ export interface ClassState {
lockBoard: number // lock_board lockBoard: number // lock_board
courseState: number courseState: number
muteChat: number, muteChat: number,
currentTool: TOOL_TYPE currentTool: TOOL_TYPE,
muteAudio: number,
} }
type RtcState = { type RtcState = {
...@@ -177,6 +179,7 @@ export class RoomStore { ...@@ -177,6 +179,7 @@ export class RoomStore {
linkId: 0, linkId: 0,
courseState: 0, courseState: 0,
muteChat: 0, muteChat: 0,
muteAudio: 0,
rid: '', rid: '',
roomName: '', roomName: '',
roomType: 0, roomType: 0,
...@@ -205,6 +208,84 @@ export class RoomStore { ...@@ -205,6 +208,84 @@ export class RoomStore {
this._state = { this._state = {
...this.defaultState ...this.defaultState
}; };
const webClient = this.rtcClient as AgoraWebClient;
// const location = useLocation();
webClient.rtc.on('onTokenPrivilegeWillExpire', (evt: any) => {
// you need obtain the `newToken` token from server side
const newToken = '';
webClient.rtc.renewToken(newToken);
console.log('[agora-web] onTokenPrivilegeWillExpire', evt);
});
webClient.rtc.on('onTokenPrivilegeDidExpire', (evt: any) => {
// you need obtain the `newToken` token from server side
const newToken = '';
webClient.rtc.renewToken(newToken);
console.log('[agora-web] onTokenPrivilegeDidExpire', evt);
});
webClient.rtc.on('error', (evt: any) => {
console.log('[agora-web] error evt', evt);
});
webClient.rtc.on('stream-published', ({ stream }: any) => {
const _stream = new AgoraStream(stream, stream.getId(), true);
roomStore.addLocalStream(_stream);
});
webClient.rtc.on('stream-subscribed', ({ stream }: any) => {
console.log('stream', 2, 'stream-subscribed')
const streamID = stream.getId();
// 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 (roomStore.state.course.teacherId
&& roomStore.state.course.teacherId === `${streamID}`) {
webClient.setRemoteVideoStreamType(stream, 0);
console.log("[agora-web] dual stream set high for teacher");
}
else {
webClient.setRemoteVideoStreamType(stream, 1);
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);
console.log("[agora-web] subscribe remote stream, id: ", stream.getId());
roomStore.addRemoteStream(_stream);
});
webClient.rtc.on('stream-added', ({ stream }: any) => {
console.log('stream', 1, 'stream-added')
console.log("[agora-web] added remote stream, id: ", stream.getId());
webClient.subscribe(stream);
});
webClient.rtc.on('stream-removed', ({ stream }: any) => {
console.log("[agora-web] removed remote stream, id: ", stream.getId(), roomStore.applyUid);
const id = stream.getId();
if (id === roomStore.applyUid) {
globalStore.removeNotice();
this.state.me.role === 'teacher' &&
roomStore.updateCourseLinkUid(0).then(() => {
console.log("update teacher link_uid to 0");
}).catch(console.warn);
}
roomStore.removeRemoteStream(stream.getId());
});
webClient.rtc.on('peer-online', ({uid}: any) => {
console.log("[agora-web] peer-online, id: ", uid);
roomStore.addPeerUser(uid);
});
webClient.rtc.on('peer-leave', ({ uid }: any) => {
console.log("[agora-web] peer-leave, id: ", uid, roomStore.applyUid);
if (uid === roomStore.applyUid) {
globalStore.removeNotice();
this.state.me.role === 'teacher' &&
roomStore.updateCourseLinkUid(0).then(() => {
console.log("update teacher link_uid to 0");
}).catch(console.warn);
}
roomStore.removePeerUser(uid);
roomStore.removeRemoteStream(uid);
});
webClient.rtc.on("stream-fallback", ({ uid, attr }: any) => {
const msg = attr === 0 ? 'resume to a&v mode' : 'fallback to audio mode';
console.info(`[agora-web] stream: ${uid} fallback: ${msg}`);
})
// @ts-ignore // @ts-ignore
window['roomStore'] = this; window['roomStore'] = this;
} }
...@@ -430,6 +511,22 @@ export class RoomStore { ...@@ -430,6 +511,22 @@ export class RoomStore {
// this.commit(this.state); // this.commit(this.state);
} }
async randomStageUp() {
const users = roomStore.state.users;
const studentsOrder = roomStore.state.studentsOrder || [];
const downUser: any = [];
users.forEach((u, uid) => {
if (`${u.uid}` != `${this.state.course.teacherId}` && !studentsOrder.includes(+u.uid)) {
downUser.push(u);
}
})
const upUser = downUser[Math.floor(Math.random() * downUser.length)]
// console.log('upUser', upUser)
if (upUser) {
this.stageUp(`${upUser.uid}`)
}
}
async setCurrentTool (tool: TOOL_TYPE) { async setCurrentTool (tool: TOOL_TYPE) {
this.state = { this.state = {
...@@ -820,7 +917,7 @@ export class RoomStore { ...@@ -820,7 +917,7 @@ export class RoomStore {
} }
async loginAndJoin(payload: any, pass: boolean = false) { async loginAndJoin(payload: any, pass: boolean = false) {
payload.rid = `channel_${payload.rid}` // payload.rid = `channel_${payload.rid}`
console.log('channel:', payload.rid); console.log('channel:', payload.rid);
const {roomType, role, uid, rid, token} = payload; const {roomType, role, uid, rid, token} = payload;
await this.rtmClient.logout(); await this.rtmClient.logout();
...@@ -949,8 +1046,19 @@ export class RoomStore { ...@@ -949,8 +1046,19 @@ export class RoomStore {
console.log(3, 'set rtc join flag, should auto publish') console.log(3, 'set rtc join flag, should auto publish')
// return await (this.rtcClient as AgoraWebClient).publishStream() // return await (this.rtcClient as AgoraWebClient).publishStream()
// 通过index.tsx里的监听来触发发布 // 通过index.tsx里的监听来触发发布
this.setRTCJoined(true); if (!this.state.rtc.joined) {
this.setRTCJoined(true);
}
} }
unPublishMeStream() {
console.log(3, 'set rtc join flag, should auto publish')
// return await (this.rtcClient as AgoraWebClient).publishStream()
if (this.state.rtc.joined) {
this.setRTCJoined(false);
}
}
setRTCJoined(joined: boolean) { setRTCJoined(joined: boolean) {
this.state = { this.state = {
...this.state, ...this.state,
...@@ -1013,6 +1121,7 @@ export class RoomStore { ...@@ -1013,6 +1121,7 @@ export class RoomStore {
if (user.role === 'teacher') { if (user.role === 'teacher') {
Object.assign(attrs, { Object.assign(attrs, {
mute_chat: this.state.course.muteChat, mute_chat: this.state.course.muteChat,
mute_audio: this.state.course.muteAudio,
class_state: this.state.course.courseState, class_state: this.state.course.courseState,
whiteboard_uid: this.state.course.boardId, whiteboard_uid: this.state.course.boardId,
link_uid: this.state.course.linkId, link_uid: this.state.course.linkId,
...@@ -1029,9 +1138,33 @@ export class RoomStore { ...@@ -1029,9 +1138,33 @@ export class RoomStore {
let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs); let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs);
// return res; // return res;
} }
async allStudentMuteOn(){
const channelMeta = await this.rtmClient.getChannelAttributeBy(this.state.course.rid);
// let accounts = channelMeta.accounts;
const data: any = {};
// accounts.forEach((acc: any) => {
// acc.audio = 0;
// data[acc.uid] = acc;
// })
channelMeta.teacher.mute_audio = 0;
data['teacher'] = channelMeta.teacher;
await this.rtmClient.addOrUpdateChannelAttributes(data);
}
async allStudentMuteOff(){
const channelMeta = await this.rtmClient.getChannelAttributeBy(this.state.course.rid);
// let accounts = channelMeta.accounts;
const data: any = {};
// accounts.forEach((acc: any) => {
// acc.audio = 1;
// data[acc.uid] = acc;
// })
channelMeta.teacher.mute_audio = 1;
data['teacher'] = channelMeta.teacher;
await this.rtmClient.addOrUpdateChannelAttributes(data);
}
async updateMe(user: any) { async updateMe(user: any) {
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, muteAudio, grantBoard} = user;
const key = role === 'teacher' ? 'teacher' : uid; const key = role === 'teacher' ? 'teacher' : uid;
const me = this.state.me; const me = this.state.me;
const attrs = { const attrs = {
...@@ -1063,12 +1196,14 @@ export class RoomStore { ...@@ -1063,12 +1196,14 @@ export class RoomStore {
const class_state = get(user, 'courseState', this.state.course.courseState); const class_state = get(user, 'courseState', this.state.course.courseState);
const whiteboard_uid = get(user, 'boardId', this.state.course.boardId); const whiteboard_uid = get(user, 'boardId', this.state.course.boardId);
const mute_chat = get(user, 'muteChat', this.state.course.muteChat); const mute_chat = get(user, 'muteChat', this.state.course.muteChat);
const mute_audio = get(user, 'muteChat', this.state.course.muteAudio);
const shared_uid = get(user, 'sharedId', this.state.course.sharedId); const shared_uid = get(user, 'sharedId', this.state.course.sharedId);
const link_uid = get(user, 'linkId', this.state.course.linkId); const link_uid = get(user, 'linkId', this.state.course.linkId);
const lock_board = get(user, 'lockBoard', this.state.course.lockBoard); const lock_board = get(user, 'lockBoard', this.state.course.lockBoard);
const current_tool = get(user, 'currentTool', this.state.course.currentTool); const current_tool = get(user, 'currentTool', this.state.course.currentTool);
Object.assign(attrs, { Object.assign(attrs, {
mute_audio,
mute_chat, mute_chat,
class_state, class_state,
whiteboard_uid, whiteboard_uid,
...@@ -1089,12 +1224,7 @@ export class RoomStore { ...@@ -1089,12 +1224,7 @@ export class RoomStore {
// let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs); // let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs);
// return res; // return res;
} }
meUp() {
console.log('meUp!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
}
meDown() {
console.log('meDown!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
}
async syncStageStudent(accounts: any[], studentsOrder: number[]) { async syncStageStudent(accounts: any[], studentsOrder: number[]) {
debugger debugger
let needUpdate =false; let needUpdate =false;
...@@ -1250,6 +1380,7 @@ export class RoomStore { ...@@ -1250,6 +1380,7 @@ export class RoomStore {
boardId: room.whiteboard_uid, boardId: room.whiteboard_uid,
courseState: room.class_state, courseState: room.class_state,
muteChat: room.mute_chat, muteChat: room.mute_chat,
muteAudio: room.mute_audio,
lockBoard: room.lock_board, lockBoard: room.lock_board,
currentTool: room.current_tool currentTool: room.current_tool
}) })
......
...@@ -241,11 +241,12 @@ export function resolveChannelAttrs(json: object) { ...@@ -241,11 +241,12 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid: 0, whiteboard_uid: 0,
lock_board: 0, lock_board: 0,
grant_board: 0, grant_board: 0,
mute_audio: 0,
current_tool: TOOL_TYPE.WHITEBOARD, current_tool: TOOL_TYPE.WHITEBOARD,
} }
if (teacherJson) { if (teacherJson) {
for (let key of Object.keys(teacherJson)) { for (let key of Object.keys(teacherJson)) {
if (['class_state', 'link_uid', 'shared_uid', 'mute_chat', 'whiteboard_uid', 'lock_board', 'current_tool'].indexOf(key) !== -1 if (['class_state', 'link_uid', 'shared_uid', 'mute_chat', 'whiteboard_uid', 'lock_board', 'current_tool', 'mute_audio'].indexOf(key) !== -1
&& teacherJson[key] !== undefined && teacherJson[key] !== undefined
&& teacherJson[key] !== '') { && teacherJson[key] !== '') {
room[key] = teacherJson[key]; room[key] = teacherJson[key];
......
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