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 <[email protected]> Co-authored-by: harishkumar gangula <[email protected]>
Sunbird-Knowlg · Sep 11, 2023 · d0a591c · d0a591c
1 parent ad3af3d
commit d0a591c
Show file tree

Hide file tree

Showing 40 changed files with 11,343 additions and 9,852 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "app",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "app",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

diff --git a/README.md b/README.md
@@ -1,10 +1,105 @@
 # Video player library for Sunbird platform!
 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.
 
-# Getting Started
-For help getting started with a new Angular app, check out the [Angular CLI](https://angular.io/cli).
-If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add sunbird-video-player library to it.
 
+# Getting Started with different integrations steps
+ 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.
+
+# Use as web components	
+Any web application can use this library as a web component. It accepts couple of inputs and triggers some events back to the application.
+
+Import this library in any web application and use the custom component.
+
+Follow below-mentioned steps to use it in plain javascript project:
+
+- Insert [library](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/sunbird-video-player.js) as below:
+	```javascript
+	<script type="text/javascript" src="sunbird-video-player.js"></script>
+	```
+- 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.
+- Get sample playerConfig from here: [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/src/app/data.ts)
+
+- Pass the QuestionListAPI baseUrl for eg. 
+	```javascript
+    window.questionListUrl = 'https://staging.sunbirded.org/api/question/v1/list';
+    window.questionSetBaseUrl = 'https://staging.sunbirded.org/api/questionset';
+    ```
+
+- Create a custom html element: `sunbird-video-player`
+	```javascript
+    const  videoElement = document.createElement('sunbird-video-player');
+   ```
+
+- Pass data using `player-config`
+	```javascript
+	videoElement.setAttribute('player-config', JSON.stringify(playerConfig));
+	```
+
+	**Note:** Attribute should be in **string** type
+
+- Listen for the output events: **playerEvent** and **telemetryEvent**
+
+	```javascript
+	videoElement.addEventListener('playerEvent', (event) => {
+		console.log("On playerEvent", event);
+	});
+	videoElement.addEventListener('telemetryEvent', (event) => {
+		console.log("On telemetryEvent", event);
+	});
+	```
+
+- Append this element to existing element
+	```javascript
+	const  myPlayer = document.getElementById("my-player");
+	myPlayer.appendChild(qumlPlayerElement);
+	```
+- Refer demo [example](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/index.html)
+
+# Use as Web component  in the Angular app
+
+- Copy the assets files from web component folder
+  [assets](https://github.com/project-sunbird/sunbird-video-player/tree/release-5.3.0/web-component/assets) to assets folder
+
+- 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.
+
+- Add the reflect-metadata script to index.html file
+	```javascript
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.13/Reflect.min.js"
+      integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ=="
+      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	```
+
+- Import  jquery in package json file(in dependencies) and do npm i
+
+	```javascript
+    "jquery": "^3.6.1",
+	```
+
+- Import  jquery in angular.json file inside scripts array
+
+	```javascript
+  "node_modules/jquery/dist/jquery.min.js"
+	```
+
+- Import  CUSTOM_ELEMENTS_SCHEMA in app module
+
+	```javascript
+  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+	```
+
+- Import  sunbird-video-player in component
+    ```bash
+    <sunbird-video-player  [playerConfig]="playerConfig" (playerEvent)="playerEvents($event)"
+    (telemetryEvent)="playerTelemetryEvents($event)"></sunbird-video-player>
+    ```
+
+- Provide input to render VIDEO player
+
+Use the mock config in your component to send input to VIDEO player
+Click to see the mock - [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-5.3.0/src/app/data.ts)
+**Note:** : Send input config as string 
+
+# Use as Angular library in angular app
 ## Step 1: Installation
 
 Just run the following:
@@ -227,7 +322,10 @@ var playerConfig = {
 
 <br /><br />
 
-# Mobile app integration steps 
+# Use as Web component in Mobile app 
+For existing apps, follow these steps [steps](README.md#use-as-web-component--in-the-angular-app) to begin using.
+
+# Use as Angular library in Mobile app
 For existing apps, follow these steps to begin using.
 
 ## Step 1: Install the packages
@@ -257,50 +355,4 @@ Click to see the input data - [playerConfig](README.md#step-4-send-input-to-rend
 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)
 <br /><br />
 
-# Use as web components	
-
-Import this library in any web application and use the custom component.
-
-Follow below-mentioned steps to use it in plain javascript project:
-
-- Insert [library](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/sunbird-video-player.js) as below:
-	```javascript
-	<script type="text/javascript" src="sunbird-video-player.js"></script>
-	```
-- 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.
-- Get sample playerConfig from here: [playerConfig](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/src/app/data.ts)
-
-- Pass the QuestionListAPI baseUrl for eg. 
-	```javascript
-    window.questionListUrl = 'https://staging.sunbirded.org/api/question/v1/list';
-    window.questionSetBaseUrl = 'https://staging.sunbirded.org/api/questionset';
-    ```
-  
-- Create a custom html element: `sunbird-video-player`
-	```javascript
-    const  videoElement = document.createElement('sunbird-video-player');
-   ```
-
-- Pass data using `player-config`
-	```javascript
-	videoElement.setAttribute('player-config', JSON.stringify(playerConfig));
-	```
-
-	**Note:** Attribute should be in **string** type
-
-- Listen for the output events: **playerEvent** and **telemetryEvent**
 
-	```javascript
-	videoElement.addEventListener('playerEvent', (event) => {
-		console.log("On playerEvent", event);
-	});
-	videoElement.addEventListener('telemetryEvent', (event) => {
-		console.log("On telemetryEvent", event);
-	});
-	```
-- Append this element to existing element
-	```javascript
-	const  myPlayer = document.getElementById("my-player");
-	myPlayer.appendChild(qumlPlayerElement);
-	```
-- Refer demo [example](https://github.com/project-sunbird/sunbird-video-player/blob/release-4.3.0/web-component/index.html)
diff --git a/angular.json b/angular.json
@@ -125,18 +125,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -156,15 +144,6 @@
               "devServerTarget": "sunbird-video-player-app:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -190,14 +169,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "projects/sunbird-video-player/tsconfig.lib.json",
-              "projects/sunbird-video-player/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "projects/sunbird-video-player/**/*.ts",
+              "projects/sunbird-video-player/**/*.html"
             ]
           }
         }
@@ -245,7 +221,7 @@
               "dist/sunbird-video-player/lib/assets/videojs-markers.js",
               "node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
               "node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js",
-              "dist/sunbird-video-player/lib/assets/videojs-transcript-click.min.js" 
+              "dist/sunbird-video-player/lib/assets/videojs-transcript-click.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -319,19 +295,6 @@
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/video-player-wc/tsconfig.app.json",
-              "projects/video-player-wc/tsconfig.spec.json",
-              "projects/video-player-wc/e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -343,12 +306,23 @@
               "devServerTarget": "video-player-wc:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/video-player-wc/**/*.ts",
+              "projects/video-player-wc/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-  "defaultProject": "sunbird-video-player-app",
   "cli": {
-    "analytics": "931de5e9-e583-4631-b69f-cd0c4f7c2030"
+    "analytics": "931de5e9-e583-4631-b69f-cd0c4f7c2030",
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
-}
+}
diff --git a/build-wc.js b/build-wc.js
@@ -4,17 +4,23 @@ const concat = require("concat");
 const build = async () => {
   const files = [
     "./dist/video-player-wc/runtime.js",
-    "./dist/video-player-wc/polyfills-es5.js",
     "./dist/video-player-wc/polyfills.js",
     "./dist/video-player-wc/scripts.js",
     "./dist/video-player-wc/vendor.js",
     "./dist/video-player-wc/main.js",
+    "web-component/assets/videojs-markers.js",
+    "web-component/assets/videojs-transcript-click.min.js",
+  ];
+  const cssFiles = [
+    "./dist/video-player-wc/styles.css",
+    "web-component/assets/videojs.markers.min.css",
   ];
-
   await fs.ensureDir("dist/video-player-wc");
+  // make signle js file for web component
   await concat(files, "web-component/sunbird-video-player.js");
   await fs.copy("./dist/video-player-wc/assets", "web-component/assets");
-  await fs.copy("./dist/video-player-wc/styles.css", "web-component/styles.css")
+  // make signle css file for web component
+  await concat(cssFiles, "web-component/styles.css");
   console.log("Files concatenated successfully!!!");
 };
 build();