search

redphx / better-xcloud

Userscript to improve Xbox Cloud Gaming (xCloud) and Remote Play experiences on web browsers
https://better-xcloud.github.io
MIT License
846 stars 52 forks source link

[Bug] Stream settings and stats buttons visible in System menu #209

Closed TC131 closed 10 months ago

TC131 commented 10 months ago

On Edge browser ive noticed stream settings and stats are bolted onto the quick bar now and wont collapse down. Having a toggle to move them back to the regular settings would be nice.

redphx commented 10 months ago

Do you have any other extensions/scripts installed?

Have you tried enabling the "Hide system menu's icon" setting?

TC131 commented 10 months ago

No other extensions and hide system menus icon is checked. I noticed them stay on the quick menu thing after enabling keyboard and mouse support then disabling it. I've tried checking and unchecking system menu icon and relaunching. Same thing, instead if the 6 dots in the corner I get stream settings and stats icons locked to the top left.

redphx commented 10 months ago

A video showing the bug would be great

TC131 commented 10 months ago

I'll get a video when I get to the house tonight. I was thinking it was a new change and didn't realize it was a bug or I would have already grabbed screens. For reference on my android I have same settings but don't have the same issue.

redphx commented 10 months ago

Do you happen to know how to use Chrome DevTools?

redphx commented 10 months ago

Please follow these steps:

  1. Load into the game

  2. Click on the ... button on Edge's toolbar -> More Settings -> Developer Tools

    image

  3. Switch to Console Tab

    image

  4. Type this line into the Console, then press Enter

    document.querySelector('#StreamHud').outerHTML

  5. Copy the text it returned & share it to me.

    image
TC131 commented 10 months ago

VM177:1 Uncaught TypeError: Cannot read properties of null (reading 'outerHTML') at :1:37 (anonymous) @ VM177:1

this is in the launch screen though with the rocketship. Just got home to a 30 min queue and didnt know if it made a difference.

redphx commented 10 months ago

Wait until you load into the game, then enter that line, not in the loading screen.

redphx commented 10 months ago

@TC131 just change the server to Japan so you don't have to queue

TC131 commented 10 months ago

I posted it in this comment but It wont show up

redphx commented 10 months ago
image

Write it like this. Put the HTML code inside ``` block

TC131 commented 10 months ago 
<div id="StreamHud" class="StreamHUD-module__container___l-cp9" style="top: 0px; left: 0px;">
  <div class="StreamHUD-module__buttonsContainer___SN1lD">
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Stream options" aria-label="Stream options" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true">
          <path d="M256 896q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10zm768 0q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10zm768 0q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10z"></path>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Guide">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true">
          <path d="M492 158q-4 0-5-1v-2l2-3Q614 77 746 39t278-39q143 0 277 38t256 113l3 2q-3 5-6 5-8 0-17-2t-17-4q-9-1-18-1t-18 0q-47 0-95 9t-96 24-92 34-88 39q-22 11-44 21t-43 25h-5q-43-27-100-54t-120-49-123-36-113-14q-19 0-39 4t-34 4zm251 412q-44 53-101 128T525 862t-117 184-102 189-72 180-28 156q0 17 2 37t8 36l-1 2-2 1-4-2q-103-139-156-293T0 1024q0-98 20-199t60-196 96-180 130-153q5-4 15-5t15-2q30 0 66 14t75 38 76 53 74 60 65 59 51 50l1 4-1 3zm968-281q7 0 16 1t15 6q73 71 130 155t96 178 59 194 21 201q0 173-53 328t-156 293l-6 1-2-3q3-4 5-14t3-21 2-22 1-16q0-69-27-155t-72-180-102-190-117-184-117-163-102-129l-1-3 1-3q21-21 50-49t65-58 73-61 77-53 75-38 66-15zm-687 533q29 18 56 42t54 47q42 37 102 94t127 128 131 149 117 155 84 149 32 129q0 23-6 43t-23 37q-31 31-69 57t-76 49q-120 72-254 109t-275 38q-141 0-274-37t-255-110q-17-10-43-26t-51-37-47-40-27-39q-7-20-7-45 0-54 30-122t78-142 110-149 123-142 118-123 97-92q34-30 72-64t76-58z"></path>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Stream settings">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true" fill="none" stroke="#fff" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="fill: none;">
          <g transform="matrix(.142357 0 0 .142357 -2.22021 -2.22164)" fill="none" stroke="#fff" stroke-width="16">
            <circle cx="128" cy="128" r="40"></circle>
            <path d="M130.05 206.11h-4L94 224c-12.477-4.197-24.049-10.711-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9 147.24a99.16 99.16 0 0 1 0-38.46l31.84-18.1c.65-1.15 1.32-2.29 2-3.41l.16-36C69.951 42.757 81.521 36.218 94 32l32 17.89h4L162 32c12.477 4.197 24.049 10.711 34.11 19.2l.12 36c.71 1.12 1.38 2.25 2 3.41l31.85 18.14a99.16 99.16 0 0 1 0 38.46l-31.84 18.1c-.65 1.15-1.32 2.29-2 3.41l-.16 36A104.59 104.59 0 0 1 162 224l-31.95-17.89z"></path>
          </g>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Stream stats">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true" fill="none" stroke="#fff" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="fill: none;">
          <path d="M1.181 24.55v-3.259c0-8.19 6.576-14.952 14.767-14.98H16c8.13 0 14.819 6.69 14.819 14.819v3.42c0 .625-.515 1.14-1.14 1.14H2.321c-.625 0-1.14-.515-1.14-1.14z"></path>
          <path d="M16 6.311v4.56M12.58 25.69l9.12-12.54m4.559 5.7h4.386m-29.266 0H5.74"></path>
        </svg>
      </button>
    </div>
  </div>
  <button class="GripHandle-module__container___Ys9mS" aria-expanded="true" aria-label="Quick Actions Toggle">
    <div class="Grip-module__container___5o7HD">
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
    </div>
  </button>
</div>
redphx commented 10 months ago

Thanks, let me check

TC131 commented 10 months ago

i am extremely sorry for how slow I am at this but I really do appreciate your help

redphx commented 10 months ago

You're doing great.

Did you do those steps when the bar is expanded or collaped?
Could you please do it again when the bar is collapsed/expanded? Thanks.

TC131 commented 10 months ago

first was expanded this one will be collapsed

TC131 commented 10 months ago 
<div id="StreamHud" class="StreamHUD-module__container___l-cp9" style="top: 0px; left: -120px;">
  <div class="StreamHUD-module__buttonsContainer___SN1lD StreamHUD-module__collapsedButtonsContainer___MhrkY">
    <div class="HUDButton-module__hiddenContainer___JALyc">
      <button tabindex="-1" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="true" title="Stream options" aria-label="Stream options" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true">
          <path d="M256 896q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10zm768 0q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10zm768 0q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10z"></path>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__hiddenContainer___JALyc">
      <button tabindex="-1" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="true" title="Guide">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true">
          <path d="M492 158q-4 0-5-1v-2l2-3Q614 77 746 39t278-39q143 0 277 38t256 113l3 2q-3 5-6 5-8 0-17-2t-17-4q-9-1-18-1t-18 0q-47 0-95 9t-96 24-92 34-88 39q-22 11-44 21t-43 25h-5q-43-27-100-54t-120-49-123-36-113-14q-19 0-39 4t-34 4zm251 412q-44 53-101 128T525 862t-117 184-102 189-72 180-28 156q0 17 2 37t8 36l-1 2-2 1-4-2q-103-139-156-293T0 1024q0-98 20-199t60-196 96-180 130-153q5-4 15-5t15-2q30 0 66 14t75 38 76 53 74 60 65 59 51 50l1 4-1 3zm968-281q7 0 16 1t15 6q73 71 130 155t96 178 59 194 21 201q0 173-53 328t-156 293l-6 1-2-3q3-4 5-14t3-21 2-22 1-16q0-69-27-155t-72-180-102-190-117-184-117-163-102-129l-1-3 1-3q21-21 50-49t65-58 73-61 77-53 75-38 66-15zm-687 533q29 18 56 42t54 47q42 37 102 94t127 128 131 149 117 155 84 149 32 129q0 23-6 43t-23 37q-31 31-69 57t-76 49q-120 72-254 109t-275 38q-141 0-274-37t-255-110q-17-10-43-26t-51-37-47-40-27-39q-7-20-7-45 0-54 30-122t78-142 110-149 123-142 118-123 97-92q34-30 72-64t76-58z"></path>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Stream settings">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true" fill="none" stroke="#fff" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="fill: none;">
          <g transform="matrix(.142357 0 0 .142357 -2.22021 -2.22164)" fill="none" stroke="#fff" stroke-width="16">
            <circle cx="128" cy="128" r="40"></circle>
            <path d="M130.05 206.11h-4L94 224c-12.477-4.197-24.049-10.711-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9 147.24a99.16 99.16 0 0 1 0-38.46l31.84-18.1c.65-1.15 1.32-2.29 2-3.41l.16-36C69.951 42.757 81.521 36.218 94 32l32 17.89h4L162 32c12.477 4.197 24.049 10.711 34.11 19.2l.12 36c.71 1.12 1.38 2.25 2 3.41l31.85 18.14a99.16 99.16 0 0 1 0 38.46l-31.84 18.1c-.65 1.15-1.32 2.29-2 3.41l-.16 36A104.59 104.59 0 0 1 162 224l-31.95-17.89z"></path>
          </g>
        </svg>
      </button>
    </div>
    <div class="HUDButton-module__container___LUkWG">
      <button tabindex="0" class="StreamHUD-module__button___wRF+8 Button-module__iconButtonBase___9aGoF Button-module__heroMediumBorderRadius___-V4UA Button-module__sizeIconButtonMedium___KM-gX Button-module__buttonBase___LuYUw Button-module__textNoUnderline___5pGM- Button-module__typeBrand___OwATL Button-module__overlayModeSolid___2BVUO" aria-hidden="false" title="Stream stats">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="1em" height="1em" class="Button-module__buttonIcon___six7+ Button-module__noMargin___0-3t6 StreamHUD-module__icon___DUTIC Icon-module__icon___5Kqln Icon-module__xxSmall___cJcD7" aria-hidden="true" fill="none" stroke="#fff" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="fill: none;">
          <path d="M1.181 24.55v-3.259c0-8.19 6.576-14.952 14.767-14.98H16c8.13 0 14.819 6.69 14.819 14.819v3.42c0 .625-.515 1.14-1.14 1.14H2.321c-.625 0-1.14-.515-1.14-1.14z"></path>
          <path d="M16 6.311v4.56M12.58 25.69l9.12-12.54m4.559 5.7h4.386m-29.266 0H5.74"></path>
        </svg>
      </button>
    </div>
  </div>
  <button class="GripHandle-module__container___Ys9mS GripHandle-module__collapsedContainer___Vjm1r" aria-expanded="false" aria-label="Quick Actions Toggle">
    <div class="Grip-module__container___5o7HD">
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
      <div class="Grip-module__dot___9gy9m"></div>
    </div>
  </button>
</div>
redphx commented 10 months ago

Thank you, I'm working on a fix at the moment

redphx commented 10 months ago

@TC131 please test this version: https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js

TC131 commented 10 months ago

now it is a transparent black box with the six dots at the end of it. It hid the icons but didnt collapse the menu.

redphx commented 10 months ago

Do you see any error in the Console tab? Please share a screenshot if possible

redphx commented 10 months ago

Do you see any line with "patchStreamHudSize" text in the Console tab?

image
TC131 commented 10 months ago

not finding patchstreamhudsize but there are quite a few erros. I took a screen just trying to find where it saved

TC131 commented 10 months ago

Screenshot (1)

redphx commented 10 months ago

in the Filter input box please enter "patch" and take a new screenshot. THanks.

image
TC131 commented 10 months ago

nothing populates.

redphx commented 10 months ago

That's weird. But try this new version again: https://github.com/redphx/better-xcloud/raw/main/better-xcloud.user.js

TC131 commented 10 months ago

I'll have to try it tomorrow sometime. I will also try a fresh install maybe?

redphx commented 10 months ago

Just click on the link and press reinstall

TC131 commented 10 months ago

that one looks like a winner. It actually even better because it makes the pull out menu completely invisible from what I can tell and it collapses properly. Thank you!

redphx commented 10 months ago

Thanks for the help! I'll publish the fix in the next version.

redphx commented 10 months ago

@TC131 are you using the "Keyboard & Mouse for Xbox xCloud" extension?

TC131 commented 10 months ago

I was going to test it out before I ended up with the original bug. Haven't tried using it since.

redphx commented 10 months ago

I meant this one: https://chrome.google.com/webstore/detail/keyboard-mouse-for-xbox-x/nmfedkijhhigaikbadoijiolmjjgoimd

It's known that isn't compatible with Better xCloud since version 2.0

TC131 commented 10 months ago

Negative, was trying out the one in the better xcloud extension.

redphx commented 10 months ago

Thanks. Are you using any other extensions/scripts in the browser?

TC131 commented 10 months ago

Yes, I have user agent switcher and volume booster