From 4c4f310b79ff3f6f0c01a53b0bd9ac7f49d50a65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 21 May 2021 18:26:50 +0200
Subject: [PATCH] The share screen button is now displayed only when screen
 sharing makes sense. Also, fixed the button not aligned bug

---
 front/src/Stores/ScreenSharingStore.ts | 12 ++++++++++++
 front/src/WebRtc/MediaManager.ts       | 14 +++++++++++++-
 front/style/style.css                  |  7 +++++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts
index 626327a2..a55f5ab2 100644
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@@ -178,3 +178,15 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
         }
     })();
 });
+
+/**
+ * A store containing whether the screen sharing button should be displayed or hidden.
+ */
+export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set) => {
+    if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
+        set(false);
+        return;
+    }
+
+    set($peerStore.size !== 0);
+});
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 440d1977..fad33de3 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -12,7 +12,11 @@ import {
     requestedCameraState,
     requestedMicrophoneState
 } from "../Stores/MediaStore";
-import {requestedScreenSharingState, screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore";
+import {
+    requestedScreenSharingState,
+    screenSharingAvailableStore,
+    screenSharingLocalStreamStore
+} from "../Stores/ScreenSharingStore";
 
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -211,6 +215,14 @@ export class MediaManager {
             }
 
         });
+
+        screenSharingAvailableStore.subscribe((available) => {
+            if (available) {
+                document.querySelector('.btn-monitor')?.classList.remove('hide');
+            } else {
+                document.querySelector('.btn-monitor')?.classList.add('hide');
+            }
+        });
     }
 
     public updateScene(){
diff --git a/front/style/style.css b/front/style/style.css
index c48d2697..b9263834 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -201,12 +201,12 @@ video#myCamVideo{
     display: inline-flex;
     bottom: 10px;
     right: 15px;
-    width: 15vw;
+    width: 180px;
     height: 40px;
     text-align: center;
     align-content: center;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
     justify-items: center;
 }
 /*btn animation*/
@@ -252,6 +252,9 @@ video#myCamVideo{
     transition: all .2s;
     /*right: 224px;*/
 }
+.btn-monitor.hide {
+    transform: translateY(60px);
+}
 .btn-copy{
     pointer-events: auto;
     transition: all .3s;