Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add native video player for the user manual #172

Merged
merged 12 commits into from
Sep 20, 2023
Merged
4 changes: 2 additions & 2 deletions .github/workflows/android-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

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

7 changes: 5 additions & 2 deletions apps/picsa-apps/extension-app-native/android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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"))
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down
1 change: 1 addition & 0 deletions apps/picsa-apps/extension-app-native/capacitor.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: [],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion libs/environments/src/version.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ import packageJson from '../../../package.json';

export const APP_VERSION = {
number: packageJson.version,
date: '2023-09-18',
date: '2023-09-19',
};
1 change: 1 addition & 0 deletions libs/shared/src/features/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './animations';
export * from './charts';
export * from './dialog';
export * from './map';
export * from './video-player';
17 changes: 17 additions & 0 deletions libs/shared/src/features/video-player/index.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Original file line number Diff line number Diff line change
@@ -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>
Loading
Loading