bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/screenshare/container.jsx

import React from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { useMutation, useReactiveVar } from '@apollo/client';
import { defineMessages } from 'react-intl';
import {
  getSharingContentType,
  getBroadcastContentType,
  isScreenGloballyBroadcasting,
  isCameraAsContentGloballyBroadcasting,
  isScreenBroadcasting,
  isCameraAsContentBroadcasting,
  shouldEnableVolumeControl,
  useIsSharing,
  useSharingContentType,
} from './service';
import ScreenshareComponent from './component';
import { layoutSelect, layoutSelectOutput, layoutDispatch } from '../layout/context';
import getFromUserSettings from '/imports/ui/services/users-settings';
import MediaService from '/imports/ui/components/media/service';
import { EXTERNAL_VIDEO_STOP } from '../external-video-player/mutations';
import { PINNED_PAD_SUBSCRIPTION } from '../notes/queries';
import useDeduplicatedSubscription from '../../core/hooks/useDeduplicatedSubscription';
import AudioManager from '/imports/ui/services/audio-manager';

const screenshareIntlMessages = defineMessages({
  // SCREENSHARE
  label: {
    id: 'app.screenshare.screenShareLabel',
    description: 'screen share area element label',
  },
  presenterLoadingLabel: {
    id: 'app.screenshare.presenterLoadingLabel',
  },
  viewerLoadingLabel: {
    id: 'app.screenshare.viewerLoadingLabel',
  },
  presenterSharingLabel: {
    id: 'app.screenshare.presenterSharingLabel',
  },
  autoplayBlockedDesc: {
    id: 'app.media.screenshare.autoplayBlockedDesc',
  },
  autoplayAllowLabel: {
    id: 'app.media.screenshare.autoplayAllowLabel',
  },
  started: {
    id: 'app.media.screenshare.start',
    description: 'toast to show when a screenshare has started',
  },
  ended: {
    id: 'app.media.screenshare.end',
    description: 'toast to show when a screenshare has ended',
  },
  endedDueToDataSaving: {
    id: 'app.media.screenshare.endDueToDataSaving',
    description: 'toast to show when a screenshare has ended by changing data savings option',
  },
});

const cameraAsContentIntlMessages = defineMessages({
  // CAMERA AS CONTENT
  label: {
    id: 'app.cameraAsContent.cameraAsContentLabel',
    description: 'screen share area element label',
  },
  presenterLoadingLabel: {
    id: 'app.cameraAsContent.presenterLoadingLabel',
  },
  viewerLoadingLabel: {
    id: 'app.cameraAsContent.viewerLoadingLabel',
  },
  presenterSharingLabel: {
    id: 'app.cameraAsContent.presenterSharingLabel',
  },
  autoplayBlockedDesc: {
    id: 'app.media.cameraAsContent.autoplayBlockedDesc',
  },
  autoplayAllowLabel: {
    id: 'app.media.cameraAsContent.autoplayAllowLabel',
  },
  started: {
    id: 'app.media.cameraAsContent.start',
    description: 'toast to show when camera as content has started',
  },
  ended: {
    id: 'app.media.cameraAsContent.end',
    description: 'toast to show when camera as content has ended',
  },
  endedDueToDataSaving: {
    id: 'app.media.cameraAsContent.endDueToDataSaving',
    description: 'toast to show when camera as content has ended by changing data savings option',
  },
});

const ScreenshareContainer = (props) => {
  const screenShare = layoutSelectOutput((i) => i.screenShare);
  const fullscreen = layoutSelect((i) => i.fullscreen);
  const layoutContextDispatch = layoutDispatch();

  const { element } = fullscreen;
  const fullscreenElementId = 'Screenshare';
  const fullscreenContext = (element === fullscreenElementId);
  const [stopExternalVideoShare] = useMutation(EXTERNAL_VIDEO_STOP);

  const { data: pinnedPadData } = useDeduplicatedSubscription(PINNED_PAD_SUBSCRIPTION);

  const NOTES_CONFIG = window.meetingClientSettings.public.notes;

  const isSharedNotesPinned = !!pinnedPadData
    && pinnedPadData.sharedNotes[0]?.sharedNotesExtId === NOTES_CONFIG.id;

  const { isPresenter } = props;

  const info = {
    screenshare: {
      icon: 'desktop',
      locales: screenshareIntlMessages,
      startPreviewSizeBig: false,
      showSwitchPreviewSizeButton: true,
    },
    camera: {
      icon: 'video',
      locales: cameraAsContentIntlMessages,
      startPreviewSizeBig: true,
      showSwitchPreviewSizeButton: false,
    },
  };

  const getContentType = () => (isPresenter ? getSharingContentType() : getBroadcastContentType());
  const contentTypeInfo = info[getContentType()];
  const defaultInfo = info.camera;
  const selectedInfo = contentTypeInfo || defaultInfo;
  const isSharing = useIsSharing();
  const sharingContentType = useSharingContentType();
  const outputDeviceId = useReactiveVar(AudioManager._outputDeviceId.value);

  if (
    isScreenBroadcasting(isSharing, sharingContentType)
    || isCameraAsContentBroadcasting(isSharing, sharingContentType)
  ) {
    return (
      <ScreenshareComponent
        {
        ...{
          layoutContextDispatch,
          ...props,
          ...screenShare,
          fullscreenContext,
          fullscreenElementId,
          isSharedNotesPinned,
          stopExternalVideoShare,
          outputDeviceId,
          ...selectedInfo,
        }
        }
      />
    );
  }
  return null;
};

export default withTracker(() => {
  const LAYOUT_CONFIG = window.meetingClientSettings.public.layout;

  return {
    isGloballyBroadcasting: isScreenGloballyBroadcasting() || isCameraAsContentGloballyBroadcasting(),
    toggleSwapLayout: MediaService.toggleSwapLayout,
    hidePresentationOnJoin: getFromUserSettings('bbb_hide_presentation_on_join', LAYOUT_CONFIG.hidePresentationOnJoin),
    enableVolumeControl: shouldEnableVolumeControl(),
  };
})(ScreenshareContainer);