Merge pull request #1523 from sultanmyrza/feature-custom-camera-ux

Feature custom camera ux

Author: shc261392

android/app/capacitor.build.gradle

@@ -25,6 +25,7 @@ dependencies {
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-storage')
+    implementation project(':numbersprotocol-preview-camera')
     implementation project(':numbersprotocol-preview-video')
     implementation project(':capacitor-blob-writer')
 

android/app/src/main/assets/capacitor.plugins.json

@@ -63,6 +63,10 @@
 		"pkg": "@capacitor/storage",
 		"classpath": "com.capacitorjs.plugins.storage.StoragePlugin"
 	},
+	{
+		"pkg": "@numbersprotocol/preview-camera",
+		"classpath": "io.numbersprotocol.capturelite.plugins.previewcamera.PreviewCameraPlugin"
+	},
 	{
 		"pkg": "@numbersprotocol/preview-video",
 		"classpath": "io.numbersprotocol.capturelite.plugins.previewvideo.PreviewVideoPlugin"

android/capacitor.settings.gradle

@@ -50,6 +50,9 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
 include ':capacitor-storage'
 project(':capacitor-storage').projectDir = new File('../node_modules/@capacitor/storage/android')
 
+include ':numbersprotocol-preview-camera'
+project(':numbersprotocol-preview-camera').projectDir = new File('../node_modules/@numbersprotocol/preview-camera/android')
+
 include ':numbersprotocol-preview-video'
 project(':numbersprotocol-preview-video').projectDir = new File('../node_modules/@numbersprotocol/preview-video/android')
 

android/variables.gradle

@@ -1,6 +1,6 @@
 ext {
     minSdkVersion = 21
-    compileSdkVersion = 30
+    compileSdkVersion = 31
     targetSdkVersion = 30
     androidxActivityVersion = '1.2.0'
     androidxAppCompatVersion = '1.2.0'

ios/App/Podfile

@@ -25,6 +25,7 @@ def capacitor_pods
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
+  pod 'NumbersprotocolPreviewCamera', :path => '../../node_modules/@numbersprotocol/preview-camera'
   pod 'NumbersprotocolPreviewVideo', :path => '../../node_modules/@numbersprotocol/preview-video'
   pod 'CapacitorBlobWriter', :path => '../../node_modules/capacitor-blob-writer'
 end

package-lock.json

@@ -57,6 +57,7 @@
     "@ngx-formly/core": "^5.10.22",
     "@ngx-formly/material": "^5.10.22",
     "@ngx-formly/schematics": "^5.10.22",
+    "@numbersprotocol/preview-camera": "github:numbersprotocol/preview-camera",
     "@numbersprotocol/preview-video": "github:numbersprotocol/preview-video",
     "async-mutex": "^0.3.2",
     "buffer": "^5.7.1",
@@ -65,6 +66,7 @@
     "immutable": "^4.0.0-rc.14",
     "lodash-es": "^4.17.21",
     "material-design-icons-iconfont": "^6.1.0",
+    "ng-circle-progress": "^1.6.0",
     "ngx-long-press2": "^2.0.0",
     "ngx-pinch-zoom": "^2.6.0",
     "process": "^0.11.10",

package.json

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CustomCameraPage } from './custom-camera.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomCameraPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CustomCameraPageRoutingModule {}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { NgCircleProgressModule } from 'ng-circle-progress';
+import { NgxLongPress2Module } from 'ngx-long-press2';
+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';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    CustomCameraPageRoutingModule,
+    NgxLongPress2Module,
+    NgCircleProgressModule.forRoot({}),
+  ],
+  providers: [CustomCameraService],
+  declarations: [CustomCameraPage],
+})
+export class CustomCameraPageModule {}

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

@@ -0,0 +1,42 @@
+<ion-content [fullscreen]="true" [style.--background]="'transparent'">
+  <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()">
+    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"
+    ></circle-progress>
+
+    <mat-icon (click)="flipCamera()">flip_camera_android</mat-icon>
+  </div>
+</ion-content>