Merge pull request #172 from e-picsa/fix/native-video-player

Add native video player for the user manual
e-picsa · Sep 20, 2023 · ba284fe · ba284fe
2 parents 37ae2f2 + 93e49bc
commit ba284fe
Show file tree

Hide file tree

Showing 29 changed files with 380 additions and 602 deletions.
diff --git a/.github/workflows/android-release.yml b/.github/workflows/android-release.yml
@@ -59,11 +59,11 @@ jobs:
       - name: Sync Capacitor
         run: npx cap sync
         working-directory: apps/picsa-apps/extension-app-native
-      - name: Set up JDK 11
+      - name: Set up JDK 17
         uses: actions/setup-java@v2
         with:
           distribution: 'zulu'
-          java-version: '11'
+          java-version: '17'
           java-package: jdk
           cache: 'gradle'
       - name: Setup Android SDK

diff --git a/apps/picsa-apps/extension-app-native/android/.idea/misc.xml b/apps/picsa-apps/extension-app-native/android/.idea/misc.xml
diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/apps/picsa-apps/extension-app-native/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3033000
-        versionName "3.33.0"
+        versionCode 3034000
+        versionName "3.34.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -41,6 +41,9 @@ dependencies {
     androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
     implementation project(':capacitor-cordova-android-plugins')
 
+    // Required for capacitor-video-player
+    implementation 'com.google.android.gms:play-services-cast-framework:21.2.0'
+
     implementation(platform("com.google.firebase:firebase-bom:32.3.1"))
 }
 

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
@@ -14,6 +14,7 @@ dependencies {
     implementation project(':capacitor-device')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-blob-writer')
+    implementation project(':capacitor-video-player')
     implementation project(':capacitor-community-firebase-analytics')
     implementation project(':capacitor-community-firebase-crashlytics')
     implementation project(':capacitor-firebase-performance')

diff --git a/apps/picsa-apps/extension-app-native/android/app/src/main/AndroidManifest.xml b/apps/picsa-apps/extension-app-native/android/app/src/main/AndroidManifest.xml
@@ -9,6 +9,12 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/AppTheme">
+
+        <!-- Required for capacitor-video-player -->
+        <meta-data
+            android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
+            android:value="com.google.android.exoplayer2.ext.cast.DefaultCastOptionsProvider">
+        </meta-data>
 
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"

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
@@ -1,28 +1,29 @@
 {
-	"appId": "io.picsa.extension",
-	"appName": "PICSA Extension",
-	"webDir": "../../../dist/apps/picsa-apps/extension-app",
-	"bundledWebRuntime": false,
-	"includePlugins": [
-		"@awesome-cordova-plugins/file-opener",
-		"cordova-plugin-file-opener2",
-		"@awesome-cordova-plugins/file",
-		"cordova-plugin-file",
-		"@awesome-cordova-plugins/social-sharing",
-		"cordova-plugin-x-socialsharing",
-		"cordova-plugin-codeplay-share-own-apk",
-		"@capacitor/app",
-		"@capacitor/browser",
-		"@capacitor/core",
-		"@capacitor/device",
-		"@capacitor/filesystem",
-		"capacitor-blob-writer",
-		"@capacitor-community/firebase-analytics",
-		"@capacitor-community/firebase-crashlytics",
-		"@capacitor-firebase/performance"
-	],
-	"server": {
-		"androidScheme": "http",
-		"cleartext": true
-	}
+  "appId": "io.picsa.extension",
+  "appName": "PICSA Extension",
+  "webDir": "../../../dist/apps/picsa-apps/extension-app",
+  "bundledWebRuntime": false,
+  "includePlugins": [
+    "@awesome-cordova-plugins/file-opener",
+    "cordova-plugin-file-opener2",
+    "@awesome-cordova-plugins/file",
+    "cordova-plugin-file",
+    "@awesome-cordova-plugins/social-sharing",
+    "cordova-plugin-x-socialsharing",
+    "cordova-plugin-codeplay-share-own-apk",
+    "@capacitor/app",
+    "@capacitor/browser",
+    "@capacitor/core",
+    "@capacitor/device",
+    "@capacitor/filesystem",
+    "capacitor-blob-writer",
+    "capacitor-video-player",
+    "@capacitor-community/firebase-analytics",
+    "@capacitor-community/firebase-crashlytics",
+    "@capacitor-firebase/performance"
+  ],
+  "server": {
+    "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
@@ -19,6 +19,10 @@
 		"pkg": "capacitor-blob-writer",
 		"classpath": "com.equimaps.capacitorblobwriter.BlobWriter"
 	},
+	{
+		"pkg": "capacitor-video-player",
+		"classpath": "com.jeep.plugin.capacitor.capacitorvideoplayer.CapacitorVideoPlayerPlugin"
+	},
 	{
 		"pkg": "@capacitor-community/firebase-analytics",
 		"classpath": "com.getcapacitor.community.firebaseanalytics.FirebaseAnalytics"

diff --git a/...tension-app-native/android/app/src/main/java/io/picsa/extension_toolkit/MainActivity.java b/...tension-app-native/android/app/src/main/java/io/picsa/extension_toolkit/MainActivity.java
@@ -3,4 +3,10 @@
 import com.getcapacitor.BridgeActivity;
 
 public class MainActivity extends BridgeActivity {
+  // required for capacitor-video-player
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    CastContext.getSharedInstance(this);
+  }
 }
diff --git a/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle b/apps/picsa-apps/extension-app-native/android/capacitor.settings.gradle
@@ -17,6 +17,9 @@ project(':capacitor-filesystem').projectDir = new File('../../../../node_modules
 include ':capacitor-blob-writer'
 project(':capacitor-blob-writer').projectDir = new File('../../../../node_modules/capacitor-blob-writer/android')
 
+include ':capacitor-video-player'
+project(':capacitor-video-player').projectDir = new File('../../../../node_modules/capacitor-video-player/android')
+
 include ':capacitor-community-firebase-analytics'
 project(':capacitor-community-firebase-analytics').projectDir = new File('../../../../node_modules/@capacitor-community/firebase-analytics/android')
 

diff --git a/apps/picsa-apps/extension-app-native/capacitor.config.ts b/apps/picsa-apps/extension-app-native/capacitor.config.ts
@@ -24,6 +24,7 @@ const config: CapacitorConfig = {
     '@capacitor/device',
     '@capacitor/filesystem',
     'capacitor-blob-writer',
+    'capacitor-video-player',
     '@capacitor-community/firebase-analytics',
     '@capacitor-community/firebase-crashlytics',
     '@capacitor-firebase/performance',

diff --git a/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.html b/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.html
@@ -1,19 +1,19 @@
 <div class="page-container">
   <h2>{{ activity?.label }}</h2>
 
-  <video class="video-player" [src]="activity?.video" controls></video>
+  <picsa-video-player *ngIf="activity?.video" [url]="activity?.video"></picsa-video-player>
 
   <div class="svg-row">
     <div class="svg-item">
-      <mat-icon color="primary" svgIcon="picsa_manual_info"></mat-icon>
+      <mat-icon class="row-mat-icon" color="primary" svgIcon="picsa_manual_info"></mat-icon>
       <div>{{ 'Info Sheet' | translate }}</div>
     </div>
     <div class="svg-item">
-      <mat-icon color="primary" svgIcon="picsa_manual_create"></mat-icon>
+      <mat-icon class="row-mat-icon" color="primary" svgIcon="picsa_manual_create"></mat-icon>
       <div>{{ 'Create' | translate }}</div>
     </div>
     <div class="svg-item">
-      <mat-icon color="primary" svgIcon="picsa_manual_quiz"></mat-icon>
+      <mat-icon class="row-mat-icon" color="primary" svgIcon="picsa_manual_quiz"></mat-icon>
       <div>{{ 'Quiz' | translate }}</div>
     </div>
   </div>

diff --git a/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.scss b/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.scss
@@ -1,34 +1,30 @@
-.page-container{
-    padding-left: 1rem;
-    padding-right: 1rem;
-    width: 90%;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+.page-container {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
-h2{
-    margin-bottom: 2rem;
+h2 {
+  margin-bottom: 2rem;
 }
-.video-player{
-    width: 70%;
-    margin-bottom: 2rem;
+.svg-row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  margin-top: 3rem;
+  justify-content: space-evenly;
+  align-items: center;
 }
-.svg-row{
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    margin-top: 3rem;
-    justify-content: space-evenly;
-    align-items: center;
-}
-mat-icon{
-    height: 3rem;
-    width: 3rem;
+.row-mat-icon {
+  height: 3rem;
+  width: 3rem;
 }
 
-.svg-item{
-   flex-direction: column;
-   display: flex;
-   align-items: center;
-   gap:.5rem
-}
+.svg-item {
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.ts b/apps/picsa-tools/manual-tool/src/app/pages/activity-details/activity-details.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { IManualActivity, PICSA_MANUAL_GRID_DATA_EXTENSION } from '../../data';
+import { IManualActivity, PICSA_MANUAL_GRID_DATA_EXTENSION } from '../../data/manual-contents';
 
 @Component({
   selector: 'picsa-manual-activity-details',
@@ -12,7 +12,7 @@ export class ActivityDetailsComponent implements OnInit {
   activity?: IManualActivity;
 
   constructor(private route: ActivatedRoute) {}
-  ngOnInit() {
+  async ngOnInit() {
     const activityId = this.route.snapshot.params.id;
     if (activityId) {
       this.activity = PICSA_MANUAL_GRID_DATA_EXTENSION.find((activity) => activity.id === activityId);

diff --git a/apps/picsa-tools/manual-tool/src/app/pages/activity/activity.module.ts b/apps/picsa-tools/manual-tool/src/app/pages/activity/activity.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { Route, RouterModule } from '@angular/router';
+import { PicsaVideoPlayerModule } from '@picsa/shared/features';
 import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 import { ManualToolComponentsModule } from '../../components/components.module';
@@ -20,7 +21,14 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, ManualToolComponentsModule,MatIconModule, RouterModule.forChild(routes), PicsaTranslateModule],
+  imports: [
+    CommonModule,
+    ManualToolComponentsModule,
+    MatIconModule,
+    RouterModule.forChild(routes),
+    PicsaTranslateModule,
+    PicsaVideoPlayerModule,
+  ],
   exports: [],
   declarations: [ActivityComponent, ActivityDetailsComponent],
   providers: [],

diff --git a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
@@ -44,8 +44,8 @@
   "covers/facebook.svg": {
     "relativePath": "covers/facebook.svg",
     "size_kb": 1.1,
-    "md5Checksum": "8626bc9119bd6b8bc0fa04e8a20b6e74",
-    "modifiedTime": "2022-09-28T20:19:52.986Z"
+    "md5Checksum": "a09b2f44f6b44b5b6e29aedba9f92029",
+    "modifiedTime": "2023-07-10T22:11:12.359Z"
   },
   "covers/gap.jpg": {
     "relativePath": "covers/gap.jpg",
@@ -61,9 +61,9 @@
   },
   "covers/gender-equality.svg": {
     "relativePath": "covers/gender-equality.svg",
-    "size_kb": 5.5,
-    "md5Checksum": "0b6599c4d8b3a87b787910b18a9d8851",
-    "modifiedTime": "2022-11-01T20:27:18.286Z"
+    "size_kb": 5.4,
+    "md5Checksum": "95af38f37c2179d4ad0c5288cbb236ed",
+    "modifiedTime": "2023-07-10T22:11:12.359Z"
   },
   "covers/gras-nelk.jpg": {
     "relativePath": "covers/gras-nelk.jpg",
@@ -110,8 +110,8 @@
   "covers/spreadsheet.svg": {
     "relativePath": "covers/spreadsheet.svg",
     "size_kb": 2.8,
-    "md5Checksum": "a03a4bfb0a1791fda8e232a8b032715b",
-    "modifiedTime": "2022-09-30T09:35:53.529Z"
+    "md5Checksum": "0a1bc91188bbc03fda0a7cb2bc1aa6ce",
+    "modifiedTime": "2023-07-10T22:11:12.360Z"
   },
   "covers/twitter.png": {
     "relativePath": "covers/twitter.png",
@@ -122,8 +122,8 @@
   "covers/weather.svg": {
     "relativePath": "covers/weather.svg",
     "size_kb": 3.1,
-    "md5Checksum": "db07c7d20d9520124c251c810c5817fd",
-    "modifiedTime": "2022-09-28T19:22:58.064Z"
+    "md5Checksum": "ca87f24916d258b8b8b5dd8343d4305b",
+    "modifiedTime": "2023-07-10T22:11:12.360Z"
   },
   "covers/whatsapp.svg": {
     "relativePath": "covers/whatsapp.svg",

diff --git a/libs/environments/src/version.ts b/libs/environments/src/version.ts
@@ -4,5 +4,5 @@ import packageJson from '../../../package.json';
 
 export const APP_VERSION = {
   number: packageJson.version,
-  date: '2023-09-18',
+  date: '2023-09-19',
 };
diff --git a/libs/shared/src/features/index.ts b/libs/shared/src/features/index.ts
@@ -2,3 +2,4 @@ export * from './animations';
 export * from './charts';
 export * from './dialog';
 export * from './map';
+export * from './video-player';
diff --git a/libs/shared/src/features/video-player/index.ts b/libs/shared/src/features/video-player/index.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { VideoPlayerComponent } from './video-player.component';
+
+@NgModule({
+  imports: [CommonModule, MatButtonModule, MatIconModule],
+  exports: [VideoPlayerComponent],
+  declarations: [VideoPlayerComponent],
+  providers: [],
+})
+/**
+ * Provide a `<picsa-video-player>` component that plays videos on web or native device
+ */
+export class PicsaVideoPlayerModule {}
diff --git a/libs/shared/src/features/video-player/video-player.component.html b/libs/shared/src/features/video-player/video-player.component.html
@@ -0,0 +1,6 @@
+<div class="placeholder" [id]="playerId" #playerEl slot="fixed">
+  <button *ngIf="showPlayButton" mat-fab color="primary" class="play-button" (click)="playVideo()" [disabled]="!url">
+    <mat-icon>play_arrow</mat-icon>
+  </button>
+  <p *ngIf="!url" class="error-message mat-error">No Video Selected</p>
+</div>