fix: default to common platform icons (#635)

When no platform icon is found/published from Playnite, default to ones that are available in Playnite Web; including PlayStation 1-5 and PC. Closes #608
andrew-codes · Nov 18, 2024 · b7bdf23 · b7bdf23
2 parents 52d5c97 + 188598b
commit b7bdf23
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/apps/playnite-web/cypress/e2e/browse/browse.cy.ts b/apps/playnite-web/cypress/e2e/browse/browse.cy.ts
@@ -1,7 +1,7 @@
 describe('Browse library', () => {
   beforeEach(() => {
     cy.intercept('POST', '/api').as('api')
-    cy.intercept('GET', '/asset-by-id/*').as('images')
+    cy.intercept('GET', /(asset-by-id)|(platforms)\/.*/).as('images')
   })
   it('Library is browse-able', () => {
     cy.visit('/')

diff --git a/apps/playnite-web/cypress/e2e/browse/filtering.cy.ts b/apps/playnite-web/cypress/e2e/browse/filtering.cy.ts
@@ -1,7 +1,7 @@
 describe('Browse Library', () => {
   beforeEach(() => {
     cy.intercept('POST', '/api').as('api')
-    cy.intercept('GET', '/asset-by-id/*').as('images')
+    cy.intercept('GET', /(asset-by-id)|(platforms)\/.*/).as('images')
   })
 
   describe('Filtering', () => {
@@ -38,8 +38,6 @@ describe('Browse Library', () => {
 
     it('Filter by exact match name', () => {
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root').click({
         force: true,
       })
@@ -56,8 +54,6 @@ describe('Browse Library', () => {
 
     it('Filter by exact match name containing exact match characters', () => {
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root').click({
         force: true,
       })
@@ -75,8 +71,6 @@ describe('Browse Library', () => {
     it(`Filter by platform
 - Games must match at least one release year.`, () => {
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root')
         .as('openFilterButton')
         .click({
@@ -146,8 +140,6 @@ describe('Browse Library', () => {
       const scoped = 'Final Fantasy'
 
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root')
         .as('openFilterButton')
         .click({
@@ -209,8 +201,6 @@ describe('Browse Library', () => {
       const scoped = null
 
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root')
         .as('openFilterButton')
         .click({
@@ -272,8 +262,6 @@ describe('Browse Library', () => {
       const scoped = 'Bat'
 
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root')
         .as('openFilterButton')
         .click({
@@ -335,8 +323,6 @@ describe('Browse Library', () => {
       const scoped = 'Bat'
 
       cy.visit('/browse')
-      cy.wait('@api')
-      cy.wait('@images')
       cy.get('[aria-label="Open filter drawer"] .MuiTouchRipple-root')
         .as('openFilterButton')
         .click({

diff --git a/apps/playnite-web/src/components/PlatformList.tsx b/apps/playnite-web/src/components/PlatformList.tsx
@@ -20,12 +20,35 @@ const PlatformListItem: FC<{ platform: Platform | Array<Platform> }> = ({
     )
   }
 
+  let src = `/asset-by-id/${platform.icon?.id}`
+  if (!platform.icon?.id) {
+    if (/(windows)/i.test(platform.name)) {
+      src = `platforms/pc-windows.webp`
+    } else if (/(mac)/i.test(platform.name)) {
+      src = `platforms/macintosh.webp`
+    } else if (/(linux)/i.test(platform.name)) {
+      src = `platforms/pc-linux.webp`
+    } else if (/(playstation)/i.test(platform.name)) {
+      if (/5/i.test(platform.name)) {
+        src = `platforms/playstation-5.webp`
+      } else if (/4/i.test(platform.name)) {
+        src = `platforms/playstation-4.webp`
+      } else if (/3/i.test(platform.name)) {
+        src = `platforms/playstation-3.webp`
+      } else if (/2/i.test(platform.name)) {
+        src = `platforms/playstation-2.webp`
+      } else {
+        src = `platforms/playstation.webp`
+      }
+    }
+  }
+
   return (
     <li>
       <PlatformImage
         data-test="PlatformListItem"
         alt={platform.name}
-        src={`/asset-by-id/${platform.icon?.id}`}
+        src={src}
       />
     </li>
   )