Port Main Window to React

app/app.ts

@@ -30,15 +30,20 @@ import { getResource } from 'services';
 import * as obs from '../obs-api';
 import path from 'path';
 import util from 'util';
-import uuid from 'uuid/v4';
-import Main from 'components/windows/Main.vue';
 import { Loader, Blank } from 'components/shared/ReactComponentList';
+import Main from 'components/windows/Main';
 import process from 'process';
 import { MetricsService } from 'services/metrics';
 import { UsageStatisticsService } from 'services/usage-statistics';
 import * as remote from '@electron/remote';
 import { RealmService } from 'app-services';
 
+// // TODO: commented until we remove slap library
+// // For React Windows
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+// import Main from 'components-react/windows/Main';
+
 const { ipcRenderer } = electron;
 const slobsVersion = Utils.env.SLOBS_VERSION;
 const isProduction = Utils.env.NODE_ENV === 'production';
@@ -335,8 +340,11 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
   }
 
-  // create a root Vue component
   const windowId = Utils.getCurrentUrlParams().windowId;
+
+  // // TODO: commented until we remove slap library
+  // if (windowId !== 'main') {
+  // create a root Vue component
   const vm = new Vue({
     i18n,
     store,
@@ -360,18 +368,30 @@ document.addEventListener('DOMContentLoaded', async () => {
     render(h) {
       if (this.isRefreshing) return h(Blank);
       if (windowId === 'worker') return h(Blank);
+      if (windowId === 'main') return h(Main);
       if (windowId === 'child') {
         if (store.state.bulkLoadFinished && store.state.i18nReady) {
           return h(ChildWindow);
         }
 
         return h(Loader);
       }
-      if (windowId === 'main') return h(Main);
       return h(OneOffWindow);
     },
   });
 
+  // allow to refresh the window by pressing `F5` in the DevMode
+  if (Utils.isDevMode()) {
+    window.addEventListener('keyup', ev => {
+      if (ev.key === 'F5') vm.startWindowRefresh();
+    });
+  }
+  // // TODO: commented until we remove slap library
+  // } else {
+  //   // create a roote React component
+  //   ReactDOM.render(React.createElement(Main), document.getElementById('app'));
+  // }
+
   let mainWindowShowTime = 0;
   if (Utils.isMainWindow()) {
     remote.getCurrentWindow().show();
@@ -398,13 +418,6 @@ document.addEventListener('DOMContentLoaded', async () => {
       if (ctx) setSentryContext(ctx);
       userService.sentryContext.subscribe(setSentryContext);
     }
-
-    // allow to refresh the window by pressing `F5` in the DevMode
-    if (Utils.isDevMode()) {
-      window.addEventListener('keyup', ev => {
-        if (ev.key === 'F5') vm.startWindowRefresh();
-      });
-    }
   });
 });
 

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

@@ -9,15 +9,14 @@ import styles from './RecentEvents.m.less';
 
 const mins = { x: 360, y: 150 };
 
-export function LegacyEvents(p: { onPopout: () => void }) {
+export function LegacyEvents() {
   const { UserService, RecentEventsService, MagicLinkService } = Services;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const magicLinkDisabled = useRef(false);
 
   function popoutRecentEvents() {
-    p.onPopout();
-    return RecentEventsService.openRecentEventsWindow();
+    return RecentEventsService.actions.openRecentEventsWindow();
   }
 
   function handleBrowserViewReady(view: Electron.BrowserView) {

app/components-react/editor/elements/index.ts

@@ -1,7 +1,7 @@
-export { MiniFeed } from './Minifeed';
+export { MiniFeed as Minifeed } from './Minifeed';
 export { LegacyEvents } from './LegacyEvents';
-export { SceneSelectorElement } from './SceneSelector';
-export { SourceSelectorElement } from './SourceSelector';
+export { SceneSelectorElement as Scenes } from './SceneSelector';
+export { SourceSelectorElement as Sources } from './SourceSelector';
 export { Mixer } from './Mixer';
 export { RecordingPreview } from './RecordingPreview';
 export { StreamPreview } from './StreamPreview';

app/components-react/editor/layouts/Classic.tsx

@@ -13,7 +13,7 @@ export function Classic(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={styles.rows} ref={componentRef}>
+    <div className={cx(styles.rows, p.className)} ref={componentRef}>
       <div className={styles.cell} style={{ height: `${100 - resizes.bar1 * 100}%` }}>
         {p.children?.['1'] || <></>}
       </div>

app/components-react/editor/layouts/Default.tsx

@@ -13,7 +13,7 @@ export function Default(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={styles.rows} ref={componentRef}>
+    <div className={cx(styles.rows, p.className)} ref={componentRef}>
       <div
         className={styles.cell}
         style={{ height: `${100 - (resizes.bar1 + resizes.bar2!) * 100}%` }}

app/components-react/editor/layouts/FourByFour.tsx

@@ -13,7 +13,7 @@ export function FourByFour(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={styles.rows} ref={componentRef}>
+    <div className={cx(styles.rows, p.className)} ref={componentRef}>
       <div
         className={styles.cell}
         style={{ height: `${100 - (resizes.bar1 + resizes.bar2) * 100}%` }}

app/components-react/editor/layouts/OnePane.tsx

@@ -13,7 +13,7 @@ export function OnePane(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={cx(styles.columns, styles.sidePadded)} ref={componentRef}>
+    <div className={cx(styles.columns, styles.sidePadded, p.className)} ref={componentRef}>
       <ResizeBar
         position="left"
         value={bars.bar1}

app/components-react/editor/layouts/OnePaneR.tsx

@@ -13,7 +13,7 @@ export function OnePaneR(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={cx(styles.columns, styles.sidePadded)} ref={componentRef}>
+    <div className={cx(styles.columns, styles.sidePadded, p.className)} ref={componentRef}>
       <div
         className={styles.rows}
         style={{ width: `${100 - resizes.bar1 * 100}%`, paddingTop: '16px' }}

app/components-react/editor/layouts/Pyramid.tsx

@@ -13,7 +13,7 @@ export function Pyramid(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={styles.rows} ref={componentRef}>
+    <div className={cx(styles.rows, p.className)} ref={componentRef}>
       <div className={styles.cell} style={{ height: `${100 - resizes.bar1 * 100}%` }}>
         {p.children?.['1'] || <></>}
       </div>

app/components-react/editor/layouts/Triplets.tsx

@@ -17,7 +17,7 @@ export function Triplets(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={cx(styles.columns, styles.sidePadded)} ref={componentRef}>
+    <div className={cx(styles.columns, styles.sidePadded, p.className)} ref={componentRef}>
       <ResizeBar
         position="left"
         value={bars.bar1}

app/components-react/editor/layouts/TwoPane.tsx

@@ -13,7 +13,7 @@ export function TwoPane(p: React.PropsWithChildren<LayoutProps>) {
   );
 
   return (
-    <div className={cx(styles.columns, styles.sidePadded)} ref={componentRef}>
+    <div className={cx(styles.columns, styles.sidePadded, p.className)} ref={componentRef}>
       <ResizeBar
         position="left"
         value={bars.bar1}

app/components-react/editor/layouts/hooks.tsx

@@ -6,6 +6,7 @@ import { Services } from 'components-react/service-provider';
 export class LayoutProps {
   onTotalWidth: (slots: IVec2Array, isColumns: boolean) => void = () => {};
   childrenMins: Dictionary<IVec2>;
+  className?: string;
 }
 
 export interface IResizeMins {

app/components-react/index.ts

@@ -7,29 +7,16 @@ import ScreenCaptureProperties from './windows/ScreenCaptureProperties';
 import GuestCamProperties from './windows/GuestCamProperties';
 import News from './windows/notifications/News';
 import PerformanceMetrics from './shared/PerformanceMetrics';
-import PatchNotes from './pages/PatchNotes';
 import Display from './shared/Display';
 import TitleBar from './shared/TitleBar';
-import Chat from './root/Chat';
-import Highlighter from './pages/Highlighter';
-import Grow from './pages/grow/Grow';
-import Loader from './pages/Loader';
 import PlatformLogo from './shared/PlatformLogo';
-import Onboarding from './pages/onboarding/Onboarding';
 import AdvancedStatistics from './windows/AdvancedStatistics';
-import StudioFooter from './root/StudioFooter';
-import StreamScheduler from './pages/stream-scheduler/StreamScheduler';
 import { createRoot } from './root/ReactRoot';
-import StartStreamingButton from './root/StartStreamingButton';
 import SourceProperties from './windows/SourceProperties';
-import TestWidgets from './root/TestWidgets';
 import RenameSource from './windows/RenameSource';
-import NotificationsArea from './root/NotificationsArea';
-import StudioEditor from './root/StudioEditor';
 import SharedComponentsLibrary from './windows/sharedComponentsLibrary/SharedComponentsLibrary';
 import { ObsSettings } from './windows/settings/ObsSettings';
 import ManageSceneCollections from './windows/ManageSceneCollections';
-import ThemeAudit from './pages/ThemeAudit';
 import { WidgetWindow } from './widgets/common/WidgetWindow';
 import SafeMode from './windows/SafeMode';
 import AdvancedAudio from './windows/advanced-audio';
@@ -39,7 +26,6 @@ import SourceFilters from './windows/SourceFilters';
 import RecentEvents from './editor/elements/RecentEvents';
 import BrowserView from './shared/BrowserView';
 import MediaGallery from './windows/MediaGallery';
-import LayoutEditor from './pages/layout-editor/LayoutEditor';
 import Projector from './windows/Projector';
 import AddSource from './windows/AddSource';
 import SideNav from './sidebar/SideNav';
@@ -48,27 +34,21 @@ import Notifications from './windows/notifications/Notifications';
 import NotificationsAndNews from './windows/notifications';
 import MultistreamChatInfo from './windows/MultistreamChatInfo';
 import Blank from './windows/Blank';
-import PlatformMerge from './pages/PlatformMerge';
-import AlertboxLibrary from './pages/AlertboxLibrary';
-import PlatformAppStore from './pages/PlatformAppStore';
-import BrowseOverlays from './pages/BrowseOverlays';
-import PlatformAppMainPage from './pages/PlatformAppMainPage';
 import PlatformAppPageView from './shared/PlatformAppPageView';
 import PlatformAppPopOut from './windows/PlatformAppPopOut';
 import RecentEventsWindow from './windows/RecentEvents';
 import NewBadge from './shared/NewBadge';
-import RecordingHistory from './pages/RecordingHistory';
 import UltraIcon from './shared/UltraIcon';
 import EditTransform from './windows/EditTransform';
 import InstalledApps from './windows/settings/InstalledApps';
 import Hotkeys from './windows/settings/Hotkeys';
-import Studio from './pages/Studio';
-import LiveDock from './root/LiveDock';
+import Main from './windows/Main';
+import Loader from './pages/Loader';
+import StartStreamingButton from './root/StartStreamingButton';
+import { PlatformMerge, PlatformAppStore, PlatformAppMainPage } from './pages';
 
 // list of React components to be used inside Vue components
 export const components = {
-  AlertboxLibrary,
-  BrowseOverlays,
   NameFolder,
   NameScene,
   BrowserView,
@@ -80,28 +60,15 @@ export const components = {
   News,
   PerformanceMetrics,
   ManageSceneCollections,
-  PatchNotes,
   Display,
   TitleBar,
-  Chat,
-  Highlighter: createRoot(Highlighter),
-  Grow,
-  Loader,
   PlatformLogo,
-  Onboarding: createRoot(Onboarding),
   Projector,
-  StreamScheduler: createRoot(StreamScheduler),
   AdvancedStatistics,
   SourceProperties: createRoot(SourceProperties),
   SharedComponentsLibrary: createRoot(SharedComponentsLibrary),
-  TestWidgets,
   RenameSource,
-  StudioFooter: createRoot(StudioFooter),
-  StartStreamingButton,
-  NotificationsArea,
   ObsSettings: createRoot(ObsSettings),
-  ThemeAudit,
-  StudioEditor,
   WidgetWindow: createRoot(WidgetWindow),
   CustomCodeWindow: createRoot(CustomCodeWindow),
   SafeMode,
@@ -110,9 +77,7 @@ export const components = {
   SourceFilters,
   RecentEvents,
   MediaGallery,
-  LayoutEditor: createRoot(LayoutEditor),
   AddSource,
-  RecordingHistory: createRoot(RecordingHistory),
   RecentEventsWindow,
   SideNav,
   WelcomeToPrime,
@@ -130,6 +95,7 @@ export const components = {
   InstalledApps,
   Blank,
   Hotkeys,
-  LiveDock: createRoot(LiveDock),
-  Studio: createRoot(Studio),
+  Main: createRoot(Main),
+  Loader,
+  StartStreamingButton,
 };

app/components-react/pages/AlertboxLibrary.tsx

@@ -9,7 +9,7 @@ import { GuestApiHandler } from 'util/guest-api-handler';
 import { IDownloadProgress } from 'util/requests';
 import { Services } from 'components-react/service-provider';
 
-export default function AlertboxLibrary(p: { params: { id?: string } }) {
+export default function AlertboxLibrary(p: { params: { id?: string }; className?: string }) {
   const {
     NotificationsService,
     JsonrpcService,
@@ -85,6 +85,7 @@ export default function AlertboxLibrary(p: { params: { id?: string } }) {
   if (!libraryUrl) return <></>;
   return (
     <BrowserView
+      className={p.className}
       style={{ position: 'absolute', top: '0', left: '0', right: '0', bottom: '0' }}
       src={libraryUrl}
       enableGuestApi

app/components-react/pages/BrowseOverlays.tsx

@@ -13,6 +13,7 @@ import { Services } from 'components-react/service-provider';
 
 export default function BrowseOverlays(p: {
   params: { type?: 'overlay' | 'widget-themes' | 'site-themes'; id?: string; install?: string };
+  className?: string;
 }) {
   const {
     UserService,
@@ -282,6 +283,7 @@ export default function BrowseOverlays(p: {
   if (!overlaysUrl) return <></>;
   return (
     <BrowserView
+      className={p.className}
       onReady={onBrowserViewReady}
       src={overlaysUrl}
       style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}

app/components-react/pages/Loader.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import cx from 'classnames';
 import SvgContainer from 'components-react/shared/SvgContainer';
 import { $t } from 'services/i18n';
 
@@ -35,7 +36,7 @@ const loadingStrings = () => [
   'You can customize the design of your tip page from the Theme Library.',
 ];
 
-export default function Loader() {
+export default function Loader(p: { className?: string }) {
   const [loaderText, setLoaderText] = useState('');
   useEffect(lifecycle, []);
 
@@ -57,7 +58,7 @@ export default function Loader() {
   }
 
   return (
-    <div className="s-loader">
+    <div className={cx('s-loader', p.className)}>
       <div className="s-loader__bg">
         <div className="s-loader__inner">
           <Spinner />

app/components-react/pages/PatchNotes.tsx

@@ -1,10 +1,11 @@
-import { $t } from '../../services/i18n';
 import React from 'react';
-import { Services } from '../service-provider';
 import cx from 'classnames';
+import { $t } from '../../services/i18n';
+import { Services } from '../service-provider';
+
 import styles from './PatchNotes.m.less';
 
-export default function PatchNotes() {
+export default function PatchNotes(p: { className?: string }) {
   const { PatchNotesService, NavigationService } = Services;
 
   const notes = PatchNotesService.notes;
@@ -14,7 +15,7 @@ export default function PatchNotes() {
   }
 
   return (
-    <div className={styles.patchNotesPage}>
+    <div className={cx(styles.patchNotesPage, p.className)}>
       <div className={styles.patchNotesContainer}>
         <div className={styles.patchNotesContent}>
           <div className={styles.patchNotesHeader}>