SunbirdEd-Portal :: Configuring players as web components in portal

[princegupta1131]

SunbirdEd-Portal : Replacing library with web component for players

we followed the steps which is mentioned in readme file => https://github.com/project-sunbird/sunbird-pdf-player#readme

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

Aboved script using cdn link to get the src file. Instead we downloaded the script and created the folder inside the assets and placed the scripts inside Reflect.min.js

Modifed Script

 <script src= "src/app/client/src/assets/sunbird folder/Reflect.min.js"
  integrity="sha512-jvbPH2TH5BSZumEfOJZn9IV+5bSwwN+qG4dvthYe3KCGC3/9HmxZ4phADbt9Pfcp+XSyyfc2vGZ/RMsSUZ9tbQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Getting console errror while using Modifed Script

ERROR 1

do_21374332371538739211286:1 Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost:3000/src/app/client/src/assets/sunbird%20folder/Reflect.min.js' with computed SHA-512 integrity 'xj7wh+7zLi074m/tj/pDSJQtb+ySNiELF928ScefGch1M/MrFf+SwgMAicBobRvGkBgJGoYPjvLQLq5GbNWM9w=='. The resource has been blocked.

ERROR 2

Refused to execute script from 'http://localhost:3000/' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

ERROR 3:

sunbird-pdf-player.js:110 Uncaught TypeError: Reflect.hasOwnMetadata is not a function

@HarishGangula Could you please guide us on how to fix this Issue

CC: @rajeevsathish @vinukumar-vs @Krishnaj20

[HarishGangula]

@princegupta1131 instead of the Reflect.min.js with integrity use normal Reflect js file from cdn site

[princegupta1131]

Hi @HarishGangula When integrating the PDF player as a web-component, I am encountering the following error in portal. could you please help me to fix this error. CC: @vinukumar-vs @ @rajeevsathish

**Pdf-Player-Config : **

{
    "context": {
        "mode": "play",
        "partner": [],
        "pdata": {
            "id": "local.sunbird.portal",
            "ver": "5.2.0",
            "pid": "sunbird-portal"
        },
        "contentId": "do_21342502909490790413091",
        "sid": "AVXL12oCJbyfxjyzdBbnfSX8MlffeVEo",
        "uid": "fbe926ac-a395-40e4-a65b-9b4f711d7642",
        "timeDiff": -0.546,
        "contextRollup": {
            "l1": "01269878797503692810"
        },
        "channel": "01269878797503692810",
        "did": "8aa0f4ec1625511db1569d32e3555314",
        "dims": [
            "01269878797503692810",
            "01269878797503692810"
        ],
        "tags": [
            "01269878797503692810"
        ],
        "app": [
            "01269878797503692810"
        ],
        "userData": {
            "firstName": "tnorgadmin_update",
            "lastName": ""
        }
    },
    "config": {
        "showEndPage": false,
        "endPage": [
            {
                "template": "assessment",
                "contentType": [
                    "SelfAssess"
                ]
            }
        ],
        "showStartPage": true,
        "host": "",
        "overlay": {
            "showUser": false
        },
        "splash": {
            "text": "",
            "icon": "",
            "bgImage": "assets/icons/splacebackground_1.png",
            "webLink": ""
        },
        "apislug": "/action",
        "repos": [
            "/sunbird-plugins/renderer"
        ],
        "plugins": [
            {
                "id": "org.sunbird.iframeEvent",
                "ver": 1,
                "type": "plugin"
            },
            {
                "id": "org.sunbird.player.endpage",
                "ver": 1.1,
                "type": "plugin"
            }
        ],
        "sideMenu": {
            "showShare": true,
            "showDownload": true,
            "showExit": false
        },
        "enableTelemetryValidation": true
    },
    "metadata": {
        "copyright": "Kendriya_Vidyalaya,2020",
        "keywords": [
            "pdf"
        ],
        "subject": [
            "English"
        ],
        "channel": "01329314824202649627",
        "language": [
            "English"
        ],
        "mimeType": "application/pdf",
        "objectType": "Content",
        "gradeLevel": [
            "Class 1"
        ],
        "appIcon": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/do_21342502909490790413091/artifact/download-1.thumb.jpg",
        "primaryCategory": "Teacher Resource",
        "artifactUrl": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/do_21342502909490790413091/artifact/pdf_13.pdf",
        "contentType": "MarkingSchemeRubric",
        "identifier": "do_21342502909490790413091",
        "audience": [
            "Administrator"
        ],
        "visibility": "Default",
        "author": "kayal",
        "mediaType": "content",
        "osId": "org.ekstep.quiz.app",
        "languageCode": [
            "en"
        ],
        "license": "CC BY 4.0",
        "name": "PDF_13.pdf",
        "attributions": [
            "kanmani"
        ],
        "status": "Live",
        "code": "f105f70f-9c8a-a856-f606-45e8030a858d",
        "interceptionPoints": {},
        "description": "pdf",
        "streamingUrl": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/do_21342502909490790413091/artifact/pdf_13.pdf",
        "medium": [
            "English"
        ],
        "createdOn": "2021-12-07T07:50:33.678+0000",
        "lastUpdatedOn": "2022-12-15T08:53:28.160+0000",
        "originData": {
            "identifier": "do_21342502909490790413091",
            "repository": "https://dockstaging.sunbirded.org/api/content/v1/read/do_21342502909490790413091"
        },
        "creator": "Jaga stage ind contribute",
        "pkgVersion": 2,
        "versionKey": "1638863436290",
        "framework": "ekstep_ncert_k-12",
        "createdBy": "43018222-b41d-4d64-bc2e-a3e30606655a",
        "board": "CBSE/NCERT",
        "orgDetails": {
            "email": null,
            "orgName": "CBSE"
        },
        "licenseDetails": {
            "name": "CC BY 4.0",
            "url": "https://creativecommons.org/licenses/by/4.0/legalcode",
            "description": "For details see below:"
        }
    },
    "data": {}
}

[HarishGangula]

@princegupta1131 The pdf player config is not correct, Check the documentation for same

[princegupta1131]

Sure @HarishGangula Let me check this. Thank you !!

[princegupta1131]

Hi @HarishGangula I have refered the documentation => https://github.com/project-sunbird/sunbird-pdf-player/blob/release-5.2.0/web-component/index.html but there is no luck still getting below error. video and epub player is working but pdf having some issue. can you please Validate the Pdf-Player-Config . if any changes required please suggest. CC: @vinukumar-vs @ @rajeevsathish

pdf-player-config

{
    "context": {
        "mode": "play",
        "authToken": "",
        "sid": "4aa22afd-fa0c-430a-a9b4-2ad463065e04",
        "did": "285e997b5b90426d31a3d9400030b3cf",
        "uid": "anonymous",
        "channel": "01269878797503692810",
        "contextRollup": {
            "l1": "01269878797503692810"
        },
        "partner": [],
        "pdata": {
            "id": "local.sunbird.portal",
            "ver": "5.2.0",
            "pid": "sunbird-portal"
        },
        "tags": [
            "01269878797503692810"
        ],
        "cdata": [],
        "timeDiff": -0.455,
        "objectRollup": {},
        "host": "",
        "endpoint": "",
        "userData": {
            "firstName": "Guest",
            "lastName": ""
        },
        "contentId": "do_21374282058165452811276"
    },
    "config": {
        "traceId": "afhjgh",
        "sideMenu": {
            "showShare": true,
            "showDownload": true,
            "showReplay": true,
            "showExit": true
        }
    },
    "metadata": {
        "copyright": "Tamil nadu, MPPS GYARAGONDANAHALLI",
        "subject": [
            "Science"
        ],
        "channel": "01269878797503692810",
        "language": [
            "English"
        ],
        "mimeType": "application/pdf",
        "objectType": "Content",
        "gradeLevel": [
            "Class 8"
        ],
        "appIcon": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/do_21374282058165452811276/artifact/do_213269091461218304117_1619762141444_1.thumb.jpg",
        "primaryCategory": "Teacher Resource",
        "artifactUrl": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/assets/do_21374282058165452811276/sample-1.pdf",
        "contentType": "Resource",
        "identifier": "do_21374282058165452811276",
        "audience": [
            "Student"
        ],
        "visibility": "Default",
        "mediaType": "content",
        "osId": "org.ekstep.quiz.app",
        "languageCode": [
            "en"
        ],
        "license": "CC BY 4.0",
        "name": "SunbirdBootCamp123",
        "status": "Live",
        "code": "4108396e-0143-476d-8768-ee861e5ccdab",
        "interceptionPoints": {},
        "streamingUrl": "https://obj.stage.sunbirded.org/sunbird-content-staging/content/assets/do_21374282058165452811276/sample-1.pdf",
        "medium": [
            "English"
        ],
        "createdOn": "2023-02-28T13:20:03.039+0000",
        "copyrightYear": 2023,
        "lastUpdatedOn": "2023-02-28T13:27:32.179+0000",
        "creator": "Guest name changed",
        "pkgVersion": 1,
        "versionKey": "1677590628352",
        "framework": "tn_k-12_5",
        "createdBy": "fca2925f-1eee-4654-9177-fece3fd6afc9",
        "board": "State (Tamil Nadu)",
        "resourceType": "Learn",
        "orgDetails": {
            "email": null,
            "orgName": "Tamil nadu"
        },
        "licenseDetails": {
            "name": "CC BY 4.0",
            "url": "https://creativecommons.org/licenses/by/4.0/legalcode",
            "description": "For details see below:"
        }
    },
    "data": {}
}

[HarishGangula]

@princegupta1131 tried with same config in here and i am able to play the pdf

[princegupta1131]

Hi @HarishGangula I have shared the steps below that I used in Angular Portal. It would be helpful if you could confirm that this is the same procedure that you follow. CC: @vinukumar-vs @rajeevsathish

Steps 1: added script inside the index.html

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

Step 2: added pdf-player.js file in below path

src/app/client/src/assets/sunbird folder/sunbird-pdf-player/pdf-player.js

Step 3: imported these entries in angular json file inside styles

              "src/assets/sunbird folder/sunbird-epub-player/styles.css",
              "src/assets/sunbird folder/sunbird-pdf-player/styles.css",
              "src/assets/sunbird folder/sunbird-video-player/styles.css"

Step 4: imported these entries in angular json file inside scripts

 "src/assets/sunbird folder/sunbird-pdf-player/pdf-player.js",
              "src/assets/sunbird folder/sunbird-video-player/video-player.js",
              "src/assets/sunbird folder/sunbird-epub-player/epub-player.js",

Step 5: Imported CUSTOM_ELEMENTS_SCHEMA in app module & other required modules

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Step 6: added PLAYER_CONFIG in below path

src/app/client/src/app/modules/shared/services/config/app.config.json

Using below line of code to get the playerconfig details in player component

this.configService.appConfig.PLAYER_CONFIG

Steps 7: Imported sunbird-pdf-player in component

 <sunbird-pdf-player *ngIf="playerType === 'pdf-player'  && playerConfig !== null" [playerConfig]="playerConfig"
          (playerEvent)="eventHandler($event)" (telemetryEvent)="generateContentReadEvent($event, true)">
        </sunbird-pdf-player>

Folder Structure : pdf-player.js

[HarishGangula]

@princegupta1131 you check the sample examples for the same in the player repo

[arun1205]

@HarishGangula Tried mimicking the standalone app and it loads the pdf as expected

whereas when tried to use the same config object in co-kreat pdf doesn't load, though doesn't throw up errors as well

If we compare both the app's scripts files we can see the standalone app is able to load the viewer.js file which further loads the pdf.js and pdf-worker.js . This is not happening for the cokreat app.
I tried to load the viewer.js in index.html of cokreat, though no luck

https://github.com/santoshilimi/pdf-player-webcomponent-examples/tree/angular-web/angular-app/src/app

[HarishGangula]

@arun1205 Check if the assets are copied properly which will present in angular.json file for angular based project

[arun1205]

@HarishGangula Its the same assets folder which is used in both the projects
angular.json(independent angular proj)

angular.json(cokreat)

[sujithsojan]

SunbirdEd-Mobile : Replacing library with web component for video player.
followed the steps mentioned in https://github.com/Sunbird-Knowlg/sunbird-video-player/tree/release-5.3.0#readme
After this, the app is not opening with the following error

Uncaught RangeError: Maximum call stack size exceeded
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)
at le..get (video-player.js:25:2969)

@HarishGangula Please look into the issue.

[HarishGangula]

@sujithsojan Need more details about the issue when this issue occurs and did you try with the sample example given?

[arun1205]

@HarishGangula @sujithsojan I am also getting the same error when i try to load the video-player.js into sourcing app. I did try to create a standalone angular app and add the mentioned library files into it but that is also not able to load the video player though it does not throw any errors Uncaught RangeError: Maximum call stack size exceeded, but doesn't load the player as well

[sujithsojan]

@sujithsojan Need more details about the issue when this issue occurs and did you try with the sample example given?

I have tried with the example and issue occurs when we try to open the mobile app, it is stuck and throwing this error.

[HarishGangula]

@sujithsojan Need more details about the issue when this issue occurs and did you try with the sample example given?

I have tried with the example and issue occurs when we try to open the mobile app, it is stuck and throwing this error.

We have integrated to mobile app here please check

[arun1205]

The replace error above the pdf-library.js error is a non-blocking error from core.js and the player loaded from npm-modules works good with the same error, though it has to be fixed and we have identified it for fix

FYI the allocated memory for my machine for server run is 4 MB (typo i meant 4GB)
I have tried to increase till 8MB, but didn't work-out
set NODE_OPTIONS=--max_old_space_size=8096 @HarishGangula @vinukumar-vs

[HarishGangula]

@arun1205 This is not related to the player, I think you are running angular app along with the command option NODE_OPTIONS which it 4Gb for 4096 and 8GB for 8096, By looking at the screenshot looks like there is a memory leak issue in the portal for rxjs subscribers. Please cross-check and get back. Can you also check without player integration if it is working or not?

[arun1205]

@HarishGangula yes .. without player integration, it is working fine as expected

[HarishGangula]

@princegupta1131 @arun1205 I have done the pdf player web component integration with the angular app project here is the project for your reference.

cc: @pallakartheekreddy @vinukumar-vs

[arun1205]

@HarishGangula As mentioned earlier this has been done by us on the standalone app. The failure is happening when we integrate it with Sunbird ED/ Cokreat web application

[mithun30052001]

To : HarishGangula
Hi , When implementating of the sunbird-pdf-player as a web component in the sunbird-Ed portal encountering an issue with the styling of the pdf player.
Specifically, the problem revolves around the sunbird-pdf-palyer-container CSS class from the "node_modules/@project-sunbird/sunbird-pdf-player-web-component/sunbird-pdf-player.js". When integrated into my Angular application, the PDF player doesn't load in the correct format.
I have attached the format of the player after implementing pdf-player as Web component , When Custom Css is added to the Pdf Player this issue is resolved

cc:@pallakartheekreddy @vinukumar-vs @princegupta1131 @sedin-tushar