Merge pull request #1818 from numbersprotocol/develop

Develop
numbersprotocol · Jul 14, 2022 · 6961ad8 · 6961ad8
2 parents 031b130 + 016d104
commit 6961ad8
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 69 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix withdraw page the text color
 
+## 0.61.0 - 2022-07-14
+
+### Added
+
+- Show discard/confirm capture before upload
+- Send generate SEO img & description on share asset
+
+### Fixed
+
+- Remove capture after discard/confirm
+
 ## 0.60.1 - 2022-07-06
 
 ### Fixed

diff --git a/README.md b/README.md
@@ -77,12 +77,10 @@ cordova-res android --skip-config --copy
 
 #### Android
 
-If your operating system is Linux, set the `linuxAndroidStudioPath` in `capacitor.config.json`. For example,
+If your operating system is Linux, set the environment variable `CAPACITOR_ANDROID_STUDIO_PATH` for your Android Studio. The default value is `/usr/local/android-studio/bin/studio.sh`.
 
-```json
-{
-  "linuxAndroidStudioPath": "/home/username/android-studio/bin/studio.sh"
-}
+```sh
+export CAPACITOR_ANDROID_STUDIO_PATH="/home/username/android-studio/bin/studio.sh"
 ```
 
 Before running the app with Android Studio, build and sync the dependencies and web assets.

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -6,8 +6,8 @@ android {
         applicationId "io.numbersprotocol.capturelite"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 422
-        versionName "0.60.2"
+        versionCode 430
+        versionName "0.61.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     buildFeatures {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "capture-lite",
-  "version": "0.60.2",
+  "version": "0.61.0",
   "author": "numbersprotocol",
   "homepage": "https://numbersprotocol.io/",
   "scripts": {

diff --git a/src/app/features/home/custom-camera/custom-camera-routing.module.ts b/src/app/features/home/custom-camera/custom-camera-routing.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CustomCameraPage } from './custom-camera.page';
 

diff --git a/src/app/features/home/custom-camera/custom-camera.module.ts b/src/app/features/home/custom-camera/custom-camera.module.ts
@@ -6,6 +6,7 @@ import { SharedModule } from '../../../shared/shared.module';
 import { CustomCameraPageRoutingModule } from './custom-camera-routing.module';
 import { CustomCameraPage } from './custom-camera.page';
 import { CustomCameraService } from './custom-camera.service';
+import { PrePublishModeComponent } from './pre-publish-mode/pre-publish-mode.component';
 
 @NgModule({
   imports: [
@@ -16,6 +17,6 @@ import { CustomCameraService } from './custom-camera.service';
     JoyrideModule.forChild(),
   ],
   providers: [CustomCameraService],
-  declarations: [CustomCameraPage],
+  declarations: [CustomCameraPage, PrePublishModeComponent],
 })
 export class CustomCameraPageModule {}
diff --git a/src/app/features/home/custom-camera/custom-camera.page.html b/src/app/features/home/custom-camera/custom-camera.page.html
@@ -3,61 +3,74 @@
   [style.--background]="'transparent'"
   *transloco="let t"
 >
-  <div id="camera-flash-placeholder"></div>
-  <div
-    class="select-from-go-pro-camera-button"
-    *ngIf="lastConnectedGoProDevice$ | ngrxPush"
-    (click)="captureFromGoPro()"
-  >
-    GoPro
-    <mat-icon> featured_video </mat-icon>
-  </div>
-
-  <mat-icon
-    class="close-camera-button"
-    (click)="leaveCustomCamera()"
-    joyrideStep="highlightCustomCameraCloseButton"
-    [title]="t('userGuide.cameraUsageGuide')"
-    [text]="t('userGuide.afterTakingPhotosOrRecordingVideosCloseAndGoBackHome')"
-  >
-    close
-  </mat-icon>
-
-  <div class="camera-buttons-container">
-    <mat-icon class="temporarily-hidden" id="gallery-icon">
-      video_collection
-    </mat-icon>
-
-    <circle-progress
-      (click)="onPress()"
-      [maxTime]="maxRecordTimeInMilliseconds"
-      ngxLongPress2
-      (onLongPress)="onLongPress()"
-      (onLongPressing)="onLongPressing($event)"
-      (onReleasePressing)="onReleasePressing()"
-      [percent]="curRecordTimeInPercent"
-      [radius]="38"
-      [outerStrokeWidth]="6"
-      [innerStrokeWidth]="4"
-      [outerStrokeColor]="'#78C000'"
-      [innerStrokeColor]="'#F2F2F2'"
-      [showTitle]="false"
-      [showUnits]="false"
-      [showSubtitle]="false"
-      [animation]="false"
-      [animationDuration]="0"
-      joyrideStep="highlightCustomCameraCaptureButton"
-      [title]="t('userGuide.cameraUsageGuide')"
-      [text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
-    ></circle-progress>
+  <ng-container *ngIf="(mode$ | ngrxPush) === 'capture'">
+    <div id="camera-flash-placeholder"></div>
+    <div
+      class="select-from-go-pro-camera-button"
+      *ngIf="lastConnectedGoProDevice$ | ngrxPush"
+      (click)="captureFromGoPro()"
+    >
+      GoPro
+      <mat-icon> featured_video </mat-icon>
+    </div>
 
     <mat-icon
-      (click)="flipCamera()"
-      joyrideStep="highlightCustomCameraFlipButton"
+      class="close-camera-button"
+      (click)="leaveCustomCamera()"
+      joyrideStep="highlightCustomCameraCloseButton"
       [title]="t('userGuide.cameraUsageGuide')"
-      [text]="t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')"
+      [text]="
+        t('userGuide.afterTakingPhotosOrRecordingVideosCloseAndGoBackHome')
+      "
     >
-      flip_camera_android
+      close
     </mat-icon>
-  </div>
+
+    <div class="camera-buttons-container">
+      <mat-icon class="temporarily-hidden" id="gallery-icon">
+        video_collection
+      </mat-icon>
+
+      <circle-progress
+        (click)="onPress()"
+        [maxTime]="maxRecordTimeInMilliseconds"
+        ngxLongPress2
+        (onLongPress)="onLongPress()"
+        (onLongPressing)="onLongPressing($event)"
+        (onReleasePressing)="onReleasePressing()"
+        [percent]="curRecordTimeInPercent"
+        [radius]="38"
+        [outerStrokeWidth]="6"
+        [innerStrokeWidth]="4"
+        [outerStrokeColor]="'#78C000'"
+        [innerStrokeColor]="'#F2F2F2'"
+        [showTitle]="false"
+        [showUnits]="false"
+        [showSubtitle]="false"
+        [animation]="false"
+        [animationDuration]="0"
+        joyrideStep="highlightCustomCameraCaptureButton"
+        [title]="t('userGuide.cameraUsageGuide')"
+        [text]="t('userGuide.tapToTakeAPhotoAndLongPressToRecordVideo')"
+      ></circle-progress>
+
+      <mat-icon
+        (click)="flipCamera()"
+        joyrideStep="highlightCustomCameraFlipButton"
+        [title]="t('userGuide.cameraUsageGuide')"
+        [text]="t('userGuide.flipTheCameraToSwitchBetweenFrontAndBackCameras')"
+      >
+        flip_camera_android
+      </mat-icon>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="(mode$ | ngrxPush) === 'pre-publish'">
+    <app-pre-publish-mode
+      [curCaptureFilePath]="curCaptureFilePath"
+      [curCaptureMimeType]="curCaptureMimeType"
+      [curCaptureSrc]="curCaptureSrc"
+      (confirm)="confirmCurrentCapture()"
+      (discard)="discardCurrentCapture()"
+    ></app-pre-publish-mode>
+  </ng-container>
 </ion-content>
diff --git a/src/app/features/home/custom-camera/custom-camera.page.ts b/src/app/features/home/custom-camera/custom-camera.page.ts
@@ -2,9 +2,10 @@
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { PluginListenerHandle } from '@capacitor/core';
+import { Capacitor, PluginListenerHandle } from '@capacitor/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { CaptureResult, PreviewCamera } from '@numbersprotocol/preview-camera';
+import { BehaviorSubject } from 'rxjs';
 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';
@@ -33,6 +34,13 @@ export class CustomCameraPage implements OnInit, OnDestroy {
 
   curSessionCaptureMediaItems: CustomCameraMediaItem[] = [];
 
+  mode$ = new BehaviorSubject<'capture' | 'pre-publish'>('capture');
+
+  curCaptureFilePath?: string;
+  curCaptureMimeType?: 'image/jpeg' | 'video/mp4';
+  curCaptureType?: 'image' | 'video' = 'image';
+  curCaptureSrc?: string;
+
   readonly lastConnectedGoProDevice$ =
     this.goProBluetoothService.lastConnectedDevice$;
 
@@ -85,7 +93,18 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     if (data.errorMessage) {
       await this.errorService.toastError$(data.errorMessage).toPromise();
     } else if (data.filePath) {
-      this.customCameraService.uploadToCapture(data.filePath, type);
+      const filePath = data.filePath;
+
+      let mimeType: 'image/jpeg' | 'video/mp4' = 'image/jpeg';
+      if (type === 'video') mimeType = 'video/mp4';
+
+      this.curCaptureFilePath = filePath;
+      this.curCaptureMimeType = mimeType;
+      this.curCaptureType = type;
+      this.curCaptureSrc = Capacitor.convertFileSrc(filePath);
+      this.mode$.next('pre-publish');
+
+      this.stopPreviewCamera();
     }
   }
 
@@ -131,6 +150,23 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     }
   }
 
+  discardCurrentCapture() {
+    this.mode$.next('capture');
+    this.startPreviewCamera();
+    this.removeCurrentCapture();
+  }
+
+  async confirmCurrentCapture() {
+    if (this.curCaptureFilePath && this.curCaptureType) {
+      await this.customCameraService.uploadToCapture(
+        this.curCaptureFilePath,
+        this.curCaptureType
+      );
+      this.removeCurrentCapture();
+    }
+    this.leaveCustomCamera();
+  }
+
   async leaveCustomCamera() {
     return this.location.back();
   }
@@ -142,6 +178,13 @@ export class CustomCameraPage implements OnInit, OnDestroy {
     });
   }
 
+  private removeCurrentCapture() {
+    this.customCameraService.removeFile(this.curCaptureFilePath);
+    this.curCaptureFilePath = undefined;
+    this.curCaptureMimeType = undefined;
+    this.curCaptureSrc = undefined;
+  }
+
   // eslint-disable-next-line class-methods-use-this
   private debugOnlyPreventContextMenuFromLongPressContextMenu() {
     // Prevent showing context menu on long press

diff --git a/src/app/features/home/custom-camera/custom-camera.service.ts b/src/app/features/home/custom-camera/custom-camera.service.ts
@@ -1,10 +1,12 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Capacitor } from '@capacitor/core';
+import { FilesystemPlugin } from '@capacitor/filesystem';
 import { TranslocoService } from '@ngneat/transloco';
 import { PreviewCamera } from '@numbersprotocol/preview-camera';
 import { BehaviorSubject } from 'rxjs';
+import { FILESYSTEM_PLUGIN } from '../../../shared/capacitor-plugins/capacitor-plugins.module';
 import { CaptureService } from '../../../shared/capture/capture.service';
 import { ErrorService } from '../../../shared/error/error.service';
 import { blobToBase64 } from '../../../utils/encoding/encoding';
@@ -27,7 +29,9 @@ export class CustomCameraService {
     private readonly httpClient: HttpClient,
     private readonly captureService: CaptureService,
     private readonly errorService: ErrorService,
-    private readonly translocoService: TranslocoService
+    private readonly translocoService: TranslocoService,
+    @Inject(FILESYSTEM_PLUGIN)
+    private readonly filesystemPlugin: FilesystemPlugin
   ) {}
 
   private mediaItemFromFilePath(
@@ -89,6 +93,11 @@ export class CustomCameraService {
     return PreviewCamera.stopRecord().catch(() => ({}));
   }
 
+  async removeFile(filePath: string | undefined) {
+    if (!filePath) return;
+    await this.filesystemPlugin.deleteFile({ path: filePath });
+  }
+
   private changeGlobalCSSBackgroundToTransparent() {
     document.querySelector('body')?.classList.add(this.globalCSSClass);
     document.querySelector('ion-app')?.classList.add(this.globalCSSClass);

diff --git a/src/app/features/home/custom-camera/pre-publish-mode/pre-publish-mode.component.html b/src/app/features/home/custom-camera/pre-publish-mode/pre-publish-mode.component.html
@@ -0,0 +1,20 @@
+<div class="action-buttons">
+  <button (click)="onDiscard()" class="back-button" mat-mini-fab>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+
+  <button
+    (click)="onConfirm()"
+    class="confirm-button"
+    mat-flat-button
+    *transloco="let t"
+  >
+    {{ t('customCamera.confirmCapture') | uppercase }}
+  </button>
+</div>
+
+<div class="preview" *ngIf="curCaptureFilePath && curCaptureMimeType">
+  <app-media [src]="curCaptureSrc" [mimeType]="curCaptureMimeType"></app-media>
+</div>
+
+<div class="footer"></div>