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
+  <img class="logo" alt="" [src]="pkg | mimeType | trustUrl" />
-    class="logo"
-    alt=""
-    [src]="'data:image/png;base64,' + pkg.icon | 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

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts

@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { Routes, RouterModule } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import {
-  SharedPipesModule,
   EmverPipesModule,
   MarkdownPipeModule,
+  SharedPipesModule,
   TextSpinnerComponentModule,
 } from '@start9labs/shared'
 import {
-  PackageModule,
   AboutModule,
   AdditionalModule,
   DependenciesModule,
+  PackageModule,
 } from '@start9labs/marketplace'
 import { MarketplaceStatusModule } from '../marketplace-status/marketplace-status.module'
 import { MarketplaceShowPage } from './marketplace-show.page'

frontend/projects/ui/src/app/pages/updates/updates.module.ts

@@ -14,6 +14,7 @@ import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/sk
 import { RoundProgressModule } from 'angular-svg-round-progressbar'
 import { InstallProgressPipeModule } from 'src/app/pipes/install-progress/install-progress.module'
 import { StoreIconComponentModule } from 'src/app/components/store-icon/store-icon.component.module'
+import { MimeTypePipeModule } from '@start9labs/marketplace'
 
 const routes: Routes = [
   {
@@ -23,6 +24,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
+  declarations: [UpdatesPage, FilterUpdatesPipe],
   imports: [
     CommonModule,
     IonicModule,
@@ -35,7 +37,7 @@ const routes: Routes = [
     InstallProgressPipeModule,
     StoreIconComponentModule,
     EmverPipesModule,
+    MimeTypePipeModule,
   ],
-  declarations: [UpdatesPage, FilterUpdatesPipe],
 })
 export class UpdatesPageModule {}

frontend/projects/ui/src/app/pages/updates/updates.page.html

@@ -33,9 +33,7 @@
               <ion-accordion *ngIf="data.localPkgs[pkg.manifest.id] as local">
                 <ion-item lines="none" slot="header">
                   <ion-avatar slot="start" style="width: 50px; height: 50px">
-                    <img
+                    <img [src]="pkg | mimeType | trustUrl" />
-                      [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
-                    />
                   </ion-avatar>
                   <ion-label>
                     <h1 style="line-height: 1.3">{{ pkg.manifest.title }}</h1>

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -7,7 +7,7 @@ import {
   PackageState,
   ServerStatusInfo,
 } from 'src/app/services/patch-db/data-model'
-import { Metric, RR, NotificationLevel, ServerNotifications } from './api.types'
+import { Metric, NotificationLevel, RR, ServerNotifications } from './api.types'
 
 import { BTC_ICON, LND_ICON, PROXY_ICON } from './api-icons'
 import { DependencyMetadata, MarketplacePkg } from '@start9labs/marketplace'
@@ -1873,7 +1873,7 @@ export module Mock {
     state: PackageState.Installed,
     'static-files': {
       license: '/public/package-data/bitcoind/0.20.0/LICENSE.md',
-      icon: '/assets/img/service-icons/bitcoind.png',
+      icon: '/assets/img/service-icons/bitcoind.svg',
       instructions: '/public/package-data/bitcoind/0.20.0/INSTRUCTIONS.md',
     },
     manifest: MockManifestBitcoind,
@@ -1958,7 +1958,7 @@ export module Mock {
       'dependency-info': {
         bitcoind: {
           manifest: Mock.MockManifestBitcoind,
-          icon: 'assets/img/service-icons/bitcoind.png',
+          icon: 'assets/img/service-icons/bitcoind.svg',
         },
       },
       'marketplace-url': 'https://registry.start9.com/',
@@ -2014,7 +2014,7 @@ export module Mock {
       'dependency-info': {
         bitcoind: {
           manifest: Mock.MockManifestBitcoind,
-          icon: 'assets/img/service-icons/bitcoind.png',
+          icon: 'assets/img/service-icons/bitcoind.svg',
         },
         'btc-rpc-proxy': {
           manifest: Mock.MockManifestBitcoinProxy,

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -79,7 +79,7 @@ export const mockPatchData: DataModel = {
       state: PackageState.Installed,
       'static-files': {
         license: '/public/package-data/bitcoind/0.20.0/LICENSE.md',
-        icon: '/assets/img/service-icons/bitcoind.png',
+        icon: '/assets/img/service-icons/bitcoind.svg',
         instructions: '/public/package-data/bitcoind/0.20.0/INSTRUCTIONS.md',
       },
       manifest: {
@@ -670,7 +670,7 @@ export const mockPatchData: DataModel = {
             manifest: {
               title: 'Bitcoin Core',
             } as Manifest,
-            icon: 'assets/img/service-icons/bitcoind.png',
+            icon: 'assets/img/service-icons/bitcoind.svg',
           },
           'btc-rpc-proxy': {
             manifest: {