sunbird-epub-player-v1 v5.0.0

Epub player library for Sunbird platform!

Contains Epub 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. For existing apps, follow these steps to begin using .

Step 1: Install the packages

npm install @project-sunbird/sunbird-epub-player-v9 --save
npm install @project-sunbird/sb-styles --save
npm install @project-sunbird/client-services --save
npm install epubjs --save

Step 2: Include the styles, scripts and assets in angular.json

"styles": [
...
...
"src/styles.css",
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
],
"scripts": [
...
...
"node_modules/epubjs/dist/epub.js"
]

Add following under architect.build.assets

 {
    ...
    "build": {
    
    "builder": "@angular-devkit/build-angular:browser",
    
    "options": {
	    ...
	    ...

	    "assets": [
	    
		   ...
		   ...
		    
		    {
			    "glob": "**/*.*",
			    "input": "./node_modules/@project-sunbird/sunbird-epub-player-v9/lib/assets/",
			    "output": "/assets/"
		    }
	    
	    ],

    "styles": [
    
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
    ],
    "scripts": [
     ...
     "node_modules/epubjs/dist/epub.js"
     ]
    ...
    ...

},

Step 3: Import the modules and components

Import the NgModule where you want to use. Also create a question-cursor-implementation.service

import { SunbirdEpubPlayerModule } from '@project-sunbird/sunbird-epub-player-v9';


@NgModule({
    ...
    
    imports: [SunbirdEpubPlayerModule]
    
    ...
})


export class TestAppModule { }

Step 4: Add css in global styles

body {
    background-color: white;
    height: 100%;
}
html {
    height: 100%;
}

Step 5: Send input to render Epub player

Use the mock config in your component to send input to Epub player Click to see the mock - playerConfig

Player config

var playerConfig = {
  "context": {
    "mode": "play",  // To identify preview used by the user to play/edit/preview
    "authToken": "", // Auth key to make  api calls
    "sid": "7283cf2e-d215-9944-b0c5-269489c6fa56", // User sessionid on portal or mobile 
    "did": "3c0a3724311fe944dec5df559cc4e006", // Unique id to identify the device or browser 
    "uid": "anonymous", // Current logged in user id
    "channel": "505c7c48ac6dc1edc9b08f21db5a571d", // Unique id of the channel(Channel ID)
    "pdata": {
      "id": "sunbird.portal", // Producer ID. For ex: For sunbird it would be "portal" or "genie"
      "ver": "3.2.12", // Version of the App
      "pid": "sunbird-portal.contentplayer" // Optional. In case the component is distributed, then which instance of that component
    },
    "contextRollup": { // Defines the content roll up data
      "l1": "505c7c48ac6dc1edc9b08f21db5a571d"
    },
    "tags": [ // Defines the tags data
      ""
    ],
    "cdata": [], // Defines correlation data
    "timeDiff": 0,  // Defines the time difference
    "objectRollup": {}, // Defines the object roll up data
    "host": "", // Defines the from which domain content should be load
    "endpoint": "", // Defines the end point
    "userData": {  // Defines the user data firstname & lastname
      "firstName": "",
      "lastName": ""
    }
  },
  "config": { 
	"traceId": "123456", // Defines trace id
    "sideMenu": { 
      "showShare": true,    // show/hide share button in side menu. default value is true
      "showDownload": true, // show/hide download button in side menu. default value is true
      "showReplay": false, // show/hide replay button in side menu. default value is false
      "showExit": true,   // show/hide exit button in side menu. default value is true
    }
  },
  "metadata": {}, // Content metadata json object (from API response take -> response.result.content)
} 

Telemetry property description

Config property description

Available components

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.

Follow below-mentioned steps to use it in plain javascript project:

• Insert library as below:

  	```javascript
  	<script type="text/javascript" src="sunbird-epub-player.js"></script>
  	```

• Get sample playerConfig from here: playerConfig

• Create a custom html element: sunbird-epub-player

  	```javascript

  const epubElement = document.createElement('sunbird-epub-player');

• Pass data using player-config

  	```javascript
  	epubElement.setAttribute('player-config', JSON.stringify(playerConfig));
  	```
  
  	**Note:** Attribute name should be in kebab-case regardless of the actual Attribute name used in the Angular app. The value of the attribute should be in **string** type, as web-component does not accept any objects or arrays.

• Listen for the output events: playerEvent and telemetryEvent

  	```javascript
  	epubElement.addEventListener('playerEvent', (event) => {
  		console.log("On playerEvent", event);
  	});
  	epubElement.addEventListener('telemetryEvent', (event) => {
  		console.log("On telemetryEvent", event);
  	});
  	```

• Append this element to existing element

  	```javascript
  	const  myPlayer = document.getElementById("my-player");
  	myPlayer.appendChild(epubPlayerElement);
  	```

• Refer demo example

• To run the project, we can directly run index.html file or can use local server to run the project.

•