search

timothy003 / mobilediscord

Mobile-friendly Discord web app
MIT License
33 stars 17 forks source link

Enabling mobile CSS in Chromium-based browser #15

Open NotKit opened 4 years ago

NotKit commented 4 years ago

Hello! I consider adapting this project to run on Ubuntu Touch/UBPorts. It was done by someone before (https://open-store.io/app/discord.tesla), but relied on a third-party server and I could not find the source code of it.

It's pretty straightforward to run the Go part natively, but opening proxied page on localhost yields no visible changes to Discord web app interface on a small screen. mobilediscord.js and mobilediscord.css are inserted and loaded fine.

I can see Windows-specific code in mobilediscord.js file which obviously will not run on other platforms, so I will be grateful if you could provide some information on implementation details and if non-Windows-specific mobile CSS tweaks can be enabled/shared between platforms.

timothy003 commented 4 years ago

I'd be happy to help!

If the CSS is loaded, you should be able to scroll horizontally. Inspect .container-2lgZY8 and make sure it has overflow-x: auto. There is no platform-specific CSS. The Windows-specific code adds additional functionality like showing connection info in the status bar and closing modals when the back button is pressed. It also uses a WebView to get the Discord token from the official login page.

NotKit commented 4 years ago

Thank you for your answer!

Yes, horizontal scrolling actually works and main chat area resizes to fit screen/window width. I expected it to be more like Android version with popup left/right sidebars, but this makes it already usable compared to official one.

Is there something special about login page? I read the issue about Discord blocking login from the wrong origin, but I was able to login through normal proxied page both on PC and phone, maybe because I was already logged in with this IP.

timothy003 commented 4 years ago

What browser are you using? It's possible that it doesn't send the Origin header for POST requests.

NotKit commented 4 years ago

Chromium 79 on desktop and QtWebEngine-based Morph on UBPorts. Chromium sent "origin: http://localhost:8081". I wonder if they have an exception for localhost in this case.

timothy003 commented 4 years ago

It looks like 'localhost' and IP addresses like '192.168.1.4' are allowed, while hostnames like 'sandy' are not.

As for the sidebars, there's currently a bug in Chromium that prevents it from scrolling to chat when you tap a channel. Otherwise, the UX should be similar to the Android and iOS apps.