diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 08908e5a9..c2bd59af0 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -139,7 +139,7 @@ export class AppComponent { 'capture-rebrand-camera-crop', 'capture', 'profile', - 'search', + 'collection', 'edit', 'capture-rebrand-add', ]; diff --git a/src/app/features/home/capture-tab/capture-tab.component.html b/src/app/features/home/capture-tab/capture-tab.component.html index 8c7d60acc..3cb1beba6 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.html +++ b/src/app/features/home/capture-tab/capture-tab.component.html @@ -61,9 +61,6 @@ {{ 'home.profileTab.verified' | transloco }} - - {{ 'home.profileTab.collected' | transloco }} - {{ 'home.profileTab.draft' | transloco }} @@ -89,36 +86,6 @@ -
- - - - - - - - - -
-
diff --git a/src/app/features/home/capture-tab/capture-tab.component.scss b/src/app/features/home/capture-tab/capture-tab.component.scss index 330b266db..3851062e6 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.scss +++ b/src/app/features/home/capture-tab/capture-tab.component.scss @@ -113,40 +113,6 @@ app-capture-item { border-radius: 16px; } -.post-captures { - overflow: auto; - padding: 32px 8px; - - mat-grid-tile { - ion-img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - overflow: hidden; - border-radius: 16px; - } - - ion-icon { - color: white; - z-index: 10; - position: absolute; - opacity: 0.3; - font-size: 16px; - } - - ion-icon.is-video { - top: 8px; - right: 8px; - } - - ion-icon.is-from-store { - top: 8px; - left: 8px; - } - } -} - mat-grid-list { margin-left: 12px; margin-right: 12px; diff --git a/src/app/features/home/capture-tab/capture-tab.component.ts b/src/app/features/home/capture-tab/capture-tab.component.ts index f4ff4bc60..cb4c55b37 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.ts +++ b/src/app/features/home/capture-tab/capture-tab.component.ts @@ -17,10 +17,8 @@ import { concatMap, concatMapTo, map, - pluck, shareReplay, startWith, - switchMap, tap, } from 'rxjs/operators'; import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service'; @@ -30,10 +28,7 @@ import { } from '../../../shared/capture-tab/capture-tab.service'; import { ConfirmAlert } from '../../../shared/confirm-alert/confirm-alert.service'; import { Database } from '../../../shared/database/database.service'; -import { - DiaBackendAsset, - DiaBackendAssetRepository, -} from '../../../shared/dia-backend/asset/dia-backend-asset-repository.service'; +import { DiaBackendAssetRepository } from '../../../shared/dia-backend/asset/dia-backend-asset-repository.service'; import { DiaBackendAsseRefreshingService } from '../../../shared/dia-backend/asset/refreshing/dia-backend-asset-refreshing.service'; import { DiaBackendAssetUploadingService } from '../../../shared/dia-backend/asset/uploading/dia-backend-asset-uploading.service'; import { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service'; @@ -60,7 +55,7 @@ export class CaptureTabComponent implements OnInit { * Used in the HTML template to avoid hardcoded string values. */ readonly captureTabSegments = CaptureTabSegments; - segment: CaptureTabSegments = CaptureTabSegments.COLLECTED; + segment: CaptureTabSegments = CaptureTabSegments.VERIFIED; readonly hasNewInbox$ = this.diaBackendTransactionRepository.inbox$.pipe( catchError((err: unknown) => this.errorService.toastError$(err)), @@ -103,33 +98,12 @@ export class CaptureTabComponent implements OnInit { readonly networkConnected$ = this.networkService.connected$; - readonly postCaptures$ = this.networkConnected$.pipe( - switchMap(isConnected => - iif( - () => isConnected, - this.diaBackendAssetRepository.postCaptures$.pipe(pluck('results')) - ) - ), - catchError((err: unknown) => this.errorService.toastError$(err)) - ); - private readonly itemsPerPage = 10; readonly capturedTabPageIndex$ = new BehaviorSubject(0); - readonly collectedTabPageIndex$ = new BehaviorSubject(0); - readonly draftTabPageIndex$ = new BehaviorSubject(0); - readonly collectedTabItems$ = combineLatest([ - this.postCaptures$, - this.collectedTabPageIndex$, - ]).pipe( - map(([items, page]) => - items.slice(0, page * this.itemsPerPage + this.itemsPerPage) - ) - ); - readonly validatedCaptures$ = this.captures$.pipe( map(proofs => proofs.filter(p => p.diaBackendAssetId !== undefined)) ); @@ -203,9 +177,6 @@ export class CaptureTabComponent implements OnInit { case CaptureTabSegments.VERIFIED: this.capturedTabPageIndex$.next(this.capturedTabPageIndex$.value + 1); break; - case CaptureTabSegments.COLLECTED: - this.collectedTabPageIndex$.next(this.collectedTabPageIndex$.value + 1); - break; case CaptureTabSegments.DRAFT: this.draftTabPageIndex$.next(this.draftTabPageIndex$.value + 1); } @@ -341,11 +312,6 @@ export class CaptureTabComponent implements OnInit { return getOldProof(item).hash; } - // eslint-disable-next-line class-methods-use-this - trackPostCapture(_: number, item: DiaBackendAsset) { - return item.id; - } - async refreshCaptures(event: Event) { (event).detail.complete(); @@ -355,7 +321,6 @@ export class CaptureTabComponent implements OnInit { const confirmRefresh = await this.showRefreshAlert(); if (confirmRefresh) { this.capturedTabPageIndex$.next(0); - this.collectedTabPageIndex$.next(0); this.draftTabPageIndex$.next(0); return this.dialog.open(PrefetchingDialogComponent, { diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.html similarity index 94% rename from src/app/features/home/explore-tab/explore-tab/explore-tab.component.html rename to src/app/features/home/collection-tab/collection-tab/collection-tab.component.html index 6629f88e0..2c76eaf8a 100644 --- a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.html +++ b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.html @@ -13,7 +13,7 @@ " > diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.scss b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.scss similarity index 100% rename from src/app/features/home/explore-tab/explore-tab/explore-tab.component.scss rename to src/app/features/home/collection-tab/collection-tab/collection-tab.component.scss diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.spec.ts b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.spec.ts similarity index 59% rename from src/app/features/home/explore-tab/explore-tab/explore-tab.component.spec.ts rename to src/app/features/home/collection-tab/collection-tab/collection-tab.component.spec.ts index 515186ad4..3efea4c4a 100644 --- a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.spec.ts +++ b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { SharedTestingModule } from '../../../../shared/shared-testing.module'; -import { ExploreTabComponent } from './explore-tab.component'; +import { CollectionTabComponent } from './collection-tab.component'; -describe('ExploreTabComponent', () => { - let component: ExploreTabComponent; - let fixture: ComponentFixture; +describe('CollectionTabComponent', () => { + let component: CollectionTabComponent; + let fixture: ComponentFixture; beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ExploreTabComponent], + declarations: [CollectionTabComponent], imports: [SharedTestingModule], }).compileComponents(); - fixture = TestBed.createComponent(ExploreTabComponent); + fixture = TestBed.createComponent(CollectionTabComponent); component = fixture.componentInstance; fixture.detectChanges(); }) diff --git a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.ts similarity index 69% rename from src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts rename to src/app/features/home/collection-tab/collection-tab/collection-tab.component.ts index c45e602c0..97ab9da06 100644 --- a/src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts +++ b/src/app/features/home/collection-tab/collection-tab/collection-tab.component.ts @@ -11,24 +11,25 @@ import { NetworkService } from '../../../../shared/network/network.service'; @UntilDestroy() @Component({ - selector: 'app-explore-tab', - templateUrl: './explore-tab.component.html', - styleUrls: ['./explore-tab.component.scss'], + selector: 'app-collection-tab', + templateUrl: './collection-tab.component.html', + styleUrls: ['./collection-tab.component.scss'], }) -export class ExploreTabComponent { +export class CollectionTabComponent { readonly bubbleIframeUrlWithCachedJWTToke$ = combineLatest([ this.diaBackendAuthService.cachedQueryJWTToken$, - this.iframeService.exploreTabRefreshRequested$, + this.iframeService.collectionTabRefreshRequested$, ]).pipe( map(([token, _]) => { - const url = `${BUBBLE_IFRAME_URL}/?token=${token.access}&refresh_token=${token.refresh}`; + const url = `${BUBBLE_IFRAME_URL}/collection?token=${token.access}&refresh_token=${token.refresh}`; return this.sanitizer.bypassSecurityTrustResourceUrl(url); }) ); readonly networkConnected$ = this.networkService.connected$; - @ViewChild('exploreIframe') exploreIframe?: ElementRef; + @ViewChild('collectionIframe') + collectionIframe?: ElementRef; constructor( private readonly networkService: NetworkService, @@ -36,16 +37,16 @@ export class ExploreTabComponent { private readonly iframeService: IframeService, private readonly sanitizer: DomSanitizer ) { - iframeService.exploreTabIframeNavigateBack$ + iframeService.collectionTabIframeNavigateBack$ .pipe( - tap(_ => this.navigateBackExploreIframe()), + tap(_ => this.navigateBackCollectionIframe()), untilDestroyed(this) ) .subscribe(); } - navigateBackExploreIframe() { - this.exploreIframe?.nativeElement.contentWindow?.postMessage( + navigateBackCollectionIframe() { + this.collectionIframe?.nativeElement.contentWindow?.postMessage( IonicToBubblePostMessage.ANDROID_BACK_BUTTON, BUBBLE_IFRAME_URL ); diff --git a/src/app/features/home/home.module.ts b/src/app/features/home/home.module.ts index 067e5f565..4e3c8fdb7 100644 --- a/src/app/features/home/home.module.ts +++ b/src/app/features/home/home.module.ts @@ -4,7 +4,7 @@ import { SharedModule } from '../../shared/shared.module'; import { CaptureItemComponent } from './capture-tab/capture-item/capture-item.component'; import { CaptureTabComponent } from './capture-tab/capture-tab.component'; import { UploadingBarComponent } from './capture-tab/uploading-bar/uploading-bar.component'; -import { ExploreTabComponent } from './explore-tab/explore-tab/explore-tab.component'; +import { CollectionTabComponent } from './collection-tab/collection-tab/collection-tab.component'; import { HomePageRoutingModule } from './home-routing.module'; import { HomePage } from './home.page'; import { UpdateAppDialogComponent } from './in-app-updates/update-app-dialog/update-app-dialog.component'; @@ -15,7 +15,7 @@ import { PostCaptureTabComponent } from './post-capture-tab/post-capture-tab.com declarations: [ HomePage, CaptureTabComponent, - ExploreTabComponent, + CollectionTabComponent, PostCaptureTabComponent, PrefetchingDialogComponent, UpdateAppDialogComponent, diff --git a/src/app/features/home/home.page.html b/src/app/features/home/home.page.html index 188a7d211..b61f0ce1a 100644 --- a/src/app/features/home/home.page.html +++ b/src/app/features/home/home.page.html @@ -124,9 +124,9 @@ - - + diff --git a/src/app/features/home/home.page.ts b/src/app/features/home/home.page.ts index d7f1adbfa..9aaf0a605 100644 --- a/src/app/features/home/home.page.ts +++ b/src/app/features/home/home.page.ts @@ -63,7 +63,7 @@ import { PrefetchingDialogComponent } from './onboarding/prefetching-dialog/pref export class HomePage { readonly initialTabIndex = 0; private readonly afterCaptureTabIndex = 0; - private readonly exploreTabIndex = 2; + private readonly collectionTabIndex = 2; selectedTabIndex = this.initialTabIndex; readonly username$ = this.diaBackendAuthService.username$; @@ -305,11 +305,11 @@ export class HomePage { overrideAndroidBackButtonBehavior() { this.androidBackButtonService .overrideAndroidBackButtonBehavior$(() => { - const shouldNavigateBackExploreTabIframe = - this.selectedTabIndex === this.exploreTabIndex && + const shouldNavigateBackCollectionTabIframe = + this.selectedTabIndex === this.collectionTabIndex && this.router.url === '/home'; - if (shouldNavigateBackExploreTabIframe) { - this.iframeService.navigateBackExploreTabIframe(); + if (shouldNavigateBackCollectionTabIframe) { + this.iframeService.navigateBackCollectionTabIframe(); } else { this.navController.back(); } @@ -424,32 +424,35 @@ export class HomePage { } // eslint-disable-next-line class-methods-use-this - async navigateToExploreTab() { - if (this.selectedTabIndex === this.exploreTabIndex) { + async navigateToCollectionTab() { + if (this.selectedTabIndex === this.collectionTabIndex) { // window.location.reload(); - this.iframeService.refreshExploreTabIframe(); + this.iframeService.refreshCollectionTabIframe(); } - const didExplain = await this.onboardingService.didExplainExploreTab(); + /* TODO: re-enable or remove the popup. + Hide the popup in current version as a temporary decision. + const didExplain = await this.onboardingService.didExplainCollectionTab(); if (didExplain === false) { await new Promise(resolve => { setTimeout(resolve, OnboardingService.ONBOARDING_POP_UP_DELAY); }); - this.showExplainExploreTabPopUpDialog(); - this.onboardingService.setDidExplainExploreTab(true); + this.showExplainCollectionTabPopUpDialog(); + this.onboardingService.setDidExplainCollectionTab(true); } + */ } - private showExplainExploreTabPopUpDialog() { + private showExplainCollectionTabPopUpDialog() { const panelClass = 'onboarding-pop-up-dialog'; const data: OnboardingPopUpDialogData = { title: this.translocoService.translate( - 'onboarding.explainExploreTabPopUp.title' + 'onboarding.explainCollectionTabPopUp.title' ), content: this.translocoService.translate( - 'onboarding.explainExploreTabPopUp.content' + 'onboarding.explainCollectionTabPopUp.content' ), close: this.translocoService.translate( - 'onboarding.explainExploreTabPopUp.close' + 'onboarding.explainCollectionTabPopUp.close' ), }; return this.dialog.open(OnboardingPopUpDialogComponent, { diff --git a/src/app/shared/capture-tab/capture-tab.service.ts b/src/app/shared/capture-tab/capture-tab.service.ts index c2245fff8..c7dbdf789 100644 --- a/src/app/shared/capture-tab/capture-tab.service.ts +++ b/src/app/shared/capture-tab/capture-tab.service.ts @@ -21,6 +21,5 @@ export class CaptureTabService { export enum CaptureTabSegments { VERIFIED = 'VERIFIED', - COLLECTED = 'COLLECTED', DRAFT = 'DRAFT', } diff --git a/src/app/shared/iframe/iframe.service.ts b/src/app/shared/iframe/iframe.service.ts index 22c02df16..ff8f1e371 100644 --- a/src/app/shared/iframe/iframe.service.ts +++ b/src/app/shared/iframe/iframe.service.ts @@ -10,14 +10,13 @@ export class IframeService { private readonly preferences = this.preferenceManager.getPreferences(this.id); - readonly exploreTabRefreshRequested$ = new BehaviorSubject(new Date()); + readonly collectionTabRefreshRequested$ = new BehaviorSubject(new Date()); - private readonly _exploreTabIframeNavigateBack$ = new ReplaySubject( - 1 - ); + private readonly _collectionTabIframeNavigateBack$ = + new ReplaySubject(1); - readonly exploreTabIframeNavigateBack$ = - this._exploreTabIframeNavigateBack$.asObservable(); + readonly collectionTabIframeNavigateBack$ = + this._collectionTabIframeNavigateBack$.asObservable(); readonly detailsPageIframeReloadRequested$ = this.preferences.getNumber$( PrefKeys.DETAILS_PAGE_RELOAD_REQUESTED_TIMESTAMP, @@ -26,12 +25,12 @@ export class IframeService { constructor(private readonly preferenceManager: PreferenceManager) {} - refreshExploreTabIframe() { - this.exploreTabRefreshRequested$.next(new Date()); + refreshCollectionTabIframe() { + this.collectionTabRefreshRequested$.next(new Date()); } - navigateBackExploreTabIframe() { - this._exploreTabIframeNavigateBack$.next(true); + navigateBackCollectionTabIframe() { + this._collectionTabIframeNavigateBack$.next(true); } refreshDetailsPageIframe() { diff --git a/src/app/shared/onboarding/onboarding.service.ts b/src/app/shared/onboarding/onboarding.service.ts index d8d2b73dc..1c7c8de48 100644 --- a/src/app/shared/onboarding/onboarding.service.ts +++ b/src/app/shared/onboarding/onboarding.service.ts @@ -181,11 +181,11 @@ export class OnboardingService { ); } - async didExplainExploreTab() { + async didExplainCollectionTab() { return this.preferences.getBoolean(PrefKeys.DID_EXPLAIN_EXPLORE_TAB, false); } - async setDidExplainExploreTab(value: boolean) { + async setDidExplainCollectionTab(value: boolean) { return this.preferences.setBoolean(PrefKeys.DID_EXPLAIN_EXPLORE_TAB, value); } } diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json index 7d5126fa7..239aa9c2a 100644 --- a/src/assets/i18n/en-us.json +++ b/src/assets/i18n/en-us.json @@ -271,7 +271,6 @@ "home": { "profileTab": { "verified": "Verified", - "collected": "Collected", "draft": "Draft", "captureNotUploadedYet": "Capture not uploaded yet" }, @@ -473,7 +472,7 @@ "content": "Press the camera button below to create your first Capture. Captures are blockchain photos with a better, open and transparent provenance.", "close": "Continue" }, - "explainExploreTabPopUp": { + "explainCollectionTabPopUp": { "title": "Explore Captures!", "content": "This page shows Captures taken by other creative users. Explore, collect, then Mint and Share your Captures with the world!", "close": "Continue" diff --git a/src/assets/i18n/zh-tw.json b/src/assets/i18n/zh-tw.json index c472bf8f8..be6e7aaab 100644 --- a/src/assets/i18n/zh-tw.json +++ b/src/assets/i18n/zh-tw.json @@ -271,7 +271,6 @@ "home": { "profileTab": { "verified": "已驗證", - "collected": "收藏", "draft": "草稿", "captureNotUploadedYet": "Capture 尚未上傳" }, @@ -473,7 +472,7 @@ "content": "按下下方的相機按鈕，建立您的第一個 Capture。Capture 是區塊鏈照片，擁有更開放和透明的來源證明。", "close": "繼續" }, - "explainExploreTabPopUp": { + "explainCollectionTabPopUp": { "title": "探索 Captures", "content": "這個頁面顯示其他用戶拍攝的 Capture。探索、收集，然後創造你自己的 Capture，與世界分享吧！", "close": "繼續" diff --git a/src/assets/images/icons/collection.svg b/src/assets/images/icons/collection.svg new file mode 100644 index 000000000..c16e5d64c --- /dev/null +++ b/src/assets/images/icons/collection.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icons/search.svg b/src/assets/images/icons/search.svg deleted file mode 100644 index cc1342f1d..000000000 --- a/src/assets/images/icons/search.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - -