feat(screenshare): Option to show disabled screenshare button for non presenters (#21082)

* feat(screenshare): Option to show disabled screenshare button for non presenters

* Update bigbluebutton-html5/imports/ui/components/screenshare/service.js

---------

Co-authored-by: Ramón Souza <contato@ramonsouza.com>

bigbluebutton-html5/imports/ui/Types/meetingClientSettings.ts

@@ -585,6 +585,7 @@ export interface Cookie {
 
 export interface Media {
   audio: Audio2
+  screenshare: Screenshare2,
   stunTurnServersFetchAddress: string
   cacheStunTurnServers: boolean
   fallbackStunServer: string
@@ -622,6 +623,10 @@ export interface Audio2 {
   retryThroughRelay: boolean
 }
 
+export interface Screenshare2 {
+  showButtonForNonPresenters: boolean
+}
+
 export interface Bridge {
   name: string
   path: string

bigbluebutton-html5/imports/ui/components/actions-bar/screenshare/component.jsx

@@ -12,6 +12,7 @@ import {
   shareScreen,
   screenshareHasEnded,
   useIsCameraAsContentBroadcasting,
+  useShowButtonForNonPresenters,
 } from '/imports/ui/components/screenshare/service';
 import { SCREENSHARING_ERRORS } from '/imports/api/screenshare/client/bridge/errors';
 import Button from '/imports/ui/components/common/button/component';
@@ -46,6 +47,18 @@ const intlMessages = defineMessages({
     id: 'app.actionsBar.actionsDropdown.stopDesktopShareDesc',
     description: 'adds context to stop desktop share option',
   },
+  lockedDesktopShareDesc: {
+    id: 'app.actionsBar.actionsDropdown.lockedDesktopShareDesc',
+    description: 'Desktop locked Share option desc',
+  },
+  notPresenterDesktopShareLabel: {
+    id: 'app.actionsBar.actionsDropdown.notPresenterDesktopShareLabel',
+    description: 'You are not the presenter label',
+  },
+  notPresenterDesktopShareDesc: {
+    id: 'app.actionsBar.actionsDropdown.notPresenterDesktopShareDesc',
+    description: 'You are not the presenter desc',
+  },
   screenShareNotSupported: {
     id: 'app.media.screenshare.notSupported',
     descriptions: 'error message when trying share screen on unsupported browsers',
@@ -129,6 +142,7 @@ const ScreenshareButton = ({
   isScreenGloballyBroadcasting,
   amIPresenter = false,
   isMeteorConnected,
+  screenshareDataSavingSetting,
 }) => {
   const TROUBLESHOOTING_URLS = window.meetingClientSettings.public.media.screenshareTroubleshootingLinks;
   const [stopExternalVideoShare] = useMutation(EXTERNAL_VIDEO_STOP);
@@ -182,17 +196,23 @@ const ScreenshareButton = ({
     </Styled.ScreenShareModal>
   );
 
-  const screenshareLabel = intlMessages.desktopShareLabel;
-  const vLabel = isScreenBroadcasting
-    ? intlMessages.stopDesktopShareLabel : screenshareLabel;
-
-  const vDescr = isScreenBroadcasting
-    ? intlMessages.stopDesktopShareDesc : intlMessages.desktopShareDesc;
   const amIBroadcasting = isScreenBroadcasting && amIPresenter;
 
+  // this part handles the label/desc intl for the screenshare button
+  // basically: if you are not a presenter, the label/desc will be 'the screen cannot be shared'.
+  // if you are: the label/desc intl will be 'stop/start screenshare'.
+  let info = screenshareDataSavingSetting ? 'desktopShare' : 'lockedDesktopShare';
+  if (!amIPresenter) {
+    info = 'notPresenterDesktopShare';
+  } else if (isScreenBroadcasting) {
+    info = 'stopDesktopShare';
+  }
+
+  const showButtonForNonPresenters = useShowButtonForNonPresenters();
+
   const shouldAllowScreensharing = enabled
     && (!isMobile || isTabletApp)
-    && amIPresenter;
+    && (amIPresenter || showButtonForNonPresenters);
 
   const dataTest = isScreenBroadcasting ? 'stopScreenShare' : 'startScreenShare';
   const loading = isScreenBroadcasting && !isScreenGloballyBroadcasting;
@@ -204,11 +224,11 @@ const ScreenshareButton = ({
           ? (
             <Styled.Container>
               <Button
-                disabled={(!isMeteorConnected && !isScreenBroadcasting)}
+                disabled={(!isMeteorConnected && !isScreenBroadcasting) || !screenshareDataSavingSetting || !amIPresenter}
                 icon={amIBroadcasting ? 'desktop' : 'desktop_off'}
                 data-test={dataTest}
-                label={intl.formatMessage(vLabel)}
-                description={intl.formatMessage(vDescr)}
+                label={intl.formatMessage(intlMessages[`${info}Label`])}
+                description={intl.formatMessage(intlMessages[`${info}Desc`])}
                 color={amIBroadcasting ? 'primary' : 'default'}
                 ghost={!amIBroadcasting}
                 hideLabel

bigbluebutton-html5/imports/ui/components/screenshare/service.js

@@ -190,6 +190,12 @@ export const useShouldEnableVolumeControl = () => {
   return VOLUME_CONTROL_ENABLED && hasAudio;
 };
 
+export const useShowButtonForNonPresenters = () => {
+  const MEDIA_CONFIG = window.meetingClientSettings.public.kurento;
+
+  return MEDIA_CONFIG.screenshare.showButtonForNonPresenters;
+}
+
 export const attachLocalPreviewStream = (mediaElement) => {
   const { isTabletApp } = browserInfo;
   if (isTabletApp) {
@@ -378,6 +384,7 @@ export default {
   useIsScreenGloballyBroadcasting,
   useIsCameraAsContentGloballyBroadcasting,
   useShouldEnableVolumeControl,
+  useShowButtonForNonPresenters,
   useIsScreenBroadcasting,
   useIsCameraAsContentBroadcasting,
   useScreenshareHasAudio,

bigbluebutton-html5/imports/ui/core/initial-values/meetingClientSettings.ts

@@ -672,6 +672,9 @@ export const meetingClientSettingsInitialValues: MeetingClientSettings = {
         },
       },
       muteAudioOutputWhenAway: false,
+      screenshare: {
+        showButtonForNonPresenters: false,
+      },
     },
     stats: {
       enabled: true,

bigbluebutton-html5/private/config/settings.yml

@@ -347,6 +347,7 @@ public:
       # subscribe reattempt increases the reconnection timer up to this
       maxTimeout: 60000
     screenshare:
+      showButtonForNonPresenters: false
       # Whether volume control should be allowed if screen sharing has audio
       enableVolumeControl: true
       # Experimental. True is the canonical behavior. Flip to false to reverse

bigbluebutton-html5/public/locales/en.json

@@ -657,6 +657,9 @@
     "app.actionsBar.actionsDropdown.presentationLabel": "Upload/Manage presentations",
     "app.actionsBar.actionsDropdown.initPollLabel": "Initiate a poll",
     "app.actionsBar.actionsDropdown.desktopShareLabel": "Share your screen",
+    "app.actionsBar.actionsDropdown.lockedDesktopShareDesc": "Screenshare locked",
+    "app.actionsBar.actionsDropdown.notPresenterDesktopShareLabel": "You must be a presenter to share your screen",
+    "app.actionsBar.actionsDropdown.notPresenterDesktopShareDesc": "You must be a presenter to share your screen",
     "app.actionsBar.actionsDropdown.stopDesktopShareLabel": "Stop sharing your screen",
     "app.actionsBar.actionsDropdown.presentationDesc": "Upload your presentation",
     "app.actionsBar.actionsDropdown.initPollDesc": "Initiate a poll",

bigbluebutton-html5/public/locales/pt_BR.json

@@ -653,6 +653,9 @@
     "app.actionsBar.actionsDropdown.presentationLabel": "Gerenciar apresentações",
     "app.actionsBar.actionsDropdown.initPollLabel": "Iniciar uma enquete",
     "app.actionsBar.actionsDropdown.desktopShareLabel": "Compartilhar sua tela",
+    "app.actionsBar.actionsDropdown.lockedDesktopShareDesc": "Compartilhamento de tela bloqueado",
+    "app.actionsBar.actionsDropdown.notPresenterDesktopShareLabel": "Você deve ser um apresentador para compartilhar sua tela",
+    "app.actionsBar.actionsDropdown.notPresenterDesktopShareDesc": "Você deve ser um apresentador para compartilhar sua tela",
     "app.actionsBar.actionsDropdown.stopDesktopShareLabel": "Parar compartilhamento de tela",
     "app.actionsBar.actionsDropdown.presentationDesc": "Carregar sua apresentação",
     "app.actionsBar.actionsDropdown.initPollDesc": "Iniciar uma enquete",