Adds more details about used Emojis

This commit is contained in:
Gustavo Trott 2021-08-11 14:46:44 -03:00
parent 73b5b2d046
commit dc2611632a
5 changed files with 409 additions and 34 deletions

View File

@ -32,10 +32,9 @@ case class UserActivityTracker(
name: String,
answers: Map[String,String] = Map(),
talk: Talk = Talk(),
emojis: Vector[Emoji] = Vector(),
webcams: Vector[Webcam] = Vector(),
totalOfMessages: Long = 0,
totalOfRaiseHands: Long = 0,
totalOfEmojis: Long = 0,
registeredOn: Long = System.currentTimeMillis(),
leftOn: Long = 0,
)
@ -55,6 +54,11 @@ case class Talk(
lastTalkStartedOn: Long = 0,
)
case class Emoji(
name: String,
sentOn: Long = System.currentTimeMillis(),
)
case class Webcam(
startedOn: Long = System.currentTimeMillis(),
stoppedOn: Long = 0,
@ -175,13 +179,8 @@ class ActivityTrackerActor(
meeting <- meetings.values.find(m => m.intId == msg.header.meetingId)
user <- meeting.users.values.find(u => u.intId == msg.body.userId)
} yield {
if (msg.body.emoji == "raiseHand") {
val updatedUser = user.copy(totalOfRaiseHands = user.totalOfRaiseHands + 1)
val updatedMeeting = meeting.copy(users = meeting.users + (updatedUser.intId -> updatedUser))
meetings += (updatedMeeting.intId -> updatedMeeting)
} else if (msg.body.emoji != "none") {
val updatedUser = user.copy(totalOfEmojis = user.totalOfEmojis + 1)
if (msg.body.emoji != "none") {
val updatedUser = user.copy(emojis = user.emojis :+ Emoji(msg.body.emoji))
val updatedMeeting = meeting.copy(users = meeting.users + (updatedUser.intId -> updatedUser))
meetings += (updatedMeeting.intId -> updatedMeeting)
@ -384,6 +383,7 @@ class ActivityTrackerActor(
//Avoid send repeated activity jsons
val activityJsonHash : String = MessageDigest.getInstance("MD5").digest(activityJson.getBytes).mkString
if(!meetingsLastJsonHash.contains(meeting.intId) || meetingsLastJsonHash.get(meeting.intId).getOrElse("") != activityJsonHash) {
val event = MsgBuilder.buildActivityReportEvtMsg(meeting.intId, activityJson)
outGW.send(event)

View File

@ -1,5 +1,6 @@
import React from 'react';
import './App.css';
import './bbb-icons.css';
import { FormattedMessage, FormattedDate, injectIntl } from 'react-intl';
import Card from './components/Card';
import UsersTable from './components/UsersTable';
@ -42,7 +43,7 @@ class App extends React.Component {
function totalOfRaiseHand() {
if (activitiesJson && activitiesJson.users) {
return Object.values(activitiesJson.users)
.reduce((prevVal, elem) => prevVal + elem.totalOfRaiseHands, 0);
.reduce((prevVal, elem) => prevVal + elem.emojis.filter((emoji) => emoji.name === 'raiseHand').length, 0);
}
return 0;
}

View File

@ -0,0 +1,322 @@
@font-face {
font-family: 'bbb-icons';
src: url('./fonts/BbbIcons/bbb-icons.woff') format('woff');
font-weight: normal;
font-style: normal;
}
[class^="icon-bbb-"], [class*=" icon-bbb-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'bbb-icons' !important;
speak: none;
position: relative;
/*top: 1px;*/
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
text-align: center;
vertical-align: middle;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bbb-screenshare-fullscreen:before {
content: "\e92a";
}
.icon-bbb-screenshare-close-fullscreen:before {
content: "\e935";
}
.icon-bbb-alert:before {
content: "\e958";
}
.icon-bbb-mute:before {
content: "\e932";
}
.icon-bbb-unmute:before {
content: "\e931";
}
.icon-bbb-file:before {
content: "\e92e";
}
.icon-bbb-upload:before {
content: "\e92f";
}
.icon-bbb-fullscreen:before {
content: "\e92a";
}
.icon-bbb-exit_fullscreen:before {
content: "\e935";
}
.icon-bbb-settings:before {
content: "\e92b";
}
.icon-bbb-fit_to_screen:before {
content: "\e929";
}
.icon-bbb-line_tool:before {
content: "\e91c";
}
.icon-bbb-circle_tool:before {
content: "\e91d";
}
.icon-bbb-triangle_tool:before {
content: "\e91e";
}
.icon-bbb-rectangle_tool:before {
content: "\e91f";
}
.icon-bbb-text_tool:before {
content: "\e920";
}
.icon-bbb-plus:before {
content: "\e921";
}
.icon-bbb-fit_to_width:before {
content: "\e922";
}
.icon-bbb-undo:before {
content: "\e924";
}
.icon-bbb-pen_tool:before {
content: "\e925";
}
.icon-bbb-lock:before {
content: "\e926";
}
.icon-bbb-polling:before {
content: "\e927";
}
.icon-bbb-desktop:before {
content: "\e928";
}
.icon-bbb-logout:before {
content: "\e900";
}
.icon-bbb-video:before {
content: "\e930";
}
.icon-bbb-elipsis:before {
content: "\e902";
}
.icon-bbb-more:before {
content: "\e902";
display: inline-block;
transform: rotate(90deg);
}
.icon-bbb-promote:before {
content: "\e903";
}
.icon-bbb-application:before {
content: "\e901";
}
.icon-bbb-video_off:before {
content: "\e904";
}
.icon-bbb-user:before {
content: "\e905";
}
.icon-bbb-up_arrow:before {
content: "\e906";
}
.icon-bbb-right_arrow:before {
content: "\e90a";
}
.icon-bbb-presentation:before {
content: "\e90b";
}
.icon-bbb-listen:before {
content: "\e90c";
}
.icon-bbb-left_arrow:before {
content: "\e90d";
}
.icon-bbb-group_chat:before {
content: "\e910";
}
.icon-bbb-close:before {
content: "\e912";
}
.icon-bbb-clear_status:before {
content: "\e913";
}
.icon-bbb-circle:before {
content: "\e914";
}
.icon-bbb-substract:before {
content: "\e915";
}
.icon-bbb-circle_close:before {
content: "\e916";
}
.icon-bbb-add:before {
content: "\e917";
}
.icon-bbb-check:before {
content: "\e918";
}
.icon-bbb-chat:before {
content: "\e919";
}
.icon-bbb-audio_on:before {
content: "\e91a";
}
.icon-bbb-audio_off:before {
content: "\e91b";
}
.icon-bbb-volume_down:before {
content: "\e947";
}
.icon-bbb-volume_mute:before {
content: "\e947";
}
.icon-bbb-volume_off:before {
content: "\e947";
}
.icon-bbb-volume_up:before {
content: "\e947";
}
/* Aliases for emoji status */
.icon-bbb-time:before {
content: "\e908";
}
.icon-bbb-hand:before {
content: "\e90f";
}
.icon-bbb-undecided:before {
content: "\e907";
}
.icon-bbb-happy:before {
content: "\e90e";
}
.icon-bbb-sad:before {
content: "\e909";
}
.icon-bbb-confused:before {
content: "\e911";
}
.icon-bbb-applause:before {
content: "\e923";
}
.icon-bbb-thumbs_up:before {
content: "\e92d";
}
.icon-bbb-thumbs_down:before {
content: "\e92c";
}
.icon-bbb-send:before {
content: "\e934";
}
.icon-bbb-about:before {
content: "\e933";
}
.icon-bbb-delete:before {
content: "\e936";
}
.icon-bbb-unmute_filled:before {
content: "\e937";
}
.icon-bbb-mute_filled:before {
content: "\e938";
}
.icon-bbb-listen_filled:before {
content: "\e939";
}
.icon-bbb-template_upload:before {
content: "\e93a";
}
.icon-bbb-template_download:before {
content: "\e93b";
}
.icon-bbb-download:before {
content: "\e93c";
}
.icon-bbb-multi_whiteboard:before {
content: "\e93d";
}
.icon-bbb-whiteboard:before {
content: "\e93e";
}
.icon-bbb-rooms:before {
content: "\e93f";
}
.icon-bbb-unlock:before {
content: "\e940";
}
.icon-bbb-record:before {
content: "\e941";
}
.icon-bbb-network:before {
content: "\e942";
}
.icon-bbb-redo:before {
content: "\e943";
}
.icon-bbb-thumbs_down_filled:before {
content: "\e944";
}
.icon-bbb-thumbs_up_filled:before {
content: "\e945";
}
.icon-bbb-checkmark:before {
content: "\e946";
}
.icon-bbb-speak_louder:before {
content: "\e947";
}
.icon-bbb-help:before {
content: "\e948";
}
.icon-bbb-refresh:before {
content: "\e949";
}
.icon-bbb-copy:before {
content: "\e94a";
}
.icon-bbb-shortcuts:before {
content: "\e94b";
}
.icon-bbb-warning:before {
content: "\e94c";
}
.icon-bbb-pointer:before {
content: "\e950";
}
.icon-bbb-star_filled:before {
content: "\e952";
}
.icon-bbb-desktop_off:before {
content: "\e953";
}
.icon-bbb-minus:before {
content: "\e954";
}
.icon-bbb-download-off:before {
content: "\e955";
}
.icon-bbb-popout_window:before {
content: "\e956";
}
.icon-bbb-closed_caption:before {
content: "\e957";
}
/*\e958 -> icon-bbb-alert*/
.icon-bbb-palm_rejection:before {
content: "\e959";
}
.icon-bbb-no_palm_rejection:before {
content: "\e95a";
}
.icon-bbb-device_list_selector:before {
content: "\e95b";
}

View File

@ -40,7 +40,7 @@ class UsersTable extends React.Component {
<th className="px-4 py-3 text-center">
<FormattedMessage id="app.learningDashboard.participantsTable.colMessages" defaultMessage="Messages" />
</th>
<th className="px-4 py-3 text-center">
<th className="px-4 py-3 text-left">
<FormattedMessage id="app.learningDashboard.participantsTable.colEmojis" defaultMessage="Emojis" />
</th>
<th className="px-4 py-3 text-center">
@ -230,30 +230,82 @@ class UsersTable extends React.Component {
</span>
) : null }
</td>
<td className="px-4 py-3 text-sm text-center">
{ user.totalOfEmojis > 0
? (
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 mr-1 inline"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
{user.totalOfEmojis}
</span>
) : null }
<td className="px-4 py-3 text-sm text-left">
{ user.emojis.filter((emoji) => emoji.name === 'away').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-time text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'away').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.awayLabel" defaultMessage="Away" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'neutral').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-undecided text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'neutral').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.neutralLabel" defaultMessage="Undecided" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'confused').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-undecided text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'confused').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.confusedLabel" defaultMessage="Confused" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'sad').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-sad text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'sad').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.sadLabel" defaultMessage="Sad" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'happy').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-happy text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'happy').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.happyLabel" defaultMessage="Happy" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'applause').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-applause text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'applause').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.applauseLabel" defaultMessage="Applaud" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'thumbsUp').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-thumbs_up text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'thumbsUp').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.thumbsUpLabel" defaultMessage="Thumbs up" />
</div>
) : null}
{ user.emojis.filter((emoji) => emoji.name === 'thumbsDown').length > 0 ? (
<div className="text-xs">
<i className="icon-bbb-thumbs_down text-sm" />
&nbsp;
{user.emojis.filter((emoji) => emoji.name === 'thumbsDown').length}
&nbsp;
<FormattedMessage id="app.actionsBar.emojiMenu.thumbsDownLabel" defaultMessage="Thumbs down" />
</div>
) : null}
</td>
<td className="px-4 py-3 text-sm text-center">
{ user.totalOfRaiseHands > 0
{ user.emojis.filter((emoji) => emoji.name === 'raiseHand').length > 0
? (
<span>
<svg
@ -270,7 +322,7 @@ class UsersTable extends React.Component {
d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11"
/>
</svg>
{user.totalOfRaiseHands}
{user.emojis.filter((emoji) => emoji.name === 'raiseHand').length}
</span>
) : null }
</td>

Binary file not shown.