feat(widgets): try alert box settings embed

app/components-react/index.ts

@@ -50,6 +50,7 @@ import MultistreamChatInfo from './windows/MultistreamChatInfo';
 import Blank from './windows/Blank';
 import PlatformMerge from './pages/PlatformMerge';
 import AlertboxLibrary from './pages/AlertboxLibrary';
+import AlertBoxPropertiesEmbed from './widgets/AlertBoxPropertiesEmbed';
 import PlatformAppStore from './pages/PlatformAppStore';
 import BrowseOverlays from './pages/BrowseOverlays';
 import PlatformAppMainPage from './pages/PlatformAppMainPage';
@@ -103,6 +104,7 @@ export const components = {
   ThemeAudit,
   StudioEditor,
   WidgetWindow: createRoot(WidgetWindow),
+  AlertBoxPropertiesEmbed: createRoot(AlertBoxPropertiesEmbed),
   CustomCodeWindow: createRoot(CustomCodeWindow),
   SafeMode,
   AdvancedAudio: createRoot(AdvancedAudio),

app/components-react/widgets/AlertBoxPropertiesEmbed.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Services } from 'components-react/service-provider';
+import BrowserView from 'components-react/shared/BrowserView';
+import { ModalLayout } from '../shared/ModalLayout';
+import { Alert } from 'antd';
+import { $t } from 'services/i18n';
+
+export default function AlertBoxPropertiesEmbed() {
+  const onBrowserViewReady = (_view: Electron.BrowserView) => {
+    //view.webContents.on('did-finish-load', () => {
+    //  view.webContents.openDevTools();
+    //});
+  };
+  const { HostsService, MagicLinkService } = Services;
+  const alertBoxPropertiesUrl = `https://${HostsService.streamlabs}/dashboard/alertbox?desktop=true`;
+  const [url, setUrl] = useState('');
+  const [loading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    console.log('on effect');
+    MagicLinkService.actions.return
+      .getMagicSessionUrl(alertBoxPropertiesUrl)
+      .then(url => {
+        console.log('setting url to ', url);
+        if (url) {
+          setUrl(url);
+        }
+      })
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const Component = useMemo(() => {
+    if (loading) {
+      // Rely on child window loader
+      return <></>;
+    }
+    return url ? (
+      <BrowserView
+        onReady={onBrowserViewReady}
+        src={alertBoxPropertiesUrl}
+        style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
+        setLocale
+      />
+    ) : (
+      <Alert message={$t('Error loading AlertBox properties')} type="error" />
+    );
+  }, [loading, url]);
+
+  return (
+    <ModalLayout bodyStyle={{ padding: '0px' }} hideFooter={true}>
+      {Component}
+    </ModalLayout>
+  );
+}

app/components/shared/ReactComponentList.tsx

@@ -33,6 +33,14 @@ export class AdvancedStatistics extends ReactComponent {}
 })
 export class AlertboxLibrary extends ReactComponent {}
 
+@Component({
+  props: {
+    name: { default: 'AlertBoxPropertiesEmbed' },
+    wrapperStyles: { default: () => ({ height: '100%' }) },
+  },
+})
+export class AlertBoxPropertiesEmbed extends ReactComponent {}
+
 @Component({ props: { name: { default: 'Blank' } } })
 export class Blank extends ReactComponent {}
 

app/i18n/en-US/widget-alertbox.json

@@ -154,5 +154,6 @@
   "This applies to all alerts. If enabled all alerts need to be approved manually.": "This applies to all alerts. If enabled all alerts need to be approved manually.",
   "Use unlimited delay": "Use unlimited delay",
   "When enabled new alerts will interrupt the on screen alert": "When enabled new alerts will interrupt the on screen alert",
-  "Text Highlight Color": "Text Highlight Color"
+  "Text Highlight Color": "Text Highlight Color",
+  "Error loading AlertBox properties": "Error loading AlertBox properties"
 }

app/services/sources/sources.ts

@@ -786,7 +786,12 @@ export class SourcesService extends StatefulService<ISourcesState> {
     const isReactComponent =
       this.incrementalRolloutService.views.featureIsEnabled(EAvailableFeatures.reactWidgets) &&
       reactWidgets.includes(componentName);
-    const windowComponentName = isReactComponent ? 'WidgetWindow' : componentName;
+
+    // We're embedding alertbox properties from dashboard, change component if so
+    const reactComponentName =
+      componentName === 'AlertBox' ? 'AlertBoxPropertiesEmbed' : 'WidgetWindow';
+
+    const windowComponentName = isReactComponent ? reactComponentName : componentName;
 
     const defaultVueWindowSize = { width: 920, height: 1024 };
     const defaultReactWindowSize = { width: 600, height: 800 };

app/services/windows.ts

@@ -44,6 +44,7 @@ import {
   EditTransform,
   Blank,
   MultistreamChatInfo,
+  AlertBoxPropertiesEmbed,
 } from 'components/shared/ReactComponentList';
 
 import SourcePropertiesDeprecated from 'components/windows/SourceProperties.vue';
@@ -145,6 +146,7 @@ export function getComponents() {
     CustomCodeWindow,
     SourceShowcase,
     RecordingHistory,
+    AlertBoxPropertiesEmbed,
   };
 }