fix(plex): add support for plex.direct URLs (#1437)

* fix(plex): add support for plex.direct URLs

* fix(ui): mark HTTPS Plex connections as secure

server/routes/settings/index.ts

@@ -4,11 +4,13 @@ import fs from 'fs';
 import { merge, omit } from 'lodash';
 import path from 'path';
 import { getRepository } from 'typeorm';
+import { URL } from 'url';
 import PlexAPI from '../../api/plexapi';
 import PlexTvAPI from '../../api/plextv';
 import Media from '../../entity/Media';
 import { MediaRequest } from '../../entity/MediaRequest';
 import { User } from '../../entity/User';
+import { PlexConnection } from '../../interfaces/api/plexInterfaces';
 import {
   LogMessage,
   LogsResultsResponse,
@@ -129,13 +131,32 @@ settingsRoutes.get('/plex/devices/servers', async (req, res, next) => {
     if (devices) {
       await Promise.all(
         devices.map(async (device) => {
+          const plexDirectConnections: PlexConnection[] = [];
+
+          device.connection.forEach((connection) => {
+            const url = new URL(connection.uri);
+
+            if (url.hostname !== connection.address) {
+              const plexDirectConnection = { ...connection };
+              plexDirectConnection.address = url.hostname;
+              plexDirectConnections.push(plexDirectConnection);
+
+              // Connect to IP addresses over HTTP
+              connection.protocol = 'http';
+            }
+          });
+
+          plexDirectConnections.forEach((plexDirectConnection) => {
+            device.connection.push(plexDirectConnection);
+          });
+
           await Promise.all(
             device.connection.map(async (connection) => {
               const plexDeviceSettings = {
                 ...settings.plex,
                 ip: connection.address,
                 port: connection.port,
-                useSsl: !connection.local && connection.protocol === 'https',
+                useSsl: connection.protocol === 'https',
               };
               const plexClient = new PlexAPI({
                 plexToken: admin.plexToken,
@@ -149,7 +170,7 @@ settingsRoutes.get('/plex/devices/servers', async (req, res, next) => {
                 connection.message = 'OK';
               } catch (e) {
                 connection.status = 500;
-                connection.message = e.message;
+                connection.message = e.message.split(':')[0];
               }
             })
           );

src/components/Settings/SettingsPlex.tsx

@@ -1,6 +1,7 @@
 import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
+import { orderBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -28,7 +29,7 @@ const messages = defineMessages({
   serverpresetPlaceholder: 'Plex Server',
   serverLocal: 'local',
   serverRemote: 'remote',
-  serverConnected: 'connected',
+  serverSecure: 'secure',
   serverpresetManualMessage: 'Manual configuration',
   serverpresetRefreshing: 'Retrieving servers…',
   serverpresetLoad: 'Press the button to load available servers',
@@ -131,7 +132,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
       dev.connection.forEach((conn) =>
         finalPresets.push({
           name: dev.name,
-          ssl: !conn.local && conn.protocol === 'https',
+          ssl: conn.protocol === 'https',
           uri: conn.uri,
           address: conn.address,
           port: conn.port,
@@ -141,14 +142,8 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         })
       );
     });
-    finalPresets.sort((a, b) => {
-      if (a.status && !b.status) {
-        return -1;
-      } else {
-        return 1;
-      }
-    });
-    return finalPresets;
+
+    return orderBy(finalPresets, ['status', 'ssl'], ['desc', 'desc']);
   }, [availableServers]);
 
   const syncLibraries = async () => {
@@ -420,7 +415,13 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                               server.local
                                 ? intl.formatMessage(messages.serverLocal)
                                 : intl.formatMessage(messages.serverRemote)
-                            }]
+                            }]${
+                            server.ssl
+                              ? ` [${intl.formatMessage(
+                                  messages.serverSecure
+                                )}]`
+                              : ''
+                          }
                             ${server.status ? '' : '(' + server.message + ')'}
                           `}
                         </option>

src/i18n/locale/en.json

@@ -560,9 +560,9 @@
   "components.Settings.regionTip": "Filter content by regional availability",
   "components.Settings.scan": "Sync Libraries",
   "components.Settings.scanning": "Syncing…",
-  "components.Settings.serverConnected": "connected",
   "components.Settings.serverLocal": "local",
   "components.Settings.serverRemote": "remote",
+  "components.Settings.serverSecure": "secure",
   "components.Settings.servername": "Server Name",
   "components.Settings.servernamePlaceholder": "Plex Server Name",
   "components.Settings.servernameTip": "Automatically retrieved from Plex after saving",