Refactor display rendering to handle its own style blocking (#5434)

* Port LiveDock Component

* Fix import errors and tabs

* Add to ReactComponentList

* Fix strict nulls

* Fix import error

* Fix reactivity issues

* Fix positioning and styling

* Begin 1 to 1 port

* Define variables and functions

* Add missing classNames

* Fix non-modal redlines

* Add modals to react

* Import components

* Fix rendering bugs

* Add misssing classes

* Change scope of windowWidth

* Remove props from main window

* Move to native react rendering

* Revert to Vue wrapper component

* Fix stale style blockers

* Add css aliases

* Begin livedock restructure

* Fix rendering livedock

* Use Realm

* Fix compilation error

* Fix Livedock breaking render

* Use realm props binding

* fix: pass theme to `Loader`

* chore: uncoment main rendering

* fix(main): restore wrappers, should fix resizing behavior

* Restores main wrappers from the original Vue component, some of these
  are needed to preserve layout, while also in some cases separating the
  styles from the rendered component, e.g. footer, sidebar, where styles
  would be merged weirdly.
* `overflow: auto` is apparently required and that's what it seems to
  fix the cutoff at the bottom, combined with the above.
* Cleanup needed.

* Re-add ChatTabs

* Fix index typing for customization service

* Fix typing in Studio.tsx

* Fix resizing problem

* Fix css on resize bar

* Fix footer clipping at small sizes

* Fix livedock collapse

* Refactor resizebar into main window

* Get resize working

* Refactor to add collapse

* Fix dock resizing

* Add perf optimizations

* Add animation

* Fix non-editor size weirdness

* Fix chat disappearing

* Fix strict nulls issue

* Fix strict nulls again

* Fix strict nulls last time pls

* Address CR

* Fix many tests

* Fix skipOnboarding

* Add timeout to skipOnboarding

* Restore TestWidgets in Vue

* Increase wait time for loader

* Add additional await for titlebar to exist before attempting tests

* Ignore ResizeObserver issue

* Increase loadtime for skipOnboarding

* Fix tests that restart

* Refactor display rendering to handle its own style blocking

* Remove identical type

---------

Co-authored-by: gettinToasty <sbeyer@logitech.com>
Co-authored-by: Adrian Perez <adrian@adrianperez.org>

Author: 3 people

app/components-react/editor/elements/RecordingPreview.tsx

@@ -11,14 +11,13 @@ import { useVuex } from 'components-react/hooks';
 const mins = { x: 0, y: 0 };
 
 export function RecordingPreview() {
-  const { WindowsService, StreamingService } = Services;
+  const { StreamingService } = Services;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { renderElement } = useBaseElement(<RecPreview />, mins, containerRef.current);
 
-  const { hideStyleBlockers, selectiveRecording } = useVuex(() => ({
-    hideStyleBlockers: WindowsService.state[Util.getCurrentUrlParams().windowId].hideStyleBlockers,
+  const { selectiveRecording } = useVuex(() => ({
     selectiveRecording: StreamingService.state.selectiveRecording,
   }));
 
@@ -34,7 +33,6 @@ export function RecordingPreview() {
 
   function RecPreview() {
     if (!selectiveRecording) return <SelectiveRecordingMessage />;
-    if (hideStyleBlockers) return <div />;
     return <Display renderingMode={ERenderingMode.OBS_RECORDING_RENDERING} />;
   }
 

app/components-react/editor/elements/StreamPreview.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import Display from 'components-react/shared/Display';
-import Util from 'services/utils';
 import { ERenderingMode } from '../../../../obs-api';
 import styles from './BaseElement.m.less';
 import { $t } from 'services/i18n';
@@ -11,14 +10,13 @@ import { useVuex } from 'components-react/hooks';
 const mins = { x: 0, y: 0 };
 
 export function StreamPreview() {
-  const { WindowsService, StreamingService } = Services;
+  const { StreamingService } = Services;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { renderElement } = useBaseElement(<StreamPreviewElement />, mins, containerRef.current);
 
-  const { hideStyleBlockers, selectiveRecording } = useVuex(() => ({
-    hideStyleBlockers: WindowsService.state[Util.getCurrentUrlParams().windowId].hideStyleBlockers,
+  const { selectiveRecording } = useVuex(() => ({
     selectiveRecording: StreamingService.state.selectiveRecording,
   }));
 
@@ -34,7 +32,6 @@ export function StreamPreview() {
 
   function StreamPreviewElement() {
     if (!selectiveRecording) return <SelectiveRecordingMessage />;
-    if (hideStyleBlockers) return <div />;
     return <Display renderingMode={ERenderingMode.OBS_STREAMING_RENDERING} />;
   }
 

app/components-react/root/StudioEditor.tsx

@@ -32,7 +32,6 @@ export default function StudioEditor() {
   } = Services;
   const performanceMode = useRealmObject(CustomizationService.state).performanceMode;
   const v = useVuex(() => ({
-    hideStyleBlockers: WindowsService.state.main.hideStyleBlockers,
     cursor: EditorService.state.cursor,
     studioMode: TransitionsService.state.studioMode,
     dualOutputMode: DualOutputService.views.dualOutputMode,
@@ -43,8 +42,7 @@ export default function StudioEditor() {
     activeSceneId: ScenesService.views.activeSceneId,
     isLoading: DualOutputService.views.isLoading,
   }));
-
-  const displayEnabled = !v.hideStyleBlockers && !performanceMode && !v.isLoading;
+  const displayEnabled = !performanceMode && !v.isLoading;
   const placeholderRef = useRef<HTMLDivElement>(null);
   const studioModeRef = useRef<HTMLDivElement>(null);
   const [studioModeStacked, setStudioModeStacked] = useState(false);

app/components-react/shared/Display.tsx

@@ -5,6 +5,8 @@ import { Display as OBSDisplay } from '../../services/video';
 import { TDisplayType } from 'services/settings-v2/video';
 import uuid from 'uuid/v4';
 import { useRealmObject } from 'components-react/hooks/realm';
+import Utils from 'services/utils';
+
 interface DisplayProps {
   id?: string;
   sourceId?: string;
@@ -18,7 +20,8 @@ interface DisplayProps {
 }
 
 export default function Display(props: DisplayProps) {
-  const { CustomizationService, VideoSettingsService } = Services;
+  const { CustomizationService, VideoSettingsService, WindowsService } = Services;
+  const windowId = Utils.getWindowId();
 
   const p = {
     paddingSize: 0,
@@ -34,6 +37,7 @@ export default function Display(props: DisplayProps) {
 
     return {
       baseResolution: `${videoSettings?.baseWidth}x${videoSettings?.baseHeight}`,
+      hideDisplay: WindowsService.state[windowId]?.hideStyleBlockers,
     };
   }, false);
 
@@ -43,9 +47,21 @@ export default function Display(props: DisplayProps) {
   const displayEl = useRef<HTMLDivElement>(null);
 
   useEffect(updateDisplay, [p.sourceId, paddingColor]);
-  useEffect(refreshOutputRegion, [v.baseResolution]);
+  useEffect(handleResize, [v.baseResolution]);
+  useEffect(handleHideDisplay, [v.hideDisplay]);
+
+  function handleHideDisplay() {
+    if (v.hideDisplay) {
+      destroyDisplay();
+    } else {
+      createDisplay();
+      if (obsDisplay.current) {
+        obsDisplay.current.refreshOutputRegion();
+      }
+    }
+  }
 
-  function refreshOutputRegion() {
+  function handleResize() {
     if (!obsDisplay.current) return;
     const [width, height] = v.baseResolution.split('x');
     obsDisplay.current.resize(Number(width), Number(height));
@@ -55,7 +71,7 @@ export default function Display(props: DisplayProps) {
     p.clickHandler(event);
   }
 
-  async function createDisplay() {
+  function createDisplay() {
     const displayId = uuid();
     obsDisplay.current = new OBSDisplay(displayId, {
       sourceId: p.sourceId,
@@ -64,7 +80,6 @@ export default function Display(props: DisplayProps) {
       renderingMode: p.renderingMode,
       type: p.type,
     });
-    await refreshOutputRegion();
     obsDisplay.current.setShoulddrawUI(p.drawUI);
     obsDisplay.current.onOutputResize(region => p.onOutputResize(region));
     if (displayEl.current) obsDisplay.current.trackElement(displayEl.current);

app/components-react/windows/Projector.tsx

@@ -17,9 +17,8 @@ export default function Projector() {
 
   const { sourceId, renderingMode } = useOneOffWindowParams();
   const windowId = useMemo(() => Util.getCurrentUrlParams().windowId, []);
-  const { hideStyleBlockers, fullscreen } = useVuex(() => {
+  const { fullscreen } = useVuex(() => {
     return {
-      hideStyleBlockers: WindowsService.state[windowId].hideStyleBlockers,
       fullscreen: WindowsService.state[windowId].isFullScreen,
     };
   });
@@ -74,7 +73,7 @@ export default function Projector() {
                 ))}
               </div>
             </Scrollable>
-            {!hideStyleBlockers && <Display sourceId={sourceId} renderingMode={renderingMode} />}
+            <Display sourceId={sourceId} renderingMode={renderingMode} />
           </div>
         </ModalLayout>
       )}

app/components-react/windows/SourceProperties.tsx

@@ -26,7 +26,6 @@ export default function SourceProperties() {
   const [properties, setProperties] = useState(() =>
     source ? source.getPropertiesFormData() : [],
   );
-  const hideStyleBlockers = useVuex(() => WindowsService.state.child.hideStyleBlockers);
 
   // close the window if the source has been deleted
   useSubscription(SourcesService.sourceRemoved, removedSource => {
@@ -62,12 +61,7 @@ export default function SourceProperties() {
   return (
     <ModalLayout
       scrollable
-      fixedChild={
-        source &&
-        !hideStyleBlockers && (
-          <Display sourceId={source.sourceId} style={{ position: 'relative' }} />
-        )
-      }
+      fixedChild={source && <Display sourceId={source.sourceId} style={{ position: 'relative' }} />}
     >
       <ObsForm
         value={properties}

app/components/windows/SourceProperties.vue

@@ -6,11 +6,7 @@
     :cancel-handler="cancel"
     :fixedSectionHeight="200"
   >
-    <display
-      slot="fixed"
-      v-if="source && !hideStyleBlockers"
-      :componentProps="{ sourceId: source.id }"
-    />
+    <display slot="fixed" v-if="source" :componentProps="{ sourceId: source.id }" />
     <div slot="content" v-if="source">
       <component
         v-if="propertiesManagerUI"

app/components/windows/SourceProperties.vue.ts

@@ -61,10 +61,6 @@ export default class SourceProperties extends Vue {
     this.sourceUpdatedSub.unsubscribe();
   }
 
-  get hideStyleBlockers() {
-    return this.windowsService.state.child.hideStyleBlockers;
-  }
-
   get propertiesManagerUI() {
     if (this.source) return this.source.getPropertiesManagerUI();
   }

app/components/windows/WidgetEditor.vue

@@ -48,7 +48,7 @@
         >
           <div class="display">
             <display
-              v-if="!animating && !hideStyleBlockers"
+              v-if="!animating"
               :componentProps="{
                 sourceId: widget.previewSourceId,
                 clickHandler: e => createProjector(e),

app/components/windows/WidgetEditor.vue.ts

@@ -81,10 +81,6 @@ export default class WidgetEditor extends TsxComponent<WidgetEditorProps> {
   animating = false;
   canShowEditor = false;
 
-  get hideStyleBlockers() {
-    return this.windowsService.state.child.hideStyleBlockers;
-  }
-
   get loaded() {
     return !!this.settingsState.data;
   }