From aa4ba5332a85ce4ff0254fece32199fb499eef99 Mon Sep 17 00:00:00 2001 From: Adrian Perez Date: Wed, 20 Nov 2024 15:52:15 -0800 Subject: [PATCH] feat(widgets): try alert box settings embed --- app/components-react/index.ts | 2 + .../widgets/AlertBoxPropertiesEmbed.tsx | 54 +++++++++++++++++++ app/components/shared/ReactComponentList.tsx | 8 +++ app/i18n/en-US/widget-alertbox.json | 3 +- app/services/sources/sources.ts | 7 ++- app/services/windows.ts | 2 + 6 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 app/components-react/widgets/AlertBoxPropertiesEmbed.tsx diff --git a/app/components-react/index.ts b/app/components-react/index.ts index 39e9f6eafdbd..7d2b788a6354 100644 --- a/app/components-react/index.ts +++ b/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), diff --git a/app/components-react/widgets/AlertBoxPropertiesEmbed.tsx b/app/components-react/widgets/AlertBoxPropertiesEmbed.tsx new file mode 100644 index 000000000000..8fc02368e41f --- /dev/null +++ b/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 ? ( + + ) : ( + + ); + }, [loading, url]); + + return ( + + {Component} + + ); +} diff --git a/app/components/shared/ReactComponentList.tsx b/app/components/shared/ReactComponentList.tsx index 228ca30e2e93..36e84638630a 100644 --- a/app/components/shared/ReactComponentList.tsx +++ b/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 {} diff --git a/app/i18n/en-US/widget-alertbox.json b/app/i18n/en-US/widget-alertbox.json index dfb1b459c782..d3aebea209be 100644 --- a/app/i18n/en-US/widget-alertbox.json +++ b/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" } diff --git a/app/services/sources/sources.ts b/app/services/sources/sources.ts index be056e4d2fad..4ef2a851be5a 100644 --- a/app/services/sources/sources.ts +++ b/app/services/sources/sources.ts @@ -786,7 +786,12 @@ export class SourcesService extends StatefulService { 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 }; diff --git a/app/services/windows.ts b/app/services/windows.ts index f693d82ac5d0..a57c908836c3 100644 --- a/app/services/windows.ts +++ b/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, }; }