Implementation - Knowlg player app integrate with player V1
- Gourav More
Background
Currently, we are showing pdf, epub, and video players in the knowledge player app. To display the interactive, HTML, h5p, and youtube content, we need to integrate the v1 player in the knowledge player app.
Design
To integrate the v1 player for the knowledge app we need some changes in the following component
services/data.ts
Old code:
playersArray: [{
name: 'pdf',
mimeType: 'pdf'}]Changes:
playersArray: [{
name: 'pdf', // Name to display
mimeType: 'application/pdf', // Actul mimeType for search api call
playerType: 'pdf', // to get the player info
playerRedirectURL: "players/pdf" // for routing
},
{
name: 'epub',
mimeType: 'application/epub',
playerType: 'epub',
playerRedirectURL: "player/pdf"
},
{
name: 'video',
mimeType: '["video/mp4"]',
playerType: 'video',
playerRedirectURL: "player/pdf"
},
{
name: 'ecml',
mimeType: 'application/vnd.ekstep.ecml-archive',
playerType: 'ecml',
playerRedirectURL: "player/ecml"
},
{
name: 'html',
mimeType: 'application/vnd.ekstep.html-archive',
playerType: 'html',
playerRedirectURL: "player/html"
}services/content.service.ts
getMimeType(playerType){
return data.playersArray['playerType'].mimeType;
}
playerRedirectURL(playerType: string){
return data.playersArray['playerType'].playerRedirectURL;
}Redirect to the V1 and v2 player
Solution 1:
Create the New component for the v1 player
player-routing.module.ts (existing routing module change)
v1-player.component.html
v1-player.component.ts
Pros:
Easy to maintain - easy to differentiate the config between the v1 and v2 player
Easy to redirect and get the action on different types of events
Cons:
Need to maintain a separate component for the v1 player
Solution 2:
Add one more player in the lib-player
player-routing.module.ts (existing routing module change)
lib-player component
player.component.html
player.component.ts
Pros:
No need to create the separate component
Cons:
Difficult to maintain - if we need to switch the different versions of the player for the same mimeType
Conclusion
Combine the two solutions to create a separate component (v1-player) in the shared module.