diff --git a/assets/rating-icons/imdb.svg b/assets/rating-icons/imdb.svg
new file mode 100644
index 00000000..0cc1ecd3
--- /dev/null
+++ b/assets/rating-icons/imdb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/metadata/MetadataDetails.tsx b/src/components/metadata/MetadataDetails.tsx
index 8d869051..e5623ca9 100644
--- a/src/components/metadata/MetadataDetails.tsx
+++ b/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 = ({
)}
{metadata.imdbRating && !isMDBEnabled && (
-
= ({ imdbId, type })
const ratingConfig = {
imdb: {
name: 'IMDb',
- icon: { uri: IMDb_LOGO },
- isImage: true,
+ icon: IMDBIcon,
+ 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 = ({ imdbId, type })
) : config.icon ? (
{React.createElement(config.icon as any, {
- width: iconSize,
- height: iconSize,
+ width: iconSize * ((config as any).iconScale ?? 1),
+ height: iconSize * ((config as any).iconScale ?? 1),
})}
) : (