Merge branch 'develop' of github.com:thecodingmachine/workadventure into GlobalMessageToWorld

front/src/Components/Chat/Chat.svelte

@@ -30,12 +30,10 @@
 
 
 <aside class="chatWindow" transition:fly="{{ x: -1000, duration: 500 }}">
-    <section class="chatWindowTitle">
-        <h1>Your chat history <span class="float-right" on:click={closeChat}>&times</span></h1>
-
-    </section>
+    <i class="close-icon" on:click={closeChat}>&times</i>
     <section class="messagesList" bind:this={listDom}>
         <ul>
+            <li><p class="system-text">Here is your chat history: </p></li>
         {#each $chatMessagesStore as message, i}
             <li><ChatElement message={message} line={i}></ChatElement></li>
         {/each} 
@@ -47,16 +45,24 @@
 </aside>
 
 <style lang="scss">
-    h1 {
-      font-family: 'Whiteney';
-
-      span.float-right {
-        font-size: 30px;
-        line-height: 25px;
-        font-weight: bold;
-        float: right;
-        cursor: pointer;
-      }
+    i.close-icon {
+      position: absolute;
+      padding: 4px;
+      right: 12px;
+      font-size: 30px;
+      line-height: 25px;
+      font-weight: bold;
+      cursor: pointer;
+    }
+    
+    p.system-text {
+      border-radius: 8px;
+      margin-bottom: 10px;
+      padding:6px;
+      overflow-wrap: break-word;
+      max-width: 100%;
+      background: gray;
+      display: inline-block;
     }
 
     aside.chatWindow {
@@ -78,16 +84,8 @@
       border-bottom-right-radius: 16px;
       border-top-right-radius: 16px;
       
-      h1 {
-        background-color: #5f5f5f;
-        border-radius: 8px;
-        padding: 2px;
-      }
-      
-      .chatWindowTitle {
-        flex: 0 100px;
-      }
       .messagesList {
+        margin-top: 35px;
         overflow-y: auto;
         flex: auto;
 
@@ -98,7 +96,7 @@
       }
       .messageForm {
         flex: 0 70px;
-        padding-top: 20px;
+        padding-top: 15px;
       }
     }
 </style>

front/src/Components/Chat/ChatElement.svelte

@@ -29,7 +29,7 @@
 <div class="chatElement">
     <div class="messagePart">
         {#if message.type === ChatMessageTypes.userIncoming}
-            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} enter <span class="date">({renderDate(message.date)})</span>
+            &gt;&gt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} entered <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.userOutcoming}
             &lt;&lt; {#each targets as target, index}<ChatPlayerName player={target} line={line}></ChatPlayerName>{#if !isLastIteration(index)}, {/if}{/each} left <span class="date">({renderDate(message.date)})</span>
         {:else if message.type === ChatMessageTypes.me}
@@ -48,7 +48,7 @@
 
 <style lang="scss">
     h4, p {
-        font-family: 'Whiteney';
+        font-family: Lato;
     }
     div.chatElement {
       display: flex;

front/src/Components/Chat/ChatMessageForm.svelte

@@ -32,26 +32,25 @@
       
         input {
           flex: auto;
-          background-color: #42464d;
+          background-color: #254560;
           color: white;
           border-bottom-left-radius: 4px;
           border-top-left-radius: 4px;
           border: none;
           font-size: 22px;
-          font-family: Whiteney;
+          font-family: Lato;
+          padding-left: 6px;
           min-width: 0; //Needed so that the input doesn't overflow the container in firefox
           outline: none;
         }
         
         button {
-          background-color: #42464d;
-          color: white;
+          background-color: #254560;
           border-bottom-right-radius: 4px;
           border-top-right-radius: 4px;
           border: none;
-          border-left: solid black 1px;
+          border-left: solid white 1px;
           font-size: 16px;
-          font-family: Whiteney;
         }
     }
 </style>

front/src/Components/Video/VideoMediaBox.svelte

@@ -37,9 +37,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    {#if $streamStore }
     <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
-    {/if}
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

front/src/Components/Video/utils.ts

@@ -1,3 +1,6 @@
+import type { UserSimplePeerInterface } from "../../WebRtc/SimplePeer";
+import { STUN_SERVER, TURN_PASSWORD, TURN_SERVER, TURN_USER } from "../../Enum/EnvironmentVariable";
+
 export function getColorByString(str: string): string | null {
     let hash = 0;
     if (str.length === 0) {
@@ -15,7 +18,7 @@ export function getColorByString(str: string): string | null {
     return color;
 }
 
-export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
+export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
     node.srcObject = stream;
     return {
         update(newStream: MediaStream) {
@@ -25,3 +28,19 @@ export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         },
     };
 }
+
+export function getIceServersConfig(user: UserSimplePeerInterface): RTCIceServer[] {
+    const config: RTCIceServer[] = [
+        {
+            urls: STUN_SERVER.split(","),
+        },
+    ];
+    if (TURN_SERVER !== "") {
+        config.push({
+            urls: TURN_SERVER.split(","),
+            username: user.webRtcUser || TURN_USER,
+            credential: user.webRtcPassword || TURN_PASSWORD,
+        });
+    }
+    return config;
+}