From ac7fa164b6e39052bd8354e8c917418949abbf94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 17:59:50 +0200
Subject: [PATCH] Adding importance handling

---
 .../Components/Video/LocalStreamMedia.svelte  |  7 +++--
 front/src/Components/Video/Peer.svelte        |  2 +-
 .../Video/ScreenSharingMedia.svelte           |  2 +-
 front/src/Components/Video/VideoMedia.svelte  |  5 +++-
 front/src/Stores/ImportanceStore.ts           | 26 +++++++++++++++++++
 front/src/Stores/ScreenSharingStore.ts        |  5 ++--
 front/src/WebRtc/ScreenSharingPeer.ts         |  6 +++--
 front/src/WebRtc/VideoPeer.ts                 |  6 +++--
 8 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 front/src/Stores/ImportanceStore.ts

diff --git a/front/src/Components/Video/LocalStreamMedia.svelte b/front/src/Components/Video/LocalStreamMedia.svelte
index 43b1d117..375612a6 100644
--- a/front/src/Components/Video/LocalStreamMedia.svelte
+++ b/front/src/Components/Video/LocalStreamMedia.svelte
@@ -1,4 +1,6 @@
 <script lang="typescript">
+    import {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
+
     function srcObject(node, stream) {
         node.srcObject = stream;
         return {
@@ -10,11 +12,12 @@
         }
     }
 
-    export let stream : MediaStream|undefined;
+    export let peer : ScreenSharingLocalMedia;
+    let stream : MediaStream|undefined = peer.stream;
     export let cssClass : string|undefined;
 </script>
 
 
 <div class="video-container {cssClass}" class:hide={!stream}>
-    <video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline></video>
+    <video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline  on:click={() => peer.importanceStore.toggle()}></video>
 </div>
diff --git a/front/src/Components/Video/Peer.svelte b/front/src/Components/Video/Peer.svelte
index c73d620e..8d5637f6 100644
--- a/front/src/Components/Video/Peer.svelte
+++ b/front/src/Components/Video/Peer.svelte
@@ -15,6 +15,6 @@
     {:else if peer instanceof ScreenSharingPeer}
         <ScreenSharingMedia peer={peer}/>
     {:else}
-        <LocalStreamMedia stream={peer.stream}/>
+        <LocalStreamMedia peer={peer}/>
     {/if}
 </div>
diff --git a/front/src/Components/Video/ScreenSharingMedia.svelte b/front/src/Components/Video/ScreenSharingMedia.svelte
index e16fac58..0dbc3c16 100644
--- a/front/src/Components/Video/ScreenSharingMedia.svelte
+++ b/front/src/Components/Video/ScreenSharingMedia.svelte
@@ -45,7 +45,7 @@
     {#if $streamStore === null}
         <i style="background-color: {getColorByString(name)};">{name}</i>
     {/if}
-    <video use:srcObject={$streamStore} autoplay playsinline></video>
+    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => peer.importanceStore.toggle()}></video>
 </div>
 
 <style lang="scss">
diff --git a/front/src/Components/Video/VideoMedia.svelte b/front/src/Components/Video/VideoMedia.svelte
index fbc5c6f7..aca9ffe2 100644
--- a/front/src/Components/Video/VideoMedia.svelte
+++ b/front/src/Components/Video/VideoMedia.svelte
@@ -4,12 +4,14 @@
     import microphoneCloseImg from "../images/microphone-close.svg";
     import reportImg from "./images/report.svg";
     import blockSignImg from "./images/blockSign.svg";
+    import {DivImportance} from "../../WebRtc/LayoutManager";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
+    let importanceStore = peer.importanceStore;
 
     constraintStore.subscribe((vl) => console.log('CONS', vl));
 
@@ -40,6 +42,7 @@
             }
         }
     }
+
 </script>
 
 <div class="video-container">
@@ -59,7 +62,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    <video use:srcObject={$streamStore} autoplay playsinline></video>
+    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => peer.importanceStore.toggle()}></video>
     <img src={blockSignImg} class="block-logo" alt="Block">
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
diff --git a/front/src/Stores/ImportanceStore.ts b/front/src/Stores/ImportanceStore.ts
new file mode 100644
index 00000000..f1c8bc3a
--- /dev/null
+++ b/front/src/Stores/ImportanceStore.ts
@@ -0,0 +1,26 @@
+import {VideoPeer} from "../WebRtc/VideoPeer";
+import {Subscriber, Unsubscriber, writable} from "svelte/store";
+import {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
+import {DivImportance} from "../WebRtc/LayoutManager";
+
+export interface ImportanceStore {
+    subscribe: (this:void, run: Subscriber<DivImportance>, invalidate?: ((value?: DivImportance) => void | undefined)) => Unsubscriber,
+    toggle: () => void,
+}
+
+export function createImportanceStore(defaultImportance: DivImportance): ImportanceStore {
+    const { subscribe, set, update } = writable<DivImportance>(defaultImportance);
+
+    return {
+        subscribe,
+        toggle: () => {
+            update((importance) => {
+                if (importance === DivImportance.Important) {
+                    return DivImportance.Normal;
+                } else {
+                    return DivImportance.Important;
+                }
+            });
+        }
+    };
+}
diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts
index 41d450c2..8e185285 100644
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@@ -5,6 +5,7 @@ import type {
 } from "./MediaStore";
 import {DivImportance} from "../WebRtc/LayoutManager";
 import {gameOverlayVisibilityStore} from "./GameOverlayStoreVisibility";
+import {createImportanceStore, ImportanceStore} from "./ImportanceStore";
 
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -188,7 +189,7 @@ export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set)
 
 export interface ScreenSharingLocalMedia {
     uniqueId: string;
-    importanceStore: Writable<DivImportance>;
+    importanceStore: ImportanceStore;
     stream: MediaStream|null;
     //subscribe(this: void, run: Subscriber<ScreenSharingLocalMedia>, invalidate?: (value?: ScreenSharingLocalMedia) => void): Unsubscriber;
 }
@@ -200,7 +201,7 @@ export const screenSharingLocalMedia = readable<ScreenSharingLocalMedia|null>(nu
 
     const localMedia: ScreenSharingLocalMedia = {
         uniqueId: "localScreenSharingStream",
-        importanceStore: writable(DivImportance.Normal),
+        importanceStore: createImportanceStore(DivImportance.Normal),
         stream: null
     }
 
diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts
index 49026971..32408da1 100644
--- a/front/src/WebRtc/ScreenSharingPeer.ts
+++ b/front/src/WebRtc/ScreenSharingPeer.ts
@@ -6,6 +6,8 @@ import {MESSAGE_TYPE_CONSTRAINT} from "./VideoPeer";
 import type {UserSimplePeerInterface} from "./SimplePeer";
 import {Readable, readable, writable, Writable} from "svelte/store";
 import {DivImportance} from "./LayoutManager";
+import type {ImportanceStore} from "../Stores/ImportanceStore";
+import {createImportanceStore} from "../Stores/ImportanceStore";
 
 const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
 
@@ -22,7 +24,7 @@ export class ScreenSharingPeer extends Peer {
     public readonly userId: number;
     public readonly uniqueId: string;
     public readonly streamStore: Readable<MediaStream | null>;
-    public readonly importanceStore: Writable<DivImportance>;
+    public readonly importanceStore: ImportanceStore;
     public readonly statusStore: Readable<"connecting" | "connected" | "error" | "closed">;
 
     constructor(user: UserSimplePeerInterface, initiator: boolean, public readonly userName: string, private connection: RoomConnection, stream: MediaStream | null) {
@@ -71,7 +73,7 @@ export class ScreenSharingPeer extends Peer {
             };
         });
 
-        this.importanceStore = writable(DivImportance.Important);
+        this.importanceStore = createImportanceStore(DivImportance.Important);
 
         this.statusStore = readable<"connecting" | "connected" | "error" | "closed">("connecting", (set) => {
             const onConnect = () => {
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index c69bc4cd..c6b14ede 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -8,6 +8,8 @@ import type {UserSimplePeerInterface} from "./SimplePeer";
 import {get, readable, Readable, writable, Writable} from "svelte/store";
 import {obtainedMediaConstraintStore} from "../Stores/MediaStore";
 import {DivImportance} from "./LayoutManager";
+import type {ImportanceStore} from "../Stores/ImportanceStore";
+import {createImportanceStore} from "../Stores/ImportanceStore";
 
 const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer');
 
@@ -28,7 +30,7 @@ export class VideoPeer extends Peer {
     private onBlockSubscribe: Subscription;
     private onUnBlockSubscribe: Subscription;
     public readonly streamStore: Readable<MediaStream | null>;
-    public readonly importanceStore: Writable<DivImportance>;
+    public readonly importanceStore: ImportanceStore;
     public readonly statusStore: Readable<"connecting" | "connected" | "error" | "closed">;
     public readonly constraintsStore: Readable<MediaStreamConstraints|null>;
 
@@ -92,7 +94,7 @@ export class VideoPeer extends Peer {
             };
         });
 
-        this.importanceStore = writable(DivImportance.Normal);
+        this.importanceStore = createImportanceStore(DivImportance.Normal);
 
         this.statusStore = readable<"connecting" | "connected" | "error" | "closed">("connecting", (set) => {
             const onConnect = () => {