Merge pull request #1627 from numbersprotocol/develop

Develop

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 0.57.0 - 2022-05-18
+
+### Added
+
+- Add a capture app beginner guide
+
 ## 0.56.3 - 2022-05-13
 
 ### Changed

android/app/build.gradle

@@ -6,8 +6,8 @@ android {
  applicationId "io.numbersprotocol.capturelite"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
- versionCode 393
- versionName "0.56.3"
+ versionCode 340
+ versionName "0.57.0"
  testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  }
  buildFeatures {

package.json

@@ -1,6 +1,6 @@
 {
  "name": "capture-lite",
- "version": "0.56.3",
+ "version": "0.57.0",
  "author": "numbersprotocol",
  "homepage": "https://numbersprotocol.io/",
  "scripts": {
@@ -67,6 +67,7 @@
  "lodash-es": "^4.17.21",
  "material-design-icons-iconfont": "^6.1.0",
  "ng-circle-progress": "^1.6.0",
+ "ngx-joyride": "^2.5.0",
  "ngx-long-press2": "^2.0.0",
  "ngx-pinch-zoom": "^2.6.0",
  "process": "^0.11.10",

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyMaterialModule } from '@ngx-formly/material';
+import { JoyrideModule } from 'ngx-joyride';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TranslocoRootModule } from './shared/language/transloco/transloco-root.module';
@@ -23,6 +24,7 @@ import { SharedModule } from './shared/shared.module';
  TranslocoRootModule,
  FormlyModule.forRoot({ extras: { lazyRender: true } }),
  FormlyMaterialModule,
+ JoyrideModule.forRoot(),
  ],
  providers: [
  {

src/app/features/home/activities/activities.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core';
+import { JoyrideModule } from 'ngx-joyride';
 import { SharedModule } from '../../../shared/shared.module';
 import { ActivitiesPageRoutingModule } from './activities-routing.module';
 import { ActivitiesPage } from './activities.page';
 import { CaptureTransactionsComponent } from './capture-transactions/capture-transactions.component';
 import { NetworkActionOrdersComponent } from './network-action-orders/network-action-orders.component';
 
 @NgModule({
- imports: [SharedModule, ActivitiesPageRoutingModule],
+ imports: [
+ SharedModule,
+ ActivitiesPageRoutingModule,
+ JoyrideModule.forChild(),
+ ],
  declarations: [
  ActivitiesPage,
  CaptureTransactionsComponent,

src/app/features/home/activities/activities.page.html

@@ -7,11 +7,25 @@
 
 <ion-content *transloco="let t">
  <ion-segment #segment value="transactions">
- <ion-segment-button value="transactions">
- <ion-label>{{ t('captureTransactions') }}</ion-label>
+ <ion-segment-button
+ value="transactions"
+ joyrideStep="highlightCaptureTransactionsTab"
+ [title]="t('userGuide.activityPage')"
+ [text]="t('userGuide.viewYourCaptureTransactions')"
+ >
+ <ion-label>
+ {{ t('captureTransactions') }}
+ </ion-label>
  </ion-segment-button>
- <ion-segment-button value="networkActionOrders">
- <ion-label>{{ t('networkActions') }}</ion-label>
+ <ion-segment-button
+ value="networkActionOrders"
+ joyrideStep="highlightNetworkActionsTab"
+ [title]="t('userGuide.activityPage2')"
+ [text]="t('userGuide.viewNetworkActionsHistory')"
+ >
+ <ion-label>
+ {{ t('networkActions') }}
+ </ion-label>
  </ion-segment-button>
  </ion-segment>
 

src/app/features/home/activities/activities.page.ts

@@ -1,10 +1,18 @@
 import { Component } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
+import { UserGuideService } from '../../../shared/user-guide/user-guide.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
  selector: 'app-activities',
  templateUrl: './activities.page.html',
  styleUrls: ['./activities.page.scss'],
 })
-export class ActivitiesPage {}
+export class ActivitiesPage {
+ constructor(private readonly userGuideService: UserGuideService) {}
+
+ async ionViewDidEnter() {
+ await this.userGuideService.showUserGuidesOnActivitiesPage();
+ await this.userGuideService.setHasOpenedActivitiesPage(true);
+ }
+}

src/app/features/home/capture-tab/capture-tab.component.html

@@ -14,18 +14,28 @@
  </mat-card-header>
 </mat-card>
 <app-uploading-bar></app-uploading-bar>
-<div class="capture-container">
+<div class="capture-container" *transloco="let t">
  <ng-container
  *ngFor="
  let group of capturesByDate$ | ngrxPush | keyvalue: keyDescendingOrder;
+ first as isFirstGroup;
  trackBy: trackCaptureGroupByDate
  "
  >
  <div class="mat-title">{{ group.key | date: 'longDate' }}</div>
  <mat-grid-list cols="3" gutterSize="8px">
  <mat-grid-tile
- *ngFor="let proof of group.value; trackBy: trackCaptureItem"
+ *ngFor="
+ let proof of group.value;
+ first as isFirstProof;
+ trackBy: trackCaptureItem
+ "
  class="capture-item"
+ [joyrideStep]="
+ isFirstGroup && isFirstProof ? 'highlightFirstCapture' : 'notFirst'
+ "
+ [title]="t('userGuide.capturedItem')"
+ [text]="t('userGuide.openToSeeDetailsAndMoreActionItems')"
  >
  <app-capture-item [proof]="proof"></app-capture-item>
  </mat-grid-tile>

src/app/features/home/custom-camera/custom-camera.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { NgCircleProgressModule } from 'ng-circle-progress';
+import { JoyrideModule } from 'ngx-joyride';
 import { NgxLongPress2Module } from 'ngx-long-press2';
 import { SharedModule } from '../../../shared/shared.module';
 import { CustomCameraPageRoutingModule } from './custom-camera-routing.module';
@@ -12,6 +13,7 @@ import { CustomCameraService } from './custom-camera.service';
  CustomCameraPageRoutingModule,
  NgxLongPress2Module,
  NgCircleProgressModule.forRoot({}),
+ JoyrideModule.forChild(),
  ],
  providers: [CustomCameraService],
  declarations: [CustomCameraPage],

src/app/features/home/custom-camera/custom-camera.page.html

@@ -1,4 +1,8 @@
-<ion-content [fullscreen]="true" [style.--background]="'transparent'">
+<ion-content
+ [fullscreen]="true"
+ [style.--background]="'transparent'"
+ *transloco="let t"
+>
  <div
  class="select-from-go-pro-camera-button"
  *ngIf="lastConnectedGoProDevice$ | ngrxPush"
@@ -8,7 +12,13 @@
  <mat-icon> featured_video </mat-icon>
  </div>
 
- <mat-icon class="close-camera-button" (click)="leaveCustomCamera()">
+ <mat-icon
+ class="close-camera-button"
+ (click)="leaveCustomCamera()"
+ joyrideStep="highlightCustomCameraCloseButton"
+ [title]="t('userGuide.cameraUsageGuide')"
+ [text]="t('userGuide.afterTakingPhotosOrRecordingVideosCloseAndGoBackHome')"
+ >
  close
  </mat-icon>
 
@@ -35,8 +45,18 @@
  [showSubtitle]="false"
  [animation]="false"
  [animationDuration]="0"
+ joyrideStep="highlightCustomCameraCaptureButton"
+ [title]="t('userGuide.cameraUsageGuide')"
+ [text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
  ></circle-progress>
 
- <mat-icon (click)="flipCamera()">flip_camera_android</mat-icon>
+ <mat-icon
+ (click)="flipCamera()"
+ joyrideStep="highlightCustomCameraFlipButton"
+ [title]="t('userGuide.cameraUsageGuide')"
+ [text]="t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')"
+ >
+ flip_camera_android
+ </mat-icon>
  </div>
 </ion-content>

src/app/features/home/custom-camera/custom-camera.page.ts

@@ -6,6 +6,7 @@ import { PluginListenerHandle } from '@capacitor/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { CaptureResult, PreviewCamera } from '@numbersprotocol/preview-camera';
 import { ErrorService } from '../../../shared/error/error.service';
+import { UserGuideService } from '../../../shared/user-guide/user-guide.service';
 import { GoProBluetoothService } from '../../settings/go-pro/services/go-pro-bluetooth.service';
 import {
  CustomCameraMediaItem,
@@ -40,10 +41,11 @@ export class CustomCameraPage implements OnInit, OnDestroy {
  private readonly router: Router,
  private readonly customCameraService: CustomCameraService,
  private readonly goProBluetoothService: GoProBluetoothService,
- private readonly errorService: ErrorService
+ private readonly errorService: ErrorService,
+ private readonly userGuideService: UserGuideService
  ) {}
 
- ngOnInit(): void {
+ ngOnInit() {
  this.debugOnlyPreventContextMenuFromLongPressContextMenu();
 
  PreviewCamera.addListener(
@@ -59,6 +61,11 @@ export class CustomCameraPage implements OnInit, OnDestroy {
  this.startPreviewCamera();
  }
 
+ async ionViewDidEnter() {
+ await this.userGuideService.showUserGuidesOnCustomCameraPage();
+ await this.userGuideService.setHasOpenedCustomCameraPage(true);
+ }
+
  ngOnDestroy(): void {
  this.capturePhotoFinishedListener?.remove();
  this.captureVideoFinishedListener?.remove();
@@ -96,10 +103,12 @@ export class CustomCameraPage implements OnInit, OnDestroy {
  }
 
  onPress() {
+ this.userGuideService.setHasCapturedPhotoWithCustomCamera(true);
  this.customCameraService.takePhoto();
  }
 
  onLongPress() {
+ this.userGuideService.setHasCapturedVideoWithCustomCamera(true);
  this.customCameraService.startRecord();
  }
 

src/app/features/home/details/details.module.ts

@@ -1,11 +1,17 @@
 import { NgModule } from '@angular/core';
+import { JoyrideModule } from 'ngx-joyride';
 import { SwiperModule } from 'swiper/angular';
 import { SharedModule } from '../../../shared/shared.module';
 import { DetailsPageRoutingModule } from './details-routing.module';
 import { DetailsPage } from './details.page';
 
 @NgModule({
- imports: [SharedModule, DetailsPageRoutingModule, SwiperModule],
+ imports: [
+ SharedModule,
+ DetailsPageRoutingModule,
+ SwiperModule,
+ JoyrideModule.forChild(),
+ ],
  declarations: [DetailsPage],
 })
 export class DetailsPageModule {}

src/app/features/home/details/details.page.html

@@ -16,6 +16,9 @@
  *ngIf="(isFromSeriesPage$ | ngrxPush) === false"
  (click)="openOptionsMenu()"
  mat-icon-button
+ joyrideStep="highlightDetailsPageOptionsMenu"
+ [title]="t('userGuide.optionsMenu')"
+ [text]="t('userGuide.clickTheOptionsMenuToUseNetworkActions')"
  >
  <mat-icon>more_vert</mat-icon>
  </button>

src/app/features/home/details/details.page.ts

@@ -32,6 +32,7 @@ import { ErrorService } from '../../../shared/error/error.service';
 import { MediaStore } from '../../../shared/media/media-store/media-store.service';
 import { ProofRepository } from '../../../shared/repositories/proof/proof-repository.service';
 import { ShareService } from '../../../shared/share/share.service';
+import { UserGuideService } from '../../../shared/user-guide/user-guide.service';
 import {
  isNonNullable,
  switchTap,
@@ -196,13 +197,19 @@ export class DetailsPage {
  private readonly snackBar: MatSnackBar,
  private readonly diaBackendWorkflowService: DiaBackendWorkflowService,
  private readonly alertController: AlertController,
- private readonly changeDetectorRef: ChangeDetectorRef
+ private readonly changeDetectorRef: ChangeDetectorRef,
+ private readonly userGuideService: UserGuideService
  ) {
  this.initializeActiveDetailedCapture$
  .pipe(untilDestroyed(this))
  .subscribe();
  }
 
+ async ionViewDidEnter() {
+ await this.userGuideService.showUserGuidesOnDetailsPage();
+ await this.userGuideService.setHasOpenedDetailsPage(true);
+ }
+
  // eslint-disable-next-line class-methods-use-this
  trackDetailedCapture(_: number, item: DetailedCapture) {
  return item.id;
@@ -306,6 +313,7 @@ export class DetailsPage {
  }
 
  openOptionsMenu() {
+ this.userGuideService.setHasClickedDetailsPageOptionsMenu(true);
  combineLatest([
  this.activeDetailedCapture$,
  this.activeDetailedCapture$.pipe(switchMap(c => c.diaBackendAsset$)),

src/app/features/home/home.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { JoyrideModule } from 'ngx-joyride';
 import { SharedModule } from '../../shared/shared.module';
 import { CaptureItemComponent } from './capture-tab/capture-item/capture-item.component';
 import { CaptureTabComponent } from './capture-tab/capture-tab.component';
@@ -17,6 +18,6 @@ import { PostCaptureTabComponent } from './post-capture-tab/post-capture-tab.com
  UploadingBarComponent,
  CaptureItemComponent,
  ],
- imports: [SharedModule, HomePageRoutingModule],
+ imports: [SharedModule, HomePageRoutingModule, JoyrideModule.forChild()],
 })
 export class HomePageModule {}