Ngx-cvbsp-player NPM

NgxCvbspPlayer

Player to read content, plugin can be created easily and added (see config).

A persistence layer can be added to the module (see config)

installation

npm i ngx-cvbsp-player

WARNING : you must do this two things for the html editor to work :

in Angular.json, you must set buildOptimizer to false for prod mode "buildOptimizer": false,
in tsconfig.json, you must set enableIvy to false for prod mode

"angularCompilerOptions": {
  ...
    "enableIvy": false
}

config

in your app module :

const configNgxPlayer = {
  debug: true,
  componentsToRegistered: [
    { className: 'NewPluginComponent', typeOf: NewPluginComponent} as ComponentRegistration
  ], 
  persistor : service as IPersistor
} as PlayerConfig;
...
imports: [
    ...
    NgxCvbspPlayerModule.forRoot(configNgxPlayer)
    ...
],
entryComponents: [ 
    ...
    NewPluginComponent
    ...
]

in lazy loaded module :

imports: [
    NgxCvbspPlayerModule
]

use

in your html file

.testclass {
    background-color: yellow
}

<ngx-cvbsp-player (closeEvent)="close()" [block]="block" [class]="'testclass'"></ngx-cvbsp-player>

in your ts file

export class CvbspPlayerPage implements OnInit {
  block: Block;
  constructor(
    public player: NgxCvbspPlayerService,
    public persistor: NgxCvbspPersistorService) {
    this.block = {
      _id: 'test',
      classType: 'block1',
      resume: false,
      blocksOrContents : [
        { _id: '1-1', classType: 'Content', data: { htmlContent : '<p>content 1 of block 1</p>'}, component: 'RichTextComponent' } as Content,
        {
          _id: 'block2',
          classType: 'Block',
          blocksOrContents : [
            {
              _id: 'block3',
              classType: 'Block',
              blocksOrContents : [
                { _id: '1-3', classType: 'Content', data: { htmlContent : '<p>content 1 of block 3</p>'}, component: 'RichTextComponent' } as Content,
                { _id: '2-3', classType: 'Content', data: { htmlContent : '<p>content 2 of block 3</p>'}, component: 'RichTextComponent' } as Content,
                { _id: '3-3', classType: 'Content', data: { htmlContent : '<p>content 3 of block 3</p>'}, component: 'RichTextComponent' } as Content
              ]
            } as Block,
            { _id: '1-2', classType: 'Content', data: { htmlContent : '<p>content 1 of block 2</p>'}, component: 'RichTextComponent' } as Content,
            { _id: '2-2', classType: 'Content', data: { htmlContent : '<p>content 2 of block 2</p>'}, component: 'RichTextComponent' } as Content,
            { _id: '3-2', classType: 'Content', data: { htmlContent : '<p>content 3 of block 2</p>'}, component: 'RichTextComponent' } as Content
          ]
        } as Block,
        { _id: '2-1', classType: 'Content', data: { htmlContent : '<p>content 3 of block 1</p>'}, component: 'RichTextComponent' } as Content,
        { _id: '3-1', classType: 'Content', data: { htmlContent : '<p>content 4 of block 1</p>'}, component: 'RichTextComponent' } as Content
      ]
    } as Block;
  }

  ngOnInit() {
      // get the block from a server for example or from scorm api or anything else
  }

  close() {
    // leave the page
  }

}

create plugin

you can create plugin in your app by just creating a component, this component must implement the ContentComponent interface that you will find in the lib. here is an exemple :

export class NewPluginComponent implements OnInit, ContentComponent {
  @Input() data: any;
  @Input() tracking: Tracking;
  @Output() nextEvent: EventEmitter<Tracking> = new EventEmitter<Tracking>();
  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {

  }

  next() {
    // TO DO update tracking before 
    this.nextEvent.next(this.tracking);
  }

}

then you add the component in the config of the player IMPORTANT the component MUST be added to the entryComponents of your module !

create persistor

you can create persistor to be able to store and retrieve the tracking related to the session of a user. this persistor MUST implement the IPersistor interface. here is a very simple example of a persistor to store the data in localStorage. It is also the default persistor if nothing is set up.

export class LocalPersistorService implements IPersistor {
  storage: Storage;

  constructor() {
    this.storage = window.localStorage;
  }

  open(): void {
    console.log('ngx-cvbsp-player opened');
  }

  read(blockId: string, resume: boolean): Observable<Tracking> {
    if (!resume) {
      return of(null);
    }
    return of(JSON.parse(this.storage.getItem('ngx-cvbsp-player-' + blockId)));
  }

  save(tracking: Tracking) {
    this.storage.setItem('ngx-cvbsp-player-' + tracking.blockId , JSON.stringify(tracking) );
  }

  close(): void {
    console.log('ngx-cvbsp-player closed');
  }
}

safe html parser

add javascript in your html with the following tag {{ }} to access variable use the scope '$' accessor the scope accessor is different on each block/content as it has to be set at block level exemple for a scope with a firstname property :

<span> coucou , {{ $.firstname }} , comment vas tu ? </span>

export doc and pdf viewer

in order for the export doc component to work for viewing pdf, the following must be install in the assets of the project : https://github.com/teambition/pdfviewer.git