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

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

@@ -1,44 +1,91 @@
 <mat-toolbar color="primary" *transloco="let t">
-  <button (click)="goBack()" mat-icon-button>
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <span>GoPro Media on Camera</span>
+  <ng-template [ngIf]="!multiSelectMode" [ngIfElse]="multiSelectBlock">
+    <button (click)="goBack()" mat-icon-button>
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span> GoPro Media on Camera </span>
+  </ng-template>
+
+  <ng-template #multiSelectBlock>
+    <button (click)="exitMultiSelectMode()" mat-icon-button>
+      <mat-icon>close</mat-icon>
+    </button>
+    <span *ngIf="multiSelectMode">
+      {{ selectedGoProFiles.length }} file(s) selected
+    </span>
+  </ng-template>
 
   <button (click)="fetchFilesFromGoProWiFi()" mat-icon-button>
     <mat-icon>refresh</mat-icon>
   </button>
 </mat-toolbar>
 
-<ion-content>
+<div class="wifi-state-container">
   <h4>Connected WiFi: {{ connectedWifiSSID }}</h4>
+
   <ion-button
     *ngIf="!isConnectedToGoProWifi"
-    expand="block"
     (click)="connectToGoProWifi()"
+    style="color: white; --box-shadow: 0"
   >
     Connect to go pro WiFi (enable first)
   </ion-button>
 
+  <ion-button
+    *ngIf="multiSelectMode"
+    [disabled]="selectedGoProFiles.length === 0"
+    (click)="uploadSelectedFiles()"
+    style="align-self: flex-end; color: white; --box-shadow: 0"
+  >
+    Upload to capture
+  </ion-button>
+
   <!-- TODO: att translate text -->
   <h4 *ngIf="shouldConnectToWiFi" style="padding: 16px">
     Make sure you connected to GoPro WiFi first
   </h4>
 
   <h4 *ngIf="fetchingFilesError">
     {{ fetchingFilesError }}
+    <br />
+    Hint: click refresh button at top right.
   </h4>
 
   <h4 *ngIf="fetchingFiles">Fetching files...</h4>
 
+  <span *ngIf="uploadInProgress" style="padding-top: 8px">
+    <ion-icon name="information-circle-outline"></ion-icon>
+    Stay on this screen with the app open to ensure your downloads complete!
+  </span>
+</div>
+
+<app-go-pro-media-loading-bar
+  *ngIf="uploadInProgress"
+  loadingText="Loading {{
+    filesToUpload.length + 1
+  }} file(s) for upload to capture."
+  (uploadCancel)="onUploadCancel()"
+></app-go-pro-media-loading-bar>
+
+<ion-content
+  [scrollEvents]="true"
+  (ionScrollStart)="ionScrollStart()"
+  (ionScrollEnd)="ionScrollEnd()"
+>
   <div class="go-pro-container">
     <mat-grid-list cols="3" gutterSize="8px">
       <mat-grid-tile
         *ngFor="let mediaFile of allMediaFiles"
         class="go-pro-item"
       >
         <app-go-pro-media-list-item-on-camera
+          ngxLongPress2
+          (onLongPress)="enterMultiSelectMode(mediaFile)"
+          (click)="onItemClick(mediaFile)"
           [mediaFile]="mediaFile"
-        ></app-go-pro-media-list-item-on-camera>
+          [selected]="isItemInSelectedList(mediaFile)"
+        >
+        </app-go-pro-media-list-item-on-camera>
       </mat-grid-tile>
     </mat-grid-list>
   </div>

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

@@ -11,3 +11,9 @@ app-go-pro-media-list-item-on-camera {
   overflow: hidden;
   border-radius: 4px;
 }
+
+.wifi-state-container {
+  padding: 0px 16px 8px 16px;
+  display: flex;
+  flex-direction: column;
+}

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

@@ -1,6 +1,11 @@
 import { Location } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { ToastController } from '@ionic/angular';
+import { Router } from '@angular/router';
+import {
+  AlertController,
+  NavController,
+  ToastController,
+} from '@ionic/angular';
 import { GoProFile } from '../go-pro-media-file';
 import { GoProBluetoothService } from '../services/go-pro-bluetooth.service';
 import { GoProMediaService } from '../services/go-pro-media.service';
@@ -21,9 +26,20 @@ export class GoProMediaListOnCameraComponent implements OnInit {
   connectedWifiSSID: string | null = null;
   isConnectedToGoProWifi: boolean | undefined;
 
+  isScrollingContent = false;
+
+  multiSelectMode = false;
+  selectedGoProFiles: GoProFile[] = [];
+
+  filesToUpload: GoProFile[] = [];
+  uploadInProgress = false;
+
   constructor(
     private readonly location: Location,
     private readonly goProMediaService: GoProMediaService,
+    private readonly router: Router,
+    private readonly navCtrl: NavController,
+    private readonly alertCtrl: AlertController,
     private readonly goProBluetoothService: GoProBluetoothService,
     private readonly goProWifiService: GoProWifiService,
     public toastController: ToastController
@@ -34,9 +50,9 @@ export class GoProMediaListOnCameraComponent implements OnInit {
   }
 
   async checkWiFiConnection() {
-    this.connectedWifiSSID = await GoProWifiService.getConnectedWifiSSID();
+    this.connectedWifiSSID = await this.goProWifiService.getConnectedWifiSSID();
     this.isConnectedToGoProWifi =
-      await GoProWifiService.isConnectedToGoProWifi();
+      await this.goProWifiService.isConnectedToGoProWifi();
 
     if (this.isConnectedToGoProWifi) {
       this.fetchFilesFromGoProWiFi();
@@ -76,4 +92,117 @@ export class GoProMediaListOnCameraComponent implements OnInit {
   goBack() {
     this.location.back();
   }
+
+  onItemClick(item: GoProFile) {
+    if (!this.multiSelectMode) {
+      this.router.navigate(
+        ['/settings', 'go-pro', 'media-item-detail-on-camera'],
+        { state: { goProMediaFile: item } }
+      );
+    } else if (!this.isItemInSelectedList(item)) {
+      this.selectedGoProFiles.push(item);
+    } else {
+      this.selectedGoProFiles = this.selectedGoProFiles.filter(
+        i => i.url !== item.url
+      );
+    }
+  }
+
+  async uploadSelectedFiles() {
+    for (const selectedFile of this.selectedGoProFiles) {
+      if (this.isItemInUploadList(selectedFile) === false) {
+        this.filesToUpload.push(selectedFile);
+      }
+    }
+
+    this.exitMultiSelectMode();
+
+    if (!this.uploadInProgress) {
+      this.uploadInProgress = true;
+
+      while (this.filesToUpload.length > 0) {
+        const fileToUpload = this.filesToUpload.shift();
+
+        // // eslint-disable-next-line no-console
+        // console.log(fileToUpload);
+
+        // await new Promise(resolve => {
+        //   setTimeout(() => {
+        //     resolve(fileToUpload);
+        //     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        //   }, 4000);
+        // });
+
+        const uploadResult =
+          await this.goProMediaService.uploadToCaptureFromGoProCamera(
+            fileToUpload
+          );
+
+        if (uploadResult.isDownloaded && uploadResult.isCaptured === false) {
+          this.fileWasUploadedBefore(fileToUpload);
+        }
+      }
+
+      this.uploadInProgress = false;
+      this.navigateToHomeScreen();
+    }
+  }
+
+  async fileWasUploadedBefore(fileToUpload: GoProFile | undefined) {
+    if (!fileToUpload) return;
+
+    const alert = await this.alertCtrl.create({
+      cssClass: 'go-pro-alert-message-with',
+      header: 'File Upload Error!',
+      subHeader: 'File Previously Uploaded.',
+      message: `<img src="${fileToUpload.thumbnailUrl}"  loading="lazy" decoding="async">`,
+      buttons: ['OK'],
+    });
+
+    await alert.present();
+
+    const { role } = await alert.onDidDismiss();
+    // eslint-disable-next-line no-console
+    console.log('onDidDismiss resolved with role', role);
+  }
+
+  private async navigateToHomeScreen() {
+    // this.navCtrl.navigateRoot('/');
+    await this.navCtrl.pop();
+    await this.navCtrl.pop();
+    await this.navCtrl.pop();
+  }
+
+  ionScrollStart() {
+    this.isScrollingContent = true;
+  }
+
+  ionScrollEnd() {
+    this.isScrollingContent = false;
+  }
+
+  enterMultiSelectMode(firstSelectedItem?: GoProFile) {
+    if (this.multiSelectMode) return;
+    if (this.isScrollingContent) return;
+    if (firstSelectedItem) this.selectedGoProFiles.push(firstSelectedItem);
+    this.multiSelectMode = true;
+  }
+
+  exitMultiSelectMode() {
+    this.multiSelectMode = false;
+    this.selectedGoProFiles = [];
+  }
+
+  isItemInSelectedList(item: GoProFile) {
+    return this.selectedGoProFiles.find(i => i.url === item.url) !== undefined;
+  }
+
+  isItemInUploadList(item: GoProFile) {
+    return this.filesToUpload.find(i => i.url === item.url) !== undefined;
+  }
+
+  onUploadCancel() {
+    this.uploadInProgress = false;
+    this.filesToUpload = [];
+  }
 }

src/app/features/settings/go-pro/go-pro-media-loading-bar/go-pro-media-loading-bar.component.html

@@ -0,0 +1,9 @@
+<mat-toolbar color="background" class="thin-upload-bar" id="thin-upload-bar">
+  <span class="text spacer-text"> {{ loadingText }} </span>
+
+  <span class="spacer">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </span>
+
+  <mat-icon (click)="cancel()">cancel</mat-icon>
+</mat-toolbar>

src/app/features/settings/go-pro/go-pro-media-loading-bar/go-pro-media-loading-bar.component.scss

@@ -0,0 +1,30 @@
+.thin-upload-bar {
+  min-height: 32px;
+  height: 32px;
+  justify-content: stretch;
+  transition: all 1s;
+
+  .text {
+    flex-grow: 1;
+    font-size: 0.7em;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .spacer-text {
+    flex-grow: 0;
+  }
+
+  mat-icon {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+#thin-upload-bar {
+  height: 32px;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

src/app/features/settings/go-pro/go-pro-media-loading-bar/go-pro-media-loading-bar.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GoProMediaLoadingBarComponent } from './go-pro-media-loading-bar.component';
+
+describe('GoProMediaLoadingBarComponent', () => {
+  let component: GoProMediaLoadingBarComponent;
+  let fixture: ComponentFixture<GoProMediaLoadingBarComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [GoProMediaLoadingBarComponent],
+        imports: [IonicModule.forRoot()],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(GoProMediaLoadingBarComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});