Merge pull request #237 from e-picsa/ft-video-playback-bug

farmer activity video playback resume

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"
 }

apps/picsa-apps/extension-app-native/android/app/src/main/assets/capacitor.config.json

@@ -21,7 +21,8 @@
 		"capacitor-video-player",
 		"@capacitor-community/firebase-analytics",
 		"@capacitor-community/firebase-crashlytics",
-		"@capacitor-firebase/performance"
+		"@capacitor-firebase/performance",
+		"@capacitor/screen-orientation"
 	],
 	"server": {
 		"androidScheme": "http",

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"
 	}
 ]

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')

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

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
@@ -50,6 +51,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<HTMLDivElement>) {}
 
   async ngOnDestroy() {
@@ -67,10 +70,19 @@ export class VideoPlayerComponent implements OnDestroy {
   public async playVideo() {
     // Remove thumbnail from future playback
     this.thumbnail = undefined;
+    await this.videoPlayer.stopAllPlayers();
+    if (Capacitor.isNativePlatform()) {
+      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 });
+    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() {
@@ -149,15 +161,24 @@ 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() {
     this.showPlayButton = true;
   }
-  private handlePlayerExit() {
+  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();
+    }
   }
 }
 

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",

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