diff --git a/android/app/build.gradle b/android/app/build.gradle index 874c579a3..1f74d8a69 100644 --- 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 index e390d9e4a..8dc57e7fc 100644 --- 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 index aa76ce170..c2efb9086 100644 --- 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 index 72c6a0451..00fd4567c 100644 --- 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 index 39afafc75..4af80fd62 100644 --- 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 index f7d0fd4e3..fc1c8d8ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,6 +46,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", @@ -4116,6 +4117,14 @@ "node": ">=10" } }, + "node_modules/@numbersprotocol/preview-video": { + "version": "0.0.1", + "resolved": "git+ssh://git@github.com/numbersprotocol/preview-video.git#2d19456109c8c9d364324d9c08e766580256f1f7", + "license": "MIT", + "peerDependencies": { + "@capacitor/core": "^3.0.0" + } + }, "node_modules/@schematics/angular": { "version": "12.2.4", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.4.tgz", @@ -28212,6 +28221,11 @@ } } }, + "@numbersprotocol/preview-video": { + "version": "git+ssh://git@github.com/numbersprotocol/preview-video.git#2d19456109c8c9d364324d9c08e766580256f1f7", + "from": "@numbersprotocol/preview-video@github:numbersprotocol/preview-video", + "requires": {} + }, "@schematics/angular": { "version": "12.2.4", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-12.2.4.tgz", diff --git a/package.json b/package.json index 7b35fb03e..f26844384 100644 --- 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 index 1ce9a20cf..20ebddae1 100644 --- 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" > - +
+
+ + play_circle_outline +
{{ t('gopro.connectedWiFi') }}: {{ connectedWifiSSID }} {{ t('gopro.uploadToCapture') }} -

{{ t('gopro.makeSureYouAreConnectedToGoProWiFiFirst') }}

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 new file mode 100644 index 000000000..d76d5520c --- /dev/null +++ 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 @@ + + + + +

go-pro-media-viewer-with-native-player

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 new file mode 100644 index 000000000..70df54079 --- /dev/null +++ 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 new file mode 100644 index 000000000..cc7bfa756 --- /dev/null +++ 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; + + 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 new file mode 100644 index 000000000..181740813 --- /dev/null +++ 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 index 04bc09385..4c63210fc 100644 --- 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 index 8b8e739e6..b4f8d245c 100644 --- 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 {}