re-adding popup-input, video container fix

front/src/Api/Events/ButtonClickedEvent.ts

@@ -4,6 +4,8 @@ export const isButtonClickedEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
         buttonId: tg.isNumber,
+        input : tg.isBoolean,
+        inputValue : tg.isString,
     }).get();
 /**
  * A message sent from the game to the iFrame when a user enters or leaves a zone marked with the "zone" property.

front/src/Api/Events/ClosePopupEvent.ts

@@ -3,6 +3,7 @@ import * as tg from "generic-type-guard";
 export const isClosePopupEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
+        inputValue : tg.isString,
     }).get();
 
 /**

front/src/Api/Events/OpenPopupEvent.ts

@@ -11,7 +11,8 @@ export const isOpenPopupEvent =
         popupId: tg.isNumber,
         targetObject: tg.isString,
         message: tg.isString,
-        buttons: tg.isArray(isButtonDescriptor)
+        buttons: tg.isArray(isButtonDescriptor),
+        input: tg.isBoolean
     }).get();
 
 /**

front/src/Api/IframeListener.ts

@@ -331,12 +331,14 @@ class IframeListener {
         }
     }
 
-    sendButtonClickedEvent(popupId: number, buttonId: number): void {
+    sendButtonClickedEvent(popupId: number, buttonId: number, input : boolean, inputValue : string | null): void {
         this.postMessage({
             'type': 'buttonClickedEvent',
             'data': {
                 popupId,
-                buttonId
+                buttonId,
+                input,
+                inputValue,
             } as ButtonClickedEvent
         });
     }

front/src/Api/iframe/Ui/Popup.ts

@@ -2,7 +2,11 @@ import {sendToWorkadventure} from "../IframeApiContribution";
 import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
 
 export class Popup {
+
+    inputValue: string;
+
     constructor(private id: number) {
+        this.inputValue = '';
     }
 
     /**
@@ -13,6 +17,7 @@ export class Popup {
             'type': 'closePopup',
             'data': {
                 'popupId': this.id,
+                'inputValue': this.inputValue,
             } as ClosePopupEvent
         });
     }

front/src/Api/iframe/ui.ts

@@ -33,6 +33,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
                 throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
             }
             if (callback) {
+                popup.inputValue = payloadData.inputValue;
                 callback(popup);
             }
         }
@@ -49,7 +50,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
     })];
 
 
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input: boolean = false): Popup {
         popupId++;
         const popup = new Popup(popupId);
         const btnMap = new Map<number, () => void>();
@@ -76,7 +77,8 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
                         label: button.label,
                         className: button.className
                     };
-                })
+                }),
+                input
             }
         });
 

front/src/Components/Video/VideoMediaBox.svelte

@@ -20,7 +20,7 @@
 
 </script>
 
-<div class="video-container">
+<div class="video-container nes-container is-rounded is-dark">
     {#if $statusStore === 'connecting'}
         <div class="connecting-spinner"></div>
     {/if}
@@ -33,7 +33,7 @@
     {#if $constraintStore && $constraintStore.audio === false}
         <img src={microphoneCloseImg} alt="Muted">
     {/if}
-    <button class="report" on:click={() => openReport(peer)}>
+    <button class="report nes-button is-dark" on:click={() => openReport(peer)}>
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>

front/src/Phaser/Game/GameScene.ts

@@ -63,7 +63,8 @@ import type {
     ITiledMapLayerProperty,
     ITiledMapObject,
     ITiledMapTileLayer,
-    ITiledTileSet } from "../Map/ITiledMap";
+    ITiledTileSet
+} from "../Map/ITiledMap";
 import {MenuScene, MenuSceneName} from '../Menu/MenuScene';
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
@@ -820,9 +821,12 @@ export class GameScene extends DirtyScene {
                 return;
             }
             const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
-            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">
+            let html = `<div id="container" hidden><div class="nes-container with-title is-centered">`;
-${escapedMessage}
+            html += escapedMessage;
- </div> `;
+            if(openPopupEvent.input) {
+                html += `<input id="popupinput-${openPopupEvent.popupId}" class="nes-input" />`
+            }
+            html += `</div>`;
             const buttonContainer = `<div class="buttonContainer"</div>`;
             html += buttonContainer;
             let id = 0;
@@ -848,8 +852,11 @@ ${escapedMessage}
                 const button = HtmlUtils.getElementByIdOrFail<HTMLButtonElement>(`popup-${openPopupEvent.popupId}-${id}`);
                 const btnId = id;
                 button.onclick = () => {
-                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId);
+                    let inputValue = '';
-                    button.disabled = true;
+                    if(openPopupEvent.input) {
+                        inputValue = HtmlUtils.getElementByIdOrFail<HTMLInputElement>(`popupinput-${openPopupEvent.popupId}`).value;
+                    }
+                    iframeListener.sendButtonClickedEvent(openPopupEvent.popupId, btnId, openPopupEvent.input, inputValue);
                 }
                 id++;
             }

front/src/iframe_api.ts

@@ -119,9 +119,9 @@ const wa = {
     /**
      * @deprecated Use WA.controls.restorePlayerControls instead
      */
-    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[], input : boolean): Popup {
         console.warn('Method WA.openPopup is deprecated. Please use WA.ui.openPopup instead');
-        return ui.openPopup(targetObject, message, buttons);
+        return ui.openPopup(targetObject, message, buttons, input);
     },
     /**
      * @deprecated Use WA.chat.onChatMessage instead

front/style/style.scss

@@ -40,6 +40,7 @@ body .message-info.warning {
     position: relative;
     transition: all 0.2s ease;
     background-color: #00000099;
+    height: 100%;
 
     video {
         width: 100%;