Skip to content

Commit 609bdc7

Browse files
HMarzbanHMarzban
committedAug 17, 2020
add textchat user list modal, fix video limitaion and modify style
·
v0.25.7
1 parent 777a954 commit 609bdc7

11 files changed

+174
-95
lines changed
 

‎config.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11

22
const settings = {
3-
VIDEO_CHAT_LIMIT: 4,
3+
VIDEO_CHAT_LIMIT: 2,
44
TEXT_CHAT_KEY: "WRTC:TEXT:",
55
TEXT_CHAT_LIMIT: 70
66
}
77

8+
const update = (key, val) => {
9+
if(!settings[key]) return false;
10+
settings[key] = val;
11+
return val
12+
}
13+
14+
const get = key => {
15+
if(!settings[key]) return false;
16+
return settings[key]
17+
}
18+
819
module.exports = {
9-
...settings,
10-
20+
update,
21+
get
1122
}

‎index.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
var eejs = require("ep_etherpad-lite/node/eejs/")
2+
const _ = require('lodash');
23
var settings = require("ep_etherpad-lite/node/utils/Settings")
34
let socketIo = null
45
var log4js = require("ep_etherpad-lite/node_modules/log4js")
@@ -10,11 +11,12 @@ const db = require("./server/dbRepository")
1011
// Make sure any updates to this are reflected in README
1112
var statErrorNames = ["Abort", "Hardware", "NotFound", "NotSupported", "Permission", "SecureConnection", "Unknown"]
1213

13-
let { VIDEO_CHAT_LIMIT } = require("./config")
14+
let Config = require("./config")
1415

1516
const videoChat = require("./server/videoChat")
1617
const textChat = require("./server/textChat")
1718

19+
let VIDEO_CHAT_LIMIT = Config.get("VIDEO_CHAT_LIMIT")
1820

1921
exports.socketio = function (hookName, args, cb) {
2022
socketIo = args.io
@@ -37,14 +39,14 @@ exports.socketio = function (hookName, args, cb) {
3739
if(target === "video"){
3840
room = videoChat.socketUserJoin(userData)
3941

40-
if(socket.ndHolder && !socket.ndHolder.video)
42+
if(!_.has(socket, 'ndHolder.video'))
4143
socket.ndHolder.video = {}
4244

4345
socket.ndHolder.video = room.data
4446
}else{
4547
room = textChat.socketUserJoin(userData)
4648

47-
if(socket.ndHolder && !socket.ndHolder.text)
49+
if(!_.has(socket, 'ndHolder.text'))
4850
socket.ndHolder.text = {}
4951

5052
socket.ndHolder.text = room.data
@@ -175,13 +177,13 @@ exports.clientVars = function (hook, context, callback) {
175177
}
176178

177179
if (settings.ep_wrtc_heading && settings.ep_wrtc_heading.videoChatLimit) {
178-
VIDEO_CHAT_LIMIT = settings.ep_wrtc_heading.videoChatLimit
180+
VIDEO_CHAT_LIMIT = Config.update("VIDEO_CHAT_LIMIT", settings.ep_wrtc_heading.videoChatLimit)
179181
}
180182

181183
var result = {
182184
webrtc: {
183185
version: packageJson.version,
184-
videoChatLimit: VIDEO_CHAT_LIMIT,
186+
videoChatLimit: Config.get("VIDEO_CHAT_LIMIT"),
185187
iceServers: iceServers,
186188
enabled: enabled,
187189
video: video,

‎package-lock.json

+5-25
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ep_wrtc_heading",
33
"description": "Video Headings Plugin for Etherpad",
4-
"version": "0.19.13",
4+
"version": "0.20.0",
55
"author": {
66
"name": "Hossein Marzban",
77
"email": "marzban98@gmail.com"
@@ -29,7 +29,9 @@
2929
"type": "git",
3030
"url": "https://github.com/HMarzban/ep_wrtc_heading"
3131
},
32-
"dependencies": {},
32+
"dependencies": {
33+
"lodash": "^4.17.20"
34+
},
3335
"husky": {
3436
"pre-commit": "npm run lint"
3537
}

‎server/videoChat.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
const {VIDEO_CHAT_LIMIT} = require("../config")
2+
const Config = require("../config")
33

44
// data Structure
55
// "padId:headerId": [{object}]
@@ -24,7 +24,7 @@ const socketUserJoin = data => {
2424
list: rooms[roomKey]
2525
};
2626

27-
if(info.present < VIDEO_CHAT_LIMIT){
27+
if(info.present < Config.get('VIDEO_CHAT_LIMIT')){
2828
canUserJoin = true
2929
rooms[roomKey].push(data);
3030
info.present++

‎static/css/rtcbox.css

+95
Original file line numberDiff line numberDiff line change
@@ -462,4 +462,99 @@
462462
#wrtc_textChatInputBox input{
463463
width: 100%;
464464
}
465+
.titleWrapper{
466+
display: flex;
467+
align-items: center;
468+
}
469+
.titleWrapper:hover + #textChatUserModal{
470+
display: block;
471+
}
472+
473+
#textChatUserModal:hover{
474+
display: block;
475+
476+
}
477+
#textChatUserModal{
478+
min-width: 250px;
479+
max-width: 320px;
480+
min-height: 36px;
481+
max-height: 156px;
482+
position: absolute;
483+
background: #fff;
484+
top: 25px;
485+
overflow-y: auto;
486+
left: 6px;
487+
border: 1px solid #dadce0;
488+
border-radius: 6px;
489+
box-shadow: 1px 1px 8px rgb(87, 98, 115, .1);
490+
display: none;
491+
transition: all 0.3s linear;
492+
}
493+
494+
495+
.wrtc_box .wrtc_header {
496+
overflow: hidden;
497+
display: flex;
498+
flex-direction: row;
499+
/* align-items: baseline; */
500+
width: 100%;
501+
padding: 6px 3px 2px;
502+
justify-content: start;
503+
}
504+
505+
.wrtc_box .wrtc_contentBody .wrtc_header{
506+
border-top: 1px solid #ddd;
507+
}
508+
509+
.wrtc_box .wrtc_header .btn_icon{
510+
outline: none;
511+
width: 26px;
512+
height: 26px;
513+
padding: 0 6px;
514+
margin-right: 4px;
515+
transition: all .2s linear;
516+
display: flex;
517+
align-items: center;
518+
color: #333333;
519+
}
520+
.wrtc_box .wrtc_header .btn_icon svg{
521+
width: 16px;
522+
height: 16px;
523+
}
524+
525+
.wrtc_box .wrtc_wrapper{
526+
width: 100%;
527+
display: flex;
528+
align-items: center;
529+
}
530+
531+
.wrtc_box .wrtc_contentBody .wrtc_content{
532+
min-height: 20px;
533+
padding: 6px 4px;
534+
}
535+
536+
.wrtc_box .wrtc_contentBody .wrtc_content li .avatar {
537+
width: 24px;
538+
border: 2px solid #ddd;
539+
height: 24px;
540+
border-radius: 100%;
541+
float: left;
542+
margin: 0 5px 0 0;
543+
overflow: hidden;
544+
}
545+
546+
.wrtc_box .wrtc_contentBody .wrtc_content li .avatar img{
547+
width: 100%;
548+
height: auto;
549+
}
550+
551+
.wrtc_box .wrtc_contentBody .wrtc_content ul {
552+
list-style-type: decimal;
553+
}
554+
555+
.wrtc_box .wrtc_contentBody .wrtc_content ul > li {
556+
border-right: 6px solid transparent;
557+
margin-bottom: 4px;
558+
line-height: 22px;
559+
}
465560

‎static/css/wrtcRoom.css

+2-48
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
order: -1;
44
position: relative;
55
z-index: 20;
6-
left: 40px;
6+
left: 44px;
77
overflow: hidden;
8-
width: 30px;
8+
width: 32px;
99
}
1010

1111
#wbrtc_chatBox:hover {
@@ -215,52 +215,6 @@
215215
background-color: inherit;
216216
}
217217

218-
219-
/* .wbrtc_roomBox .btn_joinChat_video:hover{
220-
color: #f44336;
221-
} */
222-
/* .wbrtc_roomBox .btn_joinChat_text:hover{
223-
color: #4caf50;
224-
} */
225-
/* .wbrtc_roomBox > .wbrtc_roomBoxFooter {
226-
padding: 8px;
227-
display: none;
228-
}
229-
230-
.wbrtc_roomBox > .wbrtc_roomBoxFooter .btn_share {
231-
border: 1px solid;
232-
padding: 5px 8px;
233-
float: right;
234-
} */
235-
236-
/* .wbrtc_roomBoxBody {
237-
padding: 8px;
238-
border-top: 1px solid #f2f3f4;
239-
border-bottom: 1px solid #f2f3f4;
240-
display: none;
241-
}
242-
243-
*/
244-
245-
/* .wbrtc_roomBox > .wbrtc_roomBoxFooter > button.active {
246-
background: #64d29b;
247-
color: #ffffff;
248-
}
249-
.wbrtc_roomBox > .wbrtc_roomBoxFooter > button.deactivate{
250-
background: #576273;
251-
}
252-
253-
254-
.wbrtc_roomBox > .wbrtc_roomBoxFooter > button {
255-
border-radius: 3px;
256-
font-family: Quicksand;
257-
font-style: normal;
258-
font-weight: bold;
259-
font-size: 10px;
260-
line-height: 9px;
261-
outline: none;
262-
} */
263-
264218
.wbrtc_roomBox .loader {
265219
border: 16px solid #f3f3f3; /* Light grey */
266220
border-top: 16px solid #3498db; /* Blue */

‎static/js/textChat.js

+20-3
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ var textChat = (function () {
8585
share.toggleRoomBtnHandler($joinBtn, "JOIN");
8686
}
8787

88-
function activateModal(headerId, headTitle, userCount) {
88+
function activateModal(headerId, headTitle, userCount, roomInfo) {
8989
if (!headerId) return false;
9090
var existTextChat = $(document).find("#wrtc_textChatWrapper");
9191

@@ -124,6 +124,9 @@ var textChat = (function () {
124124
$joinBtn.prop('disabled', false);
125125
}
126126
share.toggleRoomBtnHandler($joinBtn, "LEAVE");
127+
128+
var $textChatModalUserList = $(document).find("#wrtc_textChatWrapper #textChatUserModal ul");
129+
share.appendUserList(roomInfo, $textChatModalUserList);
127130
}
128131

129132
function addUserToRoom(data, roomInfo) {
@@ -136,9 +139,11 @@ var textChat = (function () {
136139
$(".textChatToolbar .textChat").text(userCount);
137140

138141
var $textChatUserList = $headingRoom.find('.wrtc_content.textChat ul');
139-
140142
share.appendUserList(roomInfo, $textChatUserList);
141143

144+
var $textChatModalUserList = $(document).find("#wrtc_textChatWrapper #textChatUserModal ul");
145+
share.appendUserList(roomInfo, $textChatModalUserList);
146+
142147
var user = share.getUserFromId(data.userId);
143148

144149
// notify, a user join the video-chat room
@@ -153,11 +158,21 @@ var textChat = (function () {
153158

154159
share.notifyNewUserJoined("text", msg);
155160

161+
if (data.headerId === currentRoom.headerId && data.userId !== clientVars.userId) {
162+
$.gritter.add({
163+
'text': '<span class="author-name">' + user.name + '</span>' + 'has joined the text-chat, <b><i> "' + headTitle + '"</b></i>',
164+
'sticky': false,
165+
'time': 3000,
166+
'position': 'center',
167+
'class_name': 'chat-gritter-msg'
168+
});
169+
}
170+
156171
if (data.userId === clientVars.userId) {
157172
currentRoom = data;
158173
$headingRoom.attr({ 'data-text': true });
159174
share.roomBoxIconActive();
160-
activateModal(headerId, headTitle, userCount);
175+
activateModal(headerId, headTitle, userCount, roomInfo);
161176
}
162177
}
163178

@@ -171,8 +186,10 @@ var textChat = (function () {
171186
$(".textChatToolbar .textChat").text(userCount);
172187

173188
var $textChatUserList = $headingRoom.find('.wrtc_content.textChat ul');
189+
var $textChatModalUserList = $(document).find("#wrtc_textChatWrapper #textChatUserModal ul");
174190

175191
share.appendUserList(roomInfo, $textChatUserList);
192+
share.appendUserList(roomInfo, $textChatModalUserList);
176193

177194
if (userCount === 0) {
178195
$textChatUserList.append('<li class="empty">Be the first to join the <button class="btn_joinChat_text" data-action="JOIN" data-id="' + headerId + '" data-join="text"><b>text-chat</b></button></li>');

‎static/js/videoChat.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ var videoChat = (function () {
128128
'text': '<span class="author-name">' + user.name + '</span>' + 'has joined the video-chat, <b><i> "' + headerTitle + '"</b></i>',
129129
'sticky': false,
130130
'time': 3000,
131-
'position': 'bottom',
131+
'position': 'center',
132132
'class_name': 'chat-gritter-msg'
133133
});
134134
}

‎static/js/webrtcRoom.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ var WRTC_Room = (function () {
148148
var paddingTop = share.$body_ace_outer().find('iframe[name="ace_inner"]').css('padding-top');
149149
var aceOuterPadding = parseInt(paddingTop, 10);
150150
var offsetTop = Math.ceil($element.offset().top + aceOuterPadding);
151-
return offsetTop + height / 2 - 16;
151+
return offsetTop + height / 2 - 20;
152152
}
153153

154154
function activeEventListener() {

‎templates/webrtcComponent.html

+23-5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,31 @@
22

33
<script id="wrtc_textChatBox" type="text/html">
44
<div id="wrtc_textChatWrapper" data-id="${headerId}">
5+
56
<div class="textChatToolbar">
67
<div class="nd_title">
7-
<span class="chatIcon">
8-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M416 224V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64v160c0 35.3 28.7 64 64 64v54.2c0 8 9.1 12.6 15.5 7.8l82.8-62.1H352c35.3.1 64-28.6 64-63.9zm96-64h-64v64c0 52.9-43.1 96-96 96H192v64c0 35.3 28.7 64 64 64h125.7l82.8 62.1c6.4 4.8 15.5.2 15.5-7.8V448h32c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64z"></path></svg>
9-
</span>
10-
<span class="textChat">${userCount}</span>
11-
<b data-id="${headerId}">${headTitle}</b>
8+
<div class="titleWrapper">
9+
<span class="chatIcon">
10+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M416 224V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64v160c0 35.3 28.7 64 64 64v54.2c0 8 9.1 12.6 15.5 7.8l82.8-62.1H352c35.3.1 64-28.6 64-63.9zm96-64h-64v64c0 52.9-43.1 96-96 96H192v64c0 35.3 28.7 64 64 64h125.7l82.8 62.1c6.4 4.8 15.5.2 15.5-7.8V448h32c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64z"></path></svg>
11+
</span>
12+
<span class="textChat">${userCount}</span>
13+
<b data-id="${headerId}">${headTitle}</b>
14+
</div>
15+
<div id="textChatUserModal">
16+
<div class="wrtc_box">
17+
<div class="wrtc_contentBody">
18+
<div class="wrtc_content">
19+
<ul>
20+
<li data-id="a.z97TgkCRhYO49L03" style="border-color: #b4b39a"><div class="avatar"><img src="https://s.gravatar.com/avatar/802fb1e030e0ad08ee5a6a2dd4fb81c6?s=200"></div>Hossein</li>
21+
<li data-id="a.z97TgkCRhYO49L03" style="border-color: #b4b39a"><div class="avatar"><img src="https://s.gravatar.com/avatar/802fb1e030e0ad08ee5a6a2dd4fb81c6?s=200"></div>Hossein</li>
22+
<li data-id="a.z97TgkCRhYO49L03" style="border-color: #b4b39a"><div class="avatar"><img src="https://s.gravatar.com/avatar/802fb1e030e0ad08ee5a6a2dd4fb81c6?s=200"></div>Hossein</li>
23+
<li data-id="a.z97TgkCRhYO49L03" style="border-color: #b4b39a"><div class="avatar"><img src="https://s.gravatar.com/avatar/802fb1e030e0ad08ee5a6a2dd4fb81c6?s=200"></div>Hossein</li>
24+
<li data-id="a.z97TgkCRhYO49L03" style="border-color: #b4b39a"><div class="avatar"><img src="https://s.gravatar.com/avatar/802fb1e030e0ad08ee5a6a2dd4fb81c6?s=200"></div>Hossein</li>
25+
</ul>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
1230
</div>
1331
<div class="btn_controllers">
1432

0 commit comments

Comments
 (0)
Please sign in to comment.