marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-09-18 10:09:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "Limit video player's FPS" feature

Browse Source
This commit is contained in:
redphx
2024-10-12 16:15:51 +07:00
parent 0164423e45
commit 0c34173815
9 changed files with 130 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/number-stepper.styl
View File

@@ -5,7 +5,7 @@
display: inline-block;
min-width: 40px;
font-family: var(--bx-monospaced-font);
font-size: 12px;
font-size: 13px;
margin: 0 4px;
}

1
src/enums/pref-keys.ts
View File

@@ -75,6 +75,7 @@ export enum PrefKey {
VIDEO_PLAYER_TYPE = 'video_player_type',
VIDEO_PROCESSING = 'video_processing',
VIDEO_POWER_PREFERENCE = 'video_power_preference',
VIDEO_MAX_FPS = 'video_max_fps',
VIDEO_SHARPNESS = 'video_sharpness',
VIDEO_RATIO = 'video_ratio',
VIDEO_BRIGHTNESS = 'video_brightness',

19
src/modules/player/webgl2-player.ts
View File

@@ -25,6 +25,10 @@ export class WebGL2Player {
saturation: 0.0,
};
private targetFps = 60;
private frameInterval = Math.ceil(1000 / this.targetFps);
private lastFrameTime = 0;
private animFrameId: number | null = null;
constructor($video: HTMLVideoElement) {
@@ -67,6 +71,11 @@ export class WebGL2Player {
update && this.updateCanvas();
}
setTargetFps(target: number) {
this.targetFps = target;
this.frameInterval = Math.ceil(1000 / target);
}
getCanvas() {
return this.$canvas;
}
@@ -85,6 +94,16 @@ export class WebGL2Player {
}
drawFrame() {
// Limit FPS
if (this.targetFps < 60) {
const currentTime = performance.now();
const timeSinceLastFrame = currentTime - this.lastFrameTime;
if (timeSinceLastFrame < this.frameInterval) {
return;
}
this.lastFrameTime = currentTime;
}
const gl = this.gl!;
const $video = this.$video;

18
src/modules/stream/stream-settings-utils.ts
View File

@@ -7,9 +7,10 @@ import { getPref, setPref } from "@/utils/settings-storages/global-settings-stor
export function onChangeVideoPlayerType() {
const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
const $videoProcessing = document.getElementById('bx_setting_video_processing') as HTMLSelectElement;
const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
const $videoPowerPreference = document.getElementById('bx_setting_video_power_preference') as HTMLElement;
const $videoProcessing = document.getElementById(`bx_setting_${PrefKey.VIDEO_PROCESSING}`) as HTMLSelectElement;
const $videoSharpness = document.getElementById(`bx_setting_${PrefKey.VIDEO_SHARPNESS}`) as HTMLElement;
const $videoPowerPreference = document.getElementById(`bx_setting_${PrefKey.VIDEO_POWER_PREFERENCE}`) as HTMLElement;
const $videoMaxFps = document.getElementById(`bx_setting_${PrefKey.VIDEO_MAX_FPS}`) as HTMLElement;
if (!$videoProcessing) {
return;
@@ -38,17 +39,27 @@ export function onChangeVideoPlayerType() {
// Hide Power Preference setting if renderer isn't WebGL2
$videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
$videoMaxFps.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
updateVideoPlayer();
}
export function limitVideoPlayerFps() {
const targetFps = getPref(PrefKey.VIDEO_MAX_FPS);
const streamPlayer = STATES.currentStream.streamPlayer;
streamPlayer?.getWebGL2Player()?.setTargetFps(targetFps);
}
export function updateVideoPlayer() {
const streamPlayer = STATES.currentStream.streamPlayer;
if (!streamPlayer) {
return;
}
limitVideoPlayerFps();
const options = {
processing: getPref(PrefKey.VIDEO_PROCESSING),
sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
@@ -60,6 +71,7 @@ export function updateVideoPlayer() {
streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
streamPlayer.updateOptions(options);
streamPlayer.refreshPlayer();
}
window.addEventListener('resize', updateVideoPlayer);

5
src/modules/ui/dialog/settings-dialog.ts
View File

@@ -1,6 +1,6 @@
import { isFullVersion } from "@macros/build" with {type: "macro"};
import { onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
import { limitVideoPlayerFps, onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements, type BxButton } from "@/utils/html";
import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
import { ControllerShortcut } from "@/modules/controller-shortcut";
@@ -407,6 +407,9 @@ export class SettingsNavigationDialog extends NavigationDialog {
items: [{
pref: PrefKey.VIDEO_PLAYER_TYPE,
onChange: onChangeVideoPlayerType,
}, {
pref: PrefKey.VIDEO_MAX_FPS,
onChange: limitVideoPlayerFps,
}, {
pref: PrefKey.VIDEO_POWER_PREFERENCE,
onChange: () => {

15
src/utils/settings-storages/global-settings-storage.ts
View File

@@ -616,6 +616,21 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
highest: 'low-power',
},
},
[PrefKey.VIDEO_MAX_FPS]: {
label: t('max-fps'),
type: SettingElementType.NUMBER_STEPPER,
default: 60,
min: 10,
max: 60,
steps: 10,
params: {
exactTicks: 10,
customTextValue: (value: any) => {
value = parseInt(value);
return value === 60 ? t('unlimited') : value + 'FPS';
},
},
},
[PrefKey.VIDEO_SHARPNESS]: {
label: t('sharpness'),
type: SettingElementType.NUMBER_STEPPER,

1
src/utils/translation.ts
View File

@@ -143,6 +143,7 @@ const Texts = {
"local-co-op": "Local co-op",
"lowest-quality": "Lowest quality",
"map-mouse-to": "Map mouse to",
"max-fps": "Max FPS",
"may-not-work-properly": "May not work properly!",
"menu": "Menu",
"microphone": "Microphone",