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