Feature custom camera ux

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.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",

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

@@ -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.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.page.html

@@ -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>

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

@@ -0,0 +1,55 @@
+:host {
+  background-color: transparent;
+}
+
+ion-content {
+  --background: transparent;
+}
+
+mat-icon {
+  color: #f2f2f2;
+  font-size: 36px;
+  height: 36px;
+  width: 36px;
+}
+
+mat-icon.close-camera-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+mat-icon.temporarily-hidden {
+  visibility: hidden;
+}
+
+// mat-icon
+.select-from-go-pro-camera-button {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: var(--ion-color-primary);
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  font-size: 22px;
+
+  mat-icon {
+    margin-left: 4px;
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.camera-buttons-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16px 8px;
+}

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

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NgCircleProgressModule } from 'ng-circle-progress';
+import { NgxLongPress2Module } from 'ngx-long-press2';
+import { SharedTestingModule } from '../../../shared/shared-testing.module';
+import { CustomCameraPage } from './custom-camera.page';
+
+describe('CustomCameraPage', () => {
+  let component: CustomCameraPage;
+  let fixture: ComponentFixture<CustomCameraPage>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [CustomCameraPage],
+        imports: [
+          SharedTestingModule,
+          NgxLongPress2Module,
+          NgCircleProgressModule.forRoot({}),
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(CustomCameraPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});