diff --git a/frontend/projects/marketplace/src/pages/list/item/item.component.html b/frontend/projects/marketplace/src/pages/list/item/item.component.html index f13992d75..0220a0a0c 100644 --- a/frontend/projects/marketplace/src/pages/list/item/item.component.html +++ b/frontend/projects/marketplace/src/pages/list/item/item.component.html @@ -1,6 +1,6 @@ - +

diff --git a/frontend/projects/marketplace/src/pages/list/item/item.module.ts b/frontend/projects/marketplace/src/pages/list/item/item.module.ts index 7f3dcde4a..dd157174e 100644 --- a/frontend/projects/marketplace/src/pages/list/item/item.module.ts +++ b/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 {} diff --git a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts index 13ff86809..a6ecb103f 100644 --- a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts +++ b/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 } } diff --git a/frontend/projects/marketplace/src/pages/show/package/package.component.html b/frontend/projects/marketplace/src/pages/show/package/package.component.html index 9ea3393e7..ca853030e 100644 --- a/frontend/projects/marketplace/src/pages/show/package/package.component.html +++ b/frontend/projects/marketplace/src/pages/show/package/package.component.html @@ -1,9 +1,5 @@
- +

{{ pkg.manifest.title }}

{{ pkg.manifest.version | displayEmver }}

diff --git a/frontend/projects/marketplace/src/pages/show/package/package.module.ts b/frontend/projects/marketplace/src/pages/show/package/package.module.ts index ec15f429b..665e146b5 100644 --- a/frontend/projects/marketplace/src/pages/show/package/package.module.ts +++ b/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 {} diff --git a/frontend/projects/marketplace/src/pipes/mime-type.pipe.ts b/frontend/projects/marketplace/src/pipes/mime-type.pipe.ts new file mode 100644 index 000000000..40000a47b --- /dev/null +++ b/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 {} diff --git a/frontend/projects/marketplace/src/public-api.ts b/frontend/projects/marketplace/src/public-api.ts index b9e8c4686..fef451a3e 100644 --- a/frontend/projects/marketplace/src/public-api.ts +++ b/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' diff --git a/frontend/projects/marketplace/src/types.ts b/frontend/projects/marketplace/src/types.ts index 91bc44495..8187d3bc0 100644 --- a/frontend/projects/marketplace/src/types.ts +++ b/frontend/projects/marketplace/src/types.ts @@ -47,6 +47,9 @@ export interface MarketplaceManifest { short: string long: string } + assets: { + icon: string // ie. icon.png + } replaces?: string[] 'release-notes': string license: string // type of license diff --git a/frontend/projects/shared/assets/img/service-icons/bitcoind.png b/frontend/projects/shared/assets/img/service-icons/bitcoind.png deleted file mode 100644 index 26ab11e1d..000000000 Binary files a/frontend/projects/shared/assets/img/service-icons/bitcoind.png and /dev/null differ diff --git a/frontend/projects/shared/assets/img/service-icons/bitcoind.svg b/frontend/projects/shared/assets/img/service-icons/bitcoind.svg new file mode 100644 index 000000000..af6a3140b --- /dev/null +++ b/frontend/projects/shared/assets/img/service-icons/bitcoind.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts index 029fef1fb..3cef27e61 100644 --- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts +++ b/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' diff --git a/frontend/projects/ui/src/app/pages/updates/updates.module.ts b/frontend/projects/ui/src/app/pages/updates/updates.module.ts index e425bc94a..e07e798b4 100644 --- a/frontend/projects/ui/src/app/pages/updates/updates.module.ts +++ b/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 {} diff --git a/frontend/projects/ui/src/app/pages/updates/updates.page.html b/frontend/projects/ui/src/app/pages/updates/updates.page.html index 52de411ac..be48693f9 100644 --- a/frontend/projects/ui/src/app/pages/updates/updates.page.html +++ b/frontend/projects/ui/src/app/pages/updates/updates.page.html @@ -33,9 +33,7 @@ - +

{{ pkg.manifest.title }}

diff --git a/frontend/projects/ui/src/app/services/api/api.fixures.ts b/frontend/projects/ui/src/app/services/api/api.fixures.ts index 29f436b9e..17c74a12e 100644 --- a/frontend/projects/ui/src/app/services/api/api.fixures.ts +++ b/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, diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/frontend/projects/ui/src/app/services/api/mock-patch.ts index 6ee21f137..c2fc9b142 100644 --- a/frontend/projects/ui/src/app/services/api/mock-patch.ts +++ b/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: {