From a43d601a2c67b18f8ebabf56cc76a8525cd54794 Mon Sep 17 00:00:00 2001 From: Micheline Wu <69046953+michelinewu@users.noreply.github.com> Date: Thu, 6 Nov 2025 16:18:00 -0500 Subject: [PATCH] Refactor platform settings use go live module and add tooltip. --- .../windows/go-live/PlatformSettings.tsx | 27 ++++++++-- .../platforms/PlatformSettingsLayout.tsx | 2 + .../platforms/TwitchEditStreamInfo.tsx | 54 ++++++++++--------- app/i18n/en-US/twitch.json | 3 +- 4 files changed, 56 insertions(+), 30 deletions(-) diff --git a/app/components-react/windows/go-live/PlatformSettings.tsx b/app/components-react/windows/go-live/PlatformSettings.tsx index d80c3406d936..db694d180deb 100644 --- a/app/components-react/windows/go-live/PlatformSettings.tsx +++ b/app/components-react/windows/go-live/PlatformSettings.tsx @@ -16,6 +16,8 @@ import { InstagramEditStreamInfo } from './platforms/InstagramEditStreamInfo'; import { KickEditStreamInfo } from './platforms/KickEditStreamInfo'; import AdvancedSettingsSwitch from './AdvancedSettingsSwitch'; import { TInputLayout } from 'components-react/shared/inputs'; +import { HighlighterService } from 'services/highlighter'; +import { inject } from 'slap'; export default function PlatformSettings() { const { @@ -33,20 +35,33 @@ export default function PlatformSettings() { isUpdateMode, isTikTokConnected, layout, + isDualOutputMode, + isAiHighlighterEnabled, + enabledPlatformsCount, } = useGoLiveSettings().extend(settings => ({ - get descriptionIsRequired() { + highlighterService: inject(HighlighterService), + + get descriptionIsRequired(): boolean | undefined { const fbSettings = settings.state.platforms['facebook']; const descriptionIsRequired = fbSettings && fbSettings.enabled && !fbSettings.useCustomFields; return descriptionIsRequired; }, - get isTikTokConnected() { + get isTikTokConnected(): boolean { return settings.state.isPlatformLinked('tiktok'); }, get layout(): TInputLayout { return settings.isAdvancedMode ? 'horizontal' : 'vertical'; }, + + get isAiHighlighterEnabled(): boolean { + return this.highlighterService.aiHighlighterFeatureEnabled; + }, + + get enabledPlatformsCount(): number { + return enabledPlatforms.length; + }, })); const shouldShowSettings = !error && !isLoading; @@ -65,8 +80,14 @@ export default function PlatformSettings() { get value() { return getDefined(settings.platforms[platform]); }, + get isDualOutputMode() { + return isDualOutputMode; + }, + get isAiHighlighterEnabled() { + return isAiHighlighterEnabled; + }, get enabledPlatformsCount() { - return enabledPlatforms.length; + return enabledPlatformsCount; }, onChange(newSettings) { updatePlatform(platform, newSettings); diff --git a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx index 38afcd31a552..0918ef70be7a 100644 --- a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx +++ b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx @@ -55,5 +55,7 @@ export interface IPlatformComponentParams { layout?: TInputLayout; isUpdateMode?: boolean; isScheduleMode?: boolean; + isDualOutputMode?: boolean; + isAiHighlighterEnabled?: boolean; enabledPlatformsCount?: number; } diff --git a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx index a9a91362b37b..498bd928ecdf 100644 --- a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx +++ b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx @@ -1,5 +1,5 @@ import { CommonPlatformFields } from '../CommonPlatformFields'; -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo } from 'react'; import { $t } from '../../../../services/i18n'; import { TwitchTagsInput } from './TwitchTagsInput'; import GameSelector from '../GameSelector'; @@ -10,21 +10,16 @@ import { ITwitchStartStreamOptions } from '../../../../services/platforms/twitch import InputWrapper from 'components-react/shared/inputs/InputWrapper'; import TwitchContentClassificationInput from './TwitchContentClassificationInput'; import AiHighlighterToggle from '../AiHighlighterToggle'; -import { Services } from 'components-react/service-provider'; import Badge from 'components-react/shared/DismissableBadge'; import { EDismissable } from 'services/dismissables'; import styles from './TwitchEditStreamInfo.m.less'; import cx from 'classnames'; -import { useVuex } from 'components-react/hooks'; +import Tooltip from 'components-react/shared/Tooltip'; export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) { const twSettings = p.value; // We always pass this into TwitchEditStreamInfo const enabledPlatformsCount = p.enabledPlatformsCount!; - const aiHighlighterFeatureEnabled = Services.HighlighterService.aiHighlighterFeatureEnabled; - const { isDualOutputMode } = useVuex(() => ({ - isDualOutputMode: Services.DualOutputService.views.dualOutputMode, - })); useEffect(() => { if (enabledPlatformsCount > 1 && twSettings.isEnhancedBroadcasting) { @@ -36,7 +31,7 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) { p.onChange({ ...twSettings, ...patch }); } - const enhancedBroadcastingTooltipText = isDualOutputMode + const enhancedBroadcastingTooltipText = p.isDualOutputMode ? $t( 'Enhanced broadcasting in dual output mode is only available when streaming to both the horizontal and vertical displays in Twitch', ) @@ -56,24 +51,31 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) { {process.platform !== 'darwin' && ( - - 1} - value={twSettings?.display === 'both' ? true : twSettings?.isEnhancedBroadcasting} - /> - - + + 1} + value={twSettings?.display === 'both' ? true : twSettings?.isEnhancedBroadcasting} + /> + + + )} ); @@ -95,7 +97,7 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) { requiredFields={ - {aiHighlighterFeatureEnabled && ( + {p.isAiHighlighterEnabled && ( )} diff --git a/app/i18n/en-US/twitch.json b/app/i18n/en-US/twitch.json index 7cb0faad3cd6..30a77400364e 100644 --- a/app/i18n/en-US/twitch.json +++ b/app/i18n/en-US/twitch.json @@ -14,5 +14,6 @@ "Import your scenes and sources from Twitch Studio.": "Import your scenes and sources from Twitch Studio.", "Importing Your Existing Settings From Twitch Studio": "Importing Your Existing Settings From Twitch Studio", "Importing from Twitch Studio is an experimental feature under active development. Some source types are unable to be imported, and not all settings will be carried over.": "Importing from Twitch Studio is an experimental feature under active development. Some source types are unable to be imported, and not all settings will be carried over.", - "Stream Shift Error: Twitch is not live": "Stream Shift Error: Twitch is not live" + "Stream Shift Error: Twitch is not live": "Stream Shift Error: Twitch is not live", + "Enhanced broadcasting is required for Twitch Dual streaming": "Enhanced broadcasting is required for Twitch Dual streaming" }