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 { + 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;