Issue #IQ-601 feat: Replacing of QuML player web-component with QumL library

angular.json

@@ -33,22 +33,24 @@
               },
               {
                 "glob": "**/*",
-                "input": "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/",
+                "input": "node_modules/@project-sunbird/sunbird-quml-player/lib/assets/",
                 "output": "/assets/"
               }
             ],
             "styles": [
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/styles.css",
+              "src/assets/quml-styles/quml-carousel.css",
               "node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
               "src/styles.scss",
               "src/assets/lib/semantic/semantic.min.css",
               "src/assets/styles/styles.scss",
-              "node_modules/font-awesome/css/font-awesome.css"
+              "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/katex/dist/katex.min.css"
             ],
             "scripts": [
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/sunbird-quml-player.js",
               "src/assets/libs/iziToast/iziToast.min.js",
+              "node_modules/jquery/dist/jquery.min.js",
               "node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js",
+              "node_modules/katex/dist/katex.min.js",
               "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js",
               "src/assets/lib/dimmer.min.js",
               "src/assets/lib/transition.min.js",
@@ -224,22 +226,24 @@
               },
               {
                 "glob": "**/*",
-                "input": "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/",
+                "input": "node_modules/@project-sunbird/sunbird-quml-player/lib/assets/",
                 "output": "/assets/"
               }
             ],
             "styles": [
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/styles.css",
               "projects/questionset-editor-library-wc/src/styles.scss",
+              "src/assets/quml-styles/quml-carousel.css",
               "node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
               "src/assets/lib/semantic/semantic.min.css",
               "src/assets/styles/styles.scss",
-              "node_modules/font-awesome/css/font-awesome.css"
+              "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/katex/dist/katex.min.css"
             ],
             "scripts": [
-              "node_modules/@project-sunbird/sunbird-quml-player-web-component/sunbird-quml-player.js",
               "src/assets/libs/iziToast/iziToast.min.js",
+              "node_modules/jquery/dist/jquery.min.js",
               "node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js",
+              "node_modules/katex/dist/katex.min.js",
               "node_modules/@project-sunbird/sunbird-file-upload-library/sunbird-file-upload-library.js",
               "src/assets/lib/dimmer.min.js",
               "src/assets/lib/transition.min.js",

package.json

@@ -32,8 +32,8 @@
     "@project-sunbird/common-form-elements-full": "^6.0.3",
     "@project-sunbird/sb-styles": "0.0.9",
     "@project-sunbird/sunbird-file-upload-library": "1.0.2",
-    "@project-sunbird/sunbird-quml-player-web-component": "3.0.0-beta.2",
-    "@project-sunbird/sunbird-resource-library": "7.0.0-beta.2",
+    "@project-sunbird/sunbird-quml-player": "7.0.0-beta.3",
+    "@project-sunbird/sunbird-resource-library": "7.0.0-beta.4",
     "@project-sunbird/telemetry-sdk": "0.0.29",
     "@types/jquery": "^3.5.5",
     "alphanum-sort": "^1.0.2",
@@ -50,6 +50,7 @@
     "jquery": "^3.5.1",
     "jquery.fancytree": "^2.37.0",
     "karma-mocha-reporter": "^2.2.5",
+    "katex": "^0.12.0",
     "lodash-es": "^4.17.21",
     "mathjax-full": "^3.1.2",
     "moment": "^2.29.1",

projects/questionset-editor-library-wc/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { createCustomElement } from '@angular/elements';
 import { QuestionsetEditorLibraryModule, EditorComponent, EditorCursor} from 'questionset-editor-library';
+import { QuestionCursor } from '@project-sunbird/sunbird-quml-player';
 import { EditorCursorImplementationService } from '../../../../src/app/editor-cursor-implementation.service';
 @NgModule({
   declarations: [
@@ -15,6 +16,7 @@ import { EditorCursorImplementationService } from '../../../../src/app/editor-cu
     BrowserAnimationsModule
   ],
   providers: [
+    { provide: QuestionCursor, useExisting: EditorCursorImplementationService },
     { provide: EditorCursor, useExisting: EditorCursorImplementationService }
   ]
 })

projects/questionset-editor-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-sunbird/sunbird-questionset-editor",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.3",
   "dependencies": {
     "tslib": "^2.0.0"
   },

projects/questionset-editor-library/src/lib/components/question/question.component.ts

@@ -1451,7 +1451,6 @@ export class QuestionComponent implements OnInit, AfterViewInit, OnDestroy {
     this.onComponentDestroy$.next();
     this.onComponentDestroy$.complete();
     this.editorCursor.clearQuestionMap();
-    this.editorCursor.removeQuestionMap(this.questionId || this.tempQuestionId);
   }
 
   sliderData($event) {

projects/questionset-editor-library/src/lib/components/quml-player/quml-player.component.html

@@ -2,7 +2,8 @@
      <div class="content-player">
         <div class="w-100 h-100">
                 <div class="contentViewerIframeShadow" *ngIf="!showViewButton">
-                    <span id="qumlPlayer" #qumlPlayer></span>
+                    <quml-main-player *ngIf="showPreview" [playerConfig]="qumlPlayerConfig" (playerEvent)="getPlayerEvents($event)"
+                        (telemetryEvent)="getTelemetryEvents($event)"></quml-main-player>
                 </div>
                 <div class="mt-25" *ngIf="(editorService?.editorMode !== 'edit' && showViewButton)">
                     <h5>Click on View details to view the question details.</h5>

projects/questionset-editor-library/src/lib/components/quml-player/quml-player.component.spec.ts

@@ -81,28 +81,4 @@ describe('QumlPlayerComponent', () => {
     component.getTelemetryEvents(mockData.telemetryEvent);
     expect(component.getTelemetryEvents).toHaveBeenCalled();
   });
-
-  it('#ngAfterViewInit() Should init and load the QuML player', () => {
-    component.qumlPlayer = { nativeElement: { append: ()=> { }}}
-    component.ngAfterViewInit();
-    expect(component.qumlPlayer).toBeTruthy();
-  });
-
-  it('#reviewQuestion() should emit the event', () => {
-    spyOn(component.toolbarEmitter, 'emit');
-    component.reviewQuestion();
-    expect(component.toolbarEmitter.emit).toHaveBeenCalledWith({});
-  });
-
-  it('#getPlayerEvents() should print the event in the console log', () => {
-    spyOn(window.console, 'log');
-    component.getPlayerEvents({type: 'interact'});
-    expect(window.console.log).toHaveBeenCalled();
-  });
-
-  it('#getTelemetryEvents() should print the event in the console log', () => {
-    spyOn(window.console, 'log');
-    component.getTelemetryEvents({type: 'interact'});
-    expect(window.console.log).toHaveBeenCalled();
-  });
 });

projects/questionset-editor-library/src/lib/components/quml-player/quml-player.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit , Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit , Output, ViewEncapsulation} from '@angular/core';
 import * as _ from 'lodash-es';
 import { ConfigService } from '../../services/config/config.service';
 import { PlayerService } from '../../services/player/player.service';
@@ -9,14 +9,13 @@ import { EditorService } from '../../services/editor/editor.service';
   styleUrls: ['./quml-player.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class QumlPlayerComponent implements OnInit, AfterViewInit {
+export class QumlPlayerComponent implements OnInit {
   qumlPlayerConfig: any;
   @Input() questionSetHierarchy: any;
   @Input() isSingleQuestionPreview = false;
   showPreview = false;
   showViewButton = false;
   @Output() public toolbarEmitter: EventEmitter<any> = new EventEmitter();
-  @ViewChild('qumlPlayer') qumlPlayer: ElementRef;
   constructor(private configService: ConfigService, private playerService: PlayerService,
     public editorService: EditorService ) { }
 
@@ -55,17 +54,6 @@ export class QumlPlayerComponent implements OnInit, AfterViewInit {
     console.log('qumlPlayerConfig:: ', this.qumlPlayerConfig);
   }
 
-  ngAfterViewInit() {
-    (window as any).questionListUrl = `/api/${_.get(this.configService, 'urlConFig.URLS.Question.LIST')}`;
-    const qumlElement = document.createElement('sunbird-quml-player');
-    qumlElement.setAttribute('player-config', JSON.stringify(this.qumlPlayerConfig));
-
-    qumlElement.addEventListener('playerEvent', this.getPlayerEvents);
-
-    qumlElement.addEventListener('telemetryEvent', this.getTelemetryEvents);
-    this.qumlPlayer.nativeElement.append(qumlElement);
-}
-
   getPlayerEvents(event) {
     console.log('get player events', JSON.stringify(event));
   }

projects/questionset-editor-library/src/lib/questionset-editor-cursor.service.ts

@@ -2,6 +2,4 @@ export abstract class EditorCursor {
 
   abstract setQuestionMap(key: string, value: any): void;
   abstract clearQuestionMap(): void;
-  abstract removeQuestionMap(key: string): void;
-
 }

projects/questionset-editor-library/src/lib/questionset-editor-library.module.ts

@@ -19,6 +19,8 @@ import { OptionsComponent } from './components/options/options.component';
 import { AnswerComponent } from './components/answer/answer.component';
 import { CkeditorToolComponent } from './components/ckeditor-tool/ckeditor-tool.component';
 import { QuestionComponent } from './components/question/question.component';
+import { QumlLibraryModule } from '@project-sunbird/sunbird-quml-player';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { TelemetryInteractDirective } from './directives/telemetry-interact/telemetry-interact.directive';
 import { AssetBrowserComponent } from './components/asset-browser/asset-browser.component';
 import { CollectionIconComponent } from './components/collection-icon/collection-icon.component';
@@ -69,7 +71,7 @@ import { QualityParamsModalComponent } from './components/quality-params-modal/q
     QualityParamsModalComponent
   ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'}), RouterModule.forChild([]), SuiModule,
-  CommonFormElementsModule, InfiniteScrollModule, HttpClientModule, ResourceLibraryModule, A11yModule],
+  CommonFormElementsModule, InfiniteScrollModule, HttpClientModule, ResourceLibraryModule, A11yModule, QumlLibraryModule, CarouselModule,],
   providers: [
   ],
   exports: [EditorComponent],

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { QuestionsetEditorLibraryModule, EditorCursor } from 'questionset-editor-library';
 import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
+import { QuestionCursor } from '@project-sunbird/sunbird-quml-player';
 import { EditorCursorImplementationService } from './editor-cursor-implementation.service';
 
 @NgModule({
@@ -17,6 +18,7 @@ import { EditorCursorImplementationService } from './editor-cursor-implementatio
     RouterModule.forRoot([], {})
   ],
   providers: [
+    { provide: QuestionCursor, useExisting: EditorCursorImplementationService },
     { provide: EditorCursor, useExisting: EditorCursorImplementationService }
   ],
   bootstrap: [AppComponent]