Feature try 2 play go pro videos with native players

android/app/build.gradle

@@ -10,6 +10,9 @@ android {
         versionName "0.54.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
+    buildFeatures {
+        dataBinding true
+    }
     buildTypes {
         release {
             minifyEnabled false

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-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-video",
+		"classpath": "io.numbersprotocol.capturelite.plugins.previewvideo.PreviewVideoPlugin"
+	},
 	{
 		"pkg": "capacitor-blob-writer",
 		"classpath": "com.equimaps.capacitorblobwriter.BlobWriter"

android/capacitor.settings.gradle

@@ -50,5 +50,8 @@ 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-video'
+project(':numbersprotocol-preview-video').projectDir = new File('../node_modules/@numbersprotocol/preview-video/android')
+
 include ':capacitor-blob-writer'
 project(':capacitor-blob-writer').projectDir = new File('../node_modules/capacitor-blob-writer/android')

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 'NumbersprotocolPreviewVideo', :path => '../../node_modules/@numbersprotocol/preview-video'
   pod 'CapacitorBlobWriter', :path => '../../node_modules/capacitor-blob-writer'
 end
 

package.json

@@ -29,7 +29,7 @@
     "@angular/platform-browser-dynamic": "^12.2.4",
     "@angular/router": "^12.2.4",
     "@capacitor-community/bluetooth-le": "^1.7.0",
-    "@capacitor-community/http": "^1.4.1",
+    "@capacitor-community/http": "github:numbersprotocol/http#fix-catch-disabled-Local-Network-case-on-iOS",
     "@capacitor-community/wifi": "github:numbersprotocol/community-capacitor-wifi#capacitor3",
     "@capacitor/android": "https://gitpkg.now.sh/numbersprotocol/capacitor/android?release-3.4.1-range-request-fix",
     "@capacitor/app": "^1.1.0",
@@ -57,6 +57,7 @@
     "@ngx-formly/core": "^5.10.22",
     "@ngx-formly/material": "^5.10.22",
     "@ngx-formly/schematics": "^5.10.22",
+    "@numbersprotocol/preview-video": "github:numbersprotocol/preview-video",
     "async-mutex": "^0.3.2",
     "buffer": "^5.7.1",
     "capacitor-blob-writer": "^1.0.4",

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

@@ -172,7 +172,7 @@ export class HomePage {
         takePicture: null,
         recordVideo: null,
       }),
-      this.goProBluetoothService.connectedDevice$,
+      this.goProBluetoothService.lastConnectedDevice$,
     ]).pipe(
       first(),
       concatMap(([translations, connectedDevice]) => {

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

@@ -15,15 +15,16 @@
       loading="lazy"
     ></ion-img>
 
-    <video
-      *ngIf="mediaType === 'video'"
-      controls
-      playsinline
-      preload="metadata"
-    >
-      <source src="{{ mediaFile!.url }}#t=0.1" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video>
+    <div class="video-placeholder" (click)="playVideoFullScreen()">
+      <div class="play-icon"></div>
+      <ion-img
+        *ngIf="mediaType === 'video'"
+        [src]="mediaFile!.thumbnailUrl"
+        decoding="async"
+        loading="lazy"
+      ></ion-img>
+      <mat-icon class="play-icon">play_circle_outline</mat-icon>
+    </div>
 
     <div class="spacer"></div>
     <ion-button

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

@@ -2,6 +2,23 @@ ion-img {
   height: 350px;
 }
 
+.video-placeholder {
+  height: 350px;
+  position: relative;
+}
+
+.play-icon {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 175px; // half of video-placeholder height
+  transform: translateY(-36px); // half of play-icon height
+  margin: 0 auto;
+  font-size: 72px;
+  height: 72px;
+  width: 72px;
+}
+
 video {
   background-color: black;
   width: 100%;

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

@@ -46,6 +46,13 @@ export class GoProMediaItemDetailOnCameraComponent implements OnInit {
     this.mediaType = getFileType(this.mediaFile?.url);
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  playVideoFullScreen() {
+    this.router.navigate(['/settings', 'go-pro', 'media-item-viewer'], {
+      state: { goProMediaFile: this.mediaFile },
+    });
+  }
+
   async uploadToCapture() {
     const allowed = await this.allowUploadWithMobileInternet();
     if (allowed) {

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

@@ -26,6 +26,7 @@ <h4>{{ t('gopro.connectedWiFi') }}: {{ connectedWifiSSID }}</h4>
   <ion-button
     *ngIf="!isConnectedToGoProWifi"
     (click)="connectToGoProWifi()"
+    [disabled]="isConnectingToGoProWifi"
     class="connect-to-go-pro-wifi-btn"
   >
     {{ t('gopro.connectToGoProWiFi') }}
@@ -40,7 +41,6 @@ <h4>{{ t('gopro.connectedWiFi') }}: {{ connectedWifiSSID }}</h4>
     {{ t('gopro.uploadToCapture') }}
   </ion-button>
 
-  <!-- TODO: att translate text -->
   <h4 *ngIf="shouldConnectToWiFi" class="should-connect-to-wifi-text">
     {{ t('gopro.makeSureYouAreConnectedToGoProWiFiFirst') }}
   </h4>

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

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import {
   AlertController,
   NavController,
+  Platform,
   ToastController,
 } from '@ionic/angular';
 import { GoProFile } from '../go-pro-media-file';
@@ -25,6 +26,7 @@ export class GoProMediaListOnCameraComponent implements OnInit {
 
   connectedWifiSSID: string | null = null;
   isConnectedToGoProWifi: boolean | undefined;
+  isConnectingToGoProWifi: boolean | undefined;
 
   isScrollingContent = false;
 
@@ -42,6 +44,7 @@ export class GoProMediaListOnCameraComponent implements OnInit {
     private readonly alertCtrl: AlertController,
     private readonly goProBluetoothService: GoProBluetoothService,
     private readonly goProWifiService: GoProWifiService,
+    private readonly platform: Platform,
     public toastController: ToastController
   ) {}
 
@@ -64,21 +67,34 @@ export class GoProMediaListOnCameraComponent implements OnInit {
       this.fetchingFilesError = undefined;
       this.fetchingFiles = true;
       this.allMediaFiles = await this.goProMediaService.getFilesFromGoPro();
-      this.fetchingFiles = false;
     } catch (error: any) {
-      this.fetchingFilesError = error.toString();
+      this.fetchingFilesError = 'Failed to fetch media from GoPro';
+      if (this.platform.is('ios')) {
+        this.fetchingFilesError =
+          'Please check iOS Settings > Capture > Local Network, make sure the permission of Local Network is allowed Capture app.';
+      }
       this.allMediaFiles = [];
+    } finally {
       this.fetchingFiles = false;
     }
   }
 
   async connectToGoProWifi() {
     try {
+      this.isConnectingToGoProWifi = true;
+
+      if (!(await this.goProBluetoothService.getConnectedDevice())) {
+        alert('Connect to GoPro via bluetooth first');
+        // I need to show alert because when catching error below for some reason it's empty
+        throw new Error('Connect to GoPro via bluetooth first');
+      }
       this.connectedWifiSSID = await this.goProWifiService.connectToGoProWiFi();
       this.isConnectedToGoProWifi = true;
       await this.fetchFilesFromGoProWiFi();
     } catch (error) {
       this.presentToast(JSON.stringify(error));
+    } finally {
+      this.isConnectingToGoProWifi = false;
     }
   }
 

src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.html

@@ -0,0 +1,5 @@
+<ion-button (click)="dismiss()" color="light" fill="clear" class="dismiss">
+  <ion-icon name="arrow-back-outline" slot="icon-only"></ion-icon>
+</ion-button>
+
+<p>go-pro-media-viewer-with-native-player</p>

src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.scss

@@ -0,0 +1,15 @@
+:host {
+  background-color: black;
+}
+
+.dismiss {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  width: 48px;
+  height: 48px;
+
+  --border-radius: 50%;
+  --padding-end: 0;
+  --padding-start: 0;
+}

src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.spec.ts

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

src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
+import { PreviewVideo } from '@numbersprotocol/preview-video';
+import { GoProFile } from '../go-pro-media-file';
+
+@Component({
+  selector: 'app-go-pro-media-viewer-with-native-player',
+  templateUrl: './go-pro-media-viewer-with-native-player.component.html',
+  styleUrls: ['./go-pro-media-viewer-with-native-player.component.scss'],
+})
+export class GoProMediaViewerWithNativePlayerComponent
+  implements OnInit, OnDestroy
+{
+  mediaFile: GoProFile | undefined;
+
+  onIOSPlayerDismissedListener?: any;
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly navController: NavController
+  ) {
+    this.route.queryParams.subscribe(_ => {
+      const state = this.router.getCurrentNavigation()?.extras.state;
+      if (state) {
+        this.mediaFile = state.goProMediaFile;
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    if (!this.mediaFile?.url) return;
+    PreviewVideo.playFullScreenFromRemote({ url: this.mediaFile.url });
+    PreviewVideo.addListener('iosPlayerDismissed', (_info: any) => {
+      // eslint-disable-next-line no-console
+      console.log('ITS WORKING');
+      this.navController.back();
+    });
+  }
+
+  ngOnDestroy(): void {
+    PreviewVideo.stopFullScreen();
+    // TODO: check if .remove() really get called
+    this.onIOSPlayerDismissedListener?.remove();
+  }
+
+  dismiss() {
+    PreviewVideo.stopFullScreen();
+    this.navController.back();
+  }
+}