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

@@ -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);
+});

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(){

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;