Client side web interface does not fit correctly in HiDPI clients about selkies-gstreamer

[danisla]

Rather than scaling locally, HiDPI is best supported by changing the remote. Doing local scaling would mean the resulting image would be blurry.

From my initial research, this would have to be done per window manager, I've seen this done before with Mutter.
https://wiki.archlinux.org/title/HiDPI

I am not sure if there is a window manager agnostic way to configure this.

[ehfd]

I did more investigation, and this specific issue I'm seeing is with the client HTML5...

Since the scroll is showing even before the screen is started.

This happens even with remote scaling in my laptop (above) with client PC DPI set to 125% or 150%.

Likely will need to look at Javascript, and this is not specific to local scaling then.

[ehfd]

Should be changed from enhancement to bug.

[xhejtman]

Do you use some tool bar like bookmarks bar? I believe this is because of tool bars. For some stupid reason, document.body.offsetHeight contains height including tool bars which breaks all things. I do not know how to workaround this. It seems that height: 100% canvas overflow in this case. It's get fixed once you resize chrome window, at least for me.

[ehfd]

Hi! @xhejtman
Thank you for all your comments to this repository.
I thought this issue was associated with JavaScript, and it looks like it indeed is.

I develop https://github.com/ehfd/docker-nvidia-egl-desktop and https://github.com/ehfd/docker-nvidia-glx-desktop and have collaborated with this project.
It would be great if we could receive more helping hands to this repository if you want. The performance of this project as an open source XCloud/Shadow/GeForce Now is already great, and there are more performance and functional improvements that would surely help.
Thanks for your comments again.

[xhejtman]

I found fix for this. css/vuetify.css:

set overflow-y to hidden:

html {
  box-sizing: border-box;
  overflow-y: hidden; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

do not use min-height but, height and max-height.

.application--wrap {
  flex: 1 1 auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: -webkit-fill-available;
  max-width: 100%;
  position: relative;
}

seems to be ok on chrome and safari.

btw, for safari, the following wrap in if is needed:

if(navigator.permissions) {
    navigator.permissions.query({
        name: 'clipboard-read'
    }).then(permissionStatus => {
        // Will be 'granted', 'denied' or 'prompt':
        if (permissionStatus.state === 'granted') {
            app.clipboardStatus = 'enabled';
        }

        // Listen for changes to the permission state
        permissionStatus.onchange = () => {
            if (permissionStatus.state === 'granted') {
                app.clipboardStatus = 'enabled';
            }
        };
    });
}

if safari does not enabled Permission-api, it fails and prevents app to start.

[ehfd]

Thank you!
@xhejtman
If you make a pull request @danisla can review it and then merge it to main.

[ehfd]

Fixed in #33.