Change report flag

- Add icon on video
- Permit to have a modal with comment
This commit is contained in:
Gregoire Parant 2020-10-13 19:56:42 +02:00
parent 65406f844e
commit dbaf44e814
9 changed files with 164 additions and 37 deletions

View File

@ -543,13 +543,11 @@ export class IoSocketController {
private handleReportMessage(client: ExSocketInterface, reportPlayerMessage: ReportPlayerMessage) {
try {
let reportedSocket = this.sockets.get(reportPlayerMessage.getReporteduserid());
const reportedSocket = this.sockets.get(reportPlayerMessage.getReporteduserid());
if (!reportedSocket) {
throw 'reported socket user not found';
}
//TODO report user on admin application
console.log('ADMIN_API_URL', ADMIN_API_URL);
console.log('ADMIN_API_TOKEN', ADMIN_API_TOKEN);
Axios.post(`${ADMIN_API_URL}/aoi/report`, {
reportedUserUuid: client.userUuid,
reportedUserComment: reportPlayerMessage.getReportcomment(),
@ -558,7 +556,6 @@ export class IoSocketController {
{
headers: {"Authorization": `${ADMIN_API_TOKEN}`}
}).catch((err) => {
console.error(err);
throw err;
});
} catch (e) {
@ -911,7 +908,7 @@ export class IoSocketController {
* @param token
*/
searchClientByUuid(uuid: string): ExSocketInterface | null {
for(let socket of this.sockets.values()){
for(const socket of this.sockets.values()){
if(socket.userUuid === uuid){
return socket;
}
@ -920,7 +917,7 @@ export class IoSocketController {
}
public teleport(userUuid: string) {
let user = this.searchClientByUuid(userUuid);
const user = this.searchClientByUuid(userUuid);
if(!user){
throw 'User not found';
}

1
front/dist/resources/logos/close.svg vendored Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M512,84.85,427.15,0,256,171.15,84.85,0,0,84.85,171.15,256,0,427.15,84.85,512,256,340.85,427.15,512,512,427.15,340.85,256Z" transform="translate(0 0)"/></svg>

After

Width:  |  Height:  |  Size: 319 B

1
front/dist/resources/logos/report.svg vendored Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.48 56.48"><defs><style>.cls-1{fill:#e76e54;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M39.94,512H16.54L0,495.46v-23.4l16.54-16.54h23.4l16.54,16.54v23.4Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M33.54,485.52H23l-1.77-21.18H35.3Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M23,492.58H33.54v10.59H23Z" transform="translate(0 -455.52)"/></svg>

After

Width:  |  Height:  |  Size: 477 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 447 B

View File

@ -56,6 +56,12 @@ body .message-info.warning{
padding: 10px;
z-index: 2;
}
.video-container img.report{
right: 5px;
left: auto;
}
.video-container video{
height: 100%;
}
@ -568,3 +574,73 @@ body {
color: white;
margin-left: 10px;
}
/*REPORT input*/
div.modal-report-user{
position: absolute;
width: 800px;
height: 600px;
left: calc(50% - 400px);
top: calc(50% - 100px);
background-color: #000000ad;
}
.modal-report-user textarea{
position: absolute;
width: 400px;
height: 200px;
z-index: 999;
left: calc(50% - 200px);
top: calc(50% - 100px);
background-color: #00000052;
color: white;
}
.modal-report-user img{
position: absolute;
height: 50px;
width: 50px;
z-index: 999;
left: calc(50% - 25px);
top: calc(50% - 250px);
}
.modal-report-user img#cancel-report-user{
position: absolute;
z-index: 999;
right: 0;
left: auto;
top: 0;
cursor: pointer;
width: 15px;
height: 15px;
}
.modal-report-user button{
position: absolute;
top: calc(50% + 200px);
left: calc(50% - 50px);
width: 100px;
border: 1px solid black;
background-color: #00000000;
color: #ffda01;
border-radius: 10px;
padding: 10px 30px;
transition: all .2s ease;
}
.modal-report-user button:hover{
cursor: pointer;
background-color: #ffda01;
color: black;
border: 1px solid black;
transform: scale(1.1);
}
.modal-report-user p{
font-size: 30px;
color: white;
position: absolute;
top: 90px;
width: 100%;
text-align: center;
}

View File

@ -8,7 +8,6 @@ import {Sprite} from "./Sprite";
*/
export class RemotePlayer extends Character {
userId: number;
private report: Sprite;
constructor(
userId: number,
@ -24,28 +23,6 @@ export class RemotePlayer extends Character {
//set data
this.userId = userId;
this.report = new Sprite(Scene, 20, -10, 'report_flag', 3);
this.report.setInteractive();
this.report.visible = false;
this.report.on('pointerup', () => {
//this.scene.events.emit('reportUser', {reportedUserId: userId, reportComment: comment});
this.scene.events.emit('reportUser', {reportedUserId: this.userId, reportComment: 'test'});
this.report.visible = false;
});
this.add(this.report);
this.sprites.forEach((sprite: Sprite) => {
sprite.on('pointerover', () => {
this.report.visible = true;
});
sprite.on('pointerup', () => {
this.report.visible = true;
});
})
//the current player model should be push away by other players to prevent conflict
//this.setImmovable(false);
}
updatePosition(position: PointInterface): void {

View File

@ -10,6 +10,7 @@ const videoConstraint: boolean|MediaTrackConstraints = {
export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
export type StartScreenSharingCallback = (media: MediaStream) => void;
export type StopScreenSharingCallback = (media: MediaStream) => void;
export type ReportCallback = (message: string) => void;
// TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
// TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!)
@ -36,7 +37,6 @@ export class MediaManager {
private cinemaBtn: HTMLDivElement;
private monitorBtn: HTMLDivElement;
constructor() {
this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@ -91,17 +91,14 @@ export class MediaManager {
}
public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
this.updatedLocalStreamCallBacks.add(callback);
}
public onStartScreenSharing(callback: StartScreenSharingCallback): void {
this.startScreenSharingCallBacks.add(callback);
}
public onStopScreenSharing(callback: StopScreenSharingCallback): void {
this.stopScreenSharingCallBacks.add(callback);
}
@ -342,8 +339,10 @@ export class MediaManager {
/**
*
* @param userId
* @param reportCallBack
* @param userName
*/
addActiveVideo(userId: string, userName: string = ""){
addActiveVideo(userId: string, reportCallBack: ReportCallback, userName: string = ""){
this.webrtcInAudio.play();
userName = userName.toUpperCase();
@ -355,12 +354,19 @@ export class MediaManager {
<div class="rtc-error" style="display: none"></div>
<i id="name-${userId}" style="background-color: ${color};">${userName}</i>
<img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
<img id="report-${userId}" class="report active" src="resources/logos/report.svg">
<video id="${userId}" autoplay></video>
</div>
`;
layoutManager.add(DivImportance.Normal, userId, html);
const reportBtn = this.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`);
reportBtn.addEventListener('click', (e: MouseEvent) => {
e.preventDefault();
this.showReportModal(userId, userName, reportCallBack);
});
this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
}
@ -542,6 +548,58 @@ export class MediaManager {
return elem as T;
}
private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
//create report text area
const mainContainer = this.getElementByIdOrFail<HTMLDivElement>('main-container');
const divReport = document.createElement('div');
divReport.classList.add('modal-report-user');
const inputHidden = document.createElement('input');
inputHidden.id = 'input-report-user';
inputHidden.type = 'hidden';
inputHidden.value = userId;
divReport.appendChild(inputHidden);
const titleMessage = document.createElement('p');
titleMessage.innerText = 'Vous souhaitez report : ' + userName;
divReport.appendChild(titleMessage);
const imgReportUser = document.createElement('img');
imgReportUser.id = 'img-report-user';
imgReportUser.src = 'resources/logos/report.svg';
divReport.appendChild(imgReportUser);
const textareaUser = document.createElement('textarea');
textareaUser.id = 'textarea-report-user';
textareaUser.placeholder = 'Laissez un commentaire pour confirmer le report de la personne';
divReport.appendChild(textareaUser);
const buttonReport = document.createElement('button');
buttonReport.id = 'button-save-report-user';
buttonReport.innerText = 'Report';
buttonReport.addEventListener('click', () => {
if(!textareaUser.value){
textareaUser.style.border = '1px solid red'
return;
}
reportCallBack(textareaUser.value);
divReport.remove();
});
divReport.appendChild(buttonReport);
const buttonCancel = document.createElement('img');
buttonCancel.id = 'cancel-report-user';
buttonCancel.src = 'resources/logos/close.svg';
buttonCancel.addEventListener('click', () => {
divReport.remove();
});
divReport.appendChild(buttonCancel);
mainContainer.appendChild(divReport);
}
}
export const mediaManager = new MediaManager();

View File

@ -47,6 +47,7 @@ export class SimplePeer {
this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
@ -145,7 +146,9 @@ export class SimplePeer {
}
mediaManager.removeActiveVideo("" + user.userId);
mediaManager.addActiveVideo("" + user.userId, name);
mediaManager.addActiveVideo("" + user.userId, (comment: string) => {
this.reportUser(user.userId, comment);
}, name);
const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
// When a connection is established to a video stream, and if a screen sharing is taking place,
@ -363,6 +366,13 @@ export class SimplePeer {
}
}
/**
* Triggered locally when clicking on the report button
*/
public reportUser(userId: number, message: string) {
this.Connection.emitReportPlayerMessage(userId, message)
}
private sendLocalScreenSharingStreamToUser(userId: number): void {
// If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
if (this.PeerScreenSharingConnectionArray.has(userId)) {

View File

@ -31,7 +31,14 @@ const config: GameConfig = {
width: width / RESOLUTION,
height: height / RESOLUTION,
parent: "game",
scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
scene: [
LoginScene,
SelectCharacterScene,
EnableCameraScene,
ReconnectingScene,
FourOFourScene,
CustomizeScene
],
zoom: RESOLUTION,
physics: {
default: "arcade",