From 188598b714dd3975981fbc54581819b7b1fbe2fc Mon Sep 17 00:00:00 2001
From: Andrew Smith <andrew@andrew.codes>
Date: Mon, 18 Nov 2024 14:36:04 +0000
Subject: [PATCH] fix: default to common platform icons

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
---
 .../cypress/e2e/browse/browse.cy.ts           |  2 +-
 .../cypress/e2e/browse/filtering.cy.ts        | 16 +-----------
 .../src/components/PlatformList.tsx           | 25 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/apps/playnite-web/cypress/e2e/browse/browse.cy.ts b/apps/playnite-web/cypress/e2e/browse/browse.cy.ts
index f3525c963..31a82ac98 100755
--- 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
index 1a12c6791..7eaf4445f 100755
--- 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
index 392773599..d58389ca8 100755
--- 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>
   )