diff --git a/dist/better-xcloud.user.js b/dist/better-xcloud.user.js index cc642be..02e0a37 100644 --- a/dist/better-xcloud.user.js +++ b/dist/better-xcloud.user.js @@ -7243,39 +7243,48 @@ function updateVideoPlayerCss() { if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) { Screenshot.updateCanvasFilters(filters); } - const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO); - if (PREF_RATIO && PREF_RATIO !== "16:9") { - if (PREF_RATIO.includes(":")) { - videoCss += `aspect-ratio: ${PREF_RATIO.replace(":", "/")}; object-fit: unset !important;`; - const tmp = PREF_RATIO.split(":"); - const ratio = parseFloat(tmp[0]) / parseFloat(tmp[1]); - const maxRatio = window.innerWidth / window.innerHeight; - if (ratio < maxRatio) { - videoCss += "width: fit-content !important;"; - } else { - videoCss += "height: fit-content !important;"; - } - } else { - videoCss += `object-fit: ${PREF_RATIO} !important;`; - } - } let css = ""; if (videoCss) { css = ` -div[data-testid="media-container"] { - display: flex; -} - #game-stream video { - margin: 0 auto; - align-self: center; - background: #000; ${videoCss} } `; } $elm.textContent = css; + resizeVideoPlayer(); } +var resizeVideoPlayer = function() { + const $video = STATES.currentStream.$video; + if (!$video || !$video.parentElement) { + return; + } + const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO); + if (PREF_RATIO.includes(":")) { + const tmp = PREF_RATIO.split(":"); + const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]); + let width = 0; + let height = 0; + const parentRect = $video.parentElement.getBoundingClientRect(); + const parentRatio = parentRect.width / parentRect.height; + if (parentRatio > videoRatio) { + height = parentRect.height; + width = height * videoRatio; + } else { + width = parentRect.width; + height = width / videoRatio; + } + width = Math.floor(width); + height = Math.floor(height); + $video.style.width = `${width}px`; + $video.style.height = `${height}px`; + $video.style.objectFit = "fill"; + } else { + $video.style.width = "100%"; + $video.style.height = "100%"; + $video.style.objectFit = PREF_RATIO; + } +}; function setupStreamUi() { if (!document.querySelector(".bx-quick-settings-bar")) { window.addEventListener("resize", updateVideoPlayerCss); @@ -9162,6 +9171,9 @@ body[data-media-type=default] .bx-stream-refresh-button { body[data-media-type=tv] .bx-stream-refresh-button { top: calc(var(--gds-focus-borderSize) + 80px) !important; } +div[data-testid=media-container] { + display: flex; +} div[data-testid=media-container].bx-taking-screenshot:before { animation: bx-anim-taking-screenshot 0.5s ease; content: ' '; @@ -9170,6 +9182,11 @@ div[data-testid=media-container].bx-taking-screenshot:before { height: 100%; z-index: var(--bx-screenshot-animation-z-index); } +#game-stream video { + margin: auto; + align-self: center; + background: #000; +} @-moz-keyframes bx-anim-taking-screenshot { 0% { border: 0px solid rgba(255,255,255,0.502);