archmonger / improved-plex-mobile Goto Github PK

View Code? Open in Web Editor NEW

43.0 3.0 10.0 6.25 MB

Changes to Plex web for a better mobile viewing experience. Finally, a better Plex mobile site.

License: GNU General Public License v3.0

CSS 100.00%

plex organizr css nginx javascript

improved-plex-mobile's Introduction

Improved Plex Mobile

Provides changes to Plex web to create a better mobile devices experience.

Features

Easily edit your Plex server configuration from your mobile device
- Library, network, agent settings, and more!
Let Plex users watch through a web browser with no restrictions
Designed for use with Organizr.

If anything doesn't work or look quite right, report it via Github Issues.

If you need installation help, join our Discord!

Requirements

Plex Media Server (free)
Nginx (free)
Web Domain (free or paid)

Screenshots

Classic	Improved Plex Mobile

Installation

Install Plex Media Server on your server.
Install Nginx on your server.
Obtain a web domain (ex. mydomain.com) from a web registrar. Can be obtained for free from Freenom.
Edit your web registrar's DNS records to point to your server's public IP address.
- This is done through your web registrar's management portal (ex. Manage Domain on Freenom)
- ALTERNATIVE: You can configure your web domain to use Cloudflare. This will hide your IP from the public, provide encryption, DDoS prevention, and various other forms of protection/optimizations for free.
Configure Nginx to reverse proxy Plex to your web domain.
- A sample configuration file is provided in our wiki.
- The sample configuration includes step 8
- The sample configuration uses encryption (SSL). You will either use Cloudflare (on step 4) and download SSL certificates from their website, or configure certbot to generate SSL certificates.
Port forward Nginx by editing your router's configuration.
- If using the sample Nginx configuration, your forwarding rules will look something like 80 -> 80 and 443 -> 443 (internal -> external).
Edit your Nginx configuration to use Improved Plex Mobile.
- See below for more details

The three lines you'll need to add to your Nginx server block

proxy_set_header Accept-Encoding "";
sub_filter '</head>' '<meta name="viewport" content="width=device-width, initial-scale=1"></meta> <link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Improved-Plex-Mobile/plex_mobile.css"> </head>';
sub_filter_once on;

The previous example with more context

For a detailed configuration file, view the Wiki.

server {
	# Use SSL traffic.
	listen 443 ssl http2;
	include ssl.conf;

	#      <<<<<< Edit this line to contain your domain name >>>>>>
	server_name myserver.com;

	location / {
		include websockets.conf;
		include reverse_proxy.conf;

		# Add Improved Plex Mobile to all web requests
		proxy_set_header Accept-Encoding "";
		sub_filter '</head>' '<meta name="viewport" content="width=device-width, initial-scale=1"></meta> <link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Improved-Plex-Mobile/plex_mobile.css"> </head>';
		sub_filter_once on;

		# Reverse proxy your Plex server's internal IP address
		#          <<<<<< Edit this line to have your Plex server's LAN address >>>>>>
		proxy_pass https://192.168.1.200:32400/;
}

improved-plex-mobile's People

Contributors

Stargazers

Watchers

Forkers

theguardianwolf bgizdov hozunomiya jbordalo space2lim xratix sonico98 shadi-cw3 superzock3003

improved-plex-mobile's Issues

Search bar and player controls extending past the page

The current view from a small screen looks as follows:

The top controls and bottom playback controls are pushed out of the main area due to some flexbox issues(?).

Pressing pause button will pause and then quickly resume

During playback on my mobile device, pressing the pause button will pause playback but then resume it half a second later.

System is Android 8.0
Browser is Firefox Release

As a side note, I am inserting the js and css through userscripts I created here:
https://greasyfork.org/en/scripts/391184-plex-mobile/code

Media item's episodes not viewable

Plex made some design decisions which cause all episodes (except one) to be hidden on mobile. I wasn't able to figure out a workaround.

I don't think this is solvable, but I'll leave this issue ticket open in the hopes that someone figures it out.

customise "card" width?

First of all thx for this great css to make mobile version of plex usable!
is there a way to increase the width of the cards more?
https://i.imgur.com/ytvTxXY.png

I see this js file :
https://github.com/Archmonger/Improved-Plex-Mobile/blob/master/archived/plex_mobile.js

I have tried adding it but I get a black screen. Does not seem to have any error in console.

Nginx setting to add css file as local file

What would be the setting to add the css file as a local file, so nginx wouldn't have to go online to pick-up the css file?

Tried adding

location / {
....
root /opt/Improved-Plex-Mobile;
include /etc/nginx/mime/types;

proxy_pass http://127.0.0.1:3000;
.......

sub_filter ...... "href=plex_mobile.css" ....
...
}

But it's not loading the css file.

Thanks

No license file in repo

As the title states, it would be nice to have a license file so that permissions regarding the code are clear.

Plex spams loopback error when behind reverse proxy

First of all, thank you for sharing your workings with us!

While I did not see a practical impart of this, when connecting to Plex through a reverse proxy, the console is spammed with errors and warnings about unreachable loopback connection at 127.0.0.1.

[Connections] [Loopback] is unavailable at http://127.0.0.1:32400/media/providers (Status 0)

Any attempt at informing Plex about the presence of the proxy had no result.

My headers:

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header X-Forwarded-Host $remote_addr;

My question is, have you dealt with this problem? Do you have any advice?