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
788c9a76
Commit
788c9a76
authored
Apr 08, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat:调整userstars 为频道属性
parent
441f3a6f
Changes
15
Show whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
175 additions
and
58 deletions
+175
-58
add-stars-btn.tsx
src/components/add-stars-btn.tsx
+1
-0
hands-up-icon.scss
src/components/hands-up-icon.scss
+33
-0
hands-up-icon.tsx
src/components/hands-up-icon.tsx
+43
-0
member-holder.scss
src/components/member-holder.scss
+6
-2
member-holder.tsx
src/components/member-holder.tsx
+13
-10
user-stars.tsx
src/components/user-stars.tsx
+7
-6
video-player.scss
src/components/video-player.scss
+6
-0
video-player.tsx
src/components/video-player.tsx
+8
-1
index.tsx
src/pages/classroom/index.tsx
+1
-1
small-class.scss
src/pages/classroom/small-class.scss
+1
-0
small-class.tsx
src/pages/classroom/small-class.tsx
+6
-9
home.tsx
src/pages/home.tsx
+8
-1
agora-end-points.ts
src/services/agora-end-points.ts
+7
-1
room.ts
src/stores/room.ts
+26
-18
helper.ts
src/utils/helper.ts
+9
-9
No files found.
src/components/add-stars-btn.tsx
View file @
788c9a76
...
...
@@ -61,5 +61,6 @@ export default function AddStarsButton({type, uid}: AddStarsButtonProps) {
:
null
}
</>
)
}
src/components/hands-up-icon.scss
0 → 100644
View file @
788c9a76
.hands-circle
{
width
:
32px
;
height
:
32px
;
margin-top
:
4px
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border-radius
:
16px
;
background
:
#4381f7
;
}
@keyframes
blink
{
0
%
{
opacity
:
1
;}
25
%
{
opacity
:
.5
;}
50
%
{
opacity
:
.0
;}
75
%
{
opacity
:
.5
;}
100
%
{
opacity
:
1
;}
}
.hands-btn
{
//width: 16px!important;
//height: 40px!important;
color
:
#fff
;
margin-left
:
-2px
;
}
.blink
{
//color: #dd4814;
animation
:
blink
1s
linear
infinite
;
-webkit-animation
:
blink
1s
linear
infinite
;
-moz-animation
:
blink
1s
linear
infinite
;
-ms-animation
:
blink
1s
linear
infinite
;
-o-animation
:
blink
1s
linear
infinite
;
}
src/components/hands-up-icon.tsx
0 → 100644
View file @
788c9a76
import
React
,
{
useEffect
,
useMemo
,
useRef
,
useState
}
from
'
react
'
;
import
{
useRoomState
}
from
'
../containers/root-container
'
;
import
{
isEmpty
}
from
'
lodash
'
;
import
{
roomStore
}
from
"
../stores/room
"
;
import
PanToolIcon
from
"
@material-ui/icons/PanTool
"
;
import
'
./hands-up-icon.scss
'
;
interface
UserStarsProps
{
id
?:
string
,
streamID
:
number
// stars: number
}
export
default
function
HandsUpIcon
({
id
,
streamID
}:
UserStarsProps
)
{
const
state
=
useRoomState
();
// const isHandUp = useMemo(() => {
// const hu = roomStore.state.handsUpStudents[streamID];
// console.log('HandsUpIcon', streamID, hu)
// return hu
// }, [state.handsUpStudents]);
const
isHandUp
=
useMemo
(()
=>
{
const
hu
=
roomStore
.
state
.
handsUpStudents
[
streamID
];
console
.
log
(
streamID
,
hu
)
return
hu
},
[
roomStore
.
state
.
handsUpStudents
]);
return
(
<>
{
isHandUp
?
<
div
className=
"hands-circle"
>
<
PanToolIcon
className=
'hands-btn blink'
></
PanToolIcon
>
</
div
>
:
null
}
</>
)
}
src/components/member-holder.scss
View file @
788c9a76
...
...
@@ -10,12 +10,14 @@
flex
:
1
;
}
}
/*
.hands-btn{
width: 16px!important;
height: 40px!important;
color: #dd4814;
}
/*
.medal{
.medal{
width: 16px;
z-index: 99;
background-size: contain;
...
...
@@ -57,7 +59,7 @@
/*
@keyframes blink{
0%{opacity: 1;}
25%{opacity: .5;}
...
...
@@ -74,6 +76,8 @@
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
}
*/
.holder-avatar
{
width
:
40px
!
important
;
height
:
40px
!
important
;
...
...
src/components/member-holder.tsx
View file @
788c9a76
...
...
@@ -11,6 +11,7 @@ import {roomStore} from "../stores/room";
import
UserStars
from
"
./user-stars
"
;
import
{
eventBus
}
from
"
../stores/EventBus
"
;
import
AddStarsButton
,
{
StarsButtonType
}
from
'
./add-stars-btn
'
;
import
HandsUpIcon
from
"
./hands-up-icon
"
;
const
contentMode
=
0
;
interface
MemberHolderProps
{
...
...
@@ -116,11 +117,11 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
}, [domId, stream]);
*/
const
isHandUp
=
useMemo
(()
=>
{
const
hu
=
roomStore
.
state
.
handsUpStudents
[
streamID
];
console
.
log
(
streamID
,
hu
)
return
hu
},
[
roomStore
.
state
.
handsUpStudents
]);
//
const isHandUp = useMemo(() => {
//
const hu = roomStore.state.handsUpStudents[streamID];
//
console.log(streamID, hu)
//
return hu
//
}, [roomStore.state.handsUpStudents]);
useEffect
(()
=>
{
if
(
stream
&&
platform
===
'
web
'
)
{
...
...
@@ -247,15 +248,17 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
<
div
className=
"user-profile"
>
<
span
className=
"account"
>
{
account
}
</
span
>
{
/*me.uid === id ||*/
}
<
UserStars
id=
{
id
}
streamID=
{
streamID
}
></
UserStars
>
{
me
.
role
===
'
teacher
'
?
<
span
className=
"media-btn"
>
{
{
/*
isHandUp ?
<PanToolIcon className='hands-btn blink'></PanToolIcon>:
<div className='hands-btn'></div>
}
*/
}
<
HandsUpIcon
id=
{
id
}
streamID=
{
streamID
}
></
HandsUpIcon
>
<
UserStars
id=
{
id
}
streamID=
{
streamID
}
></
UserStars
>
{
/*<Link component="button" onClick={onAudioClick}>{audio ? "静音" : "开麦"}</Link>*/
}
{
me
.
role
===
'
teacher
'
?
<>
...
...
@@ -266,7 +269,7 @@ const MemberHolder: React.FC<MemberHolderProps> = ({
:
null
}
{
/*<Icon onClick={onAudioClick} className={audio ? "icon-speaker-on" : "icon-speaker-off"} data={"audio"} />*/
}
{
/*<Icon onClick={onVideoClick} className={video ? "icons-camera-unmute-s" : "icons-camera-mute-s"} data={"video"} />*/
}
</
span
>
:
null
}
</
span
>
:
<
UserStars
id=
{
id
}
streamID=
{
streamID
}
></
UserStars
>
}
</
div
>
:
null
}
</
div
>
...
...
src/components/user-stars.tsx
View file @
788c9a76
...
...
@@ -17,20 +17,22 @@ export default function UserStars({id, streamID}: UserStarsProps) {
useEffect
(()
=>
{
console
.
log
(
'
roomStore.state.userStars change, streamID
'
,
streamID
)
if
(
streamID
)
{
const
u
=
roomStore
.
state
.
users
.
get
(
`
${
streamID
}
`
)
if
(
u
)
{
console
.
log
(
'
u.stars
'
,
u
.
stars
);
setStar
(
u
.
stars
||
0
);
// const u = roomStore.state.users.get(`${streamID}`)
const
num
=
roomStore
.
state
.
userStars
[
`
${
streamID
}
`
];
if
(
num
)
{
console
.
log
(
'
u.stars
'
,
num
);
setStar
(
num
||
0
);
}
}
// setStar()
},
[
roomStore
.
state
.
users
]);
},
[
roomStore
.
state
.
user
Star
s
]);
return
(
// <></>
<
div
className=
'star'
>
<
div
className=
"medal"
></
div
>
<
div
className=
"medal-bg"
>
...
...
@@ -38,7 +40,6 @@ export default function UserStars({id, streamID}: UserStarsProps) {
{
star
}
</
span
>
</
div
>
</
div
>
)
}
src/components/video-player.scss
View file @
788c9a76
...
...
@@ -13,6 +13,12 @@
border
:
0
;
}
}
.hands-wrapper
{
position
:
absolute
;
right
:
4px
;
top
:
0
;
z-index
:
12
;
}
.media-btn
>
.icon.disabled
{
cursor
:
not
-
allowed
;
}
...
...
src/components/video-player.tsx
View file @
788c9a76
...
...
@@ -13,6 +13,7 @@ import {eventBus} from "../stores/EventBus";
// import EmojiEventsOutlinedIcon from '@material-ui/icons/EmojiEventsOutlined';
import
UserStars
from
'
./user-stars
'
;
import
AddStarsButton
,
{
StarsButtonType
}
from
"
./add-stars-btn
"
;
import
HandsUpIcon
from
"
./hands-up-icon
"
;
const
useStyles
=
makeStyles
({
stageDown
:
{
...
...
@@ -372,7 +373,13 @@ return (
account
?
<>
{
streamID
>
0
&&
id
!=
teacherId
?
<>
<
UserStars
id=
{
id
}
streamID=
{
streamID
}
></
UserStars
>
<
div
className=
"hands-wrapper"
>
<
HandsUpIcon
id=
{
id
}
streamID=
{
streamID
}
></
HandsUpIcon
>
</
div
>
</>
/*<div className='star'>
<div className="medal"></div>
<div className="medal-bg">
...
...
src/pages/classroom/index.tsx
View file @
788c9a76
...
...
@@ -147,7 +147,7 @@ export function RoomPage({ children }: any) {
dialogLock
.
current
=
true
;
let
titleTxt
=
'
全部学生
'
if
(
data
.
uid
)
{
const
stu
=
roomStore
.
state
.
users
.
get
(
data
.
uid
);
const
stu
=
roomStore
.
state
.
users
.
get
(
`
${
data
.
uid
}
`
);
titleTxt
=
`学生:
${
stu
?.
account
}
`
}
...
...
src/pages/classroom/small-class.scss
View file @
788c9a76
...
...
@@ -46,6 +46,7 @@
.hands_up.disabled
{
background
:
#dbe2e5
;
}
.video-marquee-container
{
display
:
flex
;
min-width
:
990px
;
...
...
src/pages/classroom/small-class.tsx
View file @
788c9a76
...
...
@@ -100,15 +100,12 @@ export default function SmallClass() {
?
<
MediaBoard
/>
:
<
CourseWareFrame
></
CourseWareFrame
>
}
{
roomStore
.
state
.
me
.
role
===
'
student
'
&&
!
roomState
.
studentsOrder
.
includes
(
+
roomStore
.
state
.
me
.
uid
)
?
<>
<
Icon
data=
'hands_up'
onClick=
{
handleClick
}
className=
{
`items hands_up ${false ? 'active' : ''}`
}
/>
</>
:
null
}
{
/*{ roomStore.state.me.role == 'teacher' ? <Roomboard currentActive={'media'} /> : null}*/
}
</
div
>
...
...
src/pages/home.tsx
View file @
788c9a76
...
...
@@ -130,7 +130,14 @@ function HomePage() {
console
.
log
(
userInfo
);
session
.
roomName
=
userInfo
[
"
class_id
"
];
// userInfo["class_id"];
// session.yourName = userInfo["nick_name"];
session
.
role
=
userInfo
[
"
classRole
"
]
===
"
tea
"
?
"
teacher
"
:
"
student
"
if
(
userInfo
[
"
classRole
"
]
===
"
tea
"
)
{
session
.
role
=
"
teacher
"
}
else
if
(
userInfo
[
"
classRole
"
]
===
"
developer
"
){
session
.
role
=
"
developer
"
}
else
{
session
.
role
=
"
student
"
}
// session.role = userInfo["classRole"]==="tea"?"teacher":"student"
session
.
roomType
=
1
;
if
(
!
roomTypes
[
session
.
roomType
])
return
;
...
...
src/services/agora-end-points.ts
View file @
788c9a76
import
{
AgoraFetch
}
from
"
../utils/fetch
"
;
import
jwt_decode
from
'
jwt-decode
'
;
import
{
roomStore
}
from
"
../stores/room
"
;
import
GlobalStorage
from
"
../utils/custom-storage
"
;
const
ENDPOINT
:
string
=
process
.
env
.
REACT_APP_AGORA_ENDPOINT
as
string
;
...
...
@@ -44,6 +45,7 @@ export interface RoomParams {
}
export
function
goHome
(
history
:
any
){
GlobalStorage
.
clear
(
'
agora_room
'
);
window
.
location
.
href
=
'
http://iteachabc.com
'
}
export
function
goLogin
(){
...
...
@@ -110,7 +112,7 @@ export class EndPoint {
async
login
(
data
:
any
,
local
=
false
)
{
if
(
local
)
{
return
{
const
info
=
{
id
:
`
${
data
.
username
}
`
,
class_id
:
`
${
data
.
classid
}
`
,
classRole
:
(
`
${
data
.
username
}
`
===
"
1
"
||
`
${
data
.
username
}
`
===
"
11
"
)?
"
tea
"
:
""
,
...
...
@@ -119,6 +121,10 @@ export class EndPoint {
// data.username: session.yourName,
// data.password: session.yourPass
}
if
(
data
.
username
.
startsWith
(
'
dev
'
))
{
info
.
classRole
=
'
developer
'
}
return
info
;
}
const
host
=
getApiServerHost
(
true
);
let
url
=
`
${
host
}
/api/login`
;
...
...
src/stores/room.ts
View file @
788c9a76
...
...
@@ -146,7 +146,7 @@ export type RoomState = {
messages
:
List
<
ChatMessage
>
studentsOrder
:
number
[]
userUsage
:
userUsageType
,
//
userStars: userStarsType,
userStars
:
userStarsType
,
handsUpStudents
:
handsUpUser
,
// immuMap<number, any>
cwLink
:
string
,
}
...
...
@@ -233,7 +233,7 @@ export class RoomStore {
messages
:
List
<
ChatMessage
>
(),
studentsOrder
:
[],
userUsage
:
{},
//
userStars:{},
userStars
:{},
handsUpStudents
:
{},
// immuMap<number, any>(),
...
GlobalStorage
.
read
(
'
agora_room
'
)
});
...
...
@@ -363,17 +363,18 @@ export class RoomStore {
const
data
=
{
star
:
value
,
users
:
[]};
console
.
log
(
'
addStarToUser
'
,
uid
,
value
);
const
stuChannelData
:
any
=
{};
//
const userStars = {...this.state.userStars};
const
userStars
=
{...
this
.
state
.
userStars
};
if
(
uid
!==
0
)
{
const
stu
=
this
.
state
.
users
.
get
(
`
${
uid
}
`
);
(
data
.
users
as
number
[]).
push
(
uid
)
let
uStar
=
0
;
if
(
stu
)
{
uStar
=
stu
.
stars
;
uStar
=
userStars
[
`
${
uid
}
`
];
//
stu.stars;
if
(
!
uStar
||
isNaN
(
uStar
))
{
uStar
=
0
;
}
stu
.
stars
=
uStar
+
value
;
// stu.stars = uStar + value;
userStars
[
`
${
uid
}
`
]
=
uStar
+
value
;
stuChannelData
[
uid
]
=
stu
}
...
...
@@ -381,18 +382,25 @@ export class RoomStore {
}
else
{
this
.
state
.
users
.
forEach
((
u
,
_uid
)
=>
{
if
(
u
.
role
===
'
student
'
)
{
(
data
.
users
as
number
[]).
push
(
+
_uid
)
u
.
stars
=
u
.
stars
+
value
;
(
data
.
users
as
number
[]).
push
(
+
_uid
);
let
uStar
=
userStars
[
`
${
_uid
}
`
];
//stu.stars;
if
(
!
uStar
||
isNaN
(
uStar
))
{
uStar
=
0
;
}
// u.stars = u.stars + value;
userStars
[
`
${
_uid
}
`
]
=
uStar
+
value
;
stuChannelData
[
_uid
]
=
u
}
})
}
try
{
const
host
=
getApiServerHost
(
true
);
var
blob
=
new
Blob
([
JSON
.
stringify
(
data
)],
{
type
:
'
text/plain
'
});
navigator
.
sendBeacon
(
`
${
host
}
/api/classroom/stars`
,
blob
);
}
catch
(
e
){}
// this.state = {
// ...this.state,
...
...
@@ -400,6 +408,7 @@ export class RoomStore {
// }
console
.
log
(
stuChannelData
)
if
(
Object
.
keys
(
stuChannelData
).
length
>
0
)
{
stuChannelData
[
'
userStars
'
]
=
userStars
;
await
this
.
rtmClient
.
addOrUpdateChannelAttributes
(
stuChannelData
);
}
}
...
...
@@ -422,7 +431,7 @@ export class RoomStore {
async
studentHandsUp
(
uid
:
number
)
{
const
hu
=
this
.
state
.
handsUpStudents
[
uid
];
if
(
!
hu
&&
!
this
.
state
.
studentsOrder
.
includes
(
uid
))
{
// !hu && !this.state.studentsOrder.includes(uid)
const
handleId
=
setTimeout
(()
=>
{
this
.
cancelHandsUp
(
uid
);
},
8000
);
...
...
@@ -434,7 +443,6 @@ export class RoomStore {
};
await
this
.
commit
(
this
.
state
);
}
}
testStudentsOrder
()
{
console
.
log
(
'
studentsOrder
'
,
this
.
state
.
studentsOrder
);
console
.
log
(
'
studentsOrderTs
'
,
studentsOrderTs
);
...
...
@@ -1656,7 +1664,7 @@ export class RoomStore {
}
async
updateRoomAttrs
({
teacher
,
accounts
,
room
,
studentsOrder
/*, userStars*/
}:
{
teacher
:
any
,
accounts
:
any
,
room
:
any
,
studentsOrder
:
number
[]
/*, userStars: any*/
})
{
async
updateRoomAttrs
({
teacher
,
accounts
,
room
,
studentsOrder
,
userStars
}:
{
teacher
:
any
,
accounts
:
any
,
room
:
any
,
studentsOrder
:
number
[],
userStars
:
any
})
{
console
.
log
(
"
[agora-board], room:
"
,
teacher
,
accounts
,
room
,
studentsOrder
);
const
currentRoomUsers
=
this
.
state
.
users
.
toArray
();
const
exitUserIds
=
[];
...
...
@@ -1797,7 +1805,7 @@ export class RoomStore {
...
newClassState
},
// studentsOrder: newStudentsOrder
//
userStars
userStars
}
console
.
log
(
'
update orders?
'
,
cos
,
uos
)
if
(
cos
!=
uos
)
{
...
...
@@ -1902,10 +1910,10 @@ export class RoomStore {
}
catch
(
e
)
{}
const
webClient
=
roomStore
.
rtcClient
as
AgoraWebClient
;
setTimeout
(()
=>
{
//
setTimeout(()=>{
// alert('clear2')
GlobalStorage
.
clear
(
'
agora_room
'
);
})
//
})
await
this
.
removeRtcListener
();
// await this.rtcClient.exit();
...
...
src/utils/helper.ts
View file @
788c9a76
...
...
@@ -266,14 +266,14 @@ export function resolveChannelAttrs(json: object) {
}
delete
(
json
as
any
).
studentsOrder
;
//
let userStars: any = {};
//
if ((json as any).userStars && (json as any).userStars.value) {
//
userStars = JSON.parse((json as any).userStars.value) || [];
//
Object.keys(userStars).forEach(k => {
//
userStars[k] = +userStars[k];
//
})
//
}
//
delete (json as any).userStars;
let
userStars
:
any
=
{};
if
((
json
as
any
).
userStars
&&
(
json
as
any
).
userStars
.
value
)
{
userStars
=
JSON
.
parse
((
json
as
any
).
userStars
.
value
)
||
[];
Object
.
keys
(
userStars
).
forEach
(
k
=>
{
userStars
[
k
]
=
+
userStars
[
k
];
})
}
delete
(
json
as
any
).
userStars
;
const
teacherJson
=
jsonParse
(
_
.
get
(
json
,
'
teacher.value
'
));
...
...
@@ -365,7 +365,7 @@ export function resolveChannelAttrs(json: object) {
accounts
,
room
,
studentsOrder
,
//
userStars
userStars
};
}
...
...
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