refactor(settings): remove both Meteor's Tracker.Dependency and all uses in old format

bigbluebutton-html5/imports/startup/client/base.jsx

@@ -17,6 +17,8 @@ import DebugWindow from '/imports/ui/components/debug-window/component';
 import { ACTIONS, PANELS } from '../../ui/components/layout/enums';
 import { isChatEnabled } from '/imports/ui/services/features';
 import useUserChangedLocalSettings from '/imports/ui/services/settings/hooks/useUserChangedLocalSettings';
+import useSettings from '/imports/ui/services/settings/hooks/useSettings';
+import { SETTINGS } from '/imports/ui/services/settings/enums';
 
 const CHAT_CONFIG = window.meetingClientSettings.public.chat;
 const PUBLIC_CHAT_ID = CHAT_CONFIG.public_group_id;
@@ -185,14 +187,17 @@ Base.propTypes = propTypes;
 Base.defaultProps = defaultProps;
 
 const BaseContainer = (props) => {
+  const { isGridLayout } = props;
   const sidebarContent = layoutSelectInput((i) => i.sidebarContent);
   const { sidebarContentPanel } = sidebarContent;
   const layoutContextDispatch = layoutDispatch();
   const setLocalSettings = useUserChangedLocalSettings();
+  const { paginationEnabled, animations } = useSettings(SETTINGS.APPLICATION);
+  const { viewParticipantsWebcams, viewScreenshare } = useSettings(SETTINGS.DATA_SAVING);
   const { streams: usersVideo } = useVideoStreams(
-    props.isGridLayout,
-    props.paginationEnabled,
-    props.viewParticipantsWebcams,
+    isGridLayout,
+    paginationEnabled,
+    viewParticipantsWebcams,
   );
 
   return (
@@ -202,6 +207,8 @@ const BaseContainer = (props) => {
         layoutContextDispatch,
         setLocalSettings,
         usersVideo,
+        animations,
+        viewScreenshare,
         ...props,
       }}
     />
@@ -209,10 +216,6 @@ const BaseContainer = (props) => {
 };
 
 export default withTracker(() => {
-  const {
-    animations,
-  } = Settings.application;
-
   const {
     loggedIn,
   } = Auth;
@@ -223,13 +226,10 @@ export default withTracker(() => {
   const isGridLayout = Session.get('isGridEnabled');
   return {
     userSubscriptionHandler,
-    animations,
     isMeteorConnected: Meteor.status().connected,
     meetingIsBreakout: AppService.meetingIsBreakout(),
     loggedIn,
     codeError,
-    paginationEnabled: Settings.application.paginationEnabled,
-    viewParticipantsWebcams: Settings.dataSaving.viewParticipantsWebcams,
     isGridLayout,
   };
 })(BaseContainer);

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

@@ -2,12 +2,16 @@ import React from 'react';
 import { withTracker } from 'meteor/react-meteor-data';
 import ScreenshareButton from './component';
 import { isScreenSharingEnabled } from '/imports/ui/services/features';
-import {
-  isScreenBroadcasting,
-  dataSavingSetting,
-} from '/imports/ui/components/screenshare/service';
+import { isScreenBroadcasting } from '/imports/ui/components/screenshare/service';
+import useSettings from '/imports/ui/services/settings/hooks/useSettings';
+import { SETTINGS } from '/imports/ui/services/settings/enums';
 
-const ScreenshareButtonContainer = (props) => <ScreenshareButton {...props} />;
+const ScreenshareButtonContainer = (props) => {
+  const { viewScreenshare: screenshareDataSavingSetting } = useSettings(SETTINGS.DATA_SAVING);
+  return (
+    <ScreenshareButton screenshareDataSavingSetting={screenshareDataSavingSetting} {...props} />
+  );
+};
 
 /*
  * All props, including the ones that are inherited from actions-bar
@@ -19,6 +23,5 @@ const ScreenshareButtonContainer = (props) => <ScreenshareButton {...props} />;
  */
 export default withTracker(() => ({
   isScreenBroadcasting: isScreenBroadcasting(),
-  screenshareDataSavingSetting: dataSavingSetting(),
   enabled: isScreenSharingEnabled(),
 }))(ScreenshareButtonContainer);

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -7,7 +7,6 @@ import AudioCaptionsLiveContainer from '/imports/ui/components/audio/audio-graph
 import { notify } from '/imports/ui/services/notification';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import deviceInfo from '/imports/utils/deviceInfo';
-import Settings from '/imports/ui/services/settings';
 import MediaService from '/imports/ui/components/media/service';
 import { isPresentationEnabled, isExternalVideoEnabled } from '/imports/ui/services/features';
 import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
@@ -24,7 +23,6 @@ import { SET_MOBILE_FLAG } from '/imports/ui/core/graphql/mutations/userMutation
 import { SET_SYNC_WITH_PRESENTER_LAYOUT, SET_LAYOUT_PROPS } from './mutations';
 
 import {
-  getFontSize,
   getBreakoutRooms,
 } from './service';
 
@@ -32,6 +30,8 @@ import App from './component';
 import useToggleVoice from '../audio/audio-graphql/hooks/useToggleVoice';
 import useUserChangedLocalSettings from '../../services/settings/hooks/useUserChangedLocalSettings';
 import { PINNED_PAD_SUBSCRIPTION } from '../notes/queries';
+import useSettings from '../../services/settings/hooks/useSettings';
+import { SETTINGS } from '../../services/settings/enums';
 
 const CUSTOM_STYLE_URL = window.meetingClientSettings.public.app.customStyleUrl;
 const NOTES_CONFIG = window.meetingClientSettings.public.notes;
@@ -49,8 +49,6 @@ const AppContainer = (props) => {
 
   const {
     actionsbar,
-    selectedLayout,
-    pushLayout,
     pushLayoutMeeting,
     currentUserId,
     shouldShowScreenshare: propsShouldShowScreenshare,
@@ -63,10 +61,21 @@ const AppContainer = (props) => {
     meetingLayoutCameraPosition,
     meetingLayoutFocusedCamera,
     meetingLayoutVideoRate,
-    viewScreenshare,
     ...otherProps
   } = props;
 
+  const {
+    selectedLayout,
+    pushLayout,
+    audioAlertEnabled,
+    pushAlertEnabled,
+    darkTheme,
+    fontSize = '16px',
+  } = useSettings(SETTINGS.APPLICATION);
+  const {
+    viewScreenshare,
+  } = useSettings(SETTINGS.DATA_SAVING);
+
   const sidebarContent = layoutSelectInput((i) => i.sidebarContent);
   const genericComponent = layoutSelectInput((i) => i.genericComponent);
   const sidebarNavigation = layoutSelectInput((i) => i.sidebarNavigation);
@@ -241,6 +250,10 @@ const AppContainer = (props) => {
           audioCaptions: <AudioCaptionsLiveContainer speechLocale={currentUserData?.speechLocale} />,
           inactivityWarningDisplay,
           inactivityWarningTimeoutSecs,
+          audioAlertEnabled,
+          pushAlertEnabled,
+          darkTheme,
+          fontSize,
         }}
         {...otherProps}
       />
@@ -259,7 +272,8 @@ const currentUserEmoji = (currentUser) => (currentUser
   }
 );
 
-export default withTracker(() => {
+export default withTracker((props) => {
+  const { viewScreenshare } = props;
   const currentUser = Users.findOne(
     { userId: Auth.userID },
     {
@@ -286,12 +300,7 @@ export default withTracker(() => {
   const meetingLayoutUpdatedAt = new Date(layout.updatedAt).getTime();
 
   const meetingPresentationIsOpen = !layout.presentationMinimized;
-
-
-  const AppSettings = Settings.application;
-  const { selectedLayout, pushLayout } = AppSettings;
-  const { viewScreenshare } = Settings.dataSaving;
-  const shouldShowScreenshare = MediaService.shouldShowScreenshare();
+  const shouldShowScreenshare = MediaService.shouldShowScreenshare(viewScreenshare);
   let customStyleUrl = getFromUserSettings('bbb_custom_style_url', false);
 
   if (!customStyleUrl && CUSTOM_STYLE_URL) {
@@ -302,7 +311,6 @@ export default withTracker(() => {
 
   return {
     audioCaptions: <AudioCaptionsLiveContainer />,
-    fontSize: getFontSize(),
     hasBreakoutRooms: getBreakoutRooms().length > 0,
     customStyle: getFromUserSettings('bbb_custom_style', false),
     customStyleUrl,
@@ -320,14 +328,8 @@ export default withTracker(() => {
     meetingLayoutCameraPosition,
     meetingLayoutFocusedCamera,
     meetingLayoutVideoRate,
-    selectedLayout,
-    pushLayout,
     pushLayoutMeeting,
-    audioAlertEnabled: AppSettings.chatAudioAlerts,
-    pushAlertEnabled: AppSettings.chatPushAlerts,
-    darkTheme: AppSettings.darkTheme,
     shouldShowScreenshare,
-    viewScreenshare,
     isLargeFont: Session.get('isLargeFont'),
     presentationRestoreOnUpdate: getFromUserSettings(
       'bbb_force_restore_presentation_on_new_events',

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

@@ -1,17 +1,11 @@
 import Breakouts from '/imports/api/breakouts';
 import Meetings from '/imports/api/meetings';
-import Settings from '/imports/ui/services/settings';
 import Auth from '/imports/ui/services/auth/index';
 import deviceInfo from '/imports/utils/deviceInfo';
 import Styled from './styles';
 import DarkReader from 'darkreader';
 import logger from '/imports/startup/client/logger';
 
-export const getFontSize = () => {
-  const applicationSettings = Settings.application;
-  return applicationSettings ? applicationSettings.fontSize : '16px';
-};
-
 export const getBreakoutRooms = () => Breakouts.find().fetch();
 
 export function meetingIsBreakout() {
@@ -56,7 +50,6 @@ export const isDarkThemeEnabled = () => {
 };
 
 export default {
-  getFontSize,
   meetingIsBreakout,
   getBreakoutRooms,
   setDarkTheme,

bigbluebutton-html5/imports/ui/components/audio/container.jsx

@@ -18,9 +18,10 @@ import {
 
 import Service from './service';
 import AudioModalContainer from './audio-modal/container';
-import Settings from '/imports/ui/services/settings';
 import useToggleVoice from './audio-graphql/hooks/useToggleVoice';
 import usePreviousValue from '/imports/ui/hooks/usePreviousValue';
+import useSettings from '../../services/settings/hooks/useSettings';
+import { SETTINGS } from '../../services/settings/enums';
 
 const APP_CONFIG = window.meetingClientSettings.public.app;
 const KURENTO_CONFIG = window.meetingClientSettings.public.kurento;
@@ -85,9 +86,10 @@ const AudioContainer = (props) => {
     init,
     intl,
     userLocks,
-    microphoneConstraints,
   } = props;
 
+  const { microphoneConstraints } = useSettings(SETTINGS.APPLICATION);
+
   const prevProps = usePreviousValue(props);
   const toggleVoice = useToggleVoice();
   const { hasBreakoutRooms: hadBreakoutRooms } = prevProps || {};
@@ -184,7 +186,6 @@ export default lockContextContainer(injectIntl(withTracker(({
   intl, userLocks, isAudioModalOpen, setAudioModalIsOpen, setVideoPreviewModalIsOpen,
   speechLocale,
 }) => {
-  const { microphoneConstraints } = Settings.application;
   const autoJoin = getFromUserSettings('bbb_auto_join_audio', APP_CONFIG.autoJoin);
   const enableVideo = getFromUserSettings('bbb_enable_video', KURENTO_CONFIG.enableVideo);
   const autoShareWebcam = getFromUserSettings('bbb_auto_share_webcam', KURENTO_CONFIG.autoShareWebcam);
@@ -208,7 +209,6 @@ export default lockContextContainer(injectIntl(withTracker(({
     userSelectedListenOnly,
     isAudioModalOpen,
     setAudioModalIsOpen,
-    microphoneConstraints,
     init: async (toggleVoice) => {
       await Service.init(messages, intl, toggleVoice, speechLocale);
       if ((!autoJoin || didMountAutoJoin)) {

bigbluebutton-html5/imports/ui/components/connection-status/button/container.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { useSubscription } from '@apollo/client';
-import Settings from '/imports/ui/services/settings';
 import ConnectionStatusButtonComponent from './component';
 import { USER_CURRENT_STATUS_SUBSCRIPTION } from '../queries';
 import Auth from '/imports/ui/services/auth';
+import useSettings from '/imports/ui/services/settings/hooks/useSettings';
+import { SETTINGS } from '/imports/ui/services/settings/enums';
 
 const connectionStatusButtonContainer = (props) => {
   const { data } = useSubscription(USER_CURRENT_STATUS_SUBSCRIPTION, {
@@ -15,19 +16,25 @@ const connectionStatusButtonContainer = (props) => {
     ? data[0].currentStatus
     : 'normal';
 
-  return <ConnectionStatusButtonComponent myCurrentStatus={myCurrentStatus} {...props} />;
+  const { paginationEnabled } = useSettings(SETTINGS.APPLICATION);
+  const { viewParticipantsWebcams } = useSettings(SETTINGS.DATA_SAVING);
+
+  return (
+    <ConnectionStatusButtonComponent
+      myCurrentStatus={myCurrentStatus}
+      paginationEnabled={paginationEnabled}
+      viewParticipantsWebcams={viewParticipantsWebcams}
+      {...props}
+    />
+  );
 };
 
 export default withTracker(() => {
   const { connected } = Meteor.status();
   const isGridLayout = Session.get('isGridEnabled');
-  const { paginationEnabled } = Settings.application;
-  const { viewParticipantsWebcams } = Settings.dataSaving;
 
   return {
     connected,
     isGridLayout,
-    paginationEnabled,
-    viewParticipantsWebcams,
   };
 })(connectionStatusButtonContainer);

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

@@ -1,5 +1,4 @@
 import { isScreenBroadcasting, isCameraAsContentBroadcasting } from '/imports/ui/components/screenshare/service';
-import Settings from '/imports/ui/services/settings';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import {
   isScreenSharingEnabled, isCameraAsContentEnabled, isPresentationEnabled,
@@ -17,8 +16,7 @@ function shouldShowWhiteboard() {
   return true;
 }
 
-function shouldShowScreenshare() {
-  const { viewScreenshare } = Settings.dataSaving;
+function shouldShowScreenshare(viewScreenshare) {
   return (isScreenSharingEnabled() || isCameraAsContentEnabled())
     && (viewScreenshare || UserService.isUserPresenter())
     && (isScreenBroadcasting() || isCameraAsContentBroadcasting());

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

@@ -1,7 +1,6 @@
 import Screenshare from '/imports/api/screenshare';
 import KurentoBridge from '/imports/api/screenshare/client/bridge';
 import BridgeService from '/imports/api/screenshare/client/bridge/service';
-import Settings from '/imports/ui/services/settings';
 import logger from '/imports/startup/client/logger';
 import Auth from '/imports/ui/services/auth';
 import AudioService from '/imports/ui/components/audio/service';
@@ -337,8 +336,6 @@ const screenShareEndAlert = () => AudioService
     + window.meetingClientSettings.public.app.instanceId}`
     + '/resources/sounds/ScreenshareOff.mp3');
 
-const dataSavingSetting = () => Settings.dataSaving.viewScreenshare;
-
 /**
    * Get stats about all active screenshare peers.
    *
@@ -397,7 +394,6 @@ export {
   getBroadcastContentType,
   shareScreen,
   screenShareEndAlert,
-  dataSavingSetting,
   isSharing,
   setIsSharing,
   setSharingContentType,

bigbluebutton-html5/imports/ui/components/video-provider/video-provider-graphql/video-list/video-list-item/container.tsx

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Session } from 'meteor/session';
 import VoiceUsers from '/imports/api/voice-users/';
-import Settings from '/imports/ui/services/settings';
 import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
 import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context';
 import VideoListItem from './component';
 import { StreamUser, VideoItem } from '../../types';
 import { Layout } from '/imports/ui/components/layout/layoutTypes';
+import useSettings from '/imports/ui/services/settings/hooks/useSettings';
+import { SETTINGS } from '/imports/ui/services/settings/enums';
 
 type TrackerData = {
   disabledCams: string[];
-  settingsSelfViewDisable: boolean;
   user: Partial<StreamUser>;
   stream: VideoItem | undefined;
   voiceUser: {
@@ -53,7 +53,6 @@ const VideoListItemContainer: React.FC<VideoListItemContainerProps> = (props) =>
     onVideoItemMount,
     onVideoItemUnmount,
     onVirtualBgDrop,
-    settingsSelfViewDisable,
     stream,
     user,
     voiceUser,
@@ -64,6 +63,8 @@ const VideoListItemContainer: React.FC<VideoListItemContainerProps> = (props) =>
   const isFullscreenContext = (element === cameraId);
   const layoutContextDispatch = layoutDispatch();
   const isRTL = layoutSelect((i: Layout) => i.isRTL);
+  // @ts-ignore Untyped object
+  const { selfViewDisable: settingsSelfViewDisable } = useSettings(SETTINGS.APPLICATION);
 
   const { data: currentUserData } = useCurrentUser((user) => ({
     isModerator: user.isModerator,
@@ -107,8 +108,6 @@ export default withTracker<TrackerData, TrackerProps>((props) => {
   } = props;
 
   return {
-    // @ts-expect-error -> Untyped object.
-    settingsSelfViewDisable: Settings.application.selfViewDisable,
     voiceUser: VoiceUsers.findOne({ userId },
       {
         fields: {

bigbluebutton-html5/imports/ui/components/wake-lock/container.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import WakeLock from './component';
 import Service from './service';
-import Settings from '/imports/ui/services/settings';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import useUserChangedLocalSettings from '../../services/settings/hooks/useUserChangedLocalSettings';
+import useSettings from '../../services/settings/hooks/useSettings';
+import { SETTINGS } from '../../services/settings/enums';
 
 const APP_CONFIG = window.meetingClientSettings.public.app;
 
@@ -33,6 +34,7 @@ const WakeLockContainer = (props) => {
   const wereAudioModalsOpen = usePrevious(areAudioModalsOpen);
   const [endedAudioSetup, setEndedAudioSetup] = useState(false || !autoJoin);
   const setLocalSettings = useUserChangedLocalSettings();
+  const { wakeLock: wakeLockSettings } = useSettings(SETTINGS.APPLICATION);
 
   useEffect(() => {
     if (wereAudioModalsOpen && !areAudioModalsOpen && !endedAudioSetup) {
@@ -40,7 +42,13 @@ const WakeLockContainer = (props) => {
     }
   }, [areAudioModalsOpen]);
 
-  return endedAudioSetup ? <WakeLock setLocalSettings={setLocalSettings} {...props} /> : null;
+  return endedAudioSetup ? (
+    <WakeLock
+      setLocalSettings={setLocalSettings}
+      wakeLockSettings={wakeLockSettings}
+      {...props}
+    />
+  ) : null;
 };
 
 WakeLockContainer.propTypes = propTypes;
@@ -50,7 +58,6 @@ export default withTracker(() => {
   return {
     request: Service.request,
     release: Service.release,
-    wakeLockSettings: Settings.application.wakeLock,
     areAudioModalsOpen: Session.get('audioModalIsOpen') || Session.get('inEchoTest'),
     autoJoin: getFromUserSettings('bbb_auto_join_audio', APP_CONFIG.autoJoin),
   };

bigbluebutton-html5/imports/ui/services/settings/index.js

@@ -12,26 +12,19 @@ class Settings {
     Object.values(SETTINGS).forEach((p) => {
       const privateProp = `_${p}`;
       this[privateProp] = {
-        tracker: new Tracker.Dependency(),
-        var: makeVar(undefined),
-        value: undefined,
+        reactiveVar: makeVar(undefined),
       };
 
       const varProp = `${p}Var`;
       Object.defineProperty(this, varProp, {
-        get: () => this[privateProp].var,
+        get: () => this[privateProp].reactiveVar,
       });
 
       Object.defineProperty(this, p, {
-        get: () => {
-          this[privateProp].tracker.depend();
-          return this[privateProp].value;
-        },
+        get: () => this[privateProp].reactiveVar(),
 
         set: (v) => {
-          this[privateProp].value = v;
-          this[privateProp].var(v);
-          this[privateProp].tracker.changed();
+          this[privateProp].reactiveVar(v);
         },
       });
     });
@@ -76,7 +69,7 @@ class Settings {
     const Storage = (APP_CONFIG.userSettingsStorage === 'local') ? LocalStorage : SessionStorage;
     if (settings === CHANGED_SETTINGS) {
       Object.keys(this).forEach((k) => {
-        const values = this[k].value;
+        const values = this[k].reactiveVar && this[k].reactiveVar();
         const defaultValues = this.defaultSettings[k];
 
         if (!values) return;