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/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.html

@@ -26,7 +26,11 @@
     </video>
 
     <div style="height: 24px"></div>
-    <ion-button (click)="uploadToCapture()" expand="block">
+    <ion-button
+      (click)="uploadToCapture()"
+      expand="block"
+      style="color: white; --box-shadow: 0; margin: 0 16px 0 16px"
+    >
       Upload to capture directly from camera
     </ion-button>
   </div>

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,11 @@
 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 { GoProFile } from '../go-pro-media-file';
 import { GoProMediaService } from '../services/go-pro-media.service';
 import { GoProWifiService } from '../services/go-pro-wifi.service';
@@ -33,11 +31,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 +42,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 = this.goProMediaService.getFileType(this.mediaFile?.url);
   }
 
   async uploadToCapture() {

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

@@ -6,10 +6,12 @@
 <img
   *ngIf="mediaFile?.thumbnailUrl"
   [src]="mediaFile!.thumbnailUrl"
-  (click)="showDetails()"
   loading="lazy"
   decoding="async"
+  [ngStyle]="{ border: selected ? '2px solid black' : '' }"
 />
 <mat-icon *ngIf="!mediaFile?.thumbnailUrl" class="is-thumbnail-missing">
   broken_image
 </mat-icon>
+
+<div [class.selected]="selected"></div>

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

@@ -32,3 +32,13 @@ img {
   object-fit: cover;
   object-position: center;
 }
+
+.selected {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border: 3px solid #564dfc;
+  border-radius: 4px;
+}

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

@@ -11,6 +11,7 @@ import { GoProMediaService } from '../services/go-pro-media.service';
 export class GoProMediaListItemOnCameraComponent {
   mediaType: 'unknown' | 'video' | 'image' = 'unknown';
   @Input() mediaFile: GoProFile | undefined;
+  @Input() selected = false;
 
   constructor(
     private readonly router: Router,