Skip to content

Commit d0a591c

Browse files
pallakartheekreddysantoshilimiHarishGangula
authored
Merge Release 5.4.0 into Master (#141)
* Issue #KN-617 feat: Video Player angular version update from 12 to 13 * Issue #KN-617 feat: Video Player tslint update to eslint * Issue #KN-617 feat: Video Player tslint update to eslint * Issue #KN-617 feat: Video Player angular version update from 12 to 13 * Issue #KN-617 feat: Video Player readme file updated with different integration steps * Issue #KN-617 feat: Video Player readme file updated with different integration steps * Issue #KN-617 feat: Video Player angular version update from 12 to 13 * Issue #KN-617 feat: Video Player angular version update from 13 to 14 * Issue #KN-617 feat: updated script for single css and js file for web component * Issue #KN-617 feat: Video Player angular version update from 13 to 14 * Issue #KN-617 feat: Minified the css and js files * Issue #KN-617 feat: updated script for single css and js file for web component * Issue #KN-733 feat: visited length issue fixed * Issue KN-733 feat: updated web component * Issue #733 feat: visited length issue fix * Issue #733 feat: added unique visited length * Issue #733 fix: updated visited time spent * Issue #733 fix: updated visited time spent * Issue #KN-710 fix: updated visited time spent * Issue #KN-710 fix: test cases * Issue #KN-710 feat: updated the summary key name * Issue #KN-710 fix: summary event data * Issue #710 fix: config warning fix --------- Co-authored-by: Santosh Mattikoppa <santosh.mattikoppa@ilimi.in> Co-authored-by: harishkumar gangula <harish@sanketika.in>
1 parent ad3af3d commit d0a591c

40 files changed

Lines changed: 11343 additions & 9852 deletions

‎.eslintrc.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"root": true,
3+
"ignorePatterns": [
4+
"projects/**/*"
5+
],
6+
"overrides": [
7+
{
8+
"files": [
9+
"*.ts"
10+
],
11+
"parserOptions": {
12+
"project": [
13+
"tsconfig.json",
14+
"e2e/tsconfig.json"
15+
],
16+
"createDefaultProgram": true
17+
},
18+
"extends": [
19+
"plugin:@angular-eslint/recommended",
20+
"plugin:@angular-eslint/template/process-inline-templates"
21+
],
22+
"rules": {
23+
"@angular-eslint/component-selector": [
24+
"error",
25+
{
26+
"prefix": "app",
27+
"style": "kebab-case",
28+
"type": "element"
29+
}
30+
],
31+
"@angular-eslint/directive-selector": [
32+
"error",
33+
{
34+
"prefix": "app",
35+
"style": "camelCase",
36+
"type": "attribute"
37+
}
38+
]
39+
}
40+
},
41+
{
42+
"files": [
43+
"*.html"
44+
],
45+
"extends": [
46+
"plugin:@angular-eslint/template/recommended"
47+
],
48+
"rules": {}
49+
}
50+
]
51+
}

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ speed-measure-plugin.json
3333
.history/*
3434

3535
# misc
36+
/.angular/cache
3637
/.sass-cache
3738
/connect.lock
3839
/coverage

‎README.md‎

Lines changed: 102 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,105 @@
11
# Video player library for Sunbird platform!
22
Contains Video player library components powered by angular. These components are designed to be used in sunbird consumption platforms *(mobile app, web portal, offline desktop app)* to drive reusability, maintainability hence reducing the redundant development effort significantly.
33

4-
# Getting Started
5-
For help getting started with a new Angular app, check out the [Angular CLI](https://angular.io/cli).
6-
If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add sunbird-video-player library to it.
74

5+
# Getting Started with different integrations steps
6+
The Video player can be integrated as web component in plain javascript projects and as web component in angular apps and also as angular library in angular and mobile applications.
7+
8+
# Use as web components
9+
Any web application can use this library as a web component. It accepts couple of inputs and triggers some events back to the application.
10+
11+
Import this library in any web application and use the custom component.
12+
13+
Follow below-mentioned steps to use it in plain javascript project:
14+
15+
- Insert [library](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/sunbird-video-player.js) as below:
16+
```javascript
17+
<script type="text/javascript" src="sunbird-video-player.js"></script>
18+
```
19+
- Create a asset folder and copy all the files from [here](https://github.com/project-sunbird/sunbird-video-player/tree/release-4.3.0/web-component/assets), library requires these assets internally to work well.
20+
- Get sample playerConfig from here: [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/src/app/data.ts)
21+
22+
- Pass the QuestionListAPI baseUrl for eg.
23+
```javascript
24+
window.questionListUrl = 'https://staging.sunbirded.org/api/question/v1/list';
25+
window.questionSetBaseUrl = 'https://staging.sunbirded.org/api/questionset';
26+
```
27+
28+
- Create a custom html element: `sunbird-video-player`
29+
```javascript
30+
const videoElement = document.createElement('sunbird-video-player');
31+
```
32+
33+
- Pass data using `player-config`
34+
```javascript
35+
videoElement.setAttribute('player-config', JSON.stringify(playerConfig));
36+
```
37+
38+
**Note:** Attribute should be in **string** type
39+
40+
- Listen for the output events: **playerEvent** and **telemetryEvent**
41+
42+
```javascript
43+
videoElement.addEventListener('playerEvent', (event) => {
44+
console.log("On playerEvent", event);
45+
});
46+
videoElement.addEventListener('telemetryEvent', (event) => {
47+
console.log("On telemetryEvent", event);
48+
});
49+
```
50+
51+
- Append this element to existing element
52+
```javascript
53+
const myPlayer = document.getElementById("my-player");
54+
myPlayer.appendChild(qumlPlayerElement);
55+
```
56+
- Refer demo [example](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/index.html)
57+
58+
# Use as Web component in the Angular app
59+
60+
- Copy the assets files from web component folder
61+
[assets](https://github.com/project-sunbird/sunbird-video-player/tree/release-5.3.0/web-component/assets) to assets folder
62+
63+
- Create libs/sunbird-video-player folder inside assets folder, and copy [sunbird-video-player.js](https://github.com/project-sunbird/sunbird-video-player/blob/release-5.3.0/web-component/sunbird-video-player.js) and [styles.css](https://github.com/project-sunbird/sunbird-video-player/blob/release-5.3.0/web-component/styles.css). and Add/import these entries in angular json file inside scripts and styles respectively.
64+
65+
- Add the reflect-metadata script to index.html file
66+
```javascript
67+
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.min.js"
68+
integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ=="
69+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
70+
```
71+
72+
- Import jquery in package json file(in dependencies) and do npm i
73+
74+
```javascript
75+
"jquery": "^3.6.1",
76+
```
77+
78+
- Import jquery in angular.json file inside scripts array
79+
80+
```javascript
81+
"node_modules/jquery/dist/jquery.min.js"
82+
```
83+
84+
- Import CUSTOM_ELEMENTS_SCHEMA in app module
85+
86+
```javascript
87+
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
88+
```
89+
90+
- Import sunbird-video-player in component
91+
```bash
92+
<sunbird-video-player [playerConfig]="playerConfig" (playerEvent)="playerEvents($event)"
93+
(telemetryEvent)="playerTelemetryEvents($event)"></sunbird-video-player>
94+
```
95+
96+
- Provide input to render VIDEO player
97+
98+
Use the mock config in your component to send input to VIDEO player
99+
Click to see the mock - [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-5.3.0/src/app/data.ts)
100+
**Note:** : Send input config as string
101+
102+
# Use as Angular library in angular app
8103
## Step 1: Installation
9104
10105
Just run the following:
@@ -227,7 +322,10 @@ var playerConfig = {
227322

228323
<br /><br />
229324

230-
# Mobile app integration steps
325+
# Use as Web component in Mobile app
326+
For existing apps, follow these steps [steps](README.md#use-as-web-component--in-the-angular-app) to begin using.
327+
328+
# Use as Angular library in Mobile app
231329
For existing apps, follow these steps to begin using.
232330

233331
## Step 1: Install the packages
@@ -257,50 +355,4 @@ Click to see the input data - [playerConfig](README.md#step-4-send-input-to-rend
257355
Click to see the sample code - [sampleCode](https://github.com/Sunbird-Ed/SunbirdEd-mobile-app/blob/release-4.8.0/src/app/player/player.page.html)
258356
<br /><br />
259357

260-
# Use as web components
261-
262-
Import this library in any web application and use the custom component.
263-
264-
Follow below-mentioned steps to use it in plain javascript project:
265-
266-
- Insert [library](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/sunbird-video-player.js) as below:
267-
```javascript
268-
<script type="text/javascript" src="sunbird-video-player.js"></script>
269-
```
270-
- Create a asset folder and copy all the files from [here](https://github.com/project-sunbird/sunbird-video-player/tree/release-4.3.0/web-component/assets), library requires these assets internally to work well.
271-
- Get sample playerConfig from here: [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/src/app/data.ts)
272-
273-
- Pass the QuestionListAPI baseUrl for eg.
274-
```javascript
275-
window.questionListUrl = 'https://staging.sunbirded.org/api/question/v1/list';
276-
window.questionSetBaseUrl = 'https://staging.sunbirded.org/api/questionset';
277-
```
278-
279-
- Create a custom html element: `sunbird-video-player`
280-
```javascript
281-
const videoElement = document.createElement('sunbird-video-player');
282-
```
283-
284-
- Pass data using `player-config`
285-
```javascript
286-
videoElement.setAttribute('player-config', JSON.stringify(playerConfig));
287-
```
288-
289-
**Note:** Attribute should be in **string** type
290-
291-
- Listen for the output events: **playerEvent** and **telemetryEvent**
292358

293-
```javascript
294-
videoElement.addEventListener('playerEvent', (event) => {
295-
console.log("On playerEvent", event);
296-
});
297-
videoElement.addEventListener('telemetryEvent', (event) => {
298-
console.log("On telemetryEvent", event);
299-
});
300-
```
301-
- Append this element to existing element
302-
```javascript
303-
const myPlayer = document.getElementById("my-player");
304-
myPlayer.appendChild(qumlPlayerElement);
305-
```
306-
- Refer demo [example](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/index.html)

‎angular.json‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -125,18 +125,6 @@
125125
"src/assets"
126126
]
127127
}
128-
},
129-
"lint": {
130-
"builder": "@angular-devkit/build-angular:tslint",
131-
"options": {
132-
"tsConfig": [
133-
"src/tsconfig.app.json",
134-
"src/tsconfig.spec.json"
135-
],
136-
"exclude": [
137-
"**/node_modules/**"
138-
]
139-
}
140128
}
141129
}
142130
},
@@ -156,15 +144,6 @@
156144
"devServerTarget": "sunbird-video-player-app:serve:production"
157145
}
158146
}
159-
},
160-
"lint": {
161-
"builder": "@angular-devkit/build-angular:tslint",
162-
"options": {
163-
"tsConfig": "e2e/tsconfig.e2e.json",
164-
"exclude": [
165-
"**/node_modules/**"
166-
]
167-
}
168147
}
169148
}
170149
},
@@ -190,14 +169,11 @@
190169
}
191170
},
192171
"lint": {
193-
"builder": "@angular-devkit/build-angular:tslint",
172+
"builder": "@angular-eslint/builder:lint",
194173
"options": {
195-
"tsConfig": [
196-
"projects/sunbird-video-player/tsconfig.lib.json",
197-
"projects/sunbird-video-player/tsconfig.spec.json"
198-
],
199-
"exclude": [
200-
"**/node_modules/**"
174+
"lintFilePatterns": [
175+
"projects/sunbird-video-player/**/*.ts",
176+
"projects/sunbird-video-player/**/*.html"
201177
]
202178
}
203179
}
@@ -245,7 +221,7 @@
245221
"dist/sunbird-video-player/lib/assets/videojs-markers.js",
246222
"node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
247223
"node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js",
248-
"dist/sunbird-video-player/lib/assets/videojs-transcript-click.min.js"
224+
"dist/sunbird-video-player/lib/assets/videojs-transcript-click.min.js"
249225
],
250226
"vendorChunk": true,
251227
"extractLicenses": false,
@@ -319,19 +295,6 @@
319295
"scripts": []
320296
}
321297
},
322-
"lint": {
323-
"builder": "@angular-devkit/build-angular:tslint",
324-
"options": {
325-
"tsConfig": [
326-
"projects/video-player-wc/tsconfig.app.json",
327-
"projects/video-player-wc/tsconfig.spec.json",
328-
"projects/video-player-wc/e2e/tsconfig.json"
329-
],
330-
"exclude": [
331-
"**/node_modules/**"
332-
]
333-
}
334-
},
335298
"e2e": {
336299
"builder": "@angular-devkit/build-angular:protractor",
337300
"options": {
@@ -343,12 +306,23 @@
343306
"devServerTarget": "video-player-wc:serve:production"
344307
}
345308
}
309+
},
310+
"lint": {
311+
"builder": "@angular-eslint/builder:lint",
312+
"options": {
313+
"lintFilePatterns": [
314+
"projects/video-player-wc/**/*.ts",
315+
"projects/video-player-wc/**/*.html"
316+
]
317+
}
346318
}
347319
}
348320
}
349321
},
350-
"defaultProject": "sunbird-video-player-app",
351322
"cli": {
352-
"analytics": "931de5e9-e583-4631-b69f-cd0c4f7c2030"
323+
"analytics": "931de5e9-e583-4631-b69f-cd0c4f7c2030",
324+
"schematicCollections": [
325+
"@angular-eslint/schematics"
326+
]
353327
}
354-
}
328+
}

‎build-wc.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,23 @@ const concat = require("concat");
44
const build = async () => {
55
const files = [
66
"./dist/video-player-wc/runtime.js",
7-
"./dist/video-player-wc/polyfills-es5.js",
87
"./dist/video-player-wc/polyfills.js",
98
"./dist/video-player-wc/scripts.js",
109
"./dist/video-player-wc/vendor.js",
1110
"./dist/video-player-wc/main.js",
11+
"web-component/assets/videojs-markers.js",
12+
"web-component/assets/videojs-transcript-click.min.js",
13+
];
14+
const cssFiles = [
15+
"./dist/video-player-wc/styles.css",
16+
"web-component/assets/videojs.markers.min.css",
1217
];
13-
1418
await fs.ensureDir("dist/video-player-wc");
19+
// make signle js file for web component
1520
await concat(files, "web-component/sunbird-video-player.js");
1621
await fs.copy("./dist/video-player-wc/assets", "web-component/assets");
17-
await fs.copy("./dist/video-player-wc/styles.css", "web-component/styles.css")
22+
// make signle css file for web component
23+
await concat(cssFiles, "web-component/styles.css");
1824
console.log("Files concatenated successfully!!!");
1925
};
2026
build();

0 commit comments

Comments
 (0)