Skip to content

Commit

Permalink
Merge pull request #1520 from sultanmyrza/feature-try-2-play-go-pro-v…
Browse files Browse the repository at this point in the history
…ideos-with-native-players

Feature try 2 play go pro videos with native players
  • Loading branch information
shc261392 authored Apr 11, 2022
2 parents a98da47 + 3dc9cec commit 11c83e6
Show file tree
Hide file tree
Showing 17 changed files with 168 additions and 10 deletions.
3 changes: 3 additions & 0 deletions android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ android {
versionName "0.54.1"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildFeatures {
dataBinding true
}
buildTypes {
release {
minifyEnabled false
Expand Down
1 change: 1 addition & 0 deletions android/app/capacitor.build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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')

}
Expand Down
4 changes: 4 additions & 0 deletions android/app/src/main/assets/capacitor.plugins.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions android/capacitor.settings.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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')
1 change: 1 addition & 0 deletions ios/App/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
14 changes: 14 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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();
}
}
5 changes: 5 additions & 0 deletions src/app/features/settings/go-pro/go-pro-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -17,6 +18,10 @@ const routes: Routes = [
path: 'media-item-detail-on-camera',
component: GoProMediaItemDetailOnCameraComponent,
},
{
path: 'media-item-viewer',
component: GoProMediaViewerWithNativePlayerComponent,
},
];

@NgModule({
Expand Down
2 changes: 2 additions & 0 deletions src/app/features/settings/go-pro/go-pro.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -16,6 +17,7 @@ import { GoProPage } from './go-pro.page';
GoProMediaListItemOnCameraComponent,
GoProMediaItemDetailOnCameraComponent,
GoProMediaLoadingBarComponent,
GoProMediaViewerWithNativePlayerComponent,
],
})
export class GoProPageModule {}

0 comments on commit 11c83e6

Please sign in to comment.