Skip to content

Commit

Permalink
Add vertical resolutions to horizontal display options. (#5052)
Browse files Browse the repository at this point in the history 
* Add vertical resolutions to horizontal display options.

* Ignore syncing resolutions for custom resolutions.

* Fix for custom resolution.
  • Loading branch information
@michelinewu
michelinewu committed Jul 2, 2024
1 parent b46a9e2 commit cebefa5
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 34 deletions.
49 changes: 43 additions & 6 deletions app/components-react/windows/settings/Video.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,9 +226,9 @@ class VideoSettingsModule {
return VERTICAL_CANVAS_OPTIONS;
}

return CANVAS_RES_OPTIONS.concat(this.monitorResolutions).concat([
{ label: $t('Custom'), value: 'custom' },
]);
return CANVAS_RES_OPTIONS.concat(this.monitorResolutions)
.concat(VERTICAL_CANVAS_OPTIONS)
.concat([{ label: $t('Custom'), value: 'custom' }]);
}

get outputResOptions() {
Expand All @@ -240,9 +240,12 @@ class VideoSettingsModule {
if (!OUTPUT_RES_OPTIONS.find(opt => opt.value === baseRes)) {
return [{ label: baseRes, value: baseRes }]
.concat(OUTPUT_RES_OPTIONS)
.concat(VERTICAL_OUTPUT_RES_OPTIONS)
.concat([{ label: $t('Custom'), value: 'custom' }]);
}
return OUTPUT_RES_OPTIONS.concat([{ label: $t('Custom'), value: 'custom' }]);
return OUTPUT_RES_OPTIONS.concat(VERTICAL_OUTPUT_RES_OPTIONS).concat([
{ label: $t('Custom'), value: 'custom' },
]);
}

get monitorResolutions() {
Expand Down Expand Up @@ -305,8 +308,42 @@ class VideoSettingsModule {
if (this.resolutionValidator.pattern.test(value)) {
const [width, height] = value.split('x');
const prefix = key === 'baseRes' ? 'base' : 'output';
this.service.actions.setVideoSetting(`${prefix}Width`, Number(width), display);
this.service.actions.setVideoSetting(`${prefix}Height`, Number(height), display);

const settings = {
[`${prefix}Width`]: Number(width),
[`${prefix}Height`]: Number(height),
};

// set base or output resolutions to vertical dimensions for horizontal display
// when setting vertical dimensions
if (display === 'horizontal') {
const otherPrefix = key === 'baseRes' ? 'output' : 'base';
const customRes = this.state.customBaseRes || this.state.customOutputRes;
const verticalValues = VERTICAL_CANVAS_OPTIONS.map(option => option.value);
const horizontalValues = CANVAS_RES_OPTIONS.concat(OUTPUT_RES_OPTIONS).map(
option => option.value,
);
const baseRes = this.values.baseRes.toString();
const outputRes = this.values.outputRes.toString();

const shouldSyncVertical =
!customRes &&
verticalValues.includes(value) &&
!verticalValues.includes(baseRes) &&
!verticalValues.includes(outputRes);

const shouldSyncHorizontal =
!customRes &&
!verticalValues.includes(value) &&
!horizontalValues.includes(baseRes) &&
!horizontalValues.includes(outputRes);

if (shouldSyncVertical || shouldSyncHorizontal) {
settings[`${otherPrefix}Width`] = Number(width);
settings[`${otherPrefix}Height`] = Number(height);
}
}
this.service.actions.setSettings(settings, display);
}
}

Expand Down
59 changes: 31 additions & 28 deletions app/services/settings-v2/video.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,46 +141,31 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {
* The below conditionals are to prevent undefined errors on app startup
*/
get baseResolutions() {
const videoSettings = this.dualOutputService.views.videoSettings;
const [widthStr, heightStr] = this.settingsService.views.values.Video.Base.split('x');

// to prevent any possible undefined errors on load in the event that the root node
// attempts to load before the first video context has finished establishing
// the below are fallback dimensions
const defaultWidth = widthStr ? parseInt(widthStr, 10) : 1920;
const defaultHeight = heightStr ? parseInt(heightStr, 10) : 1080;

const horizontalWidth = videoSettings?.horizontal
? videoSettings.horizontal?.baseWidth
: defaultWidth;
const horizontalHeight = videoSettings.horizontal
? videoSettings.horizontal?.baseHeight
: defaultHeight;

const verticalWidth = videoSettings.vertical.baseWidth ?? defaultWidth;
const verticalHeight = videoSettings.vertical.baseHeight ?? defaultHeight;

return {
horizontal: {
baseWidth: horizontalWidth ?? this.contexts.horizontal?.video.baseWidth,
baseHeight: horizontalHeight ?? this.contexts.horizontal?.video.baseHeight,
baseWidth: this.state.horizontal?.baseWidth ?? 1920,
baseHeight: this.state.horizontal?.baseHeight ?? 1080,
},
vertical: {
baseWidth: verticalWidth ?? this.contexts.vertical?.video.baseWidth,
baseHeight: verticalHeight ?? this.contexts.vertical?.video.baseHeight,
baseWidth: this.state.vertical?.baseWidth ?? 720,
baseHeight: this.state.vertical?.baseHeight ?? 1280,
},
};
}

get outputResolutions() {
return {
horizontal: {
outputWidth: this.contexts.horizontal?.video.outputWidth,
outputHeight: this.contexts.horizontal?.video.outputHeight,
outputWidth: this.state.horizontal?.outputWidth,
outputHeight: this.state.horizontal?.outputHeight,
},
vertical: {
outputWidth: this.contexts.vertical?.video.outputWidth,
outputHeight: this.contexts.vertical?.video.outputHeight,
outputWidth: this.state.vertical?.outputWidth,
outputHeight: this.state.vertical?.outputHeight,
},
};
}
Expand All @@ -194,7 +179,7 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {
formatVideoSettings(display: TDisplayType = 'horizontal', typeStrings?: boolean) {
// use vertical display setting as a failsafe to prevent null errors
const settings =
this.contexts[display]?.video ??
this.state[display] ??
this.dualOutputService.views.videoSettings[display] ??
this.dualOutputService.views.videoSettings.vertical;

Expand Down Expand Up @@ -397,7 +382,7 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {
}

updateVideoSettings(patch: Partial<IVideoInfo>, display: TDisplayType = 'horizontal') {
const newVideoSettings = { ...this.contexts[display].video, ...patch };
const newVideoSettings = { ...this.state[display], ...patch };

this.SET_VIDEO_CONTEXT(display, newVideoSettings);
this.updateObsSettings(display);
Expand All @@ -421,15 +406,25 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {
this.SET_VIDEO_SETTING(key, value, display);
this.updateObsSettings(display);

// console.log('this.baseResolutions', JSON.stringify(this.baseResolutions, null, 2));

// also update the persisted settings
this.dualOutputService.setVideoSetting({ [key]: value }, display);

// refresh v1 settings
this.settingsService.refreshVideoSettings();
}

setSettings(settings: Partial<IVideoInfo>, display: TDisplayType = 'horizontal') {
this.SET_SETTINGS(settings, display);

this.updateObsSettings(display);

// also update the persisted settings
this.dualOutputService.setVideoSetting(settings, display);

// refresh v1 settings
this.settingsService.refreshVideoSettings();
}

/**
* Sync FPS settings between contexts
* @remark - If the fps settings are not the same for both contexts, the output settings
Expand All @@ -445,7 +440,7 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {

// update persisted local settings if the vertical context does not exist
const verticalVideoSetting: IVideoInfo = this.contexts.vertical
? this.contexts.vertical.video
? this.state.vertical
: this.dualOutputService.views.videoSettings.vertical;

let updated = false;
Expand Down Expand Up @@ -521,6 +516,14 @@ export class VideoSettingsService extends StatefulService<IVideoSetting> {
};
}

@mutation()
private SET_SETTINGS(settings: Partial<IVideoInfo>, display: TDisplayType = 'horizontal') {
this.state[display] = {
...this.state[display],
...settings,
};
}

@mutation()
private SET_VIDEO_CONTEXT(display: TDisplayType = 'horizontal', settings?: IVideoInfo) {
if (settings) {
Expand Down

0 comments on commit cebefa5

Please sign in to comment.