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

2021-06-25 18:14:40 +02:00 · 2021-06-25 18:14:40 +02:00 · 7f61e9addd
commit 7f61e9addd
parent abfa010bbf 63d4c99d15
182 changed files with 17118 additions and 4494 deletions
--- a/front/src/Components/Video/ChatLayout.svelte
+++ b/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>
--- a/front/src/Components/Video/LocalStreamMediaBox.svelte
+++ b/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>
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/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>
--- a/front/src/Components/Video/PresentationLayout.svelte
+++ b/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>
--- a/front/src/Components/Video/ScreenSharingMediaBox.svelte
+++ b/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>
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/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>
+
--- a/front/src/Components/Video/VideoOverlay.svelte
+++ b/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>
--- a/front/src/Components/Video/images/blockSign.svg
+++ b/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>
--- a/front/src/Components/Video/images/report.svg
+++ b/front/src/Components/Video/images/report.svg
--- a/front/src/Components/Video/utils.ts
+++ b/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;
+            }
+        },
+    };
+}