From 62b1bfcd891f74acc52e2f31d414837a71526e75 Mon Sep 17 00:00:00 2001
From: 0xsysr3ll <0xsysr3ll@pm.me>
Date: Mon, 21 Apr 2025 16:57:04 +0200
Subject: [PATCH] fix: improve Plex profile selector with Next.js Image and
 safer null checks

---
 src/components/Login/PlexProfileSelector.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Login/PlexProfileSelector.tsx b/src/components/Login/PlexProfileSelector.tsx
index 62643ca2..8ab1bbeb 100644
--- a/src/components/Login/PlexProfileSelector.tsx
+++ b/src/components/Login/PlexProfileSelector.tsx
@@ -3,6 +3,7 @@ import PlexPinEntry from '@app/components/Login/PlexPinEntry';
 import defineMessages from '@app/utils/defineMessages';
 import { LockClosedIcon } from '@heroicons/react/24/solid';
 import type { PlexProfile } from '@server/api/plextv';
+import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -69,10 +70,10 @@ const PlexProfileSelector = ({
     setPinError(null);
   };
 
-  if (showPinEntry && selectedProfile) {
+  if (showPinEntry && selectedProfile && selectedProfileId) {
     return (
       <PlexPinEntry
-        profileId={selectedProfileId!}
+        profileId={selectedProfileId}
         profileName={
           selectedProfile.title ||
           selectedProfile.username ||
@@ -123,11 +124,13 @@ const PlexProfileSelector = ({
                   : 'border border-white/20 bg-white/10 backdrop-blur-sm'
               } ${isSubmitting ? 'cursor-not-allowed opacity-50' : ''}`}
             >
-              <div className="mb-4 h-20 w-20 overflow-hidden rounded-full shadow-md ring-2 ring-white/30">
-                <img
+              <div className="relative mb-4 h-20 w-20 overflow-hidden rounded-full shadow-md ring-2 ring-white/30">
+                <Image
                   src={profile.thumb}
                   alt={profile.title || profile.username || 'Profile'}
-                  className="h-full w-full object-cover"
+                  fill
+                  sizes="80px"
+                  className="object-cover"
                 />
               </div>