) : (
diff --git a/app/services/dismissables.ts b/app/services/dismissables.ts
index 66db1e18e0c0..da8ec677e0f3 100644
--- a/app/services/dismissables.ts
+++ b/app/services/dismissables.ts
@@ -20,6 +20,7 @@ export enum EDismissable {
TikTokReapply = 'tiktok_reapply',
EnhancedBroadcasting = 'enhanced_broadcasting',
StreamAvatarAutomationsWelcome = 'stream_avatar_automations_welcome',
+ HighlighterBanner = 'highlighter_banner',
}
interface IDismissablesServiceState {
@@ -60,9 +61,7 @@ export class DismissablesService extends PersistentStatefulService
- this.dismiss(EDismissable[key]),
- );
+ Object.values(EDismissable).forEach((key: EDismissable) => this.dismiss(key));
}
/**
From 61cfba9658a5c8bcfa56d8b908353d7ec3c16253 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:53:55 -0700
Subject: [PATCH 02/18] Minor component changes.
---
app/components-react/root/LiveDock.tsx | 6 +++++-
app/components-react/shared/inputs/RadioInput.m.less | 4 ++++
app/components-react/windows/go-live/GoLiveWindow.tsx | 3 +--
3 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/app/components-react/root/LiveDock.tsx b/app/components-react/root/LiveDock.tsx
index 150c2f0470c9..558ef31eb619 100644
--- a/app/components-react/root/LiveDock.tsx
+++ b/app/components-react/root/LiveDock.tsx
@@ -430,7 +430,11 @@ function LiveDock() {
placement="right"
autoAdjustOverflow={false}
>
- ctrl.showEditStreamInfo()} className="icon-edit" />
+ ctrl.showEditStreamInfo()}
+ className="icon-edit"
+ />
)}
{hasLiveDockFeature('view-stream') && isStreaming && (
diff --git a/app/components-react/shared/inputs/RadioInput.m.less b/app/components-react/shared/inputs/RadioInput.m.less
index 1db85791b4ec..16fcb5964aea 100644
--- a/app/components-react/shared/inputs/RadioInput.m.less
+++ b/app/components-react/shared/inputs/RadioInput.m.less
@@ -25,6 +25,10 @@
color: var(--icon-toggle-active);
transition: color 0.3s ease-in-out;
}
+
+ i.disabled {
+ opacity: 0.7;
+ }
}
:global(.ant-radio) {
diff --git a/app/components-react/windows/go-live/GoLiveWindow.tsx b/app/components-react/windows/go-live/GoLiveWindow.tsx
index 42b9b785a0f0..fde048341d00 100644
--- a/app/components-react/windows/go-live/GoLiveWindow.tsx
+++ b/app/components-react/windows/go-live/GoLiveWindow.tsx
@@ -224,9 +224,9 @@ function ModalFooter() {
]);
// When the streaming service detects an active stream on another device, show the prompt
+ // Note: `promptStreamShift` is intentionally left out of the dependency array to avoid multiple prompts on window load
useEffect(() => {
// Prompt the user to switch to Streamlabs Desktop if a stream is detected on another device
-
if (Services.RestreamService.views.streamShiftStatus === 'pending') {
promptStreamShift();
}
@@ -238,7 +238,6 @@ function ModalFooter() {
});
return () => isLive.unsubscribe();
- // Note : `promptStreamShift` is intentionally left out of the dependency array to avoid multiple prompts on window load
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
From 02d27728bddd9db575c2efd26141df8e8e549c59 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:56:01 -0700
Subject: [PATCH 03/18] Disable enhanced broadcasting with live output editing.
---
.../windows/go-live/LiveOutputEditingCard.tsx | 74 +++++++++++
.../windows/go-live/StreamShiftCard.tsx | 115 ++++++++++++++++++
app/services/platforms/twitch.ts | 4 +
3 files changed, 193 insertions(+)
create mode 100644 app/components-react/windows/go-live/LiveOutputEditingCard.tsx
create mode 100644 app/components-react/windows/go-live/StreamShiftCard.tsx
diff --git a/app/components-react/windows/go-live/LiveOutputEditingCard.tsx b/app/components-react/windows/go-live/LiveOutputEditingCard.tsx
new file mode 100644
index 000000000000..ac038072dafd
--- /dev/null
+++ b/app/components-react/windows/go-live/LiveOutputEditingCard.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback, useMemo } from 'react';
+import { useGoLiveSettings } from './useGoLiveSettings';
+import { Services } from 'components-react/service-provider';
+import { SwitcherCard } from './SwitcherCard';
+import UltraIcon from 'components-react/shared/UltraIcon';
+import { $t } from 'services/i18n';
+import styles from './GoLive.m.less';
+
+export default function LiveOutputEditingCard() {
+ const {
+ isLiveOutputEditingEnabled,
+ isLiveOutputEditingDisabled,
+ isPrime,
+ isStreamShiftMode,
+ setLiveOutputEditingEnabled,
+ } = useGoLiveSettings();
+
+ const liveOutputTooltip = useMemo(() => {
+ if (!isPrime) {
+ return $t('Upgrade to Ultra to manage live outputs mid-stream');
+ }
+
+ if (isStreamShiftMode) {
+ return $t('Live Output Editing cannot be used with Stream Shift');
+ }
+
+ return $t('Update your live outputs mid-stream');
+ }, [isPrime, isStreamShiftMode]);
+
+ const tooltipDisabled = useMemo(() => {
+ return isPrime && !isStreamShiftMode;
+ }, [isPrime, isStreamShiftMode]);
+
+ const handleToggleLiveOutputEditing = useCallback(
+ (status?: boolean) => {
+ if (!isPrime) {
+ Services.MagicLinkService.actions.linkToPrime('slobs-live-output-editing', {
+ event: 'LiveOutputEditing',
+ });
+ return;
+ }
+
+ // A disabled card still receives the click, so stop here rather than switching on a feature
+ // that is mutually exclusive with stream shift
+ if (isLiveOutputEditingDisabled) return;
+
+ setLiveOutputEditingEnabled(status ?? !isLiveOutputEditingEnabled);
+ Services.UsageStatisticsService.actions.recordAnalyticsEvent('LiveOutputEditing', {
+ toggle: status ?? !isLiveOutputEditingEnabled,
+ });
+ },
+ [setLiveOutputEditingEnabled, isLiveOutputEditingEnabled, isLiveOutputEditingDisabled],
+ );
+
+ return (
+ handleToggleLiveOutputEditing()}
+ value={isLiveOutputEditingEnabled}
+ title={
+ <>
+ {$t('Live output editing')}
+ {!isPrime && }
+
+ }
+ name="liveOutput"
+ description={$t('Manage output destinations mid-stream.')}
+ icon="icon-output"
+ disabled={isLiveOutputEditingDisabled}
+ switchTooltip={liveOutputTooltip}
+ switchTooltipDisabled={tooltipDisabled}
+ iconClassName={!isPrime ? styles.ultraIcon : undefined}
+ />
+ );
+}
diff --git a/app/components-react/windows/go-live/StreamShiftCard.tsx b/app/components-react/windows/go-live/StreamShiftCard.tsx
new file mode 100644
index 000000000000..7699f127b7d3
--- /dev/null
+++ b/app/components-react/windows/go-live/StreamShiftCard.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback, useMemo } from 'react';
+import { useGoLiveSettings } from './useGoLiveSettings';
+import { Services } from 'components-react/service-provider';
+import { SwitcherCard } from './SwitcherCard';
+import UltraIcon from 'components-react/shared/UltraIcon';
+import { $t } from 'services/i18n/i18n';
+import styles from './GoLive.m.less';
+import { shell } from '@electron/remote';
+
+export default function StreamShiftCard() {
+ const { isStreamShiftMode, isPrime, setStreamShift, isStreamShiftDisabled } = useGoLiveSettings();
+
+ const tooltipDisabled = !isStreamShiftDisabled;
+
+ const handleToggleStreamShift = useCallback(
+ (status?: boolean) => {
+ if (!isPrime) {
+ Services.MagicLinkService.actions.linkToPrime('slobs-streamswitcher', {
+ event: 'StreamShift',
+ });
+ return;
+ }
+
+ // A disabled card still receives the click, so stop here rather than switching on a feature
+ // that is mutually exclusive with live output editing
+ if (isStreamShiftDisabled) return;
+
+ setStreamShift(status ?? !isStreamShiftMode);
+ Services.UsageStatisticsService.actions.recordAnalyticsEvent('StreamShift', {
+ toggle: status ?? !isStreamShiftMode,
+ });
+ },
+ [setStreamShift, isStreamShiftMode, isStreamShiftDisabled, isPrime],
+ );
+
+ return (
+ handleToggleStreamShift()}
+ value={isStreamShiftDisabled ? false : isStreamShiftMode}
+ title={
+ <>
+ {$t('Stream Shift')}
+ {!isPrime && }
+
+ }
+ name="streamShift"
+ description={$t('Switch between devices while live.')}
+ icon="icon-repeat-2"
+ iconClassName={!isPrime ? styles.ultraIcon : undefined}
+ disabled={isStreamShiftDisabled}
+ switchTooltip={}
+ switchTooltipDisabled={tooltipDisabled}
+ />
+ );
+}
+
+function StreamShiftTooltip() {
+ const {
+ isPrime,
+ isDualOutputMode,
+ isPatreonEnabled,
+ isStreamShiftMode,
+ isLiveOutputEditingEnabled,
+ showTooltip,
+ } = useGoLiveSettings().extend(module => ({
+ get showTooltip() {
+ if (module.isPatreonEnabled) return true;
+ if (!module.isPrime) return true;
+ if (module.isStreamShiftMode) return false;
+ if (module.isLiveOutputEditingEnabled) return true;
+ if (module.isDualOutputMode) return true;
+ return false;
+ },
+ }));
+
+ const tooltipText = useMemo(() => {
+ if (!isPrime) {
+ return { name: 'non-ultra', text: $t('Upgrade to Ultra to switch streams between devices.') };
+ }
+
+ if (isDualOutputMode) {
+ return { name: 'dual-output', text: $t('Stream Shift cannot be used with Dual Output') };
+ }
+
+ if (isPatreonEnabled) {
+ return { name: 'patreon', text: $t('Stream Shift cannot be used with Patreon') };
+ }
+
+ if (isLiveOutputEditingEnabled) {
+ return {
+ name: 'live-output',
+ text: $t('Stream Shift cannot be used with Live Output Editing'),
+ };
+ }
+
+ return { name: 'default', text: '' };
+ }, [isPrime, isPatreonEnabled, isDualOutputMode, isStreamShiftMode, isLiveOutputEditingEnabled]);
+
+ function handleTooltipClick() {
+ shell.openExternal(
+ 'https://streamlabs.com/content-hub/post/how-to-use-streamlabs-stream-shift',
+ );
+ }
+
+ return showTooltip ? (
+ {tooltipText.text}
+ ) : (
+
+ {$t(
+ 'Stay uninterrupted by switching between devices mid stream. Works between Desktop and Mobile App.',
+ )}
+ {$t('Learn More')}
+
+ );
+}
diff --git a/app/services/platforms/twitch.ts b/app/services/platforms/twitch.ts
index e7308ff03ec7..81aa3b36dda0 100644
--- a/app/services/platforms/twitch.ts
+++ b/app/services/platforms/twitch.ts
@@ -275,6 +275,10 @@ export class TwitchService
} catch (e: unknown) {
console.error('Error setting up dual stream:', e);
}
+ } else if (this.streamingService.views.isLiveOutputEditingEnabled) {
+ // When live output editing is enabled enhanced broadcasting won't work because it
+ // uses restream, which is incompatible with enhanced broadcasting.
+ this.settingsService.setEnhancedBroadcasting(false);
} else {
// Update enhanced broadcasting setting based on go live settings
this.settingsService.setEnhancedBroadcasting(channelInfo.isEnhancedBroadcasting);
From adb2645fb74937483e8f9c04116f140cd9211c70 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:56:34 -0700
Subject: [PATCH 04/18] Update translations files.
---
app/i18n/en-US/highlighter.json | 3 +-
app/i18n/en-US/live-output-editing.json | 42 +++++++++++++++++++++++++
app/i18n/en-US/live-outputs.json | 4 ---
app/i18n/en-US/streaming.json | 1 -
app/i18n/en-US/twitch.json | 3 +-
app/i18n/fallback.ts | 2 +-
6 files changed, 47 insertions(+), 8 deletions(-)
create mode 100644 app/i18n/en-US/live-output-editing.json
delete mode 100644 app/i18n/en-US/live-outputs.json
diff --git a/app/i18n/en-US/highlighter.json b/app/i18n/en-US/highlighter.json
index 8e60affd5198..20af7216fac7 100644
--- a/app/i18n/en-US/highlighter.json
+++ b/app/i18n/en-US/highlighter.json
@@ -227,5 +227,6 @@
"Vertical replay buffer is active. Would you like to stop the replay buffer to enable AI Highlighter?": "Vertical replay buffer is active. Would you like to stop the replay buffer to enable AI Highlighter?",
"All Supported Games": "All Supported Games",
"Deletion info": "Deletion info",
- "At least one clip could not be deleted from your system. Please delete it manually.": "At least one clip could not be deleted from your system. Please delete it manually."
+ "At least one clip could not be deleted from your system. Please delete it manually.": "At least one clip could not be deleted from your system. Please delete it manually.",
+ "Do not ask again": "Do not ask again"
}
diff --git a/app/i18n/en-US/live-output-editing.json b/app/i18n/en-US/live-output-editing.json
new file mode 100644
index 000000000000..1c974038f906
--- /dev/null
+++ b/app/i18n/en-US/live-output-editing.json
@@ -0,0 +1,42 @@
+{
+ "Upgrade to Ultra to manage live outputs mid-stream": "Upgrade to Ultra to manage live outputs mid-stream",
+ "Configure the Live Output Editing service": "Configure the Live Output Editing service",
+ "Update takes up to 10 seconds": "Update takes up to 10 seconds",
+ "Go offline to change orientation, then select a new resolution and go live again": "Go offline to change orientation, then select a new resolution and go live again",
+ "Error updating stream settings. Please check your settings and try again.": "Error updating stream settings. Please check your settings and try again.",
+ "Live Output Editing cannot be used with Stream Shift": "Live Output Editing cannot be used with Stream Shift",
+ "Update your live outputs mid-stream": "Update your live outputs mid-stream",
+ "Update Destinations & Outputs:": "Update Destinations & Outputs:",
+ "Updating": "Updating",
+ "Start streaming to %{target}": "Start streaming to %{target}",
+ "Stop streaming to %{target}": "Stop streaming to %{target}",
+ "Start streaming to Custom Destination": "Start streaming to Custom Destination",
+ "Stop streaming to Custom Destination": "Stop streaming to Custom Destination",
+ "Continue streaming to Custom Destination": "Continue streaming to Custom Destination",
+ "Dual Stream is not available while live output editing is enabled": "Dual Stream is not available while live output editing is enabled",
+ "Manage Stream": "Manage Stream",
+ "Multistream settings are invalid, please check your platforms and destinations and try again": "Multistream settings are invalid, please check your platforms and destinations and try again",
+ "confirm the user has Ultra and confirm the settings for enabled platforms and destinations": "confirm the user has Ultra and confirm the settings for enabled platforms and destinations",
+ "Multistream stream key does not exist": "Multistream stream key does not exist",
+ "there was no Multistream session key, ask the user to end the stream and go live again": "there was no Multistream session key, ask the user to end the stream and go live again",
+ "Stream key missing for %{display} display": "Stream key missing for %{display} display",
+ "Unable to add targets for %{display}": "Unable to add targets for %{display}",
+ "Unable to create targets for %{display}": "Unable to create targets for %{display}",
+ "Unable to fetch user stream key for %{mode}": "Unable to fetch user stream key for %{mode}",
+ "Unable to match %{numTargets} target(s) to remove against the active stream.": "Unable to match %{numTargets} target(s) to remove against the active stream.",
+ "Failed to add the destination to your live stream": "Failed to add the destination to your live stream",
+ "No active Multistream destinations were found for your live stream": "No active Multistream destinations were found for your live stream",
+ "Failed to find the destination to remove on your live stream": "Failed to find the destination to remove on your live stream",
+ "Failed to remove the destination from your live stream": "Failed to remove the destination from your live stream",
+ "Failed to add new targets to the stream": "Failed to add new targets to the stream",
+ "Stream Shift cannot be used with Live Output Editing": "Stream Shift cannot be used with Live Output Editing",
+ "Cannot add targets in live output editing mode because the stream key is missing": "Cannot add targets in live output editing mode because the stream key is missing",
+ "Failed to multistream because Enhanced Broadcasting is enabled": "Failed to multistream because Enhanced Broadcasting is enabled",
+ "Failed to start Multistreaming for one of the displays": "Failed to start Multistreaming for one of the displays",
+ "failed to remove the platform while live, confirm the stream is still active": "failed to remove the platform while live, confirm the stream is still active",
+ "one of the platforms requesting removal does not exist": "one of the platforms requesting removal does not exist",
+ "ask the user to restart the stream and go live again. If in dual output mode, ask the user to stream in single output mode": "ask the user to restart the stream and go live again. If in dual output mode, ask the user to stream in single output mode",
+ "confirm if the user is in dual output mode and which displays are currently streaming": "confirm if the user is in dual output mode and which displays are currently streaming",
+ "confirm the platform settings for the platform, then try updating the stream again": "confirm the platform settings for the platform, then try updating the stream again",
+ "no live destinations so there was nothing to remove. The stream may have already ended on the server": "no live destinations so there was nothing to remove. The stream may have already ended on the server"
+}
diff --git a/app/i18n/en-US/live-outputs.json b/app/i18n/en-US/live-outputs.json
deleted file mode 100644
index a9edb7e04bcf..000000000000
--- a/app/i18n/en-US/live-outputs.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "Upgrade to Ultra to manage live outputs mid-stream.": "Upgrade to Ultra to manage live outputs mid-stream.",
- "Manage Stream": "Manage Stream"
-}
diff --git a/app/i18n/en-US/streaming.json b/app/i18n/en-US/streaming.json
index 0da45b14dbd4..7b84e66c5abe 100644
--- a/app/i18n/en-US/streaming.json
+++ b/app/i18n/en-US/streaming.json
@@ -92,7 +92,6 @@
"Failed to update platform settings": "Failed to update platform settings",
"The Multistream server is temporarily unavailable": "The Multistream server is temporarily unavailable",
"Failed to configure the Multistream server": "Failed to configure the Multistream server",
- "Failed to configure the Multistream server for Enhanced Broadcasting": "Failed to configure the Multistream server for Enhanced Broadcasting",
"disable Enhanced Broadcasting for Twitch and try again": "disable Enhanced Broadcasting for Twitch and try again",
"Failed to configure the Dual Output service": "Failed to configure the Dual Output service",
"The Multistream server is temporarily unavailable for Dual Output": "The Multistream server is temporarily unavailable for Dual Output",
diff --git a/app/i18n/en-US/twitch.json b/app/i18n/en-US/twitch.json
index da6ebe938470..98c64b5f3943 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 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",
- "Importing Your Existing Settings From Twitch Studio": "Importing Your Existing Settings From Twitch Studio"
+ "Importing Your Existing Settings From Twitch Studio": "Importing Your Existing Settings From Twitch Studio",
+ "Enhanced broadcasting is not available for live output editing": "Enhanced broadcasting is not available for live output editing"
}
diff --git a/app/i18n/fallback.ts b/app/i18n/fallback.ts
index 9897319d06a6..731b9d7370c8 100644
--- a/app/i18n/fallback.ts
+++ b/app/i18n/fallback.ts
@@ -22,7 +22,7 @@ const fallbackDictionary = {
...require('./en-US/filters.json'),
...require('./en-US/game-overlay.json'),
...require('./en-US/hotkeys.json'),
- ...require('./en-US/live-outputs.json'),
+ ...require('./en-US/live-output-editing.json'),
...require('./en-US/media-gallery.json'),
...require('./en-US/notifications.json'),
...require('./en-US/onboarding.json'),
From 1db8ae55a7f7edcb70368393c9ffa31f30026166 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:57:41 -0700
Subject: [PATCH 05/18] Add restream errors.
---
.../windows/go-live/GoLiveError.tsx | 25 ++--
app/services/streaming/stream-error.ts | 113 +++++++++++++++++-
2 files changed, 130 insertions(+), 8 deletions(-)
diff --git a/app/components-react/windows/go-live/GoLiveError.tsx b/app/components-react/windows/go-live/GoLiveError.tsx
index af80464edbe7..6cb6b2b513da 100644
--- a/app/components-react/windows/go-live/GoLiveError.tsx
+++ b/app/components-react/windows/go-live/GoLiveError.tsx
@@ -58,6 +58,15 @@ export default function GoLiveError() {
return renderSettingsUpdateError(error);
case 'RESTREAM_DISABLED':
case 'RESTREAM_SETUP_FAILED':
+ case 'RESTREAM_UPDATE_FAILED':
+ case 'RESTREAM_INVALID_CONFIG':
+ case 'RESTREAM_STREAM_KEY_MISSING':
+ case 'RESTREAM_STREAM_KEY_FETCH_FAILED':
+ case 'RESTREAM_DISPLAY_SETUP_FAILED':
+ case 'RESTREAM_ADD_TARGETS_FAILED':
+ case 'RESTREAM_NO_ACTIVE_TARGETS':
+ case 'RESTREAM_REMOVE_TARGET_NOT_FOUND':
+ case 'RESTREAM_REMOVE_TARGETS_FAILED':
return renderRestreamError(error);
case 'DUAL_OUTPUT_RESTREAM_DISABLED':
case 'DUAL_OUTPUT_SETUP_FAILED':
@@ -268,14 +277,16 @@ export default function GoLiveError() {
]
: error.details.split('\n');
+ // Leave the message to `MessageLayout`, which falls back to the error's own message. Each
+ // restream failure has its own error type, so the headline names what actually went wrong
+ // instead of repeating the same generic line for every one of them.
return (
-
+
+
+ {$t(
+ 'Please try again. If the issue persists, you can stream directly to a single platform instead or click the button below to bypass and go live.',
+ )}
+
{`${$t('Issues')}:`}
{details.map((detail: string, index: number) => (
diff --git a/app/services/streaming/stream-error.ts b/app/services/streaming/stream-error.ts
index ff66fb8c61f8..520d51219452 100644
--- a/app/services/streaming/stream-error.ts
+++ b/app/services/streaming/stream-error.ts
@@ -51,9 +51,87 @@ export const errorTypes = {
return $t('Failed to update Multistream platforms and destinations while live');
},
},
+ RESTREAM_INVALID_CONFIG: {
+ get message() {
+ return $t(
+ 'Multistream settings are invalid, please check your platforms and destinations and try again',
+ );
+ },
+ get action() {
+ return $t(
+ 'confirm the user has Ultra and confirm the settings for enabled platforms and destinations',
+ );
+ },
+ },
+ RESTREAM_STREAM_KEY_MISSING: {
+ get message() {
+ return $t('Multistream stream key does not exist');
+ },
+ get action() {
+ return $t(
+ 'there was no Multistream session key, ask the user to end the stream and go live again',
+ );
+ },
+ },
+ RESTREAM_STREAM_KEY_FETCH_FAILED: {
+ get message() {
+ return $t('Cannot add targets in live output editing mode because the stream key is missing');
+ },
+ get action() {
+ return $t(
+ 'ask the user to restart the stream and go live again. If in dual output mode, ask the user to stream in single output mode',
+ );
+ },
+ },
+ RESTREAM_DISPLAY_SETUP_FAILED: {
+ get message() {
+ return $t('Failed to start Multistreaming for one of the displays');
+ },
+ get action() {
+ return $t(
+ 'confirm if the user is in dual output mode and which displays are currently streaming',
+ );
+ },
+ },
+ RESTREAM_ADD_TARGETS_FAILED: {
+ get message() {
+ return $t('Failed to add the destination to your live stream');
+ },
+ get action() {
+ return $t(
+ 'confirm the platform settings for the platform, then try updating the stream again',
+ );
+ },
+ },
+ RESTREAM_NO_ACTIVE_TARGETS: {
+ get message() {
+ return $t('No active Multistream destinations were found for your live stream');
+ },
+ get action() {
+ return $t(
+ 'no live destinations so there was nothing to remove. The stream may have already ended on the server',
+ );
+ },
+ },
+ RESTREAM_REMOVE_TARGET_NOT_FOUND: {
+ get message() {
+ return $t('Failed to find the destination to remove on your live stream');
+ },
+ get action() {
+ return $t('one of the platforms requesting removal does not exist');
+ },
+ },
+ RESTREAM_REMOVE_TARGETS_FAILED: {
+ get message() {
+ return $t('Failed to remove the destination from your live stream');
+ },
+ get action() {
+ return $t('failed to remove the platform while live, confirm the stream is still active');
+ },
+ },
RESTREAM_ENHANCED_BROADCASTING_FAILED: {
get message() {
- return $t('Failed to configure the Multistream server for Enhanced Broadcasting');
+ return $t('Failed to multistream because Enhanced Broadcasting is enabled');
},
get action() {
return $t('disable Enhanced Broadcasting for Twitch and try again');
@@ -573,6 +651,39 @@ export function formatUnknownErrorMessage(
details,
};
}
+export function throwRestreamError(e: unknown, errorType?: TStreamErrorType, message?: string) {
+ console.error('Restream error:', e);
+
+ const error =
+ e instanceof StreamError
+ ? e
+ : {
+ status: 400,
+ statusText:
+ message ?? $t('Failed to update Multistream platforms and destinations while live'),
+ };
+
+ const type = getRestreamErrorType(e, errorType);
+ const details = formatRestreamErrorMessage(e, message);
+
+ throwStreamError(type, error, details);
+}
+
+function getRestreamErrorType(e: unknown, errorType?: TStreamErrorType): TStreamErrorType {
+ if (e instanceof StreamError) {
+ return e.type;
+ }
+
+ return errorType ?? ('RESTREAM_UPDATE_FAILED' as TStreamErrorType);
+}
+
+function formatRestreamErrorMessage(e: unknown, message?: string) {
+ if (e instanceof StreamError) {
+ return e.details ?? e.statusText;
+ }
+
+ return message ?? $t('Failed to update Multistream platforms and destinations while live');
+}
function obsStringErrorAsMessages(info: { error: string; code: number }) {
const error = { message: info.error, code: info.code };
From b5565c62ca558e6c2e31d87e9d28bc4c32f47db4 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:58:12 -0700
Subject: [PATCH 06/18] Fix common title handling in go live and edit stream
windows.
---
.../windows/go-live/CommonPlatformFields.tsx | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)
diff --git a/app/components-react/windows/go-live/CommonPlatformFields.tsx b/app/components-react/windows/go-live/CommonPlatformFields.tsx
index 061712ce642f..350946d8fec5 100644
--- a/app/components-react/windows/go-live/CommonPlatformFields.tsx
+++ b/app/components-react/windows/go-live/CommonPlatformFields.tsx
@@ -60,6 +60,15 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
? view.supports('description', [p.platform as TPlatform])
: view.supports('description');
+ // Only the shared instance can run out of platforms to write to, and only while live, where
+ // `updateCommonFields` skips any platform using its own title. Once every enabled platform has
+ // opted out, editing the shared title changes nothing.
+ const titleDisabled =
+ !p.platform &&
+ view.isMidStreamMode &&
+ view.enabledPlatforms.length > 0 &&
+ !view.platformsWithoutCustomFields.length;
+
const fields = p.value;
const height = useMemo(() => {
@@ -121,7 +130,10 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
$t('Title')
)
}
- required={true}
+ // A disabled input cannot be corrected, so it must not be able to fail validation. Each
+ // platform using its own title validates that title in its own section.
+ required={!titleDisabled}
+ disabled={titleDisabled}
max={maxCharacters}
min={minCharacters}
layout={p.layout}
From 816b7fe3bd1a3a44fd97f1b09ed98b5a77927ccb Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:01:50 -0700
Subject: [PATCH 07/18] Prep for custom destination in update checklist.
---
app/services/settings/streaming/stream-settings.ts | 7 +++++++
app/services/streaming/streaming-api.ts | 1 +
2 files changed, 8 insertions(+)
diff --git a/app/services/settings/streaming/stream-settings.ts b/app/services/settings/streaming/stream-settings.ts
index 8236af65f2ba..89c89797adbd 100644
--- a/app/services/settings/streaming/stream-settings.ts
+++ b/app/services/settings/streaming/stream-settings.ts
@@ -42,6 +42,13 @@ export interface ICustomStreamDestination {
dualStream?: boolean;
}
+// Used for uniquely identifying custom destinations
+export type TDestinationId = `${string}/${string}`;
+
+export function getDestinationId(dest: ICustomStreamDestination): TDestinationId {
+ return `${dest.url}/${dest.streamKey}` as TDestinationId;
+}
+
/**
* settings that we keep in the localStorage
*/
diff --git a/app/services/streaming/streaming-api.ts b/app/services/streaming/streaming-api.ts
index 51dcdf409280..87749e30918e 100644
--- a/app/services/streaming/streaming-api.ts
+++ b/app/services/streaming/streaming-api.ts
@@ -60,6 +60,7 @@ export interface IStreamInfo {
facebook: TGoLiveChecklistItemState;
twitter: TGoLiveChecklistItemState;
instagram: TGoLiveChecklistItemState;
+ destination: TGoLiveChecklistItemState;
setupMultistream: TGoLiveChecklistItemState;
setupDualOutput: TGoLiveChecklistItemState;
startVideoTransmission: TGoLiveChecklistItemState;
From a0033874b27f4e8c93d2efb73734c479132a5fc7 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:02:41 -0700
Subject: [PATCH 08/18] Twitch form disable enhanced broadcasting with live
output editing.
---
.../platforms/TwitchEditStreamInfo.tsx | 40 ++++++++++++++-----
1 file changed, 29 insertions(+), 11 deletions(-)
diff --git a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
index 7857d1f9b363..a2a1ad9109b9 100644
--- a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
@@ -59,7 +59,9 @@ const TwitchRequiredFields = memo((p: IPlatformComponentParams<'twitch'>) => {
- {p.isAiHighlighterEnabled && }
+ {p.isAiHighlighterEnabled && (
+
+ )}
);
});
@@ -75,20 +77,36 @@ const TwitchOptionalFields = memo((p: IPlatformComponentParams<'twitch'>) => {
}, [twSettings?.display]);
const enhancedBroadcastingTooltipText = useMemo(() => {
- return p.isDualOutputMode
- ? $t(
- 'Enhanced broadcasting in dual output mode is only available when streaming to both the horizontal and vertical displays in Twitch',
- )
- : $t(
- 'Enhanced broadcasting automatically optimizes your settings to encode and send multiple video qualities to Twitch. Selecting this option will send basic information about your computer and software setup.',
- );
- }, [p.isDualOutputMode]);
+ if (p.isLiveOutputEditingEnabled) {
+ return $t('Enhanced broadcasting is not available for live output editing');
+ }
+
+ if (p.isDualOutputMode) {
+ return $t(
+ 'Enhanced broadcasting in dual output mode is only available when streaming to both the horizontal and vertical displays in Twitch',
+ );
+ }
+
+ return $t(
+ 'Enhanced broadcasting automatically optimizes your settings to encode and send multiple video qualities to Twitch. Selecting this option will send basic information about your computer and software setup.',
+ );
+ }, [p.isDualOutputMode, p.isLiveOutputEditingEnabled]);
const enhancedBroadcastingEnabled = useMemo(() => {
+ if (p.isLiveOutputEditingEnabled) return false;
if (isDualStream) return true;
if (p.isStreamShiftMode) return false;
return twSettings?.isEnhancedBroadcasting;
- }, [isDualStream, twSettings?.isEnhancedBroadcasting, p.isStreamShiftMode]);
+ }, [
+ isDualStream,
+ twSettings?.isEnhancedBroadcasting,
+ p.isStreamShiftMode,
+ p.isLiveOutputEditingEnabled,
+ ]);
+
+ const disableEnhancedBroadcasting = useMemo(() => {
+ return isDualStream || p.isStreamShiftMode || p.isLiveOutputEditingEnabled || p.isUpdateMode;
+ }, [isDualStream, p.isStreamShiftMode, p.isLiveOutputEditingEnabled, p.isUpdateMode]);
return (
<>
@@ -109,7 +127,7 @@ const TwitchOptionalFields = memo((p: IPlatformComponentParams<'twitch'>) => {
label={$t('Enhanced broadcasting')}
tooltip={enhancedBroadcastingTooltipText}
{...bind.isEnhancedBroadcasting}
- disabled={isDualStream || p.isStreamShiftMode}
+ disabled={disableEnhancedBroadcasting}
value={enhancedBroadcastingEnabled}
tooltipIcon={
Date: Tue, 8 Sep 2026 16:04:04 -0700
Subject: [PATCH 09/18] Prep for go live window changes.
---
.../windows/go-live/GoLive.m.less | 58 ++++++++++++++-----
.../platforms/PlatformSettingsLayout.tsx | 1 +
2 files changed, 44 insertions(+), 15 deletions(-)
diff --git a/app/components-react/windows/go-live/GoLive.m.less b/app/components-react/windows/go-live/GoLive.m.less
index 8c6d97f26e2b..4ff5edd5569f 100644
--- a/app/components-react/windows/go-live/GoLive.m.less
+++ b/app/components-react/windows/go-live/GoLive.m.less
@@ -116,32 +116,19 @@ button.bottom {
text-align: right;
}
-.banner-wrapper {
+.info-banner-wrapper {
flex: 1;
display: flex;
flex-direction: row;
align-items: flex-start;
}
-.banner {
+.info-banner {
margin-right: 5px;
height: 32px !important;
width: unset !important;
}
-.info-banner-wrapper {
- flex: 1;
- display: flex;
- flex-direction: row;
- align-items: flex-start;
-
- :global(.info-banner) {
- margin-right: 5px;
- height: 32px;
- width: unset;
- }
-}
-
.primary-chat {
border: 0px;
padding-bottom: 5px;
@@ -206,6 +193,12 @@ button.bottom {
.confirm-btn {
width: 141.25px;
+
+ && {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.footer-content {
@@ -294,3 +287,38 @@ button.bottom {
flex-direction: row;
align-items: center;
}
+
+.update-btn-tooltip {
+ margin-left: 8px;
+ display: flex;
+}
+
+.spinner {
+ height: 20px;
+ width: 20px;
+}
+
+.update-btn {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ line-height: 1;
+}
+
+.ultra-icon {
+ background: linear-gradient(
+ 123.53deg,
+ #2de8b0 25.56%,
+ #cbe953 60.27%,
+ #ffab48 79.52%,
+ #ff5151 96.69%
+ ) !important;
+ background-clip: text !important;
+ color: transparent !important;
+}
+
+.section-title {
+ margin-top: 15px;
+}
diff --git a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
index b6c0f0ddea94..4875b00c7656 100644
--- a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
+++ b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
@@ -53,4 +53,5 @@ export interface IPlatformComponentParams {
isAiHighlighterEnabled?: boolean;
isStreamShiftMode?: boolean;
isMidStreamMode?: boolean;
+ isLiveOutputEditingEnabled?: boolean;
}
From c791ef2ead672c866a7482502af0493c8cdd9ca4 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:06:24 -0700
Subject: [PATCH 10/18] Go live settings (left col) changes.
---
.../windows/go-live/GoLiveSettings.tsx | 33 ++++++++++++-------
1 file changed, 22 insertions(+), 11 deletions(-)
diff --git a/app/components-react/windows/go-live/GoLiveSettings.tsx b/app/components-react/windows/go-live/GoLiveSettings.tsx
index 8a1be19eb278..7fa9c7afc8c0 100644
--- a/app/components-react/windows/go-live/GoLiveSettings.tsx
+++ b/app/components-react/windows/go-live/GoLiveSettings.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
import styles from './GoLive.m.less';
import Scrollable from 'components-react/shared/Scrollable';
import { useGoLiveSettings } from './useGoLiveSettings';
@@ -14,13 +14,14 @@ import ColorSpaceWarnings from './ColorSpaceWarnings';
import { DestinationSwitchers } from './DestinationSwitchers';
import AddDestinationButton from 'components-react/shared/AddDestinationButton';
import cx from 'classnames';
-import StreamShiftToggle from 'components-react/shared/StreamShiftToggle';
import { CaretDownOutlined } from '@ant-design/icons';
import * as remote from '@electron/remote';
import { inject } from 'slap';
import { VideoEncodingOptimizationService } from 'services/video-encoding-optimizations';
import { MagicLinkService } from 'services/magic-link';
import { SettingsService } from 'services/settings';
+import { EAvailableFeatures, IncrementalRolloutService } from 'services/incremental-rollout';
+import StreamShiftToggle from 'components-react/shared/StreamShiftToggle';
/**
* Renders settings for starting the stream
@@ -39,7 +40,7 @@ export default function GoLiveSettings() {
isPrime,
shouldShowLeftCol,
isStreamShiftDisabled,
- isUpdateMode,
+ canEditLiveOutputs,
addDestination,
showTopAddDestination,
showBottomAddDestination,
@@ -50,6 +51,7 @@ export default function GoLiveSettings() {
videoEncodingOptimizationService: inject(VideoEncodingOptimizationService),
settingsService: inject(SettingsService),
magicLinkService: inject(MagicLinkService),
+ incrementalRolloutService: inject(IncrementalRolloutService),
addDestination() {
this.settingsService.actions.showSettings('Stream');
@@ -69,10 +71,15 @@ export default function GoLiveSettings() {
},
get shouldShowLeftCol() {
- if (module.isUpdateMode) return false;
return module.isStreamShiftMode ? true : module.protectedModeEnabled;
},
+ get canEditLiveOutputs() {
+ return this.incrementalRolloutService.views.featureIsEnabled(
+ EAvailableFeatures.liveOutputEditing,
+ );
+ },
+
async openPlatformSettings() {
try {
const link = await this.magicLinkService.getDashboardMagicLink(
@@ -131,10 +138,15 @@ export default function GoLiveSettings() {
border={false}
disabled={!hasMultiplePlatforms}
/>
-
+
+ {/* STREAM SHIFT TOGGLE */}
+ {/* Remove after feature flag removed */}
+ {!canEditLiveOutputs && (
+
+ )}
@@ -144,8 +156,7 @@ export default function GoLiveSettings() {
@@ -158,7 +169,7 @@ export default function GoLiveSettings() {
{/*PLATFORM SETTINGS*/}
{/*EXTRAS*/}
- {!!canUseOptimizedProfile && !isUpdateMode && (
+ {!!canUseOptimizedProfile && (
From 944007ed62275ef8d4794f21451568669014f37f Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:16:40 -0700
Subject: [PATCH 11/18] Update stream display selectors only show live display.
---
.../shared/DisplaySelector.tsx | 37 ++++++++++++++++++-
1 file changed, 36 insertions(+), 1 deletion(-)
diff --git a/app/components-react/shared/DisplaySelector.tsx b/app/components-react/shared/DisplaySelector.tsx
index 800c6ae87ab5..5810a0279441 100644
--- a/app/components-react/shared/DisplaySelector.tsx
+++ b/app/components-react/shared/DisplaySelector.tsx
@@ -25,12 +25,24 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
canDualStream,
updateCustomDestinationDisplayAndSaveSettings,
updatePlatformDisplayAndSaveSettings,
+ isLiveOutputEditingEnabled,
+ isUpdateMode,
+ isLive,
} = useGoLiveSettings().extend(module => ({
get canDualStream() {
if (!p.platform) return false;
if (module.isLiveOutputEditingEnabled) return false;
return module.getCanDualStream(p.platform);
},
+
+ get isLive(): boolean {
+ return (
+ module.isUpdateMode &&
+ module.isLiveOutputEditingEnabled &&
+ !!module.isTargetLive(p.platform ?? p.index)
+ );
+ },
+
get display(): TDisplayOutput {
const defaultDisplay = p.platform
? module.settings.platforms[p.platform]?.display
@@ -58,6 +70,29 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
},
];
+ if (isLive) {
+ // A live target cannot change display without restarting its stream, so offer only the
+ // display it is already using and explain how to change it
+ const activeDisplay =
+ defaultDisplays.find(option => option.value === display) ?? defaultDisplays[0];
+
+ return [
+ {
+ ...activeDisplay,
+ disabled: true,
+ tooltip: $t(
+ 'Go offline to change orientation, then select a new resolution and go live again',
+ ),
+ },
+ ];
+ }
+
+ if (isUpdateMode) {
+ // Don't show Dual stream option in the Edit Stream window because it is not compatible with
+ // live output editing, which is the only time the display toggles are shown in the update window
+ return defaultDisplays;
+ }
+
if (canDualStream) {
const tooltip = p?.platform
? $t('Stream both horizontally and vertically to %{platform}', {
@@ -77,7 +112,7 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
}
return defaultDisplays;
- }, [canDualStream]);
+ }, [canDualStream, isLiveOutputEditingEnabled, isUpdateMode, isLive, display, p.platform]);
const onChange = useCallback(
(val: string) => {
From fd64f074f8118d474c1be6c0c5f8cf7eebca1630 Mon Sep 17 00:00:00 2001
From: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:50:53 -0700
Subject: [PATCH 12/18] Restoresilent drops from merge.
---
.../root/StartStreamingButton.tsx | 122 +++++-------------
app/components-react/root/StudioFooter.tsx | 20 +++
.../shared/DisplaySelector.tsx | 1 +
app/components-react/shared/Spinner.m.less | 21 +++
app/components-react/shared/Spinner.tsx | 18 ++-
.../shared/inputs/RadioInput.m.less | 9 ++
.../shared/inputs/RadioInput.tsx | 15 ++-
.../go-live/DestinationSwitchers.m.less | 5 +
.../windows/go-live/GameSelector.tsx | 9 ++
.../windows/go-live/GoLive.m.less | 11 ++
.../windows/go-live/GoLiveInfoBanner.tsx | 26 ++++
.../windows/go-live/GoLiveWindow.tsx | 29 +----
.../windows/go-live/SwitcherCard.tsx | 64 +++++++--
app/i18n/en-US/stream-shift.json | 1 +
app/services/diagnostics.ts | 4 +
app/services/platforms/kick.ts | 29 ++++-
app/styles/loader.less | 6 +-
17 files changed, 255 insertions(+), 135 deletions(-)
create mode 100644 app/components-react/windows/go-live/GoLiveInfoBanner.tsx
diff --git a/app/components-react/root/StartStreamingButton.tsx b/app/components-react/root/StartStreamingButton.tsx
index eeca006d2178..4120cc7be4c6 100644
--- a/app/components-react/root/StartStreamingButton.tsx
+++ b/app/components-react/root/StartStreamingButton.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
import { EStreamingState } from 'services/streaming';
import { EGlobalSyncStatus } from 'services/media-backup';
import { $t } from 'services/i18n';
-import { useVuex } from '../hooks';
+import { useDebounce, useVuex } from '../hooks';
import { Services } from '../service-provider';
import * as remote from '@electron/remote';
import { TStreamShiftStatus } from 'services/restream';
@@ -11,7 +11,6 @@ import { promptAction } from 'components-react/modals';
import { TSocketEvent } from 'services/websocket';
import { useRealmObject } from 'components-react/hooks/realm';
import debounce from 'lodash/debounce';
-import Utils from 'services/utils';
function StartStreamingButton(p: { disabled?: boolean }) {
const {
@@ -22,7 +21,6 @@ function StartStreamingButton(p: { disabled?: boolean }) {
MediaBackupService,
SourcesService,
RestreamService,
- UsageStatisticsService,
} = Services;
const {
@@ -30,7 +28,6 @@ function StartStreamingButton(p: { disabled?: boolean }) {
delayEnabled,
delaySeconds,
streamShiftStatus,
- streamShiftForceGoLive,
isDualOutputMode,
isLoggedIn,
isPrime,
@@ -42,7 +39,6 @@ function StartStreamingButton(p: { disabled?: boolean }) {
delayEnabled: StreamingService.views.delayEnabled,
delaySeconds: StreamingService.views.delaySeconds,
streamShiftStatus: RestreamService.state.streamShiftStatus,
- streamShiftForceGoLive: RestreamService.state.streamShiftForceGoLive,
isDualOutputMode: StreamingService.views.isDualOutputMode,
isLoggedIn: UserService.isLoggedIn,
isPrime: UserService.state.isPrime,
@@ -79,88 +75,35 @@ function StartStreamingButton(p: { disabled?: boolean }) {
useEffect(() => {
// Check for stream shift status on mount. This will happen on app launch because the main window is always active
if (isPrime && streamingStatus === EStreamingState.Offline) {
- fetchStreamShiftStatus().catch((e: unknown) => {
- console.error('Error fetching stream shift status:', e);
- });
+ checkIsLive();
}
- const streamShiftEvent = StreamingService.streamShiftEvent.subscribe((event: TSocketEvent) => {
- if (streamShiftForceGoLive) return;
- if (event.type !== 'streamSwitchRequest' && event.type !== 'switchActionComplete') {
- return;
- }
-
- const { streamShiftStreamId } = RestreamService.state;
- console.debug('Event ID: ' + event.data.identifier, '\n Stream ID: ' + streamShiftStreamId);
- const isIncomingStream: boolean =
- (streamShiftStreamId && event.data.identifier === streamShiftStreamId) || false;
-
- if (event.type === 'streamSwitchRequest') {
- if (isIncomingStream) {
- // Don't record the request from this device because the other device will record it
- RestreamService.actions.confirmStreamShift('approved');
- } else {
- recordStreamShiftAnalytics('request', event.data.identifier);
- }
- }
-
- if (event.type === 'switchActionComplete') {
- // End the stream on this device if switching the stream to another device
- // Only record analytics if the stream was switched from this device to a different one
- if (!isIncomingStream) {
- Services.RestreamService.actions.endStreamShiftStream(event.data.identifier);
-
- recordStreamShiftAnalytics('complete', event.data.identifier);
- }
-
+ const streamShiftEvent = StreamingService.streamShiftEvent.subscribe(
+ async (event: TSocketEvent) => {
// Notify the user
- const message = formatStreamShiftMessage(isIncomingStream, event.data.identifier);
-
- promptAction({
- title: $t('Stream successfully switched'),
- message,
- btnText: $t('Close'),
- btnType: 'default',
- cancelBtnPosition: 'none',
- });
- }
- });
+ const message = await RestreamService.actions.return.handleStreamShiftEvent(event);
+
+ // An empty message means the handler declined to notify (e.g. a forced go live),
+ // so don't show an alert with an empty body
+ if (event.type === 'switchActionComplete' && message) {
+ promptAction({
+ title: $t('Stream successfully switched'),
+ message,
+ btnText: $t('Close'),
+ btnType: 'default',
+ cancelBtnPosition: 'none',
+ });
+ }
+ },
+ );
return () => {
toggleStreaming.cancel();
+ checkIsLive.cancel();
streamShiftEvent.unsubscribe();
};
}, []);
- const recordStreamShiftAnalytics = useCallback((action: 'request' | 'complete', id: string) => {
- // Prevent recording analytics event in test mode
- if (Utils.isTestMode()) return;
-
- // Note: because the event's stream id is from the device that requested the switch,
- // it is not possible to know what type of device the stream will be switching from.
- // We can only identify the type of device the stream is switching to.
- const remoteDeviceType = /[A-Z]/.test(id) ? 'mobile' : 'desktop';
- const switchType = `desktop-${remoteDeviceType}`;
-
- UsageStatisticsService.recordAnalyticsEvent('StreamShift', {
- stream: switchType,
- action,
- });
- }, []);
-
- const formatStreamShiftMessage = useCallback((isFromOtherDevice: boolean, id: string) => {
- if (isFromOtherDevice) {
- return $t(
- 'Your stream has been switched to Streamlabs Desktop from another device. Enjoy your stream!',
- );
- }
-
- const remoteDeviceType = /[A-Z]/.test(id) ? 'mobile' : 'desktop';
- return remoteDeviceType === 'mobile'
- ? $t('Your stream has been successfully switched to Streamlabs Mobile. Enjoy your stream!')
- : $t('Your stream has been successfully switched to Streamlabs Desktop. Enjoy your stream!');
- }, []);
-
const handleToggleStreaming = useCallback(async () => {
if (StreamingService.isStreaming) {
StreamingService.toggleStreaming();
@@ -220,10 +163,14 @@ function StartStreamingButton(p: { disabled?: boolean }) {
// Wrap the toggleStreaming function in a debounce to prevent multiple rapid clicks
// and also to cancel the action on unmount to prevent memory leaks and state updates on unmounted components
+ // Don't use the useDebounce hook here to maintain stateful callbacks
const toggleStreaming = useMemo(() => debounce(handleToggleStreaming, 500), [
handleToggleStreaming,
]);
+ // Debounce checking for the live status of the stream and enable canceling on unmount
+ const checkIsLive = useDebounce(0, RestreamService.actions.checkIsLive);
+
const getIsRedButton = useMemo(() => {
return streamingStatus !== EStreamingState.Offline && streamShiftStatus !== 'pending';
}, [streamingStatus, streamShiftStatus]);
@@ -236,17 +183,6 @@ function StartStreamingButton(p: { disabled?: boolean }) {
);
}, [p.disabled, streamingStatus, delaySecondsRemaining]);
- const fetchStreamShiftStatus = useCallback(async () => {
- try {
- const isLive = await RestreamService.actions.return.checkIsLive();
- return isLive;
- } catch (e: unknown) {
- console.log('Error checking stream shift status', e);
- setIsLoading(false);
- return false;
- }
- }, []);
-
const shouldShowGoLiveWindow = useCallback(() => {
if (!UserService.isLoggedIn) return false;
const primaryPlatform = UserService.state.auth?.primaryPlatform;
@@ -254,13 +190,17 @@ function StartStreamingButton(p: { disabled?: boolean }) {
if (!primaryPlatform) return false;
+ if (streamShiftStatus === 'pending') {
+ return true;
+ }
+
if (StreamingService.views.isDualOutputMode) {
return true;
}
if (
!!UserService.state.auth?.platforms &&
- StreamingService.views.isMultiplatformMode &&
+ isMultiplatformMode &&
Object.keys(UserService.state.auth?.platforms).length > 1
) {
return true;
@@ -269,14 +209,14 @@ function StartStreamingButton(p: { disabled?: boolean }) {
if (primaryPlatform === 'twitch') {
// For Twitch, we can show the Go Live window even with protected mode off
// This is mainly for legacy reasons.
- return StreamingService.views.isMultiplatformMode || updateStreamInfoOnLive;
+ return isMultiplatformMode || updateStreamInfoOnLive;
} else {
return (
StreamSettingsService.state.protectedModeEnabled &&
StreamSettingsService.isSafeToModifyStreamKey()
);
}
- }, [primaryPlatform, isMultiplatformMode, updateStreamInfoOnLive]);
+ }, [primaryPlatform, isMultiplatformMode, updateStreamInfoOnLive, streamShiftStatus]);
return (