Merge pull request #104 from Xitija/release-4.10.0

Issue #SB-0000 feat : Implementation of Play - Pause and Normal screen for Interactive Content.

README.md

@@ -193,7 +193,7 @@ var playerConfig = {
 ## 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|playerEvent, telemetryEvent|
+| Video Player | Can be used to render videos | sunbird-video-player| *`<sunbird-video-player [playerConfig]="playerConfig"><sunbird-video-player>`*|playerConfig,action|playerEvent, telemetryEvent|
 
 <br /><br />
 
@@ -217,6 +217,7 @@ Click to see the steps - [Import](README.md#step-3-import-the-modules-and-compon
      <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](README.md#step-4-send-input-to-render-video-player)

package.json

@@ -40,7 +40,7 @@
     "reflect-metadata": "^0.1.13",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
-    "video.js": "7.4.1",
+    "video.js": "7.18.1",
     "videojs-contrib-quality-levels": "2.1.0",
     "videojs-http-source-selector": "1.1.6",
     "zone.js": "~0.10.3"

projects/sunbird-video-player/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@project-sunbird/sunbird-video-player-v9",
-  "version": "4.10.2",
+  "version": "5.0.1",
   "peerDependencies": {
     "@angular/common": ">= 8.0.0",
     "@angular/core": ">= 8.0.0",
     "@types/video.js": "7.5.5",
-    "video.js": "7.4.1",
+    "video.js": "7.18.1",
     "@project-sunbird/client-services": "^3.4.11",
     "@project-sunbird/sb-styles": "0.0.7",
     "@project-sunbird/sunbird-quml-player-v9": "4.9.7",

projects/sunbird-video-player/src/lib/components/video-player/video-player.component.data.ts

@@ -21,5 +21,131 @@ export const mockData = {
           // tslint:disable-next-line:max-line-length
           artifactUrl: 'https://cdn.jsdelivr.net/gh/tombyrer/[email protected]/demo/captions.ar.vtt'
         }
-      ]
+      ],
+    changesForPlay: {
+      config: {
+        currentValue: {
+            traceId: 'afhjgh',
+            sideMenu: {
+                showShare: true,
+                showDownload: true,
+                showReplay: true,
+                showExit: true,
+                enable: false
+            },
+            transcripts: [],
+            actions: [
+                {
+                    play: 0
+                },
+                {
+                    pause: 51.103101
+                }
+            ],
+            volume: [],
+            playBackSpeeds: [],
+            totalDuration: 137.56,
+            currentDuration: 51.103101
+        },
+        firstChange: true,
+        previousValue: undefined,
+        isFirstChange: () => {
+          return true;
+        }
+    },
+    action: {
+        currentValue: {
+            name: 'play'
+        },
+        firstChange: true,
+        previousValue: undefined,
+        isFirstChange: () => {
+          return true;
+        }
+    }
+    },
+    changesForPause: {
+      config: {
+        currentValue: {
+            traceId: 'afhjgh',
+            sideMenu: {
+                showShare: true,
+                showDownload: true,
+                showReplay: true,
+                showExit: true,
+                enable: false
+            },
+            transcripts: [],
+            actions: [
+                {
+                    play: 0
+                },
+                {
+                    pause: 51.103101
+                }
+            ],
+            volume: [],
+            playBackSpeeds: [],
+            totalDuration: 137.56,
+            currentDuration: 51.103101
+        },
+        firstChange: true,
+        previousValue: undefined,
+        isFirstChange: () => {
+          return true;
+        }
+    },
+    action: {
+        currentValue: {
+            name: 'pause'
+        },
+        firstChange: true,
+        previousValue: undefined,
+        isFirstChange: () => {
+          return true;
+        }
+    }
+    },
+    changesForBlank: {
+            config: {
+          currentValue: {
+              traceId: 'afhjgh',
+              sideMenu: {
+                  showShare: true,
+                  showDownload: true,
+                  showReplay: true,
+                  showExit: true,
+                  enable: false
+              },
+              transcripts: [],
+              actions: [
+                  {
+                      play: 0
+                  },
+                  {
+                      pause: 51.103101
+                  }
+              ],
+              volume: [],
+              playBackSpeeds: [],
+              totalDuration: 137.56,
+              currentDuration: 51.103101
+          },
+          firstChange: true,
+          previousValue: undefined,
+          isFirstChange: () => {
+            return true;
+          }
+      },
+      action: {
+          currentValue: {
+              name: ''
+          },
+          firstChange: true,
+          previousValue: undefined,
+          isFirstChange: () => {
+            return true;
+          }
+      }
+    }
 };

projects/sunbird-video-player/src/lib/components/video-player/video-player.component.spec.ts

@@ -265,4 +265,31 @@ describe('VideoPlayerComponent', () => {
     expect(component.viewerService.metaData.transcripts).toEqual(['en', 'bn']);
     expect(component.viewerService.raiseHeartBeatEvent).toHaveBeenCalledWith(telemetryObject.type, telemetryObject.extra);
    });
+  it('should play the video from point it was paused while adding question set on cancel click', () => {
+      component.player = {
+        play: jasmine.createSpy('play')
+      };
+      spyOn(component, 'play');
+      component.ngOnChanges(mockData.changesForPlay);
+      expect(component.play).toHaveBeenCalled();
+  });
+  it('should pause the video on question set addition on add question set click', () => {
+    component.player = {
+      pause: jasmine.createSpy('pause')
+    };
+    spyOn(component, 'pause');
+    component.ngOnChanges(mockData.changesForPause);
+    expect(component.pause).toHaveBeenCalled();
+  });
+  it('should not take any action on blank name property ', () => {
+    component.player = {
+      play: jasmine.createSpy('play'),
+      pause: jasmine.createSpy('pause')
+    };
+    spyOn(component, 'pause');
+    spyOn(component, 'play');
+    component.ngOnChanges(mockData.changesForBlank);
+    expect(component.pause).not.toHaveBeenCalled();
+    expect(component.play).not.toHaveBeenCalled();
+  });
 });

projects/sunbird-video-player/src/lib/components/video-player/video-player.component.ts

@@ -1,20 +1,22 @@
 import { HttpClient } from '@angular/common/http';
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, Output,
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, OnChanges, SimpleChanges,
    Renderer2, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
 import { QuestionCursor } from '@project-sunbird/sunbird-quml-player-v9';
 import * as _ from 'lodash-es';
 import 'videojs-contrib-quality-levels';
 import videojshttpsourceselector from 'videojs-http-source-selector';
 import { ViewerService } from '../../services/viewer.service';
+import { IAction } from '../../playerInterfaces';
 
 @Component({
   selector: 'video-player',
   templateUrl: './video-player.component.html',
   styleUrls: ['./video-player.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class VideoPlayerComponent implements AfterViewInit, OnInit, OnDestroy {
+export class VideoPlayerComponent implements AfterViewInit, OnInit, OnDestroy, OnChanges {
   @Input() config: any;
+  @Input() action?: IAction;
   @Output() questionSetData = new EventEmitter();
   @Output() playerInstance = new EventEmitter();
   transcripts = [];
@@ -83,7 +85,9 @@ export class VideoPlayerComponent implements AfterViewInit, OnInit, OnDestroy {
         });
         this.viewerService.questionCursor.getAllQuestionSet(identifiers).subscribe(
           (response) => {
-            this.viewerService.maxScore = response.reduce((a, b) => a + b, 0);
+            if (!_.isEmpty(response)) {
+              this.viewerService.maxScore = response.reduce((a, b) => a + b, 0);
+            }
           }
         );
       }
@@ -143,6 +147,22 @@ export class VideoPlayerComponent implements AfterViewInit, OnInit, OnDestroy {
     });
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.action && this.player) {
+      if (changes.action.currentValue !== changes.action.previousValue) {
+        switch (changes.action.currentValue.name) {
+            case 'play':
+                        this.play();
+                        break;
+            case 'pause':
+                        this.pause();
+                        break;
+            default: console.warn('Invalid Case!');
+        }
+      }
+    }
+  }
+
   onLoadMetadata(e) {
     this.totalDuration = this.viewerService.metaData.totalDuration = this.player.duration();
     if (this.transcripts && this.transcripts.length && this.player.transcript) {
@@ -294,7 +314,7 @@ export class VideoPlayerComponent implements AfterViewInit, OnInit, OnDestroy {
 
   backward() {
     if (this.player) {
-      this.player.currentTime(this.player.currentTime() + this.time);
+      this.player.currentTime(this.player.currentTime() - this.time);
     }
     this.toggleForwardRewindButton();
     this.viewerService.raiseHeartBeatEvent('BACKWARD');

projects/sunbird-video-player/src/lib/playerInterfaces.ts

@@ -76,3 +76,10 @@ export interface Transcript {
     languageCode: string;
   }
 export interface Transcripts extends Array <Transcript> {}
+
+export interface IAction {
+    name: string;
+    props?: {
+        [propName: string]: any;
+    };
+}

projects/sunbird-video-player/src/lib/services/viewer.service.ts

@@ -38,7 +38,7 @@ export class ViewerService {
   public interceptionResponses: any = {};
   public showScore = false;
   public scoreObtained: any = 0;
-  public maxScore: any = 0;
+  public maxScore: number;
   public playerInstance: any;
   public contentMap = {};
   public isEndEventRaised = false;

projects/sunbird-video-player/src/lib/sunbird-video-player.component.html

@@ -2,7 +2,7 @@
       <sb-player-side-menu-icon class="sb-player-side-menu-icon notVisible" tabindex="0" (sidebarMenuEvent)="sideBarEvents($event)"
 
             *ngIf="viewState ==='player'" [ngClass]="{'isVisible': showControls}"></sb-player-side-menu-icon>
-      <video-player *ngIf="viewState === 'player'" (questionSetData)="questionSetData($event)" (playerInstance)="playerInstance($event)" [config]="playerConfig.config">
+      <video-player *ngIf="viewState === 'player'" (questionSetData)="questionSetData($event)" (playerInstance)="playerInstance($event)" [config]="playerConfig.config" [action]="playerAction">
       </video-player>
       <sb-player-sidebar *ngIf="viewState ==='player'"
        [title]="viewerService.contentName"