Skip to content

Latest commit

 

History

History
358 lines (280 loc) · 15.5 KB

README.md

File metadata and controls

358 lines (280 loc) · 15.5 KB

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 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 as below:

     <script type="text/javascript" src="sunbird-video-player.js"></script>
  • Create a asset folder and copy all the files from here, library requires these assets internally to work well.

  • Get sample playerConfig from here: playerConfig

  • Pass the QuestionListAPI baseUrl for eg.

     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

     const  videoElement = document.createElement('sunbird-video-player');
  • Pass data using player-config

     videoElement.setAttribute('player-config', JSON.stringify(playerConfig));

    Note: Attribute should be in string type

  • Listen for the output events: playerEvent and telemetryEvent

     videoElement.addEventListener('playerEvent', (event) => {
     	console.log("On playerEvent", event);
     });
     videoElement.addEventListener('telemetryEvent', (event) => {
     	console.log("On telemetryEvent", event);
     });
  • Append this element to existing element

     const  myPlayer = document.getElementById("my-player");
     myPlayer.appendChild(qumlPlayerElement);
  • Refer demo example

Use as Web component in the Angular app

  • Copy the assets files from web component folder assets to assets folder

  • Create libs/sunbird-video-player folder inside assets folder, and copy sunbird-video-player.js and 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

       <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

     "jquery": "^3.6.1",
  • Import jquery in angular.json file inside scripts array

    "node_modules/jquery/dist/jquery.min.js"
  • Import CUSTOM_ELEMENTS_SCHEMA in app module

    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  • Import sunbird-video-player in component

    <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 Note: : Send input config as string

Use as Angular library in angular app

Step 1: Installation

Just run the following:

ng add @project-sunbird/sunbird-video-player-v9

It will install sunbird-video-player for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option

ng add @project-sunbird/sunbird-video-player-v9 --project myProject

Manual installation

If you prefer not to use schematics or want to add sunbird-video-player-v9 to an older project, you'll need to do the following:

Click here to show detailed instructions!

1. Install the packages:

  npm install @project-sunbird/sunbird-video-player-v9 --save
  npm install @project-sunbird/sunbird-quml-player-v9 --save
  npm install @project-sunbird/sb-styles --save
  npm install @project-sunbird/client-services --save
  npm install lodash-es --save
  npm install ngx-bootstrap --save
  npm install jquery --save
  npm install video.js --save
  npm install videojs-contrib-quality-levels --save
  npm install videojs-http-source-selector --save

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

"styles": [
...
...
"src/styles.css",
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
"./node_modules/video.js/dist/video-js.min.css",
"./node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
"./node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
],
"scripts": [
...
...
"node_modules/jquery/dist/jquery.min.js",
"node_modules/video.js/dist/video.js",
"node_modules/@project-sunbird/sunbird-video-player-v9/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"
]

Add following under architect.build.assets

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

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

    "styles": [
    
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
    "./node_modules/video.js/dist/video-js.min.css",
    "./node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
    "./node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
    ],
    "scripts": [
     ...
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/video.js/dist/video.js",
     "node_modules/@project-sunbird/sunbird-video-player-v9/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"
     ]
    ...
    ...

},

Step 2: Import the modules and components

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

    import { SunbirdVideoPlayerModule } from '@project-sunbird/sunbird-video-player-v9';
    import { QuestionCursor } from '@project-sunbird/sunbird-quml-player-v9';
    import { QuestionCursorImplementationService } from './question-cursor-implementation.service';

    
    @NgModule({
	    ...
	    
	    imports: [SunbirdVideoPlayerModule],
	    providers: [{ provide: QuestionCursor, useClass: QuestionCursorImplementationService }],
	    
	    ...
    })

  
    export class TestAppModule { }

  

Step 3: Send input to render VIDEO player

Use the mock config in your component to send input to VIDEO 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": "afhjgh", // 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": true, // show/hide replay button in side menu. default value is true
      "showExit": true,   // show/hide exit button in side menu. default value is true
    },
       // tslint:disable-next-line:max-line-length
    "transcripts": [] // for default selection we need this , ex: ['kn', 'en'] the last element in the array will be used for default selection and no need of default selection than no need send this in config or send empty array [] or ['off'] 
  },
  "metadata": { // Content metadata json object (from API response take -> response.result.content)
  "transcripts": [] // Defines the details of the transcripts data array and each object in array conatins details of language,languageCode, identifier, artifactUrl of each transcript
  }, 
}        

Telemetry property description

Property Name Description Default Value
context It is an object it contains the uid,did,sid,mode etc., these will be logged inside the telemetry {}
mode It is string to identify preview used by the user to play/edit/preview play
authToken It is string and Auth key to make api calls ''
sid It is string and User sessionid on portal or mobile ''
did It is string and Unique id to identify the device or browser ''
uid It is string and Current logged in user id ''
channel It is string which defines channel identifier to know which channel is currently using. in.sunbird
pdata It is an object which defines the producer information it should have identifier and version and canvas will log in the telemetry {'id':'in.sunbird', 'ver':'1.0'}
contextRollup It is an object which defines content roll up data {}
tags It is an array which defines the tag data []
objectRollup It is an object which defines object rollup data {}
host It is string which defines the from which domain content should be load window.location.origin
userData It is an object which defines user data {}
cdata It is an array which defines the correlation data []

Config property description

Property Name Description Default Value
config It is an object it contains the sideMenu, these will be used to configure the canvas { traceId: "12345", sideMenu: {"showShare": true, "showDownload": true, "showReplay": true, "showExit": true}}
config.traceId It is string which defines the trace id ''
config.sideMenu.showShare It is boolean to show/hide share button in side menu true
config.sideMenu.showDownload It is boolean to show/hide download button in side menu true
config.sideMenu.showReplay It is boolean to show/hide replay button in side menu true
config.sideMenu.showExit It is boolean to show/hide exit button in side menu true
config.transcripts It is Array which defines the transcripts default selection details []
metadata It is an object which defines content metadata json object (from API response take -> response.result.content) {}
metadata.transcripts It is Array which is having the details of the transcripts data []

Available components

Feature Notes Selector Code Input Output
Video Player Can be used to render videos sunbird-video-player <sunbird-video-player [playerConfig]="playerConfig"><sunbird-video-player> playerConfig,action playerEvent, telemetryEvent



Use as Web component in Mobile app

For existing apps, follow these steps steps to begin using.

Use as Angular library in Mobile app

For existing apps, follow these steps to begin using.

Step 1: Install the packages

Click to see the steps - InstallPackages

Step 2: Include the sb-styles and assets in angular.json

Click to see the steps - IncludeStyles , but use src/global.scss instead of src/styles.css in styles.

Step 3: Import the modules and components

Click to see the steps - Import

Step 4: Import in component

 <sunbird-video-player [playerConfig]="playerConfig" (playerEvent)="playerEvents($event)"
  (telemetryEvent)="playerTelemetryEvents($event)"></sunbird-video-player> 

Note : An additional property named action can be added to the above statement to implement pause and play functionality for the video player.

Step 5: Send input to render VIDEO player

Click to see the input data - playerConfig

Sample code

Click to see the sample code - sampleCode