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