Merge 5acd230383 into cbc9fc4fa6

assets/rating-icons/imdb.svg

@@ -0,0 +1 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#f5c518" d="M4 7c-1.103 0-2 .897-2 2v6.4c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V9c0-1.103-.897-2-2-2H4Zm1.4 2.363h1.275v5.312H5.4V9.362Zm1.962 0H9l.438 2.512.287-2.512h1.75v5.312H10.4v-3l-.563 3h-.8l-.512-3v3H7.362V9.362Zm8.313 0H17v1.2c.16-.16.516-.363.875-.363.36.04.84.283.8.763v3.075c0 .24-.075.404-.275.524-.16.04-.28.075-.6.075-.32 0-.795-.196-.875-.237-.08-.04-.163.275-.163.275h-1.087V9.362Zm-3.513.037H13.6c.88 0 1.084.078 1.325.237.24.16.35.397.35.838v3.2c0 .32-.15.563-.35.762-.2.2-.484.288-1.325.288h-1.438V9.4Zm1.275.8v3.563c.2 0 .488.04.488-.2v-3.126c0-.28-.247-.237-.488-.237Zm3.763.675c-.12 0-.2.08-.2.2v2.688c0 .159.08.237.2.237.12 0 .2-.117.2-.238l-.037-2.687c0-.12-.043-.2-.163-.2Z"/></svg>

src/components/metadata/MetadataDetails.tsx

@@ -23,7 +23,7 @@ import { isMDBListEnabled } from '../../services/mdblistConstants';
 import { getAgeRatingColor } from '../../utils/ageRatingColors';
 import AgeRatingBadge from '../common/AgeRatingBadge';
 
-const IMDb_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png';
+import IMDBIcon from '../../../assets/rating-icons/imdb.svg';
 
 // Enhanced responsive breakpoints for Metadata Details
 const BREAKPOINTS = {
@@ -241,16 +241,9 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
         )}
         {metadata.imdbRating && !isMDBEnabled && (
           <View style={styles.ratingContainer}>
-            <FastImage
+            <IMDBIcon
-              source={{ uri: IMDb_LOGO }}
+              width={isTV ? 35 : isLargeTablet ? 32 : isTablet ?32 :32}
-              style={[
+              height={isTV ? 35 : isLargeTablet ? 32 : isTablet ?32 :32}
-                styles.imdbLogo,
-                {
-                  width: isTV ? 35 : isLargeTablet ? 32 : isTablet ? 30 : 30,
-                  height: isTV ? 18 : isLargeTablet ? 16 : isTablet ? 15 : 15
-                }
-              ]}
-              resizeMode={FastImage.resizeMode.contain}
             />
             <Text style={[
               styles.ratingText,

src/components/metadata/RatingsSection.tsx

@@ -12,6 +12,7 @@ import LetterboxdIcon from '../../../assets/rating-icons/letterboxd.svg';
 import MetacriticIcon from '../../../assets/rating-icons/Metacritic.png';
 import RottenTomatoesIcon from '../../../assets/rating-icons/RottenTomatoes.svg';
 import TMDBIcon from '../../../assets/rating-icons/tmdb.svg';
+import IMDBIcon from '../../../assets/rating-icons/imdb.svg';
 import TraktIcon from '../../../assets/rating-icons/trakt.svg';
 import AudienceScoreIcon from '../../../assets/rating-icons/audienscore.png';
 
@@ -23,7 +24,6 @@ const BREAKPOINTS = {
   tv: 1440,
 };
 
-const IMDb_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png';
 
 export const RATING_PROVIDERS = {
   imdb: {
@@ -183,8 +183,9 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
   const ratingConfig = {
     imdb: {
       name: 'IMDb',
-      icon: { uri: IMDb_LOGO },
+      icon: IMDBIcon,
-      isImage: true,
+      isImage: false,
+      iconScale: 1.8, // badge is square but needs to be larger to be readable
       color: '#F5C518',
       transform: (value: number) => value.toFixed(1)
     },
@@ -278,8 +279,8 @@ export const RatingsSection: React.FC<RatingsSectionProps> = ({ imdbId, type })
               ) : config.icon ? (
                 <View style={[styles.compactSvgContainer, { marginRight: iconTextGap }]}>
                   {React.createElement(config.icon as any, {
-                    width: iconSize,
+                    width: iconSize * ((config as any).iconScale ?? 1),
-                    height: iconSize,
+                    height: iconSize * ((config as any).iconScale ?? 1),
                   })}
                 </View>
               ) : (