harden media

apps/website/components/leagues/StandingsTable.tsx

@@ -8,7 +8,8 @@ import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import type { LeagueMembership } from '@/lib/types/LeagueMembership';
 import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
 import CountryFlag from '@/components/ui/CountryFlag';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { getMediaUrl } from '@/lib/utilities/media';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
 
 // Position background colors
 const getPositionBgColor = (position: number): string => {
@@ -52,7 +53,6 @@ export default function StandingsTable({
   onRemoveMember,
   onUpdateRole
 }: StandingsTableProps) {
-  const { mediaService } = useServices();
   const [hoveredRow, setHoveredRow] = useState<string | null>(null);
   const [activeMenu, setActiveMenu] = useState<{ driverId: string; type: 'member' | 'points' } | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -320,16 +320,20 @@ export default function StandingsTable({
                     {/* Avatar */}
                     <div className="relative">
                       <div className="w-10 h-10 rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center shrink-0">
-                        {driver && (
-                          <Image
-                            src={mediaService.getDriverAvatar(driver.id)}
-                            alt={driver.name}
-                            width={40}
-                            height={40}
-                            className="w-full h-full object-cover"
-                          />
-                        )}
-                      </div>
+                          {driver && (
+                            driver.avatarUrl ? (
+                              <Image
+                                src={driver.avatarUrl}
+                                alt={driver.name}
+                                width={40}
+                                height={40}
+                                className="w-full h-full object-cover"
+                              />
+                            ) : (
+                              <PlaceholderImage size={40} />
+                            )
+                          )}
+                        </div>
                       {/* Nationality flag */}
                       {driver && driver.country && (
                         <div className="absolute -bottom-1 -right-1">