Feature/experiments/go pro/multi select file upload

package.json

@@ -51,6 +51,7 @@
     "immutable": "^4.0.0-rc.14",
     "lodash-es": "^4.17.21",
     "material-design-icons-iconfont": "^6.1.0",
+    "ngx-long-press2": "^2.0.0",
     "ngx-pinch-zoom": "^2.6.0",
     "process": "^0.11.10",
     "rxjs": "^6.6.7",

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

@@ -5,7 +5,7 @@ import { Plugins } from '@capacitor/core';
 import { ActionSheetController, AlertController } from '@ionic/angular';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { defer, EMPTY, iif, of } from 'rxjs';
+import { combineLatest, defer, EMPTY, iif, of } from 'rxjs';
 import {
   catchError,
   concatMap,
@@ -154,40 +154,42 @@ export class HomePage {
   }
 
   private presentCaptureActions$() {
-    return this.translocoService
-      .selectTranslateObject({
+    return combineLatest([
+      this.translocoService.selectTranslateObject({
         takePicture: null,
         recordVideo: null,
+      }),
+      this.goProBluetoothService.connectedDevice$,
+    ]).pipe(
+      first(),
+      concatMap(([translations, connectedDevice]) => {
+        const [takePicture, recordVideo] = translations;
+
+        return new Promise<Media>(resolve => {
+          const buttons = [
+            {
+              text: takePicture,
+              handler: () => resolve(this.cameraService.takePhoto()),
+            },
+            {
+              text: recordVideo,
+              handler: () => resolve(this.recordVideo()),
+            },
+          ];
+
+          if (connectedDevice) {
+            buttons.push({
+              text: 'Capture from GoPro',
+              handler: () => resolve(this.caputureFromGoPro()),
+            });
+          }
+
+          return this.actionSheetController
+            .create({ buttons })
+            .then(sheet => sheet.present());
+        });
       })
-      .pipe(
-        first(),
-        concatMap(async ([takePicture, recordVideo]) => {
-          // eslint-disable-next-line no-async-promise-executor
-          return new Promise<Media>(async resolve => {
-            const buttons = [
-              {
-                text: takePicture,
-                handler: () => resolve(this.cameraService.takePhoto()),
-              },
-              {
-                text: recordVideo,
-                handler: () => resolve(this.recordVideo()),
-              },
-            ];
-
-            if (await this.goProBluetoothService.getConnectedDevice()) {
-              buttons.push({
-                text: 'Capture from GoPro',
-                handler: () => resolve(this.caputureFromGoPro()),
-              });
-            }
-
-            return this.actionSheetController
-              .create({ buttons })
-              .then(sheet => sheet.present());
-          });
-        })
-      );
+    );
   }
 
   private async recordVideo() {

src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.html

@@ -25,8 +25,12 @@
       Your browser does not support the video tag.
     </video>
 
-    <div style="height: 24px"></div>
-    <ion-button (click)="uploadToCapture()" expand="block">
+    <div class="spacer"></div>
+    <ion-button
+      (click)="uploadToCapture()"
+      expand="block"
+      class="upload-to-capture-btn"
+    >
       Upload to capture directly from camera
     </ion-button>
   </div>
@@ -184,7 +188,7 @@
     </ion-slide>
 
     <ion-slide>
-      <ion-item style="--background: #36393f" lines="none">
+      <ion-item lines="none">
         <ion-checkbox
           [checked]="dontShowAgainTutorialForMobileDataOnlyApps"
           [(ngModel)]="dontShowAgainTutorialForMobileDataOnlyApps"

src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.scss

@@ -31,6 +31,10 @@ ion-content {
         padding-bottom: calc(5vh + env(safe-area-inset-bottom));
         border: none;
       }
+
+      ion-item {
+        --background: #36393f;
+      }
     }
   }
 }
@@ -51,3 +55,14 @@ ion-content {
     height: 90%;
   }
 }
+
+.upload-to-capture-btn {
+  color: white;
+  margin: 0 16px;
+
+  --box-shadow: 0;
+}
+
+.spacer {
+  height: 24px;
+}

src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.ts

@@ -1,13 +1,12 @@
 import { Location } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NetworkPlugin } from '@capacitor/core';
 import {
   AlertController,
   LoadingController,
   ToastController,
 } from '@ionic/angular';
-import { NETOWRK_PLUGIN } from '../../../../shared/capacitor-plugins/capacitor-plugins.module';
+import { getFileType } from '../../../../../utils/url';
 import { GoProFile } from '../go-pro-media-file';
 import { GoProMediaService } from '../services/go-pro-media.service';
 import { GoProWifiService } from '../services/go-pro-wifi.service';
@@ -33,11 +32,9 @@ export class GoProMediaItemDetailOnCameraComponent implements OnInit {
     public alertController: AlertController,
     public loadingController: LoadingController,
     public goProMediaService: GoProMediaService,
-    public goProWiFiService: GoProWifiService,
-    @Inject(NETOWRK_PLUGIN)
-    private readonly networkPlugin: NetworkPlugin
+    public goProWiFiService: GoProWifiService
   ) {
-    this.route.queryParams.subscribe(() => {
+    this.route.queryParams.subscribe(_ => {
       const state = this.router.getCurrentNavigation()?.extras.state;
       if (state) {
         this.mediaFile = state.goProMediaFile;
@@ -46,31 +43,7 @@ export class GoProMediaItemDetailOnCameraComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.mediaType = GoProMediaService.getFileType(this.mediaFile?.url);
-  }
-
-  async downloadFileFromGoProCamera() {
-    if (!this.mediaFile) {
-      return;
-    }
-
-    const fileName = GoProMediaService.extractFileNameFromUrl(
-      this.mediaFile.url
-    );
-
-    const loading = await this.loadingController.create({
-      message: 'Please wait... Download in progress',
-    });
-    await loading.present();
-
-    try {
-      await this.goProMediaService.downloadFromGoProCamera(this.mediaFile);
-      this.presentToast(`${fileName} downloaded ✅`);
-    } catch (error) {
-      this.presentToast(`Failed to download ${fileName}  ❌`);
-    }
-
-    await loading.dismiss();
+    this.mediaType = getFileType(this.mediaFile?.url);
   }
 
   async uploadToCapture() {