Merge pull request #2 from jordanjones98/feat-update-plex-oauth-name

Feat update plex oauth name

src/components/PlexLoginButton/index.tsx

@@ -1,3 +1,4 @@
+import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import PlexOAuth from '@app/utils/plex';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
@@ -24,11 +25,14 @@ const PlexLoginButton = ({
 }: PlexLoginButtonProps) => {
   const intl = useIntl();
   const [loading, setLoading] = useState(false);
+  const settings = useSettings();
 
   const getPlexLogin = async () => {
     setLoading(true);
     try {
-      const authToken = await plexOAuth.login();
+      const authToken = await plexOAuth.login(
+        settings.currentSettings.applicationTitle
+      );
       setLoading(false);
       onAuthToken(authToken);
     } catch (e) {

src/utils/plex.ts

@@ -40,8 +40,11 @@ class PlexOAuth {
   private popup?: Window;
 
   private authToken?: string;
+  private DEFAULT_APPLICATION_NAME = 'Overseerr';
 
-  public initializeHeaders(): void {
+  public initializeHeaders(
+    applicationName = this.DEFAULT_APPLICATION_NAME
+  ): void {
     if (!window) {
       throw new Error(
         'Window is not defined. Are you calling this in the browser?'
@@ -55,10 +58,15 @@ class PlexOAuth {
       clientId = uuid;
     }
 
+    const plexProductName =
+      applicationName === this.DEFAULT_APPLICATION_NAME
+        ? applicationName
+        : `${applicationName} - ${this.DEFAULT_APPLICATION_NAME}`;
+
     const browser = Bowser.getParser(window.navigator.userAgent);
     this.plexHeaders = {
       Accept: 'application/json',
-      'X-Plex-Product': 'Overseerr',
+      'X-Plex-Product': plexProductName,
       'X-Plex-Version': 'Plex OAuth',
       'X-Plex-Client-Identifier': clientId,
       'X-Plex-Model': 'Plex OAuth',
@@ -93,8 +101,8 @@ class PlexOAuth {
     this.openPopup({ title: 'Plex Auth', w: 600, h: 700 });
   }
 
-  public async login(): Promise<string> {
-    this.initializeHeaders();
+  public async login(applicationName?: string): Promise<string> {
+    this.initializeHeaders(applicationName);
     await this.getPin();
 
     if (!this.plexHeaders || !this.pin) {