diff --git a/bigbluebutton-html5/imports/ui/Types/user.ts b/bigbluebutton-html5/imports/ui/Types/user.ts index 140e2d842c..834edd1a77 100644 --- a/bigbluebutton-html5/imports/ui/Types/user.ts +++ b/bigbluebutton-html5/imports/ui/Types/user.ts @@ -94,6 +94,7 @@ export interface User { guestStatus: string; joinErrorCode: string; joinErrorMessage: string; + inactivityWarningDisplay: boolean; joined: boolean; loggedOut: boolean; mobile?: boolean; diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 728dbd8a31..4ba2f423f4 100644 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -50,6 +50,7 @@ import PresentationUploaderToastContainer from '/imports/ui/components/presentat import BreakoutJoinConfirmationContainerGraphQL from '../breakout-join-confirmation/breakout-join-confirmation-graphql/component'; import FloatingWindowContainer from '/imports/ui/components/floating-window/container'; import ChatAlertContainerGraphql from '../chat/chat-graphql/alert/component'; +import { notify } from '/imports/ui/services/notification'; // [move settings] const MOBILE_MEDIA = 'only screen and (max-width: 40em)'; @@ -224,7 +225,6 @@ class App extends Component { componentDidUpdate(prevProps) { const { - notify, currentUserEmoji, currentUserAway, currentUserRaiseHand, diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx index 18dc448e28..3c37df65bb 100755 --- a/bigbluebutton-html5/imports/ui/components/app/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx @@ -4,11 +4,10 @@ import Auth from '/imports/ui/services/auth'; import Users from '/imports/api/users'; import Meetings from '/imports/api/meetings'; import AudioCaptionsLiveContainer from '/imports/ui/components/audio/audio-graphql/audio-captions/live/component'; -import { notify } from '/imports/ui/services/notification'; import getFromUserSettings from '/imports/ui/services/users-settings'; import deviceInfo from '/imports/utils/deviceInfo'; import MediaService from '/imports/ui/components/media/service'; -import { isPresentationEnabled, isExternalVideoEnabled } from '/imports/ui/services/features'; +import { isPresentationEnabled, isExternalVideoEnabled, useIsScreenSharingEnabled } from '/imports/ui/services/features'; import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser'; import useMeeting from '/imports/ui/core/hooks/useMeeting'; import { ACTIONS, LAYOUT_TYPE, PRESENTATION_AREA } from '/imports/ui/components/layout/enums'; @@ -21,42 +20,77 @@ import { } from '../layout/context'; import { SET_SYNC_WITH_PRESENTER_LAYOUT, SET_LAYOUT_PROPS } from './mutations'; -import { - getBreakoutRooms, -} from './service'; - import App from './component'; import useUserChangedLocalSettings from '../../services/settings/hooks/useUserChangedLocalSettings'; import { PINNED_PAD_SUBSCRIPTION } from '../notes/queries'; import connectionStatus from '../../core/graphql/singletons/connectionStatus'; import useDeduplicatedSubscription from '../../core/hooks/useDeduplicatedSubscription'; import VideoStreamsState from '../video-provider/video-provider-graphql/state'; -import { useIsSharing, useSharingContentType } from '../screenshare/service'; import useSettings from '../../services/settings/hooks/useSettings'; import { SETTINGS } from '../../services/settings/enums'; import { useStorageKey } from '../../services/storage/hooks'; import useMuteMicrophone from '../audio/audio-graphql/hooks/useMuteMicrophone'; +const currentUserEmoji = (currentUser) => (currentUser + ? { + status: currentUser.reactionEmoji, + changedAt: currentUser.emojiTime, + } + : { + status: 'none', + changedAt: null, + } +); + const AppContainer = (props) => { + const LAYOUT_CONFIG = window.meetingClientSettings.public.layout; const layoutType = useRef(null); const { actionsbar, - pushLayoutMeeting, currentUserId, shouldShowScreenshare: propsShouldShowScreenshare, presentationRestoreOnUpdate, isModalOpen, - meetingLayout, - meetingLayoutUpdatedAt, - meetingPresentationIsOpen, - isMeetingLayoutResizing, - meetingLayoutCameraPosition, - meetingLayoutFocusedCamera, - meetingLayoutVideoRate, ...otherProps } = props; + const { + viewScreenshare, + } = useSettings(SETTINGS.DATA_SAVING); + + const { + data: currentUser, + } = useCurrentUser((u) => ({ + away: u.away, + reactionEmoji: u.reactionEmoji, + approved: 1, + raiseHand: u.raiseHand, + userId: u.userId, + role: u.role, + inactivityWarningDisplay: u.inactivityWarningDisplay, + presenter: u.presenter, + })); + + const { + data: currentMeeting, + } = useMeeting((m) => ({ + layout: m.layout, + componentsFlags: m.componentsFlags, + })); + + const meetingLayout = LAYOUT_TYPE[currentMeeting?.layout.currentLayoutType]; + const meetingLayoutUpdatedAt = new Date(currentMeeting?.layout.updatedAt).getTime(); + const meetingPresentationIsOpen = !currentMeeting?.layout.presentationMinimized; + + const { + propagateLayout: pushLayoutMeeting, + cameraDockIsResizing: isMeetingLayoutResizing, + cameraDockPlacement: meetingLayoutCameraPosition, + cameraDockAspectRatio: meetingLayoutVideoRate, + cameraWithFocus: meetingLayoutFocusedCamera, + } = (currentMeeting?.layout || {}); + const isLargeFont = useStorageKey('isLargeFont'); const ignorePollNotifications = useStorageKey('ignorePollNotifications'); @@ -70,9 +104,6 @@ const AppContainer = (props) => { darkTheme, fontSize = '16px', } = useSettings(SETTINGS.APPLICATION); - const { - viewScreenshare, - } = useSettings(SETTINGS.DATA_SAVING); const sidebarContent = layoutSelectInput((i) => i.sidebarContent); const genericComponent = layoutSelectInput((i) => i.genericComponent); @@ -166,10 +197,6 @@ const AppContainer = (props) => { }); }; - const { data: currentMeeting } = useMeeting((m) => ({ - componentsFlags: m.componentsFlags, - })); - const isSharingVideo = currentMeeting?.componentsFlags.hasExternalVideo; useEffect(() => { @@ -207,22 +234,39 @@ const AppContainer = (props) => { return enforceLayout && layoutTypes.includes(enforceLayout) ? enforceLayout : null; }; - const shouldShowScreenshare = propsShouldShowScreenshare - && (viewScreenshare || isPresenter); + const shouldShowScreenshare = (viewScreenshare || isPresenter); const shouldShowPresentation = (!shouldShowScreenshare && !isSharedNotesPinned && !shouldShowExternalVideo && !shouldShowGenericComponent && (presentationIsOpen || presentationRestoreOnUpdate)) && isPresentationEnabled(); if (!currentUserData) return null; - return currentUserId + const customStyleUrl = getFromUserSettings('bbb_custom_style_url', false) + || window.meetingClientSettings.public.app.customStyleUrl; + + return currentUser?.userId ? ( { : null; }; -const currentUserEmoji = (currentUser) => (currentUser - ? { - status: currentUser.emoji, - changedAt: currentUser.emojiTime, - } - : { - status: 'none', - changedAt: null, - } -); - -const AppTracker = withTracker((props) => { - const { - viewScreenshare, - isScreenSharing, - screenSharingContentType, - } = props; - const currentUser = Users.findOne( - { userId: Auth.userID }, - { - fields: - { - approved: 1, emoji: 1, raiseHand: 1, away: 1, userId: 1, role: 1, inactivityCheck: 1, - }, - }, - ); - - const meetingLayoutObj = Meetings - .findOne({ meetingId: Auth.meetingID }) || {}; - - const { layout } = meetingLayoutObj; - - const { - propagateLayout: pushLayoutMeeting, - cameraDockIsResizing: isMeetingLayoutResizing, - cameraDockPlacement: meetingLayoutCameraPosition, - cameraDockAspectRatio: meetingLayoutVideoRate, - cameraWithFocus: meetingLayoutFocusedCamera, - } = layout; - const meetingLayout = LAYOUT_TYPE[layout.currentLayoutType]; - const meetingLayoutUpdatedAt = new Date(layout.updatedAt).getTime(); - - const meetingPresentationIsOpen = !layout.presentationMinimized; - const shouldShowScreenshare = MediaService.shouldShowScreenshare( - viewScreenshare, - isScreenSharing, - screenSharingContentType, - ); - let customStyleUrl = getFromUserSettings('bbb_custom_style_url', false); - - const CUSTOM_STYLE_URL = window.meetingClientSettings.public.app.customStyleUrl; - - if (!customStyleUrl && CUSTOM_STYLE_URL) { - customStyleUrl = CUSTOM_STYLE_URL; - } - - const LAYOUT_CONFIG = window.meetingClientSettings.public.layout; - - return { - audioCaptions: , - hasBreakoutRooms: getBreakoutRooms().length > 0, - customStyle: getFromUserSettings('bbb_custom_style', false), - customStyleUrl, - notify, - isPhone: deviceInfo.isPhone, - isRTL: document.documentElement.getAttribute('dir') === 'rtl', - currentUserEmoji: currentUserEmoji(currentUser), - currentUserAway: currentUser.away, - currentUserRaiseHand: currentUser.raiseHand, - currentUserId: currentUser?.userId, - meetingLayout, - meetingLayoutUpdatedAt, - meetingPresentationIsOpen, - isMeetingLayoutResizing, - meetingLayoutCameraPosition, - meetingLayoutFocusedCamera, - meetingLayoutVideoRate, - pushLayoutMeeting, - shouldShowScreenshare, - presentationRestoreOnUpdate: getFromUserSettings( - 'bbb_force_restore_presentation_on_new_events', - window.meetingClientSettings.public.presentation.restoreOnUpdate, - ), - hidePresentationOnJoin: getFromUserSettings('bbb_hide_presentation_on_join', LAYOUT_CONFIG.hidePresentationOnJoin), - hideActionsBar: getFromUserSettings('bbb_hide_actions_bar', false), - hideNavBar: getFromUserSettings('bbb_hide_nav_bar', false), - User: currentUser, - }; -})(AppContainer); - -// TODO: Remove this -// Temporary component until we remove all trackers -export default (props) => { - const isScreenSharing = useIsSharing(); - const screenSharingContentType = useSharingContentType(); - return ( - - ); -}; +export default AppContainer;