Merge remote-tracking branch 'remotes/upstream/develop' into tiles-start-positions

front/src/Components/App.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
+    import {enableCameraSceneVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
     import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
@@ -21,10 +21,13 @@
     import AudioPlaying from "./UI/AudioPlaying.svelte";
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
     import ErrorDialog from "./UI/ErrorDialog.svelte";
+    import VideoOverlay from "./Video/VideoOverlay.svelte";
+    import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
     import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
     import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
 
     export let game: Game;
+
 </script>
 
 <div>
@@ -68,6 +71,7 @@
     -->
     {#if $gameOverlayVisibilityStore}
         <div>
+            <VideoOverlay></VideoOverlay>
             <MyCamera></MyCamera>
             <CameraControls></CameraControls>
         </div>

front/src/Components/CameraControls.svelte

@@ -7,6 +7,11 @@
     import cinemaCloseImg from "./images/cinema-close.svg";
     import microphoneImg from "./images/microphone.svg";
     import microphoneCloseImg from "./images/microphone-close.svg";
+    import layoutPresentationImg from "./images/layout-presentation.svg";
+    import layoutChatImg from "./images/layout-chat.svg";
+    import {layoutModeStore} from "../Stores/StreamableCollectionStore";
+    import {LayoutMode} from "../WebRtc/LayoutManager";
+    import {peerStore} from "../Stores/PeerStore";
 
     function screenSharingClick(): void {
         if ($requestedScreenSharingState === true) {
@@ -32,10 +37,24 @@
         }
     }
 
+    function switchLayoutMode() {
+        if ($layoutModeStore === LayoutMode.Presentation) {
+            $layoutModeStore = LayoutMode.VideoChat;
+        } else {
+            $layoutModeStore = LayoutMode.Presentation;
+        }
+    }
 </script>
 
 <div>
     <div class="btn-cam-action">
+        <div class="btn-layout" on:click={switchLayoutMode} class:hide={$peerStore.size === 0}>
+            {#if $layoutModeStore === LayoutMode.Presentation }
+                <img src={layoutPresentationImg} style="padding: 2px" alt="Switch to mosaic mode">
+            {:else}
+                <img src={layoutChatImg} style="padding: 2px" alt="Switch to presentation mode">
+            {/if}
+        </div>
         <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
             {#if $requestedScreenSharingState}
                 <img src={monitorImg} alt="Start screen sharing">

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -58,7 +58,7 @@
 
 
 <div class="horizontal-sound-meter" class:active={display}>
-    {#each [...Array(NB_BARS).keys()] as i}
+    {#each [...Array(NB_BARS).keys()] as i (i)}
         <div style={color(i, volume)}></div>
     {/each}
 </div>

front/src/Components/SoundMeterWidget.svelte

@@ -6,8 +6,6 @@
     export let stream: MediaStream|null;
     let volume = 0;
 
-    const NB_BARS = 5;
-
     let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
@@ -23,7 +21,7 @@
 
             timeout = setInterval(() => {
                 try{
-                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    volume = soundMeter.getVolume();
                     //console.log(volume);
                 }catch(err){
 
@@ -45,9 +43,9 @@
 
 
 <div class="sound-progress" class:active={display}>
-    <span class:active={volume > 1}></span>
-    <span class:active={volume > 2}></span>
-    <span class:active={volume > 3}></span>
-    <span class:active={volume > 4}></span>
     <span class:active={volume > 5}></span>
+    <span class:active={volume > 10}></span>
+    <span class:active={volume > 15}></span>
+    <span class:active={volume > 40}></span>
+    <span class:active={volume > 70}></span>
 </div>

front/src/Components/Video/ChatLayout.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
+    import {afterUpdate, onDestroy} from "svelte";
+    import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
+    import MediaBox from "./MediaBox.svelte";
+
+    let cssClass = 'one-col';
+
+    const unsubscribe = streamableCollectionStore.subscribe((displayableMedias) => {
+        const nbUsers = displayableMedias.size;
+        if (nbUsers <= 1) {
+            cssClass = 'one-col';
+        } else if (nbUsers <= 4) {
+            cssClass = 'two-col';
+        } else if (nbUsers <= 9) {
+            cssClass = 'three-col';
+        } else {
+            cssClass = 'four-col';
+        }
+    });
+
+    onDestroy(() => {
+        unsubscribe();
+    });
+
+    afterUpdate(() => {
+        biggestAvailableAreaStore.recompute();
+    })
+</script>
+
+<div class="chat-mode {cssClass}">
+    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
+        <MediaBox streamable={peer}></MediaBox>
+    {/each}
+</div>

front/src/Components/Video/LocalStreamMediaBox.svelte

@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import type {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {srcObject} from "./utils";
+
+    export let peer : ScreenSharingLocalMedia;
+    let stream = peer.stream;
+    export let cssClass : string|undefined;
+</script>
+
+
+<div class="video-container {cssClass ? cssClass : ''}" class:hide={!stream}>
+    {#if stream}
+    <video use:srcObject={stream} autoplay muted playsinline  on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    {/if}
+</div>

front/src/Components/Video/MediaBox.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {VideoPeer} from "../../WebRtc/VideoPeer";
+    import VideoMediaBox from "./VideoMediaBox.svelte";
+    import ScreenSharingMediaBox from "./ScreenSharingMediaBox.svelte";
+    import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
+    import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
+    import type {Streamable} from "../../Stores/StreamableCollectionStore";
+
+    export let streamable: Streamable;
+</script>
+
+<div class="media-container">
+    {#if streamable instanceof VideoPeer}
+        <VideoMediaBox peer={streamable}/>
+    {:else if streamable instanceof ScreenSharingPeer}
+        <ScreenSharingMediaBox peer={streamable}/>
+    {:else}
+        <LocalStreamMediaBox peer={streamable} cssClass=""/>
+    {/if}
+</div>

front/src/Components/Video/PresentationLayout.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {afterUpdate} from "svelte";
+    import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
+    import MediaBox from "./MediaBox.svelte";
+
+    afterUpdate(() => {
+        biggestAvailableAreaStore.recompute();
+    })
+</script>
+
+<div class="main-section">
+    {#if $videoFocusStore }
+        <MediaBox streamable={$videoFocusStore}></MediaBox>
+    {/if}
+</div>
+<aside class="sidebar">
+    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
+        {#if peer !== $videoFocusStore }
+            <MediaBox streamable={peer}></MediaBox>
+        {/if}
+    {/each}
+</aside>

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import type {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {getColorByString, srcObject} from "./utils";
+
+    export let peer: ScreenSharingPeer;
+    let streamStore = peer.streamStore;
+    let name = peer.userName;
+    let statusStore = peer.statusStore;
+
+</script>
+
+<div class="video-container">
+    {#if $statusStore === 'connecting'}
+        <div class="connecting-spinner"></div>
+    {/if}
+    {#if $statusStore === 'error'}
+        <div class="rtc-error"></div>
+    {/if}
+    {#if $streamStore === null}
+        <i style="background-color: {getColorByString(name)};">{name}</i>
+    {:else}
+        <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    {/if}
+</div>
+
+<style lang="scss">
+  .video-container {
+    video {
+      width: 100%;
+    }
+  }
+</style>

front/src/Components/Video/VideoMediaBox.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type {VideoPeer} from "../../WebRtc/VideoPeer";
+    import SoundMeterWidget from "../SoundMeterWidget.svelte";
+    import microphoneCloseImg from "../images/microphone-close.svg";
+    import reportImg from "./images/report.svg";
+    import blockSignImg from "./images/blockSign.svg";
+    import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
+    import {getColorByString, srcObject} from "./utils";
+
+    export let peer: VideoPeer;
+    let streamStore = peer.streamStore;
+    let name = peer.userName;
+    let statusStore = peer.statusStore;
+    let constraintStore = peer.constraintsStore;
+
+    function openReport(peer: VideoPeer): void {
+        showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
+    }
+
+</script>
+
+<div class="video-container">
+    {#if $statusStore === 'connecting'}
+        <div class="connecting-spinner"></div>
+    {/if}
+    {#if $statusStore === 'error'}
+        <div class="rtc-error"></div>
+    {/if}
+    {#if !$constraintStore || $constraintStore.video === false}
+        <i style="background-color: {getColorByString(name)};">{name}</i>
+    {/if}
+    {#if $constraintStore && $constraintStore.audio === false}
+        <img src={microphoneCloseImg} alt="Muted">
+    {/if}
+    <button class="report" on:click={() => openReport(peer)}>
+        <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>
+    {/if}
+</div>
+

front/src/Components/Video/VideoOverlay.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import {LayoutMode} from "../../WebRtc/LayoutManager";
+    import {layoutModeStore} from "../../Stores/StreamableCollectionStore";
+    import PresentationLayout from "./PresentationLayout.svelte";
+    import ChatLayout from "./ChatLayout.svelte";
+
+</script>
+
+<div class="video-overlay">
+    {#if $layoutModeStore === LayoutMode.Presentation }
+        <PresentationLayout />
+    {:else }
+        <ChatLayout />
+    {/if}
+</div>
+
+<style lang="scss">
+    .video-overlay {
+      display: flex;
+      width: 100%;
+      height: 100%;
+    }
+</style>

front/src/Components/Video/images/blockSign.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2985" version="1.1" inkscape:version="0.48.4 r9939" width="485.33627" height="485.33627" sodipodi:docname="600px-France_road_sign_B1j.svg[1].png">
+  <metadata id="metadata2991">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs2989"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1272" inkscape:window-height="745" id="namedview2987" showgrid="false" inkscape:snap-global="true" inkscape:snap-grids="true" inkscape:snap-bbox="true" inkscape:bbox-paths="true" inkscape:bbox-nodes="true" inkscape:snap-bbox-edge-midpoints="true" inkscape:snap-bbox-midpoints="true" inkscape:object-paths="true" inkscape:snap-intersection-paths="true" inkscape:object-nodes="true" inkscape:snap-smooth-nodes="true" inkscape:snap-midpoints="true" inkscape:snap-object-midpoints="true" inkscape:snap-center="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:zoom="0.59970176" inkscape:cx="390.56499" inkscape:cy="244.34365" inkscape:window-x="86" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="layer1">
+    <inkscape:grid type="xygrid" id="grid2995" empspacing="5" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="-57.33186px" originy="-57.33186px"/>
+  </sodipodi:namedview>
+  <g inkscape:groupmode="layer" id="layer1" inkscape:label="1" style="display:inline" transform="translate(-57.33186,-57.33186)">
+    <path sodipodi:type="arc" style="color:#000000;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" id="path2997" sodipodi:cx="300" sodipodi:cy="300" sodipodi:rx="240" sodipodi:ry="240" d="M 540,300 C 540,432.54834 432.54834,540 300,540 167.45166,540 60,432.54834 60,300 60,167.45166 167.45166,60 300,60 432.54834,60 540,167.45166 540,300 z" transform="matrix(1.0058783,0,0,1.0058783,-1.76349,-1.76349)"/>
+    <path sodipodi:type="arc" style="color:#000000;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" id="path4005" sodipodi:cx="304.75" sodipodi:cy="214.75" sodipodi:rx="44.75" sodipodi:ry="44.75" d="m 349.5,214.75 c 0,24.71474 -20.03526,44.75 -44.75,44.75 -24.71474,0 -44.75,-20.03526 -44.75,-44.75 0,-24.71474 20.03526,-44.75 44.75,-44.75 24.71474,0 44.75,20.03526 44.75,44.75 z" transform="matrix(5.1364411,0,0,5.1364411,-1265.3304,-803.05073)"/>
+    <rect style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" id="rect4001" width="345" height="80.599998" x="127.5" y="259.70001"/>
+  </g>
+</svg>

front/src/Components/Video/utils.ts

@@ -0,0 +1,27 @@
+export function getColorByString(str: string): string | null {
+    let hash = 0;
+    if (str.length === 0) {
+        return null;
+    }
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+    }
+    let color = "#";
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255;
+        color += ("00" + value.toString(16)).substr(-2);
+    }
+    return color;
+}
+
+export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
+    node.srcObject = stream;
+    return {
+        update(newStream: MediaStream) {
+            if (node.srcObject != newStream) {
+                node.srcObject = newStream;
+            }
+        },
+    };
+}

front/src/Components/images/layout-chat.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.97 39.04"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="0.7" y="0.5" width="11.76" height="9.75"/><path class="cls-1" d="M35.08,11.78v8.75H24.31V11.78H35.08m1-1H23.31V21.53H36.08V10.78Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="0.5" y="14.77" width="11.76" height="9.75"/><path class="cls-1" d="M34.87,26.05V34.8H24.11V26.05H34.87m1-1H23.11V35.8H35.87V25.05Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="0.5" y="28.79" width="11.76" height="9.75"/><path class="cls-1" d="M34.87,40.07v8.75H24.11V40.07H34.87m1-1H23.11V49.82H35.87V39.07Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="18.7" y="0.5" width="11.76" height="9.75"/><path class="cls-1" d="M53.08,11.78v8.75H42.31V11.78H53.08m1-1H41.31V21.53H54.08V10.78Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="18.5" y="14.77" width="11.76" height="9.75"/><path class="cls-1" d="M52.87,26.05V34.8H42.11V26.05H52.87m1-1H41.11V35.8H53.87V25.05Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="18.5" y="28.79" width="11.76" height="9.75"/><path class="cls-1" d="M52.87,40.07v8.75H42.11V40.07H52.87m1-1H41.11V49.82H53.87V39.07Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="36.7" y="0.5" width="11.76" height="9.75"/><path class="cls-1" d="M71.08,11.78v8.75H60.31V11.78H71.08m1-1H59.31V21.53H72.08V10.78Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="36.5" y="14.77" width="11.76" height="9.75"/><path class="cls-1" d="M70.87,26.05V34.8H60.11V26.05H70.87m1-1H59.11V35.8H71.87V25.05Z" transform="translate(-23.11 -10.78)"/><rect class="cls-1" x="36.5" y="28.79" width="11.76" height="9.75"/><path class="cls-1" d="M70.87,40.07v8.75H60.11V40.07H70.87m1-1H59.11V49.82H71.87V39.07Z" transform="translate(-23.11 -10.78)"/></svg>

front/src/Components/images/layout-presentation.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.83 54"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="0.5" y="0.5" width="63.13" height="53"/><path class="cls-1" d="M67.12,6V58H5V6H67.12m1-1H4V59H68.12V5Z" transform="translate(-4 -5)"/><rect class="cls-1" x="68.87" y="0.75" width="15.46" height="12.86"/><path class="cls-1" d="M87.83,6.25V18.12H73.37V6.25H87.83m1-1H72.37V19.12H88.83V5.25Z" transform="translate(-4 -5)"/><rect class="cls-1" x="68.87" y="17.69" width="15.46" height="12.86"/><path class="cls-1" d="M87.83,23.19V35.05H73.37V23.19H87.83m1-1H72.37V36.05H88.83V22.19Z" transform="translate(-4 -5)"/><rect class="cls-1" x="68.87" y="34.75" width="15.46" height="12.86"/><path class="cls-1" d="M87.83,40.25V52.12H73.37V40.25H87.83m1-1H72.37V53.12H88.83V39.25Z" transform="translate(-4 -5)"/></svg>