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

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>