From aa8e9d966e3467dd3283c272771839051ede9532 Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Tue, 20 Feb 2024 16:32:40 +0300 Subject: [PATCH 1/4] launching app on mobile device --- .../app/src/main/assets/capacitor.config.json | 1 + .../extension-app-native/capacitor.config.ts | 2 +- .../video-player/video-player.component.ts | 22 ++++++++++++++++--- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json index aca61dd95..d0daf3f88 100644 --- a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json +++ b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json @@ -24,6 +24,7 @@ "@capacitor-firebase/performance" ], "server": { + "url": "http://192.168.0.107:4200", "androidScheme": "http", "cleartext": true } diff --git a/apps/picsa-apps/extension-app-native/capacitor.config.ts b/apps/picsa-apps/extension-app-native/capacitor.config.ts index 60f8691f9..b4e4c21f2 100644 --- a/apps/picsa-apps/extension-app-native/capacitor.config.ts +++ b/apps/picsa-apps/extension-app-native/capacitor.config.ts @@ -44,7 +44,7 @@ const config: CapacitorConfig = { * See notes at https://docs.picsa.app/advanced/testing **/ - // url: 'http://192.168.50.67:4200', + // url: 'http://192.168.0.107:4200', androidScheme: 'http', /** diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts index 024bf5f7a..e7804f500 100644 --- a/libs/shared/src/features/video-player/video-player.component.ts +++ b/libs/shared/src/features/video-player/video-player.component.ts @@ -50,6 +50,8 @@ export class VideoPlayerComponent implements OnDestroy { /** Track any created object urls to dispose on destroy */ private objectUrl: string; + private pauseTime: number = 0; + constructor(private elementRef: ElementRef) {} async ngOnDestroy() { @@ -67,10 +69,17 @@ export class VideoPlayerComponent implements OnDestroy { public async playVideo() { // Remove thumbnail from future playback this.thumbnail = undefined; + if (Capacitor.isNativePlatform()) { + await this.videoPlayer.stopAllPlayers(); + this.initialised = false; + } + // Initialise player any time playback triggered in case url updated (e.g. downloaded after init) await this.initPlayer(); - await this.videoPlayer.stopAllPlayers(); await this.videoPlayer.play({ playerId: this.playerId }); + if (this.pauseTime > 0) { + await this.videoPlayer.setCurrentTime({ playerId: this.playerId, seektime: this.pauseTime }); + } } private async initPlayer() { @@ -149,8 +158,12 @@ export class VideoPlayerComponent implements OnDestroy { this.showPlayButton = false; } } - private async handlePlayerPause() { - this.showPlayButton = true; + + private handlePlayerPause(e: { fromPlayerId: string; currentTime: number }) { + if (e.fromPlayerId === this.playerId) { + this.pauseTime = e.currentTime; + this.showPlayButton = true; + } } private handlePlayerEnded() { @@ -158,6 +171,9 @@ export class VideoPlayerComponent implements OnDestroy { } private handlePlayerExit() { this.showPlayButton = true; + if (Capacitor.isNativePlatform()) { + this.initialised = false; + } } } From 0ebbe2460cb23358f86d8a42695f5f0de8bee1cd Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Tue, 20 Feb 2024 19:29:25 +0300 Subject: [PATCH 2/4] worked on the resume issue --- .../video-player/video-player.component.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts index e7804f500..a6b20ee82 100644 --- a/libs/shared/src/features/video-player/video-player.component.ts +++ b/libs/shared/src/features/video-player/video-player.component.ts @@ -70,16 +70,20 @@ export class VideoPlayerComponent implements OnDestroy { // Remove thumbnail from future playback this.thumbnail = undefined; if (Capacitor.isNativePlatform()) { + const storedPauseTime = this.pauseTime; await this.videoPlayer.stopAllPlayers(); this.initialised = false; + this.pauseTime = storedPauseTime; } - // Initialise player any time playback triggered in case url updated (e.g. downloaded after init) await this.initPlayer(); - await this.videoPlayer.play({ playerId: this.playerId }); - if (this.pauseTime > 0) { - await this.videoPlayer.setCurrentTime({ playerId: this.playerId, seektime: this.pauseTime }); - } + this.videoPlayer.play({ playerId: this.playerId }).then(() => { + if (this.pauseTime > 0) { + setTimeout(() => { + this.videoPlayer.setCurrentTime({ playerId: this.playerId, seektime: this.pauseTime }); + }, 500); + } + }); } private async initPlayer() { @@ -169,11 +173,9 @@ export class VideoPlayerComponent implements OnDestroy { private handlePlayerEnded() { this.showPlayButton = true; } - private handlePlayerExit() { + private handlePlayerExit(e: { currentTime: number }) { this.showPlayButton = true; - if (Capacitor.isNativePlatform()) { - this.initialised = false; - } + this.pauseTime = e.currentTime; } } From 634fa7cba4cab448acefc504965d47baa85d82c5 Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Thu, 22 Feb 2024 21:08:44 -0800 Subject: [PATCH 3/4] fix: video player screen orientation --- .../android/app/capacitor.build.gradle | 1 + .../app/src/main/assets/capacitor.config.json | 4 ++-- .../app/src/main/assets/capacitor.plugins.json | 4 ++++ .../android/capacitor.settings.gradle | 3 +++ .../extension-app-native/capacitor.config.ts | 3 ++- .../video-player/video-player.component.ts | 7 ++++++- package.json | 3 ++- yarn.lock | 14 ++++++++++++-- 8 files changed, 32 insertions(+), 7 deletions(-) diff --git a/apps/picsa-apps/extension-app-native/android/app/capacitor.build.gradle b/apps/picsa-apps/extension-app-native/android/app/capacitor.build.gradle index c3748cdbb..fb3785a60 100644 --- a/apps/picsa-apps/extension-app-native/android/app/capacitor.build.gradle +++ b/apps/picsa-apps/extension-app-native/android/app/capacitor.build.gradle @@ -19,6 +19,7 @@ dependencies { implementation project(':capacitor-community-firebase-analytics') implementation project(':capacitor-community-firebase-crashlytics') implementation project(':capacitor-firebase-performance') + implementation project(':capacitor-screen-orientation') implementation "androidx.webkit:webkit:1.4.0" implementation "androidx.legacy:legacy-support-v4:1.0.0" } diff --git a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json index d0daf3f88..833fdb3c0 100644 --- a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json +++ b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json @@ -21,10 +21,10 @@ "capacitor-video-player", "@capacitor-community/firebase-analytics", "@capacitor-community/firebase-crashlytics", - "@capacitor-firebase/performance" + "@capacitor-firebase/performance", + "@capacitor/screen-orientation" ], "server": { - "url": "http://192.168.0.107:4200", "androidScheme": "http", "cleartext": true } diff --git a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.plugins.json b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.plugins.json index 8b1ef0188..bb0d087b5 100644 --- a/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.plugins.json +++ b/apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.plugins.json @@ -38,5 +38,9 @@ { "pkg": "@capacitor-firebase/performance", "classpath": "io.capawesome.capacitorjs.plugins.firebase.performance.FirebasePerformancePlugin" + }, + { + "pkg": "@capacitor/screen-orientation", + "classpath": "com.capacitorjs.plugins.screenorientation.ScreenOrientationPlugin" } ] diff --git a/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle b/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle index 77c168a17..ad0f47c86 100644 --- a/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle +++ b/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle @@ -31,3 +31,6 @@ project(':capacitor-community-firebase-crashlytics').projectDir = new File('../. include ':capacitor-firebase-performance' project(':capacitor-firebase-performance').projectDir = new File('../../../../node_modules/@capacitor-firebase/performance/android') + +include ':capacitor-screen-orientation' +project(':capacitor-screen-orientation').projectDir = new File('../../../../node_modules/@capacitor/screen-orientation/android') diff --git a/apps/picsa-apps/extension-app-native/capacitor.config.ts b/apps/picsa-apps/extension-app-native/capacitor.config.ts index b4e4c21f2..af4c5e7c4 100644 --- a/apps/picsa-apps/extension-app-native/capacitor.config.ts +++ b/apps/picsa-apps/extension-app-native/capacitor.config.ts @@ -29,6 +29,7 @@ const config: CapacitorConfig = { '@capacitor-community/firebase-analytics', '@capacitor-community/firebase-crashlytics', '@capacitor-firebase/performance', + '@capacitor/screen-orientation', ], // Enable app to use native http for requests (bypass cors) // https://capacitorjs.com/docs/apis/http @@ -44,7 +45,7 @@ const config: CapacitorConfig = { * See notes at https://docs.picsa.app/advanced/testing **/ - // url: 'http://192.168.0.107:4200', + // url: 'http://192.168.50.67:4200', androidScheme: 'http', /** diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts index a6b20ee82..5e97225eb 100644 --- a/libs/shared/src/features/video-player/video-player.component.ts +++ b/libs/shared/src/features/video-player/video-player.component.ts @@ -1,5 +1,6 @@ import { Component, ElementRef, HostBinding, Input, OnDestroy } from '@angular/core'; import { Capacitor } from '@capacitor/core'; +import { ScreenOrientation } from '@capacitor/screen-orientation'; import { CapacitorVideoPlayer, CapacitorVideoPlayerPlugin, capVideoPlayerOptions } from 'capacitor-video-player'; // Fix listeners missing from type @@ -173,9 +174,13 @@ export class VideoPlayerComponent implements OnDestroy { private handlePlayerEnded() { this.showPlayButton = true; } - private handlePlayerExit(e: { currentTime: number }) { + private async handlePlayerExit(e: { currentTime: number }) { this.showPlayButton = true; this.pauseTime = e.currentTime; + // Ensure player does not stay stuck in landscape mode + if (Capacitor.isNativePlatform()) { + await ScreenOrientation.unlock(); + } } } diff --git a/package.json b/package.json index 0bcc3777f..114c0c2a0 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@capacitor/device": "^5.0.6", "@capacitor/filesystem": "^5.1.4", "@capacitor/network": "^5.0.6", + "@capacitor/screen-orientation": "^5.0.7", "@ngx-translate/core": "~15.0.0", "@ngx-translate/http-loader": "~8.0.0", "@nx/angular": "17.1.2", @@ -75,7 +76,7 @@ "@uppy/tus": "^3.4.0", "c3": "^0.7.20", "capacitor-blob-writer": "^1.1.14", - "capacitor-video-player": "^5.0.3", + "capacitor-video-player": "^5.5.1", "cordova-plugin-codeplay-share-own-apk": "0.0.7", "cordova-plugin-file": "^8.0.1", "cordova-plugin-file-opener2": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index 585033f0e..115872e01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2336,6 +2336,15 @@ __metadata: languageName: node linkType: hard +"@capacitor/screen-orientation@npm:^5.0.7": + version: 5.0.7 + resolution: "@capacitor/screen-orientation@npm:5.0.7" + peerDependencies: + "@capacitor/core": ^5.0.0 + checksum: 0ae635df7c4c2cea494d3a746ec257327568b66210b8acf16e8e4f6ce696c8eeca5fdb465d6cd756a2f2e4469cb918bab6b74b4abfeffad8cc6946f2ab15c248 + languageName: node + linkType: hard + "@colors/colors@npm:1.5.0": version: 1.5.0 resolution: "@colors/colors@npm:1.5.0" @@ -9428,7 +9437,7 @@ __metadata: languageName: node linkType: hard -"capacitor-video-player@npm:^5.0.3": +"capacitor-video-player@npm:^5.5.1": version: 5.5.1 resolution: "capacitor-video-player@npm:5.5.1" peerDependencies: @@ -17527,6 +17536,7 @@ __metadata: "@capacitor/device": ^5.0.6 "@capacitor/filesystem": ^5.1.4 "@capacitor/network": ^5.0.6 + "@capacitor/screen-orientation": ^5.0.7 "@ngx-translate/core": ~15.0.0 "@ngx-translate/http-loader": ~8.0.0 "@nx/angular": 17.1.2 @@ -17570,7 +17580,7 @@ __metadata: autoprefixer: ^10.4.0 c3: ^0.7.20 capacitor-blob-writer: ^1.1.14 - capacitor-video-player: ^5.0.3 + capacitor-video-player: ^5.5.1 cordova-plugin-codeplay-share-own-apk: 0.0.7 cordova-plugin-file: ^8.0.1 cordova-plugin-file-opener2: ^4.0.0 From 705d3f9bca41bceeef1c08c0685d539ef987f10a Mon Sep 17 00:00:00 2001 From: chrismclarke Date: Thu, 22 Feb 2024 21:34:24 -0800 Subject: [PATCH 4/4] chore: code tidying --- .../src/features/video-player/video-player.component.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts index 5e97225eb..e1bc806e7 100644 --- a/libs/shared/src/features/video-player/video-player.component.ts +++ b/libs/shared/src/features/video-player/video-player.component.ts @@ -70,11 +70,9 @@ export class VideoPlayerComponent implements OnDestroy { public async playVideo() { // Remove thumbnail from future playback this.thumbnail = undefined; + await this.videoPlayer.stopAllPlayers(); if (Capacitor.isNativePlatform()) { - const storedPauseTime = this.pauseTime; - await this.videoPlayer.stopAllPlayers(); this.initialised = false; - this.pauseTime = storedPauseTime; } // Initialise player any time playback triggered in case url updated (e.g. downloaded after init) await this.initPlayer();