Enhanced broadcasting

app/components-react/shared/NewBadge.tsx

@@ -7,13 +7,17 @@ import cx from 'classnames';
 import { $t } from 'services/i18n';
 
 interface INewButtonProps {
+  // children is a special React property which allows access any child elements including text
+  children?: string;
+
   dismissableKey: EDismissable;
   size?: 'standard' | 'small';
   absolute?: boolean;
   style?: CSSProperties;
 }
 
 export default function NewButton({
+  children = "",
   dismissableKey,
   size = 'standard',
   absolute = false,
@@ -37,7 +41,7 @@ export default function NewButton({
       )}
       style={style}
     >
-      {$t('New')}
+      {children.length !== 0 ? $t(children) : $t('New')}
     </div>
   );
 }

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

@@ -61,6 +61,9 @@ export default function PlatformSettings() {
       get value() {
         return getDefined(settings.platforms[platform]);
       },
+      get enabledPlatformsCount() {
+        return enabledPlatforms.length;
+      },
       onChange(newSettings) {
         updatePlatform(platform, newSettings);
       },

app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx

@@ -46,4 +46,5 @@ export interface IPlatformComponentParams<T extends TPlatform> {
   layoutMode: TLayoutMode;
   isUpdateMode?: boolean;
   isScheduleMode?: boolean;
+  enabledPlatformsCount?: number;
 }

app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx

@@ -16,6 +16,9 @@ import AiHighlighterToggle from '../AiHighlighterToggle';
 import { Services } from 'components-react/service-provider';
 import { EAvailableFeatures } from 'services/incremental-rollout';
 
+import Badge from 'components-react/shared/NewBadge';
+import { EDismissable } from 'services/dismissables';
+
 export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
   const twSettings = p.value;
   const aiHighlighterFeatureEnabled = Services.IncrementalRolloutService.views.featureIsEnabled(
@@ -25,6 +28,7 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
     p.onChange({ ...twSettings, ...patch });
   }
 
+  const enhancedBroadcastingTooltipText = $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.');
   const bind = createBinding(twSettings, updatedSettings => updateSettings(updatedSettings));
 
   const optionalFields = (
@@ -34,6 +38,12 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
       <InputWrapper>
         <CheckboxInput label={$t('Stream features branded content')} {...bind.isBrandedContent} />
       </InputWrapper>
+      {p.enabledPlatformsCount === 1 && <InputWrapper>
+        <div>
+          <CheckboxInput style={{display: 'inline-block'}} label={$t('Enhanced broadcasting')} tooltip={enhancedBroadcastingTooltipText} {...bind.isEnhancedBroadcasting} />
+          <Badge style={{display: 'inline-block'}} dismissableKey={EDismissable.EnhancedBroadcasting}>Beta</Badge>
+        </div>
+      </InputWrapper>}
     </div>
   );
   return (

app/components-react/windows/go-live/useGoLiveSettings.ts

@@ -49,6 +49,12 @@ class GoLiveSettingsState extends StreamInfoView<IGoLiveSettingsState> {
    * Update top level settings
    */
   updateSettings(patch: Partial<IGoLiveSettingsState>) {
+    if (patch.platforms?.twitch) {
+      Services.SettingsService.actions.setEnhancedBroadcasting(
+        patch.platforms.twitch.isEnhancedBroadcasting,
+      );
+    }
+
     const newSettings = { ...this.state, ...patch };
     // we should re-calculate common fields before applying new settings
     const platforms = this.getViewFromState(newSettings).applyCommonFields(newSettings.platforms);

app/i18n/en-US/streaming.json

@@ -289,6 +289,8 @@
   "Issues": "Issues",
   "Multistream Error": "Multistream Error",
   "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.": "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.",
+  "Enhanced broadcasting": "Enhanced broadcasting",
+  "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.": "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."
   "Failed Checks": "Failed Checks",
   "Video Transmission": "Video Transmission",
   "Optimized Settings": "Optimized Settings",

app/services/dismissables.ts

@@ -17,6 +17,7 @@ export enum EDismissable {
   LoginPrompt = 'login_prompt',
   TikTokRejected = 'tiktok_rejected',
   TikTokEligible = 'tiktok_eligible',
+  EnhancedBroadcasting = 'enhanced_broadcasting',
 }
 
 interface IDismissablesServiceState {

app/services/platforms/twitch.ts

@@ -10,6 +10,7 @@ import { HostsService } from 'services/hosts';
 import { Inject } from 'services/core/injector';
 import { authorizedHeaders, jfetch } from 'util/requests';
 import { UserService } from 'services/user';
+import { SettingsService } from 'services/settings';
 import { TTwitchOAuthScope, TwitchTagsService } from './twitch/index';
 import { platformAuthorizedRequest } from './utils';
 import { CustomizationService } from 'services/customization';
@@ -36,6 +37,7 @@ export interface ITwitchStartStreamOptions {
   mode?: TOutputOrientation;
   contentClassificationLabels: string[];
   isBrandedContent: boolean;
+  isEnhancedBroadcasting: boolean;
 }
 
 export interface ITwitchChannelInfo extends ITwitchStartStreamOptions {
@@ -81,6 +83,7 @@ export class TwitchService
   @Inject() twitchTagsService: TwitchTagsService;
   @Inject() twitchContentClassificationService: TwitchContentClassificationService;
   @Inject() notificationsService: NotificationsService;
+  @Inject() settingsService: SettingsService;
 
   static initialState: ITwitchServiceState = {
     ...BasePlatformService.initialState,
@@ -94,6 +97,7 @@ export class TwitchService
       tags: [],
       contentClassificationLabels: [],
       isBrandedContent: false,
+      isEnhancedBroadcasting: false,
     },
   };
 
@@ -302,11 +306,13 @@ export class TwitchService
       ? this.twitchTagsService.views.tags
       : [];
     this.SET_PREPOPULATED(true);
+
     this.SET_STREAM_SETTINGS({
       tags,
       title: channelInfo.title,
       game: channelInfo.game,
       isBrandedContent: channelInfo.is_branded_content,
+      isEnhancedBroadcasting: this.settingsService.isEnhancedBroadcasting(),
       contentClassificationLabels: channelInfo.content_classification_labels,
     });
   }

app/services/settings/settings.ts

@@ -690,6 +690,14 @@ export class SettingsService extends StatefulService<ISettingsServiceState> {
     }
   }
 
+  isEnhancedBroadcasting() {
+    return obs.NodeObs.OBS_settings_isEnhancedBroadcasting();
+  }
+
+  setEnhancedBroadcasting(enable: boolean) {
+    obs.NodeObs.OBS_settings_setEnhancedBroadcasting(enable);
+  }
+
   @mutation()
   SET_SETTINGS(settingsData: ISettingsServiceState) {
     this.state = Object.assign({}, this.state, settingsData);