Switcher and go live UI. #5597

michelinewu · 2025-10-01T22:01:04Z

No description provided.

…e styling.

gettinToasty · 2025-10-07T20:02:24Z

app/components-react/modals.tsx

 */
-export function alertAsync(p: Omit<ModalFuncProps, 'afterClose'> | string): Promise<void> {
+export function alertAsync(
+  p: (Omit<ModalFuncProps, 'afterClose'> | string) & { afterCloseFn?: () => void },


why are we not just using ModalFuncProps | string here with the existing afterClose function prop?

Because we use the spread operator when applying props and we need to use the afterClose prop to execute the function, to prevent possible issues with using the same prop name I added the afterCloseFn prop

gettinToasty · 2025-10-07T20:03:47Z

app/components-react/modals.tsx

-            <Button onClick={Modal.destroyAll}>{$t('Skip')}</Button>
+            {!p.cancelBtnPosition ||
+              (p.cancelBtnPosition && p.cancelBtnPosition === 'left' && (
+                <Button onClick={Modal.destroyAll}>{p.cancelBtnText ?? $t('Skip')}</Button>


this doesn't seem to include the cancelFn callback like the right side button

gettinToasty · 2025-10-07T20:06:05Z

app/components-react/root/StartStreamingButton.tsx

+          JSON.stringify(event) +
+          '\nSource: ' +
+          (isMobileRemote ? 'Mobile' : 'Desktop'),
+      );


console debug

gettinToasty · 2025-10-07T20:06:50Z

app/components-react/root/StartStreamingButton.tsx

+    const streamShiftEvent = StreamingService.streamShiftEvent.subscribe(event => {
+      const streamShiftStreamId = RestreamService.state.streamShiftStreamId;
+
+      const isMobileRemote = streamShiftStreamId && /[A-Z]/.test(streamShiftStreamId);


i think i might need some clarification on this regex check-- any id with a capital letter signifies a mobile remote setup?

Yes, that's correct

gettinToasty · 2025-10-07T20:09:56Z

app/components-react/root/StartStreamingButton.tsx

+        const message = isDualOutputMode
+          ? $t(
+              'A stream on another device has been detected. Would you like to switch your stream to Streamlabs Desktop? If you do not wish to continue this stream, please end it from the current streaming source.',
+            ) + $t('Dual Output will be disabled since not supported in this mode.')


we shouldn't be concatenating translated strings in case grammatical patterns of different languages require a restructure

gettinToasty · 2025-10-07T20:57:26Z

app/components-react/windows/settings/Stream.tsx

 */
 function CustomDestinationList() {
-  const { isPrime, customDestinations, editCustomDestMode, addCustomDest } = useStreamSettings();
+  const { customDestinations, editCustomDestMode, addCustomDest } = useStreamSettings();


^ oh nvm the above found it, but if we're decoupling from the module that much i think it might just be worth to do it all the way

gettinToasty · 2025-10-07T21:00:04Z

app/services/platforms/youtube.ts

+    //       await this.stopBroadcast(streamShiftBroadcast.id);
+    //     }
+    //   }
+    // }


not sure if this is unneeded or not

I coded out two possible solutions for a bug. This is the second one, the first one is currently in testing. If the first fix seems to work, we can take this out. I'll add a TODO to remove it if the first fix is working and stable

gettinToasty · 2025-10-07T21:01:28Z

app/services/restream.ts

+    if (status.isLive) {
+      this.streamSettingsService.setGoLiveSettings({ streamShift: true });
+      this.SET_STREAM_SWITCHER_STATUS('pending');
+      this.SET_STREAM_SWITCHER_TARGETS(status.targets);


it feels like a code smell that a status checking function would cause mutations as a side effect, not sure entirely what the intention of this function is

gettinToasty · 2025-10-07T21:03:55Z

app/services/settings/settings.ts

    let categories: CategoryName[] = obs.NodeObs.OBS_settings_getListCategories();
    // insert 'Multistreaming' after 'General'
-    categories.splice(1, 0, 'Multistreaming');
+    // categories.splice(1, 0, 'Multistreaming');


are we just removing this settings page entirely?

Yeah, in favor of a less cluttered menu since it no longer had any settings managed by it

gettinToasty · 2025-10-07T21:04:22Z

app/services/streaming/streaming.ts

      // Note: Because the horizontal video context is the default, it does not need
      // to be validated.

+      console.log('this.views.isDualOutputMode', this.views.isDualOutputMode);


console log

blackxored · 2025-10-08T17:15:27Z

app/components-react/root/LiveDock.tsx

  popOut() {
    this.platformAppsService.popOutAppPage(this.store.selectedChat, this.pageSlot);
-    this.store.setState(s => {
+    this.store.setState((s: any) => {


Did TypeScript drop the ball on this file? These types shouldn't be needed for any of the setState calls in this file. If they did drop the ball and can't infer (wouldn't be surprised) can you add a comment to the first one stating so?

blackxored · 2025-10-08T17:30:42Z

app/components-react/root/StartStreamingButton.tsx

+      fetchStreamShiftStatus();
+    }
+
+    const streamShiftEvent = StreamingService.streamShiftEvent.subscribe(event => {


So this initially was a comment about unsubscribing from this event, but then I found it does do that so nevermind, the only useful part of that was the nudge that some RxJS operators might help with some of what we're doing in the function body (things like filtering and case switching), but totally optional and more of a nice-to-have.

blackxored · 2025-10-08T17:34:09Z

app/components-react/root/StartStreamingButton.tsx

+            stream: 'mobile-to-desktop',
+          });
+
+          promptAction({


These two calls to promptAction seem to be the same except for the fn and the message, 2 is technically my limit with dupes but considering how many lines this is in an already non-trivial function, I wouldn't mind if we made an exception and abstract this and parameterize those two, for desktop/mobile/etc (wink wink). so we can reduce line count.

blackxored · 2025-10-08T17:47:29Z

app/components-react/shared/AddDestinationButton.tsx

+function SmallAddDestinationButton(p: { className?: string; onClick: () => void }) {
+  return (
+    <Button
+      data-test="default-add-destination"


We should really decide if we're gonna use data-test or data-testid. Nit: add a button or btn suffix, when reading a test it would easier to spot that is a button (apart from the testing API that presumably clicks it).

data-name is the convention we use for most of our form selectors, i think it could probably be used here too

blackxored · 2025-10-08T17:56:22Z

app/components-react/shared/StreamShiftToggle.tsx

+    if (!isPrime && isStreamShiftMode) {
+      setStreamShift(false);
+    }
+  }, [isPrime, isStreamShiftMode, setStreamShift]);


Does setStreamShift need to be a dependency? Also, depending on how it is defined, it could cause this to evaluate everytime, since it could create a function everytime or fail an equality test.

blackxored · 2025-10-08T18:02:54Z

app/components-react/shared/inputs/RadioGroup.tsx

+export const RadioGroup = InputComponent((p: TRadioGroupProps) => {
+  return (
+    <InputWrapper
+      // label={p.label}


Left-over comment

blackxored · 2025-10-08T18:09:54Z

app/components-react/windows/go-live/GoLiveSettings.tsx

    enabledPlatforms,
    primaryChat,
    recommendedColorSpaceWarnings,
+    isPrime,


There are 3 fields related to stream shift we have to pull, deref and subsequently use, with no semantic relation other than their names, we have always done it like this so no action, but more of a thought provocation to maybe start grouping these in objects and pass those around.

blackxored · 2025-10-08T18:15:08Z

app/components-react/windows/go-live/GoLiveWindow.tsx

+
+        // Prompt to confirm stream switch if the stream exists
+        if (isLive) {
+          promptAction({


Definitely (probably?) have seen this function before, so technically my 2 dupes rule is no longer valid :D

michelinewu added 30 commits August 1, 2025 17:09

WIP: switches.

c8960b0

Advanced go live settings styling.

aa569f1

Multistream always has switcher enabled. WIP: advanced settings toggl…

ae177fb

…e styling.

Merge branch 'master' into switcher_mvp

b37b358

Styling polishes.

46e3cf2

Update Stream settings UI.

fccaee5

Styling and fix start streaming button state.

967ef82

Bug fixes and polishes.

449bbfd

Merge branch 'master' into switcher_mvp

a6b2adf

UI polishes.

177c643

Add analytics.

5ab6490

Switch between devices working.

128a7d7

Copy polishes.

510fd1f

Fix already live flow.

ed28354

Match target data.

dbc8012

Remove unused setup target.

917d662

Translation strings.

8db94bd

Switcher styling.

fc85df0

Non-ultra destination switchers.

1d72566

Add loader to go live button, fix strict nulls, and remove dev noty.

f6c538f

Remove multistreaming and fix add dest prompt.

b68691f

Refactor radio inputs for tests. WIP: dual output test.

c1246a2

Add more specific logic for non-ultra destination switchers.

f2fb2f8

Disable dc protection.

1f0c816

Noty styling and polishes.

4355efd

Merge branch 'master' into switcher_mvp

4f74836

Fix YouTube chat not showing when multistreaming.

42b4be2

UI polishes.

52baf05

Refine advanced mode conditional.

60a2e91

Fix switcher using multistream platform settings UI.

abf7fb6

michelinewu requested review from Copilot and gettinToasty and removed request for Copilot October 1, 2025 22:01

michelinewu added 10 commits October 3, 2025 13:51

Add noty for cloud shift not live platforms.

0782184

Update analytics.

9292c4d

Radio button interactable in test.

4ff92c1

Dual output tests test streaming.

ea26307

Change to stream shift.

c9a123c

Update intl and fix setup restream.

8e64366

Merge branch master into switcher_mvp.

3ee6eba

Fixed dual output ultra test.

50439f8

Merge branch 'master' into switcher_mvp

59c700e

Fix merge conflict.

dfa6192

gettinToasty requested changes Oct 7, 2025

View reviewed changes

michelinewu added 4 commits October 7, 2025 17:23

Add beta badge.

22ffc65

Stream ends when receiving completed event.

242d47c

Move kick error.

203e334

Fix handling YouTube with auto start disabled with stream shift.

fe8112a

blackxored reviewed Oct 8, 2025

View reviewed changes

michelinewu added 11 commits October 8, 2025 16:33

Remove unused radio group.

b10ceb4

Changes from code review.

bdf62a0

WIP: add stream shift to diag report.

72a8739

Update text.

e4045d2

Add logging for YouTube.

87c056d

Fixes for multistream and custom destination tests.

6c791ed

Merge branch 'master' into switcher_mvp

4582f40

Fix for diag report.

4702ab2

Fix unnecessary is live checks.

7c5c7ee

Fix for switching desktop to desktop.

bc767fd

Removed unnecessary error handling.

b154cd4

Switcher and go live UI. #5597

Are you sure you want to change the base?

Switcher and go live UI. #5597

Conversation

michelinewu commented Oct 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants