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
dd6f71f4
Commit
dd6f71f4
authored
Feb 12, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加iframe和白板功能同步
parent
e728e9dd
Changes
11
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
287 additions
and
42 deletions
+287
-42
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
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
+140
-11
helper.ts
src/utils/helper.ts
+2
-1
No files found.
src/components/room-tools-bar.scss
0 → 100644
View file @
dd6f71f4
.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 @
dd6f71f4
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 @
dd6f71f4
...
@@ -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
>
{
{
...
...
src/components/whiteboard.scss
View file @
dd6f71f4
...
@@ -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
;
...
...
src/hooks/use-streams.ts
View file @
dd6f71f4
...
@@ -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
;
},
[
},
[
...
...
src/pages/classroom/index.tsx
View file @
dd6f71f4
...
@@ -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
'
);
...
...
src/pages/classroom/small-class.tsx
View file @
dd6f71f4
...
@@ -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
>
)
)
...
...
src/pages/home.tsx
View file @
dd6f71f4
...
@@ -80,6 +80,7 @@ function HomePage() {
...
@@ -80,6 +80,7 @@ function HomePage() {
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
,
...
...
src/services/agora-end-points.ts
View file @
dd6f71f4
...
@@ -78,7 +78,7 @@ export class EndPoint {
...
@@ -78,7 +78,7 @@ export class EndPoint {
}
}
getCourseUrl
(){
getCourseUrl
(){
return
`
${
ENDPOINT
}
/airclass_ol?token=
${
this
.
userToken
}
`
;
return
`
http://staging-ac.ireadabc.com
/airclass_ol?token=
${
this
.
userToken
}
`
;
}
}
async
config
()
{
async
config
()
{
...
...
src/stores/room.ts
View file @
dd6f71f4
...
@@ -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,20 @@ export class RoomStore {
...
@@ -430,6 +511,20 @@ 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)
this
.
stageUp
(
`
${
upUser
.
uid
}
`
)
}
async
setCurrentTool
(
tool
:
TOOL_TYPE
)
{
async
setCurrentTool
(
tool
:
TOOL_TYPE
)
{
this
.
state
=
{
this
.
state
=
{
...
@@ -820,7 +915,7 @@ export class RoomStore {
...
@@ -820,7 +915,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 +1044,19 @@ export class RoomStore {
...
@@ -949,8 +1044,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里的监听来触发发布
if
(
!
this
.
state
.
rtc
.
joined
)
{
this
.
setRTCJoined
(
true
);
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 +1119,7 @@ export class RoomStore {
...
@@ -1013,6 +1119,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 +1136,33 @@ export class RoomStore {
...
@@ -1029,9 +1136,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 +1194,14 @@ export class RoomStore {
...
@@ -1063,12 +1194,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 +1222,7 @@ export class RoomStore {
...
@@ -1089,12 +1222,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 +1378,7 @@ export class RoomStore {
...
@@ -1250,6 +1378,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
})
})
...
...
src/utils/helper.ts
View file @
dd6f71f4
...
@@ -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
];
...
...
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