Streaming refactor for backend changes (stream-labs#4497)

* Update repository number. * Refactor streaming for api changes. * Fix: Fixes from PR notes. (1 of 3). * WIP. * Fix: Fixes from PR Notes. Update streaming and restream services to reflect latest changes. Add mode property to platform start stream options.(2 of 3). * Fix: Fixes from PR Notes. Move persisted video settings to green service. Fix display base resolution. (3 of 3). * Refactor video contexts to instance variable. * Appropriate use and assign video contexts on state. * Removed unnecessary inits. * Added optional operator for video values and base resolution. * Video settings set state in mutations. * Fix for strict null checks. * More fixes for strict null tests. * WIP, null regressions tests. * Fix for strict null regression test. * Update own version. * Update set/get base resolution. * Update repo json. * Update native deps script. * Refactor establishing contexts for tests. * Fix for autoconfig test. * Fix for video settings test. * Fixes from pr notes. * Simplify filter categories logic.
ddedook · Apr 13, 2023 · 27eeab4 · 27eeab4
1 parent 9c5f01b
commit 27eeab4
Show file tree

Hide file tree

Showing 33 changed files with 1,252 additions and 224 deletions.
diff --git a/app/app-services.ts b/app/app-services.ts
@@ -94,6 +94,7 @@ export { RecentEventsService } from 'services/recent-events';
 export { MagicLinkService } from 'services/magic-link';
 export { GrowService } from 'services/grow/grow';
 export { GuestCamService } from 'services/guest-cam';
+export { GreenService } from 'services/green';
 
 // WIDGETS
 export { WidgetSource, WidgetsService } from './services/widgets';
@@ -186,6 +187,7 @@ import { SideNavService } from './services/side-nav';
 import { VideoSettingsService } from 'services/settings-v2/video';
 import { SettingsManagerService } from 'services/settings-manager';
 import { MarkersService } from 'services/markers';
+import { GreenService } from 'services/green';
 
 export const AppServices = {
   AppService,
@@ -256,4 +258,5 @@ export const AppServices = {
   VideoSettingsService,
   SettingsManagerService,
   MarkersService,
+  GreenService,
 };
diff --git a/app/components-react/shared/Display.tsx b/app/components-react/shared/Display.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useRef } from 'react';
 import { useVuex } from '../hooks';
 import { Services } from '../service-provider';
 import { Display as OBSDisplay } from '../../services/video';
+import { TDisplayType } from 'services/settings-v2/video';
 import uuid from 'uuid/v4';
-
 interface DisplayProps {
   sourceId?: string;
   paddingSize?: number;
@@ -12,10 +12,11 @@ interface DisplayProps {
   onOutputResize?: (region: IRectangle) => void;
   clickHandler?: (event: React.MouseEvent) => void;
   style?: React.CSSProperties;
+  type?: TDisplayType;
 }
 
 export default function Display(props: DisplayProps) {
-  const { VideoService, CustomizationService } = Services;
+  const { CustomizationService, VideoSettingsService } = Services;
 
   const p = {
     paddingSize: 0,
@@ -25,13 +26,14 @@ export default function Display(props: DisplayProps) {
     ...props,
   };
 
-  const v = useVuex(
-    () => ({
+  const v = useVuex(() => {
+    const videoSettings = VideoSettingsService.contexts[p.type ?? 'horizontal']?.video;
+
+    return {
       paddingColor: CustomizationService.views.displayBackground,
-      baseResolution: VideoService.baseResolution,
-    }),
-    false,
-  );
+      baseResolution: `${videoSettings?.baseWidth}x${videoSettings?.baseHeight}`,
+    };
+  }, false);
 
   const obsDisplay = useRef<OBSDisplay | null>(null);
   const displayEl = useRef<HTMLDivElement>(null);
@@ -55,6 +57,7 @@ export default function Display(props: DisplayProps) {
       paddingSize: p.paddingSize,
       paddingColor: v.paddingColor,
       renderingMode: p.renderingMode,
+      type: p.type,
     });
     obsDisplay.current.setShoulddrawUI(p.drawUI);
     obsDisplay.current.onOutputResize(region => p.onOutputResize(region));
@@ -79,7 +82,12 @@ export default function Display(props: DisplayProps) {
     <div
       className="display"
       ref={displayEl}
-      style={{ height: '100%', backgroundColor: 'var(--section)', flexGrow: 1, ...p.style }}
+      style={{
+        height: '100%',
+        backgroundColor: 'var(--section)',
+        flexGrow: 1,
+        ...p.style,
+      }}
       onClick={onClickHandler}
     />
   );

diff --git a/app/components-react/shared/inputs/FormFactory.tsx b/app/components-react/shared/inputs/FormFactory.tsx
@@ -33,6 +33,7 @@ export default function FormFactory(p: {
   onChange: (key: string) => (value: TInputValue) => void;
   values: Dictionary<TInputValue>;
   formOptions?: FormProps;
+  name?: string;
 }) {
   const form = useForm();
 
@@ -41,6 +42,7 @@ export default function FormFactory(p: {
   return (
     <Form
       {...p.formOptions}
+      name={p.name}
       form={form}
       onFieldsChange={() => debounce(form.validateFields, 500)()}
     >

diff --git a/app/components-react/windows/settings/Video.tsx b/app/components-react/windows/settings/Video.tsx
@@ -183,7 +183,7 @@ class VideoSettingsModule {
   }
 
   get outputResOptions() {
-    const baseRes = `${this.service.state.videoContext.baseWidth}x${this.service.state.videoContext.baseHeight}`;
+    const baseRes = `${this.service.state.horizontal.baseWidth}x${this.service.state.horizontal.baseHeight}`;
     if (!OUTPUT_RES_OPTIONS.find(opt => opt.value === baseRes)) {
       return [{ label: baseRes, value: baseRes }]
         .concat(OUTPUT_RES_OPTIONS)
@@ -259,7 +259,6 @@ class VideoSettingsModule {
   selectResolution(key: string, value: string) {
     if (value === 'custom') {
       this.setCustomResolution(key, true);
-      this.setResolution(key, '');
     } else {
       this.setCustomResolution(key, false);
       this.setResolution(key, value);
@@ -321,6 +320,7 @@ export function VideoSettings() {
         metadata={metadata}
         onChange={onChange}
         formOptions={{ layout: 'vertical' }}
+        name="video-settings"
       />
     </div>
   );

diff --git a/app/components/windows/settings/Settings.vue.ts b/app/components/windows/settings/Settings.vue.ts
@@ -181,7 +181,9 @@ export default class Settings extends Vue {
   }
 
   get categoryNames() {
-    return this.settingsService.getCategories();
+    return this.settingsService
+      .getCategories()
+      .filter(category => !category.toLowerCase().startsWith('stream') || category === 'Stream');
   }
 
   save(settingsData: ISettingsSubCategory[]) {

diff --git a/app/services/app/app.ts b/app/services/app/app.ts
@@ -41,6 +41,7 @@ import { MetricsService } from '../metrics';
 import { SettingsService } from '../settings';
 import { OS, getOS } from 'util/operating-systems';
 import * as remote from '@electron/remote';
+import { VideoSettingsService } from 'services/settings-v2/video';
 
 interface IAppState {
   loading: boolean;
@@ -90,6 +91,7 @@ export class AppService extends StatefulService<IAppState> {
   @Inject() private metricsService: MetricsService;
   @Inject() private settingsService: SettingsService;
   @Inject() private usageStatisticsService: UsageStatisticsService;
+  @Inject() private videoSettingsService: VideoSettingsService;
 
   static initialState: IAppState = {
     loading: true,
@@ -191,6 +193,7 @@ export class AppService extends StatefulService<IAppState> {
       await this.sceneCollectionsService.deinitialize();
       this.performanceService.stop();
       this.transitionsService.shutdown();
+      this.videoSettingsService.shutdown();
       await this.gameOverlayService.destroy();
       await this.fileManagerService.flushAll();
       obs.NodeObs.RemoveSourceCallback();

diff --git a/app/services/green/green-data.ts b/app/services/green/green-data.ts
@@ -0,0 +1,59 @@
+import { $t } from 'services/i18n';
+import { TPlatform } from 'services/platforms';
+
+export enum EOutputDisplayType {
+  Horizontal = 'horizontal',
+  Green = 'green',
+}
+
+export type TGreenDisplayType = EOutputDisplayType.Horizontal | EOutputDisplayType.Green;
+
+export interface IGreenPlatformSetting {
+  platform: TPlatform;
+  display: EOutputDisplayType;
+}
+
+export type TGreenPlatformSettings = {
+  [Platform in TPlatform]: IGreenPlatformSetting;
+};
+
+export type TDisplayPlatforms = {
+  [Display in EOutputDisplayType]: TPlatform[];
+};
+
+export const GreenPlatformSettings: TGreenPlatformSettings = {
+  ['twitch']: {
+    platform: 'twitch',
+    display: EOutputDisplayType.Horizontal,
+  },
+  ['facebook']: {
+    platform: 'facebook',
+    display: EOutputDisplayType.Horizontal,
+  },
+  ['youtube']: {
+    platform: 'youtube',
+    display: EOutputDisplayType.Horizontal,
+  },
+  ['trovo']: {
+    platform: 'trovo',
+    display: EOutputDisplayType.Horizontal,
+  },
+  ['tiktok']: {
+    platform: 'tiktok',
+    display: EOutputDisplayType.Green,
+  },
+};
+
+export const platformLabels = (platform: TPlatform | string) =>
+  ({
+    ['twitch']: $t('Twitch'),
+    ['facebook']: $t('Facebook'),
+    ['youtube']: $t('YouTube'),
+    ['trovo']: $t('Trovo'),
+  }[platform]);
+
+export const displayLabels = (display: EOutputDisplayType | string) =>
+  ({
+    [EOutputDisplayType.Horizontal]: $t('Horizontal'),
+    [EOutputDisplayType.Green]: $t('Green'),
+  }[display]);