Fix performance mode reactivity (#4914)

stream-labs · Mar 25, 2024 · a17703f · a17703f
1 parent 5dd7acd
commit a17703f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/app/components-react/editor/elements/Mixer.tsx b/app/components-react/editor/elements/Mixer.tsx
@@ -8,6 +8,7 @@ import MixerItem from './mixer/MixerItem';
 import { Services } from 'components-react/service-provider';
 import { Menu } from 'util/menus/Menu';
 import { $t } from 'services/i18n';
+import { useRealmObject } from 'components-react/hooks/realm';
 
 const mins = { x: 150, y: 120 };
 
@@ -24,8 +25,8 @@ export function Mixer() {
     return !canvas.getContext('webgl');
   }, []);
 
-  const { performanceMode, audioSourceIds } = useVuex(() => ({
-    performanceMode: CustomizationService.state.performanceMode,
+  const performanceMode = useRealmObject(CustomizationService.state).performanceMode;
+  const { audioSourceIds } = useVuex(() => ({
     audioSourceIds: AudioService.views.sourcesForCurrentScene
       .filter(source => !source.mixerHidden && source.isControlledViaObs)
       .map(source => source.sourceId),

diff --git a/app/components-react/editor/elements/mixer/MixerItem.tsx b/app/components-react/editor/elements/mixer/MixerItem.tsx
@@ -6,13 +6,16 @@ import { useVuex } from 'components-react/hooks';
 import { EditMenu } from 'util/menus/EditMenu';
 import MixerVolmeter from './CanvasVolmeter';
 import styles from './MixerItem.m.less';
+import { useRealmObject } from 'components-react/hooks/realm';
 
 export default function MixerItem(p: { audioSourceId: string; volmetersEnabled?: boolean }) {
   const volmetersEnabled = p.volmetersEnabled ?? true;
 
   const { CustomizationService, EditorCommandsService, SourcesService, AudioService } = Services;
 
-  const { performanceMode, sourceName, muted, deflection, db } = useVuex(() => ({
+  const performanceMode = useRealmObject(CustomizationService.state).performanceMode;
+
+  const { sourceName, muted, deflection, db } = useVuex(() => ({
     performanceMode: CustomizationService.state.performanceMode,
     sourceName: SourcesService.state.sources[p.audioSourceId].name,
     muted: AudioService.views.getSource(p.audioSourceId).muted,

diff --git a/app/components-react/root/StudioEditor.tsx b/app/components-react/root/StudioEditor.tsx
@@ -10,6 +10,7 @@ import { TDisplayType } from 'services/settings-v2';
 import AutoProgressBar from 'components-react/shared/AutoProgressBar';
 import { useSubscription } from 'components-react/hooks/useSubscription';
 import { message } from 'antd';
+import { useRealmObject } from 'components-react/hooks/realm';
 
 export default function StudioEditor() {
   const {
@@ -21,9 +22,9 @@ export default function StudioEditor() {
     DualOutputService,
     StreamingService,
   } = Services;
+  const performanceMode = useRealmObject(CustomizationService.state).performanceMode;
   const v = useVuex(() => ({
     hideStyleBlockers: WindowsService.state.main.hideStyleBlockers,
-    performanceMode: CustomizationService.state.performanceMode,
     cursor: EditorService.state.cursor,
     studioMode: TransitionsService.state.studioMode,
     dualOutputMode: DualOutputService.views.dualOutputMode,
@@ -33,7 +34,7 @@ export default function StudioEditor() {
     activeSceneId: ScenesService.views.activeSceneId,
     isLoading: DualOutputService.views.isLoading,
   }));
-  const displayEnabled = !v.hideStyleBlockers && !v.performanceMode && !v.isLoading;
+  const displayEnabled = !v.hideStyleBlockers && !performanceMode && !v.isLoading;
   const placeholderRef = useRef<HTMLDivElement>(null);
   const studioModeRef = useRef<HTMLDivElement>(null);
   const [studioModeStacked, setStudioModeStacked] = useState(false);
@@ -52,7 +53,7 @@ export default function StudioEditor() {
   useEffect(() => {
     let timeout: number;
 
-    if (displayEnabled || v.performanceMode) return;
+    if (displayEnabled || performanceMode) return;
 
     function checkVerticalOrientation() {
       if (placeholderRef.current) {
@@ -68,7 +69,7 @@ export default function StudioEditor() {
     return () => {
       if (timeout) clearTimeout(timeout);
     };
-  }, [displayEnabled, v.performanceMode]);
+  }, [displayEnabled, performanceMode]);
 
   // Track orientation for studio mode
   useEffect(() => {
@@ -278,7 +279,7 @@ export default function StudioEditor() {
       {v.isLoading && <DualOutputProgressBar sceneId={v.activeSceneId} />}
       {!displayEnabled && (
         <div className={styles.noPreview}>
-          {v.performanceMode && (
+          {performanceMode && (
             <div className={styles.message}>
               {$t('Preview is disabled in performance mode')}
               <div
@@ -289,7 +290,7 @@ export default function StudioEditor() {
               </div>
             </div>
           )}
-          {!v.performanceMode && (
+          {!performanceMode && (
             <div className={styles.placeholder} ref={placeholderRef}>
               {v.studioMode && (
                 <div