Merge pull request #1520 from sultanmyrza/feature-try-2-play-go-pro-videos-with-native-players

shc261392 · web-flow · commit 11c83e6a1b74 · 2022-04-11T19:00:19.000+08:00
Feature try 2 play go pro videos with native players
diff --git a/android/app/build.gradle b/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
diff --git a/android/app/capacitor.build.gradle b/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')
 
 }
diff --git a/android/app/src/main/assets/capacitor.plugins.json b/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"
diff --git a/android/capacitor.settings.gradle b/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')
diff --git a/ios/App/Podfile b/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
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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-video": "github:numbersprotocol/preview-video",
     "async-mutex": "^0.3.2",
     "buffer": "^5.7.1",
     "capacitor-blob-writer": "^1.0.4",
diff --git a/src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.html b/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
diff --git a/src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.scss b/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%;
diff --git a/src/app/features/settings/go-pro/go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component.ts b/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) {
diff --git a/src/app/features/settings/go-pro/go-pro-media-list-on-camera/go-pro-media-list-on-camera.component.html b/src/app/features/settings/go-pro/go-pro-media-list-on-camera/go-pro-media-list-on-camera.component.html
@@ -41,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>
diff --git a/src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.html b/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>
diff --git a/src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.scss b/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;
+}
diff --git a/src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.spec.ts b/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();
+  });
+});
diff --git a/src/app/features/settings/go-pro/go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component.ts b/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();
+  }
+}
diff --git a/src/app/features/settings/go-pro/go-pro-routing.module.ts b/src/app/features/settings/go-pro/go-pro-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { GoProMediaItemDetailOnCameraComponent } from './go-pro-media-item-detail-on-camera/go-pro-media-item-detail-on-camera.component';
 import { GoProMediaListOnCameraComponent } from './go-pro-media-list-on-camera/go-pro-media-list-on-camera.component';
+import { GoProMediaViewerWithNativePlayerComponent } from './go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component';
 import { GoProPage } from './go-pro.page';
 
 const routes: Routes = [
@@ -17,6 +18,10 @@ const routes: Routes = [
     path: 'media-item-detail-on-camera',
     component: GoProMediaItemDetailOnCameraComponent,
   },
+  {
+    path: 'media-item-viewer',
+    component: GoProMediaViewerWithNativePlayerComponent,
+  },
 ];
 
 @NgModule({
diff --git a/src/app/features/settings/go-pro/go-pro.module.ts b/src/app/features/settings/go-pro/go-pro.module.ts
@@ -5,6 +5,7 @@ import { GoProMediaItemDetailOnCameraComponent } from './go-pro-media-item-detai
 import { GoProMediaListItemOnCameraComponent } from './go-pro-media-list-item-on-camera/go-pro-media-list-item-on-camera.component';
 import { GoProMediaListOnCameraComponent } from './go-pro-media-list-on-camera/go-pro-media-list-on-camera.component';
 import { GoProMediaLoadingBarComponent } from './go-pro-media-loading-bar/go-pro-media-loading-bar.component';
+import { GoProMediaViewerWithNativePlayerComponent } from './go-pro-media-viewer-with-native-player/go-pro-media-viewer-with-native-player.component';
 import { GoProPageRoutingModule } from './go-pro-routing.module';
 import { GoProPage } from './go-pro.page';
 
@@ -16,6 +17,7 @@ import { GoProPage } from './go-pro.page';
     GoProMediaListItemOnCameraComponent,
     GoProMediaItemDetailOnCameraComponent,
     GoProMediaLoadingBarComponent,
+    GoProMediaViewerWithNativePlayerComponent,
   ],
 })
 export class GoProPageModule {}

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ dependencies {`
`25`	`25`	`implementation project(':capacitor-share')`
`26`	`26`	`implementation project(':capacitor-splash-screen')`
`27`	`27`	`implementation project(':capacitor-storage')`
	`28`	`+ implementation project(':numbersprotocol-preview-video')`
`28`	`29`	`implementation project(':capacitor-blob-writer')`
`29`	`30`
`30`	`31`	`}`