Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
L
live
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
liujiaxin
live
Commits
fee05a58
Commit
fee05a58
authored
Feb 12, 2020
by
liujiangnan
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
http://vcs.ireadabc.com/ljx0517/live
parents
f083bac1
1c46b56e
Changes
14
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
302 additions
and
46 deletions
+302
-46
courseware-frame.tsx
src/components/courseware-frame.tsx
+1
-1
room-tools-bar.scss
src/components/room-tools-bar.scss
+38
-0
room-tools-bar.tsx
src/components/room-tools-bar.tsx
+36
-0
roomboard.tsx
src/components/roomboard.tsx
+2
-2
video-player.scss
src/components/video-player.scss
+4
-1
video-player.tsx
src/components/video-player.tsx
+8
-2
whiteboard.scss
src/components/whiteboard.scss
+4
-1
use-streams.ts
src/hooks/use-streams.ts
+23
-6
index.tsx
src/pages/classroom/index.tsx
+19
-2
small-class.tsx
src/pages/classroom/small-class.tsx
+4
-1
home.tsx
src/pages/home.tsx
+8
-7
agora-end-points.ts
src/services/agora-end-points.ts
+11
-11
room.ts
src/stores/room.ts
+142
-11
helper.ts
src/utils/helper.ts
+2
-1
No files found.
src/components/courseware-frame.tsx
View file @
fee05a58
...
...
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
style1
:
{
display
:
'
flex
'
,
flexDirection
:
'
column
'
,
width
:
'
calc(100% - 280px)
'
,
width
:
'
100%
'
,
// 'calc(100% - 280px)'
height
:
'
100%
'
},
style2
:
{
...
...
src/components/room-tools-bar.scss
0 → 100644
View file @
fee05a58
.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
;
}
}
}
src/components/room-tools-bar.tsx
0 → 100644
View file @
fee05a58
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
>
</>
)
}
src/components/roomboard.tsx
View file @
fee05a58
...
...
@@ -9,7 +9,7 @@ export default function Roomboard (props: any) {
messages
,
sendMessage
,
handleChange
}
=
useChatText
();
const
[
active
,
setActive
]
=
useState
(
'
studentList
'
);
const
[
active
,
setActive
]
=
useState
(
'
chatroom
'
);
const
[
visible
,
setVisible
]
=
useState
(
true
);
const
toggleCollapse
=
(
evt
:
any
)
=>
{
...
...
@@ -22,7 +22,7 @@ export default function Roomboard (props: any) {
{
visible
?
<
div
className=
{
`small-class chat-board`
}
>
<
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
>
{
...
...
src/components/video-player.scss
View file @
fee05a58
...
...
@@ -4,6 +4,9 @@
width
:
58px
;
margin-right
:
10px
;
}
.media-btn
>
.icon.disabled
{
cursor
:
not
-
allowed
;
}
.agora-video-view.show-placeholder
{
.video-profile
{
...
...
@@ -132,4 +135,4 @@
flex
:
1
}
}
}
\ No newline at end of file
}
src/components/video-player.tsx
View file @
fee05a58
...
...
@@ -246,7 +246,13 @@ return (
<
span
className=
"media-btn"
>
<
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
>
:
<
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
>
:
null
}
...
...
@@ -255,4 +261,4 @@ return (
)
}
export
default
React
.
memo
(
VideoPlayer
);
\ No newline at end of file
export
default
React
.
memo
(
VideoPlayer
);
src/components/whiteboard.scss
View file @
fee05a58
...
...
@@ -232,6 +232,9 @@
display
:
flex
;
top
:
10px
;
pointer-events
:
none
;
//
top
:
110px
;
right
:
10px
;
.upload-btn
{
user-select
:
none
;
width
:
225px
;
...
...
@@ -434,4 +437,4 @@
}
}
}
\ No newline at end of file
}
src/hooks/use-streams.ts
View file @
fee05a58
...
...
@@ -130,8 +130,9 @@ export default function useStream () {
if
(
!
me
.
uid
||
userAttrs
.
count
()
===
0
)
return
[];
const
teacherUid
=
course
.
teacherId
;
const
peerUsers
=
roomState
.
rtc
.
users
;
const
studentsOrder
=
roomStore
.
state
.
studentsOrder
||
[];
// 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
'
)
{
studentIds
=
studentIds
.
add
(
+
me
.
uid
);
}
...
...
@@ -139,7 +140,7 @@ export default function useStream () {
const
studentStreams
:
any
[]
=
[];
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
){
...
...
@@ -149,7 +150,7 @@ export default function useStream () {
});
console
.
log
(
222222
,
studentIds
.
toArray
());
// when i m student
// capture all remote streams
for
(
let
studentId
of
studentIds
)
{
...
...
@@ -160,7 +161,7 @@ export default function useStream () {
...
roomState
.
rtc
.
localStream
,
account
:
myAttr
.
account
,
video
:
myAttr
.
video
,
audio
:
myAttr
.
audio
,
audio
:
roomState
.
course
.
muteAudio
?
0
:
myAttr
.
audio
,
local
:
true
,
}
studentStreams
.
push
(
_tmpStream
);
...
...
@@ -174,7 +175,7 @@ export default function useStream () {
streamID
:
studentId
,
account
:
studentAttr
.
account
,
video
:
studentAttr
.
video
,
audio
:
studentAttr
.
audio
,
audio
:
roomState
.
course
.
muteAudio
?
0
:
studentAttr
.
audio
,
}
if
(
stream
)
{
_tmpStream
=
{
...
...
@@ -182,12 +183,28 @@ export default function useStream () {
streamID
:
studentId
,
account
:
studentAttr
.
account
,
video
:
studentAttr
.
video
,
audio
:
studentAttr
.
audio
,
audio
:
roomState
.
course
.
muteAudio
?
0
:
studentAttr
.
audio
,
}
}
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
);
return
studentStreams
;
},
[
...
...
src/pages/classroom/index.tsx
View file @
fee05a58
...
...
@@ -159,11 +159,15 @@ export function RoomPage({ children }: any) {
},
[
me
.
role
,
location
.
pathname
,
course
.
linkId
]);
useEffect
(()
=>
{
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
if
(
!
rtcJoined
)
{
webClient
.
unpublishLocalStream
()
}
if
(
!
rtcJoined
||
rtc
.
current
)
return
;
if
(
platform
===
'
web
'
)
{
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
//
const webClient = roomStore.rtcClient as AgoraWebClient;
const
uid
=
+
roomStore
.
state
.
me
.
uid
as
number
;
const
streamSpec
:
AgoraStreamSpec
=
{
streamID
:
uid
,
...
...
@@ -209,15 +213,16 @@ export function RoomPage({ children }: any) {
]);
useEffect
(()
=>
{
debugger
if
(
!
roomState
.
me
.
uid
||
!
roomState
.
course
.
rid
)
return
;
if
(
classroom
)
{
debugger
if
(
platform
===
'
web
'
)
{
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
if
(
webClient
.
joined
)
{
return
;
}
console
.
log
(
"
[agora-rtc] add event listener
"
);
/*
webClient.rtc.on('onTokenPrivilegeWillExpire', (evt: any) => {
// you need obtain the `newToken` token from server side
const newToken = '';
...
...
@@ -294,6 +299,7 @@ export function RoomPage({ children }: any) {
const msg = attr === 0 ? 'resume to a&v mode' : 'fallback to audio mode';
console.info(`[agora-web] stream: ${uid} fallback: ${msg}`);
})
*/
rtc
.
current
=
true
;
debugger
// 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) {
},
[
roomState
.
me
.
uid
,
roomState
.
course
.
rid
]);
useEffect
(()
=>
{
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
if
(
!
webClient
.
joined
)
{
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
'
);
...
...
src/pages/classroom/small-class.tsx
View file @
fee05a58
...
...
@@ -12,6 +12,7 @@ import {platform} from "../../utils/platform";
import
AgoraWebClient
from
"
../../utils/agora-rtc-client
"
;
import
{
AgoraElectronClient
}
from
"
../../utils/agora-electron-client
"
;
import
{
useRoomState
}
from
"
../../containers/root-container
"
;
import
RoomToolsBar
from
"
../../components/room-tools-bar
"
;
export
default
function
SmallClass
()
{
const
[
tool
,
setTool
]
=
useState
(
true
);
...
...
@@ -45,7 +46,9 @@ export default function SmallClass() {
{
currentTool
==
TOOL_TYPE
.
WHITEBOARD
?
<
MediaBoard
/>
:
<
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
>
)
...
...
src/pages/home.tsx
View file @
fee05a58
...
...
@@ -69,7 +69,7 @@ function HomePage() {
const
[
required
,
setRequired
]
=
useState
<
any
>
({}
as
any
);
const
handleSubmit
=
()
=>
{
const
handleSubmit
=
()
=>
{
if
(
!
session
.
yourName
)
{
setRequired
({...
required
,
yourName
:
'
missing your name
'
});
return
;
...
...
@@ -78,8 +78,9 @@ function HomePage() {
if
(
!
session
.
yourPass
)
{
setRequired
({...
required
,
yourPass
:
'
missing your password
'
});
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
.
yourName
=
userInfo
[
"
nick_name
"
];
session
.
role
=
userInfo
[
"
classRole
"
]
===
"
tea
"
?
"
teacher
"
:
"
student
"
;
...
...
@@ -88,8 +89,8 @@ function HomePage() {
if
(
!
roomTypes
[
session
.
roomType
])
return
;
const
path
=
roomTypes
[
session
.
roomType
].
path
const
payload
=
{
uid
:
userInfo
[
"
uuid
"
]
,
// genUid(),
rid
:
session
.
roomName
,
// `${session.roomType}${MD5(session.roomName)}`,
uid
:
`
${
userInfo
[
"
id
"
]}
`
,
// genUid(),
rid
:
`
${
session
.
roomName
}
`
,
// `${session.roomType}${MD5(session.roomName)}`,
role
:
session
.
role
,
roomName
:
session
.
roomName
,
roomType
:
session
.
roomType
,
...
...
@@ -164,7 +165,7 @@ function HomePage() {
<
div
className=
"position-top card-menu"
>
<
HomeBtn
handleSetting=
{
handleSetting
}
/>
</
div
>
<
div
className=
"position-content flex-direction-column"
>
<
div
className=
"position-content flex-direction-column"
>
<
FormControl
className=
{
classes
.
formControl
}
>
<
FormInput
Label=
{
"
User Name
"
}
value=
{
session
.
yourName
}
onChange=
{
(
val
:
string
)
=>
{
...
...
@@ -186,7 +187,7 @@ function HomePage() {
}
}
requiredText=
{
required
.
yourPass
}
/>
</
FormControl
>
</
FormControl
>
<
Button
name=
{
"
Join
"
}
onClick=
{
handleSubmit
}
/>
</
div
>
</
div
>
...
...
src/services/agora-end-points.ts
View file @
fee05a58
...
...
@@ -45,11 +45,11 @@ export interface RoomParams {
export
class
EndPoint
{
appID
:
string
=
''
;
roomId
:
string
=
''
;
userToken
:
string
=
''
;
roomId
:
string
=
''
;
userToken
:
string
=
''
;
recordId
:
string
=
''
;
async
login
(
data
:
any
)
{
async
login
(
data
:
any
)
{
let
json
=
await
AgoraFetchJson
({
url
:
`
${
ENDPOINT
}
/api/login`
,
method
:
'
POST
'
,
...
...
@@ -60,25 +60,25 @@ export class EndPoint {
}
let
token
=
json
.
data
;
this
.
userToken
=
token
;
try
{
try
{
let
userInfo
=
jwt_decode
(
token
);
return
userInfo
;
}
catch
(
Error
)
{
return
null
;
}
}
}
getUserInfo
(){
try
{
try
{
let
userInfo
=
jwt_decode
(
this
.
userToken
);
return
userInfo
;
}
catch
(
Error
)
{
return
null
;
}
}
}
getCourseUrl
(){
return
`
${
ENDPOINT
}
/airclass_ol?token=
${
this
.
userToken
}
`
;
return
`
http://staging-ac.ireadabc.com
/airclass_ol?token=
${
this
.
userToken
}
`
;
}
async
config
()
{
...
...
@@ -104,7 +104,7 @@ export class EndPoint {
method
:
'
POST
'
,
data
:
params
});
this
.
roomId
=
json
.
data
.
room
.
roomId
;
this
.
userToken
=
json
.
data
.
user
.
userToken
;
return
{
...
...
@@ -132,7 +132,7 @@ export class EndPoint {
/**
* updateRoom
* @param params
* @param params
*/
async
updateRoom
(
params
:
RoomParams
)
{
let
json
=
await
AgoraFetchJson
({
...
...
@@ -213,4 +213,4 @@ export class EndPoint {
}
export
const
endPoint
=
new
EndPoint
();
\ No newline at end of file
export
const
endPoint
=
new
EndPoint
();
src/stores/room.ts
View file @
fee05a58
...
...
@@ -5,11 +5,12 @@ import {Subject} from 'rxjs';
import
{
List
,
OrderedMap
,
OrderedSet
}
from
'
immutable
'
;
import
AgoraRTMClient
,
{
RoomMessage
}
from
'
../utils/agora-rtm-client
'
;
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
{
isElectron
}
from
'
../utils/platform
'
;
import
GlobalStorage
from
'
../utils/custom-storage
'
;
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
})
{
const
result
=
{
...
...
@@ -74,7 +75,8 @@ export interface ClassState {
lockBoard
:
number
// lock_board
courseState
:
number
muteChat
:
number
,
currentTool
:
TOOL_TYPE
currentTool
:
TOOL_TYPE
,
muteAudio
:
number
,
}
type
RtcState
=
{
...
...
@@ -177,6 +179,7 @@ export class RoomStore {
linkId
:
0
,
courseState
:
0
,
muteChat
:
0
,
muteAudio
:
0
,
rid
:
''
,
roomName
:
''
,
roomType
:
0
,
...
...
@@ -205,6 +208,84 @@ export class RoomStore {
this
.
_state
=
{
...
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
window
[
'
roomStore
'
]
=
this
;
}
...
...
@@ -430,6 +511,22 @@ export class RoomStore {
// 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
)
{
this
.
state
=
{
...
...
@@ -820,7 +917,7 @@ export class RoomStore {
}
async
loginAndJoin
(
payload
:
any
,
pass
:
boolean
=
false
)
{
payload
.
rid
=
`channel_
${
payload
.
rid
}
`
//
payload.rid = `channel_${payload.rid}`
console
.
log
(
'
channel:
'
,
payload
.
rid
);
const
{
roomType
,
role
,
uid
,
rid
,
token
}
=
payload
;
await
this
.
rtmClient
.
logout
();
...
...
@@ -949,8 +1046,19 @@ export class RoomStore {
console
.
log
(
3
,
'
set rtc join flag, should auto publish
'
)
// return await (this.rtcClient as AgoraWebClient).publishStream()
// 通过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
)
{
this
.
state
=
{
...
this
.
state
,
...
...
@@ -1013,6 +1121,7 @@ export class RoomStore {
if
(
user
.
role
===
'
teacher
'
)
{
Object
.
assign
(
attrs
,
{
mute_chat
:
this
.
state
.
course
.
muteChat
,
mute_audio
:
this
.
state
.
course
.
muteAudio
,
class_state
:
this
.
state
.
course
.
courseState
,
whiteboard_uid
:
this
.
state
.
course
.
boardId
,
link_uid
:
this
.
state
.
course
.
linkId
,
...
...
@@ -1029,9 +1138,33 @@ export class RoomStore {
let
res
=
await
this
.
rtmClient
.
updateChannelAttrsByKey
(
key
,
attrs
);
// 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
)
{
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
me
=
this
.
state
.
me
;
const
attrs
=
{
...
...
@@ -1063,12 +1196,14 @@ export class RoomStore {
const
class_state
=
get
(
user
,
'
courseState
'
,
this
.
state
.
course
.
courseState
);
const
whiteboard_uid
=
get
(
user
,
'
boardId
'
,
this
.
state
.
course
.
boardId
);
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
link_uid
=
get
(
user
,
'
linkId
'
,
this
.
state
.
course
.
linkId
);
const
lock_board
=
get
(
user
,
'
lockBoard
'
,
this
.
state
.
course
.
lockBoard
);
const
current_tool
=
get
(
user
,
'
currentTool
'
,
this
.
state
.
course
.
currentTool
);
Object
.
assign
(
attrs
,
{
mute_audio
,
mute_chat
,
class_state
,
whiteboard_uid
,
...
...
@@ -1089,12 +1224,7 @@ export class RoomStore {
// let res = await this.rtmClient.updateChannelAttrsByKey(key, attrs);
// return res;
}
meUp
()
{
console
.
log
(
'
meUp!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'
)
}
meDown
()
{
console
.
log
(
'
meDown!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'
)
}
async
syncStageStudent
(
accounts
:
any
[],
studentsOrder
:
number
[])
{
debugger
let
needUpdate
=
false
;
...
...
@@ -1250,6 +1380,7 @@ export class RoomStore {
boardId
:
room
.
whiteboard_uid
,
courseState
:
room
.
class_state
,
muteChat
:
room
.
mute_chat
,
muteAudio
:
room
.
mute_audio
,
lockBoard
:
room
.
lock_board
,
currentTool
:
room
.
current_tool
})
...
...
src/utils/helper.ts
View file @
fee05a58
...
...
@@ -241,11 +241,12 @@ export function resolveChannelAttrs(json: object) {
whiteboard_uid
:
0
,
lock_board
:
0
,
grant_board
:
0
,
mute_audio
:
0
,
current_tool
:
TOOL_TYPE
.
WHITEBOARD
,
}
if
(
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
]
!==
''
)
{
room
[
key
]
=
teacherJson
[
key
];
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment