display icons based on mime type (#2271)

* display icons based on mime type

* Update frontend/projects/marketplace/src/pipes/mime-type.pipe.ts

Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>

* fixes

---------

Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>

frontend/projects/marketplace/src/pages/list/item/item.component.html

@@ -1,6 +1,6 @@
 <ion-item class="service-card" [routerLink]="['/marketplace', pkg.manifest.id]">
   <ion-thumbnail slot="start">
-    <img alt="" [src]="'data:image/png;base64,' + pkg.icon | trustUrl" />
+    <img alt="" [src]="pkg | mimeType | trustUrl" />
   </ion-thumbnail>
   <ion-label>
     <h2 class="montserrat">

frontend/projects/marketplace/src/pages/list/item/item.module.ts

@@ -3,12 +3,18 @@ import { NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule } from '@start9labs/shared'
-
 import { ItemComponent } from './item.component'
+import { MimeTypePipeModule } from '../../../pipes/mime-type.pipe'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, RouterModule, SharedPipesModule],
   declarations: [ItemComponent],
   exports: [ItemComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule,
+    SharedPipesModule,
+    MimeTypePipeModule,
+  ],
 })
 export class ItemModule {}

frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts

@@ -11,6 +11,7 @@ export class DependenciesComponent {
   pkg!: MarketplacePkg
 
   getImg(key: string): string {
+    // @TODO fix when registry api is updated to include mimetype in icon url
     return 'data:image/png;base64,' + this.pkg['dependency-metadata'][key].icon
   }
 }

frontend/projects/marketplace/src/pages/show/package/package.component.html

@@ -1,9 +1,5 @@
 <div class="header montserrat">
-  <img
-    class="logo"
-    alt=""
-    [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
-  />
+  <img class="logo" alt="" [src]="pkg | mimeType | trustUrl" />
   <div class="text">
     <h1 ticker class="title">{{ pkg.manifest.title }}</h1>
     <p class="version">{{ pkg.manifest.version | displayEmver }}</p>

frontend/projects/marketplace/src/pages/show/package/package.module.ts

@@ -8,16 +8,18 @@ import {
 } from '@start9labs/shared'
 
 import { PackageComponent } from './package.component'
+import { MimeTypePipeModule } from '../../../pipes/mime-type.pipe'
 
 @NgModule({
+  declarations: [PackageComponent],
+  exports: [PackageComponent],
   imports: [
     CommonModule,
     IonicModule,
     SharedPipesModule,
     EmverPipesModule,
     TickerModule,
+    MimeTypePipeModule,
   ],
-  declarations: [PackageComponent],
-  exports: [PackageComponent],
 })
 export class PackageModule {}

frontend/projects/marketplace/src/pipes/mime-type.pipe.ts

@@ -0,0 +1,29 @@
+import { NgModule, Pipe, PipeTransform } from '@angular/core'
+import { MarketplacePkg } from '../types'
+
+@Pipe({
+  name: 'mimeType',
+})
+export class MimeTypePipe implements PipeTransform {
+  transform(pkg: MarketplacePkg): string {
+    switch (pkg.manifest.assets.icon.split('.').pop()) {
+      case 'png':
+        return `data:image/png;base64,${pkg.icon}`
+      case 'jpeg':
+      case 'jpg':
+        return `data:image/jpeg;base64,${pkg.icon}`
+      case 'gif':
+        return `data:image/gif;base64,${pkg.icon}`
+      case 'svg':
+        return `data:image/svg+xml;base64,${pkg.icon}`
+      default:
+        return `data:image/png;base64,${pkg.icon}`
+    }
+  }
+}
+
+@NgModule({
+  declarations: [MimeTypePipe],
+  exports: [MimeTypePipe],
+})
+export class MimeTypePipeModule {}

frontend/projects/marketplace/src/public-api.ts

@@ -22,6 +22,7 @@ export * from './pages/show/package/package.component'
 export * from './pages/show/package/package.module'
 
 export * from './pipes/filter-packages.pipe'
+export * from './pipes/mime-type.pipe'
 
 export * from './services/marketplace.service'
 

frontend/projects/marketplace/src/types.ts

@@ -47,6 +47,9 @@ export interface MarketplaceManifest<T = unknown> {
     short: string
     long: string
   }
+  assets: {
+    icon: string // ie. icon.png
+  }
   replaces?: string[]
   'release-notes': string
   license: string // type of license