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 {}