Migrate video settings to realm and remove video settings service.

app/app-services.ts

@@ -58,7 +58,6 @@ export { HighlighterService } from 'services/highlighter';
 export { DiagnosticsService } from 'services/diagnostics';
 export { RecordingModeService } from 'services/recording-mode';
 export { SideNavService } from 'services/side-nav';
-export { VideoSettingsService } from 'services/settings-v2/video';
 export { SettingsManagerService } from 'services/settings-manager';
 export { MarkersService } from 'services/markers';
 export { RealmService } from 'services/realm';
@@ -199,7 +198,6 @@ import { PlatformAppStoreService } from 'services/platform-app-store';
 import { GameOverlayService } from 'services/game-overlay';
 import { GuestCamService } from 'services/guest-cam';
 import { SideNavService } from './services/side-nav';
-import { VideoSettingsService } from 'services/settings-v2/video';
 import { SettingsManagerService } from 'services/settings-manager';
 import { DualOutputService } from 'services/dual-output';
 import { MarkersService } from 'services/markers';
@@ -283,7 +281,6 @@ export const AppServices = {
   GuestCamService,
   HardwareService,
   SideNavService,
-  VideoSettingsService,
   SettingsManagerService,
   DualOutputService,
   MarkersService,

app/components-react/root/StudioEditor.tsx

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import Display from 'components-react/shared/Display';
 import { $t } from 'services/i18n';
 import { ERenderingMode } from '../../../obs-api';
-import { TDisplayType } from 'services/settings-v2';
+import { TDisplayType } from 'services/video';
 import AutoProgressBar from 'components-react/shared/AutoProgressBar';
 import { useSubscription } from 'components-react/hooks/useSubscription';
 import { message } from 'antd';

app/components-react/shared/Display.tsx

@@ -2,7 +2,7 @@ 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 { TDisplayType } from 'services/video';
 import uuid from 'uuid/v4';
 import { useRealmObject } from 'components-react/hooks/realm';
 interface DisplayProps {
@@ -18,7 +18,7 @@ interface DisplayProps {
 }
 
 export default function Display(props: DisplayProps) {
-  const { CustomizationService, VideoSettingsService } = Services;
+  const { CustomizationService, VideoService } = Services;
 
   const p = {
     paddingSize: 0,
@@ -30,7 +30,7 @@ export default function Display(props: DisplayProps) {
   };
 
   const v = useVuex(() => {
-    const videoSettings = VideoSettingsService.baseResolutions[p.type];
+    const videoSettings = VideoService.baseResolutions[p.type];
 
     return {
       baseResolution: `${videoSettings?.baseWidth}x${videoSettings?.baseHeight}`,

app/components-react/shared/DisplaySelector.tsx

@@ -1,9 +1,10 @@
 import React, { CSSProperties } from 'react';
 import { $t } from 'services/i18n';
 import { RadioInput } from './inputs';
-import { TDisplayType } from 'services/settings-v2';
-import { TPlatform } from 'services/platforms';
+import { TDisplayType } from 'services/video';
+import { platformLabels, TPlatform } from 'services/platforms';
 import { useGoLiveSettings } from 'components-react/windows/go-live/useGoLiveSettings';
+import { ICustomStreamDestination } from 'services/settings/streaming';
 
 interface IDisplaySelectorProps {
   title: string;
@@ -23,6 +24,9 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
   } = useGoLiveSettings();
 
   const setting = p.platform ? platforms[p.platform] : customDestinations[p.index];
+  const label = p.platform
+    ? platformLabels(p.platform)
+    : (setting as ICustomStreamDestination).name;
 
   const displays = [
     {
@@ -40,7 +44,7 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
       data-test="display-input"
       id={`${p.platform}-display-input`}
       direction="horizontal"
-      label={p.label}
+      label={label}
       labelAlign="left"
       labelCol={{ offset: 0 }}
       colon

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

@@ -11,7 +11,7 @@ import { injectState, useModule } from 'slap';
 import { useForm } from '../../shared/inputs/Form';
 import { getDefined } from '../../../util/properties-type-guards';
 import isEqual from 'lodash/isEqual';
-import { TDisplayType } from 'services/settings-v2';
+import { TDisplayType } from 'services/video';
 
 type TCommonFieldName = 'title' | 'description';
 

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

@@ -3,7 +3,7 @@ import { Collapse } from 'antd';
 import cx from 'classnames';
 import { IHotkey } from 'services/hotkeys';
 import Hotkey from './Hotkey';
-import { TDisplayType } from 'services/settings-v2';
+import { TDisplayType } from 'services/video';
 import Tabs from 'components-react/shared/Tabs';
 import { $t } from 'services/i18n';