@project-sunbird/sunbird-video-player-v9
Version:
The Video player library is powered by Angular. This player is primarily designed to be used on Sunbird consumption platforms _(mobile app, web portal, offline desktop app)_ to drive reusability and maintainability, hence reducing the redundant developmen
1,454 lines • 98 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Optional, Component, ViewEncapsulation, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import * as _ from 'lodash-es';
import { CsTelemetryModule } from '@project-sunbird/client-services/telemetry';
import * as i3$1 from '@project-sunbird/sunbird-player-sdk-v9';
import { errorCode, errorMessage, ErrorService, SunbirdPlayerSdkModule } from '@project-sunbird/sunbird-player-sdk-v9';
import { __awaiter } from 'tslib';
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
import * as i3 from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import * as i4 from '@project-sunbird/sunbird-quml-player-v9';
import { QumlLibraryModule } from '@project-sunbird/sunbird-quml-player-v9';
import * as i4$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import 'videojs-contrib-quality-levels';
import videojshttpsourceselector from 'videojs-http-source-selector';
import { FormsModule } from '@angular/forms';
class UtilService {
uniqueId(length = 32) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
getTimeSpentText(duration) {
const minutes = Math.floor(duration / 60);
const seconds = Number(((duration % 60)).toFixed(0));
return (minutes + ':' + (seconds < 10 ? '0' : '') + seconds);
}
}
/** @nocollapse */ UtilService.ɵfac = function UtilService_Factory(t) { return new (t || UtilService)(); };
/** @nocollapse */ UtilService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: UtilService, factory: UtilService.ɵfac, providedIn: 'root' });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UtilService, [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], null, null);
})();
class SunbirdVideoPlayerService {
constructor(utilService) {
this.utilService = utilService;
this.contentSessionId = this.utilService.uniqueId();
}
initialize({ context, config, metadata }) {
this.context = context;
this.config = config;
this.playSessionId = this.utilService.uniqueId();
if (!CsTelemetryModule.instance.isInitialised) {
CsTelemetryModule.instance.init({});
CsTelemetryModule.instance.telemetryService.initTelemetry({
config: {
pdata: context.pdata,
env: 'contentplayer',
channel: context.channel,
did: context.did,
authtoken: context.authToken || '',
uid: context.uid || '',
sid: context.sid,
batchsize: 20,
mode: context.mode,
host: context.host || '',
endpoint: context.endpoint || '/data/v3/telemetry',
tags: context.tags,
cdata: [{ id: this.contentSessionId, type: 'ContentSession' },
{ id: this.playSessionId, type: 'PlaySession' },
{ id: '2.0', type: 'PlayerVersion' }]
},
userOrgDetails: {}
});
}
this.telemetryObject = {
id: metadata.identifier,
type: 'Content',
ver: metadata.pkgVersion + '',
rollup: context.objectRollup || {}
};
}
start(duration) {
CsTelemetryModule.instance.telemetryService.raiseStartTelemetry({
options: this.getEventOptions(),
edata: { type: 'content', mode: 'play', pageid: '', duration: Number((duration / 1e3).toFixed(2)) }
});
}
end(duration, totallength, currentlength, endpageseen, totalseekedlength, visitedlength, score, uniqueVisitedLength) {
const durationSec = Number((duration / 1e3).toFixed(2));
let progress = Number(((uniqueVisitedLength / totallength) * 100).toFixed(0));
if (totallength - uniqueVisitedLength < 5) {
progress = 100;
}
CsTelemetryModule.instance.telemetryService.raiseEndTelemetry({
edata: {
type: 'content',
mode: 'play',
pageid: 'sunbird-player-Endpage',
summary: [
{
progress
},
{
totallength
},
{
visitedlength
},
{
visitedcontentend: endpageseen
},
{
totalseekedlength
},
{
endpageseen
},
{
score
},
{
uniquevisitedlength: uniqueVisitedLength
}
],
duration: durationSec
},
options: this.getEventOptions()
});
}
interact(id, currentPage, extraValues) {
CsTelemetryModule.instance.telemetryService.raiseInteractTelemetry({
options: this.getEventOptions(),
edata: { type: 'TOUCH', subtype: '', id, pageid: currentPage + '', extra: extraValues }
});
}
heartBeat(data) {
CsTelemetryModule.instance.playerTelemetryService.onHeartBeatEvent(data, {});
}
impression(currentPage, cdata = {}) {
const impressionEvent = {
options: this.getEventOptions(),
edata: { type: 'workflow', subtype: '', pageid: currentPage + '', uri: '' }
};
if (!_.isEmpty(cdata)) {
impressionEvent.options.context.cdata.push(cdata);
}
CsTelemetryModule.instance.telemetryService.raiseImpressionTelemetry(impressionEvent);
}
error(errorCode, errorType, stacktrace) {
CsTelemetryModule.instance.telemetryService.raiseErrorTelemetry({
options: this.getEventOptions(),
edata: {
err: errorCode,
errtype: errorType,
stacktrace: (stacktrace && stacktrace.toString()) || ''
}
});
}
getEventOptions() {
return ({
object: this.telemetryObject,
context: {
channel: this.context.channel,
pdata: this.context.pdata,
env: 'contentplayer',
sid: this.context.sid,
uid: this.context.uid,
cdata: [{ id: this.contentSessionId, type: 'ContentSession' },
{ id: this.playSessionId, type: 'PlaySession' },
{ id: '2.0', type: 'PlayerVersion' }],
rollup: this.context.contextRollup || {}
}
});
}
}
/** @nocollapse */ SunbirdVideoPlayerService.ɵfac = function SunbirdVideoPlayerService_Factory(t) { return new (t || SunbirdVideoPlayerService)(i0.ɵɵinject(UtilService)); };
/** @nocollapse */ SunbirdVideoPlayerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SunbirdVideoPlayerService, factory: SunbirdVideoPlayerService.ɵfac, providedIn: 'root' });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SunbirdVideoPlayerService, [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], function () { return [{ type: UtilService }]; }, null);
})();
class ViewerService {
constructor(videoPlayerService, utilService, http, questionCursor) {
this.videoPlayerService = videoPlayerService;
this.utilService = utilService;
this.http = http;
this.questionCursor = questionCursor;
this.endPageSeen = false;
this.timeSpent = '0:0';
this.version = '1.0';
this.playerEvent = new EventEmitter();
this.totalSeekedLength = 0;
this.visitedLength = 0;
this.sidebarMenuEvent = new EventEmitter();
this.isAvailableLocally = false;
this.interceptionResponses = {};
this.showScore = false;
this.scoreObtained = 0;
this.contentMap = {};
this.playerTimeSlots = [];
this.isEndEventRaised = false;
this.playBitStartTime = 0;
this.playBitEndTime = 0;
this.PlayerLoadStartedAt = new Date().getTime();
}
initialize({ context, config, metadata }) {
this.contentName = metadata.name;
this.isAvailableLocally = metadata.isAvailableLocally;
this.streamingUrl = metadata.streamingUrl;
this.artifactUrl = metadata.artifactUrl;
this.mimeType = metadata.streamingUrl ? 'application/x-mpegURL' : metadata.mimeType;
this.artifactMimeType = metadata.mimeType;
this.isAvailableLocally = metadata.isAvailableLocally;
this.traceId = config.traceId;
this.interceptionPoints = metadata.interceptionPoints;
if (context.userData) {
const { userData: { firstName, lastName } } = context;
this.userName = firstName === lastName ? firstName : `${firstName} ${lastName}`;
}
this.metaData = {
actions: [],
volume: [],
playBackSpeeds: [],
totalDuration: 0,
muted: undefined,
currentDuration: undefined,
transcripts: []
};
this.transcripts = metadata.transcripts ? metadata.transcripts : [];
this.showDownloadPopup = false;
this.endPageSeen = false;
if (this.isAvailableLocally) {
const basePath = (metadata.streamingUrl) ? (metadata.streamingUrl) : (metadata.basePath || metadata.baseDir);
this.streamingUrl = `${basePath}/${metadata.artifactUrl}`;
this.mimeType = metadata.mimeType;
}
}
handleTranscriptsData(selectedTranscripts) {
this.metaData.transcripts = selectedTranscripts;
if (!_.isArray(this.transcripts)) {
this.raiseExceptionLog('INVALID_TRANSCRIPT_DATATYPE', 'TRANSCRIPT', new Error('Transcript data should be array'), this.traceId);
return [];
}
else {
_.forEach(this.transcripts, (value) => {
if (!(_.some(this.transcripts, { language: value.language, artifactUrl: value.artifactUrl,
languageCode: value.languageCode, identifier: value.identifier }))) {
this.raiseExceptionLog('TRANSCRIPT_DATA_MISSING', 'TRANSCRIPT', new Error('Transcript object dose not have required fields'), this.traceId);
return [];
}
else if (!_.isEmpty(selectedTranscripts) &&
(_.last(selectedTranscripts) !== 'off' && _.last(selectedTranscripts) === value.languageCode)) {
value.default = true;
}
});
}
return this.transcripts;
}
getPlayerOptions() {
return __awaiter(this, void 0, void 0, function* () {
if (!this.streamingUrl) {
return [{ src: this.artifactUrl, type: this.artifactMimeType }];
}
else {
const data = yield this.http.head(this.streamingUrl, { responseType: 'blob' }).toPromise().catch(error => {
// eslint-disable-next-line max-len
this.raiseExceptionLog(errorCode.streamingUrlSupport, errorMessage.streamingUrlSupport, new Error(`Streaming Url Not Supported ${this.streamingUrl}`), this.traceId);
});
if (data) {
return [{ src: this.streamingUrl, type: this.mimeType }];
}
else {
return [{ src: this.artifactUrl, type: this.artifactMimeType }];
}
}
});
}
getMarkers() {
var _a;
if ((_a = this === null || this === void 0 ? void 0 : this.interceptionPoints) === null || _a === void 0 ? void 0 : _a.items) {
try {
const interceptionPoints = this.interceptionPoints;
this.showScore = true;
return interceptionPoints.items.map(({ interceptionPoint, identifier, type }) => {
return { time: interceptionPoint, type, identifier, duration: 3 };
});
}
catch (error) {
console.log(error);
this.raiseExceptionLog('CPV2_CONT_INTERCEPTION_PARSE', 'error parsing the inteception points string', error, '');
this.showScore = false;
}
}
return null;
}
getQuestionSet(identifier) {
const content = this.contentMap[identifier];
if (!content) {
if (!this.questionCursor) {
return null;
}
else {
return this.questionCursor.getQuestionSet(identifier)
.pipe(map((response) => {
this.contentMap[identifier] = response.questionSet;
return this.contentMap[identifier];
}));
}
}
else {
return of(content);
}
}
preFetchContent() {
const nextMarker = this.getNextMarker();
if (nextMarker) {
const identifier = nextMarker.identifier;
this.getQuestionSet(nextMarker.identifier);
}
}
getUniqueVisitedLength() {
const uniqSecondsList = [];
for (let slot of this.playerTimeSlots) {
if (slot[0] < slot[1]) {
let sec = slot[0];
while (sec <= slot[1]) {
sec = Math.floor(sec);
if (uniqSecondsList.indexOf(sec) == -1 && sec != 0) {
uniqSecondsList.push(sec);
}
sec += 1;
}
}
}
return uniqSecondsList.length;
}
getVisitedLength() {
const secondsList = [];
for (let slot of this.playerTimeSlots) {
if (slot[0] < slot[1]) {
let sec = slot[0];
while (sec <= slot[1]) {
sec = Math.floor(sec);
if (sec != 0) {
secondsList.push(sec);
}
sec += 1;
}
}
}
return secondsList.length;
}
getNextMarker() {
const currentTime = this.playerInstance.currentTime();
const markersList = this.getMarkers();
if (!markersList) {
return null;
}
return markersList.find(marker => {
const markerTime = marker.time;
return markerTime > currentTime;
});
}
raiseStartEvent(event) {
const duration = new Date().getTime() - this.PlayerLoadStartedAt;
const startEvent = {
eid: 'START',
ver: this.version,
edata: {
type: 'START',
mode: 'play',
duration
},
metaData: this.metaData
};
this.playerEvent.emit(startEvent);
this.videoPlayerService.start(duration);
this.PlayerLoadStartedAt = new Date().getTime();
}
calculateScore() {
this.scoreObtained = Object.values(this.interceptionResponses).reduce(
// eslint-disable-next-line @typescript-eslint/dot-notation
(acc, response) => acc + response['score'], 0);
}
raiseEndEvent(isOnPlayInterrupt = false) {
if (!this.isEndEventRaised) {
this.calculateScore();
const duration = new Date().getTime() - this.PlayerLoadStartedAt;
const endEvent = {
eid: 'END',
ver: this.version,
edata: {
type: 'END',
currentTime: this.currentlength,
totalTime: this.totalLength,
duration
},
metaData: this.metaData
};
this.playerEvent.emit(endEvent);
if (isOnPlayInterrupt) {
this.playerTimeSlots.push([this.playBitStartTime, this.currentlength]);
}
this.uniqueVisitedLength = this.getUniqueVisitedLength();
if (this.uniqueVisitedLength > this.totalLength) {
this.uniqueVisitedLength = this.totalLength;
}
this.visitedLength = this.getVisitedLength();
this.timeSpent = this.utilService.getTimeSpentText(_.floor(this.totalLength));
this.videoPlayerService.end(duration, this.totalLength, this.currentlength, this.endPageSeen, this.totalSeekedLength, this.visitedLength, this.scoreObtained, this.uniqueVisitedLength);
this.isEndEventRaised = true;
}
}
raiseHeartBeatEvent(type, extraValues) {
if (type === 'REPLAY') {
this.interceptionResponses = {};
this.showScore = false;
this.scoreObtained = 0;
this.playerTimeSlots = [];
this.playBitEndTime = 0;
this.playBitStartTime = 0;
}
const hearBeatEvent = {
eid: 'HEARTBEAT',
ver: this.version,
edata: {
type,
currentPage: 'videostage',
extra: extraValues
},
metaData: this.metaData
};
this.playerEvent.emit(hearBeatEvent);
this.videoPlayerService.heartBeat(hearBeatEvent);
const interactItems = ['PLAY', 'PAUSE', 'EXIT', 'VOLUME_CHANGE', 'DRAG',
'RATE_CHANGE', 'CLOSE_DOWNLOAD', 'DOWNLOAD', 'NAVIGATE_TO_PAGE',
'NEXT', 'OPEN_MENU', 'PREVIOUS', 'CLOSE_MENU', 'DOWNLOAD_MENU', 'DOWNLOAD_POPUP_CLOSE', 'DOWNLOAD_POPUP_CANCEL',
'SHARE', 'REPLAY', 'FORWARD', 'BACKWARD', 'FULLSCREEN', 'NEXT_CONTENT_PLAY', 'TRANSCRIPT_LANGUAGE_OFF',
'TRANSCRIPT_LANGUAGE_SELECTED', 'VIDEO_MARKER_SELECTED'
];
if (interactItems.includes(type)) {
this.videoPlayerService.interact(type.toLowerCase(), 'videostage', extraValues);
}
}
raiseImpressionEvent(pageId, cdata = {}) {
this.videoPlayerService.impression(pageId, cdata);
}
// eslint-disable-next-line @typescript-eslint/no-shadow
raiseExceptionLog(errorCode, errorType, stacktrace, traceId) {
const exceptionLogEvent = {
eid: 'ERROR',
edata: {
err: errorCode,
errtype: errorType,
requestid: traceId || '',
stacktrace: (stacktrace && stacktrace.toString()) || '',
}
};
this.playerEvent.emit(exceptionLogEvent);
this.videoPlayerService.error(errorCode, errorType, stacktrace);
}
}
/** @nocollapse */ ViewerService.ɵfac = function ViewerService_Factory(t) { return new (t || ViewerService)(i0.ɵɵinject(SunbirdVideoPlayerService), i0.ɵɵinject(UtilService), i0.ɵɵinject(i3.HttpClient), i0.ɵɵinject(i4.QuestionCursor, 8)); };
/** @nocollapse */ ViewerService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: ViewerService, factory: ViewerService.ɵfac, providedIn: 'root' });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewerService, [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], function () {
return [{ type: SunbirdVideoPlayerService }, { type: UtilService }, { type: i3.HttpClient }, { type: i4.QuestionCursor, decorators: [{
type: Optional
}] }];
}, null);
})();
const _c0$1 = ["target"];
const _c1$1 = ["controlDiv"];
function VideoPlayerComponent_track_2_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelement(0, "track", 6);
}
if (rf & 2) {
const trans_r4 = ctx.$implicit;
i0.ɵɵpropertyInterpolate("default", trans_r4.default);
i0.ɵɵpropertyInterpolate("src", trans_r4.artifactUrl, i0.ɵɵsanitizeUrl);
i0.ɵɵpropertyInterpolate("srclang", trans_r4.languageCode);
i0.ɵɵpropertyInterpolate("label", trans_r4.language);
}
}
function VideoPlayerComponent_div_6_span_6_Template(rf, ctx) {
if (rf & 1) {
const _r8 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "span", 18);
i0.ɵɵlistener("click", function VideoPlayerComponent_div_6_span_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.pause()); });
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 19)(2, "g", 20);
i0.ɵɵelement(3, "path", 21);
i0.ɵɵelementEnd()()();
}
}
function VideoPlayerComponent_div_6_span_7_Template(rf, ctx) {
if (rf & 1) {
const _r10 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "span", 22);
i0.ɵɵlistener("click", function VideoPlayerComponent_div_6_span_7_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.play()); });
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 19)(2, "g", 23);
i0.ɵɵelement(3, "path", 24);
i0.ɵɵelementEnd()()();
}
}
function VideoPlayerComponent_div_6_Template(rf, ctx) {
if (rf & 1) {
const _r12 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
i0.ɵɵlistener("click", function VideoPlayerComponent_div_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.backward()); });
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(2, "svg", 9)(3, "g", 10);
i0.ɵɵelement(4, "path", 11);
i0.ɵɵelementEnd()()();
i0.ɵɵnamespaceHTML();
i0.ɵɵelementStart(5, "div", 12);
i0.ɵɵtemplate(6, VideoPlayerComponent_div_6_span_6_Template, 4, 0, "span", 13);
i0.ɵɵtemplate(7, VideoPlayerComponent_div_6_span_7_Template, 4, 0, "span", 14);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "div", 15);
i0.ɵɵlistener("click", function VideoPlayerComponent_div_6_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r12); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.forward()); });
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(9, "svg", 9)(10, "g", 16);
i0.ɵɵelement(11, "path", 17);
i0.ɵɵelementEnd()()()();
}
if (rf & 2) {
const ctx_r3 = i0.ɵɵnextContext();
i0.ɵɵadvance(1);
i0.ɵɵstyleProp("visibility", ctx_r3.showBackwardButton ? "visible" : "hidden");
i0.ɵɵadvance(5);
i0.ɵɵproperty("ngIf", ctx_r3.showPauseButton);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx_r3.showPlayButton);
i0.ɵɵadvance(1);
i0.ɵɵstyleProp("visibility", ctx_r3.showForwardButton ? "visible" : "hidden");
}
}
const _c2 = function (a0) { return { "player-for-back-ward-controls": a0 }; };
class VideoPlayerComponent {
constructor(viewerService, renderer2, questionCursor, http, cdr) {
this.viewerService = viewerService;
this.renderer2 = renderer2;
this.questionCursor = questionCursor;
this.http = http;
this.cdr = cdr;
this.questionSetData = new EventEmitter();
this.playerInstance = new EventEmitter();
this.transcripts = [];
this.showBackwardButton = false;
this.showForwardButton = false;
this.showPlayButton = true;
this.showPauseButton = false;
this.showControls = true;
this.currentPlayerState = 'none';
this.totalSeekedLength = 0;
this.previousTime = 0;
this.currentTime = 0;
this.seekStart = null;
this.time = 10;
this.totalSpentTime = 0;
this.isAutoplayPrevented = false;
this.setMetaDataConfig = false;
this.totalDuration = 0;
this.disablePictureInPicture = false;
this.playsinline = false;
this.disableRemotePlayback = false;
this.enterPiPHandler = (e) => {
e.preventDefault();
if (document.exitPictureInPicture) {
document.exitPictureInPicture().catch(error => {
console.error('Failed to exit Picture-in-Picture mode:', error);
});
}
};
}
ngOnInit() {
this.disablePictureInPicture = _.get(this.config, 'disablePictureInPictureMode', false);
this.playsinline = _.get(this.config, 'playsinline', false);
this.disableRemotePlayback = _.get(this.config, 'disableRemotePlayback', false);
this.transcripts = this.viewerService.handleTranscriptsData(_.get(this.config, 'transcripts') || []);
}
ngAfterViewInit() {
this.viewerService.getPlayerOptions().then((options) => __awaiter(this, void 0, void 0, function* () {
this.player = yield videojs(this.target.nativeElement, {
fluid: true,
responsive: true,
sources: options,
autoplay: true,
muted: _.get(this.config, 'muted'),
playbackRates: [0.5, 1, 1.5, 2],
controlBar: {
pictureInPictureToggle: !this.disablePictureInPicture,
children: ['playToggle', 'volumePanel', 'durationDisplay',
'progressControl', 'remainingTimeDisplay', 'CaptionsButton',
'playbackRateMenuButton', 'fullscreenToggle']
},
plugins: {
httpSourceSelector: {
default: 'low'
}
},
html5: {
hls: {
overrideNative: true
},
nativeAudioTracks: false,
nativeVideoTracks: false,
}
});
this.player.videojshttpsourceselector = videojshttpsourceselector;
this.player.videojshttpsourceselector();
const markers = this.viewerService.getMarkers();
if (markers && markers.length > 0) {
const identifiers = markers.map(item => {
return item.identifier;
});
if (this.viewerService.questionCursor) {
this.viewerService.questionCursor.getAllQuestionSet(identifiers).subscribe((response) => {
if (!_.isEmpty(response)) {
this.viewerService.maxScore = response.reduce((a, b) => a + b, 0);
}
});
}
}
if (markers) {
this.player.markers({
markers,
markerStyle: {
height: '7px',
bottom: '39%',
'background-color': 'orange'
},
onMarkerReached: (marker) => {
if (marker) {
const { time, text, identifier, duration } = marker;
if (!(this.player.currentTime() > (time + duration))) {
setTimeout(() => {
this.pause();
this.player.controls(false);
}, 1000);
this.viewerService.getQuestionSet(identifier).subscribe((response) => {
this.questionSetData.emit({ response, time, identifier });
}, (error) => {
this.play();
this.player.controls(true);
console.log(error);
});
}
}
}
});
this.playerInstance.emit(this.player);
this.viewerService.playerInstance = this.player;
this.viewerService.preFetchContent();
}
this.registerEvents();
}));
setInterval(() => {
if (!this.isAutoplayPrevented && this.currentPlayerState !== 'pause') {
this.showControls = false;
}
}, 5000);
this.unlistenTargetMouseMove = this.renderer2.listen(this.target.nativeElement, 'mousemove', () => {
this.showControls = true;
});
this.unlistenTargetTouchStart = this.renderer2.listen(this.target.nativeElement, 'touchstart', () => {
this.showControls = true;
});
this.viewerService.sidebarMenuEvent.subscribe(event => {
if (event === 'OPEN_MENU') {
this.pause();
}
if (event === 'CLOSE_MENU') {
this.play();
}
});
}
ngOnChanges(changes) {
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();
this.viewerService.totalLength = this.totalDuration;
if (this.transcripts && this.transcripts.length && this.player.transcript) {
this.player.transcript({
showTitle: true,
showTrackSelector: true,
});
}
}
registerEvents() {
const promise = this.player.play();
if (promise !== undefined) {
promise.catch(error => {
this.isAutoplayPrevented = true;
});
}
const events = ['loadstart', 'play', 'pause',
'error', 'playing', 'progress', 'seeked', 'seeking', 'volumechange',
'ratechange'];
this.player.on('fullscreenchange', (data) => {
// This code is to show the controldiv in fullscreen mode
if (this.player.isFullscreen()) {
this.target.nativeElement.parentNode.appendChild(this.controlDiv.nativeElement);
}
this.viewerService.raiseHeartBeatEvent('FULLSCREEN');
});
this.player.on('pause', (data) => {
this.pause();
});
this.player.on('ratechange', (data) => {
this.viewerService.metaData.playBackSpeeds.push(this.player.playbackRate());
});
this.player.on('volumechange', (data) => {
this.viewerService.metaData.volume.push(this.player.volume());
this.viewerService.metaData.muted = this.player.muted();
});
this.player.on('play', (data) => {
this.currentPlayerState = 'play';
this.showPauseButton = true;
this.showPlayButton = false;
this.viewerService.raiseHeartBeatEvent('PLAY');
this.isAutoplayPrevented = false;
});
this.player.on('timeupdate', (data) => {
this.viewerService.metaData.currentDuration = this.player.currentTime();
this.handleVideoControls(data);
this.viewerService.playerEvent.emit(data);
this.viewerService.currentlength = this.viewerService.metaData.currentDuration;
this.totalSpentTime += new Date().getTime() - this.startTime;
this.startTime = new Date().getTime();
const currentTime = this.player.currentTime();
if (currentTime > 0 && this.totalDuration > 0) {
const remainingTime = Math.floor(this.totalDuration - currentTime);
if (remainingTime <= 0) {
this.viewerService.metaData.currentDuration = 0;
this.handleVideoControls({ type: 'ended' });
this.viewerService.playerEvent.emit({ type: 'ended' });
}
}
});
this.player.on('subtitleChanged', (event, track) => {
this.handleEventsForTranscripts(track);
});
this.player.on('durationchange', (data) => {
if (this.totalDuration === 0) {
this.totalDuration = this.viewerService.metaData.totalDuration = this.player.duration();
this.viewerService.playerEvent.emit(Object.assign(Object.assign({}, data), { duration: this.totalDuration }));
}
});
this.player.ready(() => {
const videoEl = this.player.tech().el();
if (document.pictureInPictureEnabled && this.disablePictureInPicture) {
videoEl.addEventListener('enterpictureinpicture', this.enterPiPHandler);
}
});
events.forEach(event => {
this.player.on(event, (data) => {
this.handleVideoControls(data);
this.viewerService.playerEvent.emit(data);
});
});
this.trackTranscriptEvent();
}
trackTranscriptEvent() {
let timeout;
const player = this.player;
this.player.textTracks().on('change', function action(event) {
clearTimeout(timeout);
let transcriptObject = {};
this.tracks_.filter((track) => {
if ((track.kind === 'captions' || track.kind === 'subtitles') && track.mode === 'showing') {
transcriptObject = { artifactUrl: track.src, languageCode: track.language };
return true;
}
});
timeout = setTimeout(() => {
player.trigger('subtitleChanged', transcriptObject);
}, 10);
});
}
handleEventsForTranscripts(track) {
let telemetryObject;
if (!_.isEmpty(track)) {
telemetryObject = {
type: 'TRANSCRIPT_LANGUAGE_SELECTED',
extraValues: {
transcript: {
language: _.get(_.filter(this.transcripts, { artifactUrl: track.artifactUrl, languageCode: track.languageCode })[0], 'language')
},
videoTimeStamp: this.player.currentTime()
}
};
if (_.last(this.viewerService.metaData.transcripts) !== track.languageCode) {
this.viewerService.metaData.transcripts.push(track.languageCode);
}
}
else {
telemetryObject = {
type: 'TRANSCRIPT_LANGUAGE_OFF',
extraValues: {
videoTimeStamp: this.player.currentTime()
}
};
this.viewerService.metaData.transcripts.push('off');
}
this.viewerService.raiseHeartBeatEvent(telemetryObject.type, telemetryObject.extraValues);
}
toggleForwardRewindButton() {
this.showForwardButton = true;
this.showBackwardButton = true;
this.cdr.detectChanges();
if ((this.player.currentTime() + this.time) > this.totalDuration) {
this.showForwardButton = false;
this.cdr.detectChanges();
}
if ((this.player.currentTime() - this.time) < 0) {
this.showBackwardButton = false;
this.cdr.detectChanges();
}
}
play() {
if (this.player) {
this.player.play();
}
this.currentPlayerState = 'play';
this.showPauseButton = true;
this.showPlayButton = false;
this.toggleForwardRewindButton();
}
pause() {
if (this.player) {
this.player.pause();
}
this.currentPlayerState = 'pause';
this.showPauseButton = false;
this.showPlayButton = true;
this.toggleForwardRewindButton();
this.viewerService.raiseHeartBeatEvent('PAUSE');
}
backward() {
if (this.player) {
this.player.currentTime(this.player.currentTime() - this.time);
}
this.toggleForwardRewindButton();
this.viewerService.raiseHeartBeatEvent('BACKWARD');
}
forward() {
if (this.player) {
this.player.currentTime(this.player.currentTime() + this.time);
}
this.toggleForwardRewindButton();
this.viewerService.raiseHeartBeatEvent('FORWARD');
}
handleVideoControls({ type }) {
var _a, _b;
if (type === 'playing') {
this.showPlayButton = false;
this.showPauseButton = true;
if (this.setMetaDataConfig) {
this.setMetaDataConfig = false;
this.setPreMetaDataConfig();
}
}
if (type === 'ended') {
this.totalSpentTime += new Date().getTime() - this.startTime;
if (this.player) {
this.viewerService.currentlength = this.player.currentTime();
}
this.viewerService.totalLength = this.totalDuration;
this.updatePlayerEventsMetadata({ type });
this.viewerService.playBitEndTime = this.totalDuration;
this.viewerService.playerTimeSlots.push([this.viewerService.playBitStartTime, this.viewerService.playBitEndTime]);
}
if (type === 'pause') {
this.totalSpentTime += new Date().getTime() - this.startTime;
this.updatePlayerEventsMetadata({ type });
this.viewerService.playBitEndTime = this.previousTime;
this.viewerService.playerTimeSlots.push([this.viewerService.playBitStartTime, this.viewerService.playBitEndTime]);
}
if (type === 'play') {
this.startTime = new Date().getTime();
if ((_a = this.player) === null || _a === void 0 ? void 0 : _a.currentTime()) {
this.viewerService.playBitStartTime = (_b = this.player) === null || _b === void 0 ? void 0 : _b.currentTime();
}
this.updatePlayerEventsMetadata({ type });
}
if (type === 'loadstart') {
this.startTime = new Date().getTime();
this.setMetaDataConfig = true;
}
// Calculating total seeked length
if (type === 'timeupdate') {
this.previousTime = this.currentTime;
if (this.player) {
this.currentTime = this.player.currentTime();
}
this.toggleForwardRewindButton();
}
if (type === 'seeking') {
if (this.seekStart === null) {
this.seekStart = this.previousTime;
}
}
if (type === 'seeked') {
this.updatePlayerEventsMetadata({ type });
if (this.currentTime > this.seekStart) {
this.totalSeekedLength = this.totalSeekedLength + (this.currentTime - this.seekStart);
}
else if (this.seekStart > this.currentTime) {
this.totalSeekedLength = this.totalSeekedLength + (this.seekStart - this.currentTime);
}
this.viewerService.totalSeekedLength = this.totalSeekedLength;
this.seekStart = null;
if (this.player.markers && this.player.markers.getMarkers) {
const markers = this.player.markers.getMarkers();
markers.forEach(marker => {
if (!this.viewerService.interceptionResponses[marker.time] && marker.time < this.currentTime) {
this.viewerService.interceptionResponses[marker.time] = {
score: 0,
isSkipped: false
};
// eslint-disable-next-line @typescript-eslint/dot-notation
document.querySelector(`[data-marker-time="${marker.time}"]`)['style'].backgroundColor = 'red';
}
});
}
}
}
setPreMetaDataConfig() {
if (!_.isEmpty(_.get(this.config, 'volume'))) {
this.player.volume(_.last(_.get(this.config, 'volume')));
}
if (_.get(this.config, 'currentDuration')) {
this.player.currentTime(_.get(this.config, 'currentDuration'));
this.viewerService.playBitStartTime = _.get(this.config, 'currentDuration');
}
if (!_.isEmpty(_.get(this.config, 'playBackSpeeds'))) {
this.player.playbackRate(_.last(_.get(this.config, 'playBackSpeeds')));
}
}
updatePlayerEventsMetadata({ type }) {
const action = {};
action[type + ''] = this.player.currentTime();
this.viewerService.metaData.actions.push(action);
}
ngOnDestroy() {
if (this.player) {
const videoEl = this.player.tech().el();
videoEl.removeEventListener('enterpictureinpicture', this.enterPiPHandler);
this.player.dispose();
}
this.unlistenTargetMouseMove();
this.unlistenTargetTouchStart();
}
}
/** @nocollapse */ VideoPlayerComponent.ɵfac = function VideoPlayerComponent_Factory(t) { return new (t || VideoPlayerComponent)(i0.ɵɵdirectiveInject(ViewerService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i4.QuestionCursor, 8), i0.ɵɵdirectiveInject(i3.HttpClient), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
/** @nocollapse */ VideoPlayerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: VideoPlayerComponent, selectors: [["video-player"]], viewQuery: function VideoPlayerComponent_Query(rf, ctx) {
if (rf & 1) {
i0.ɵɵviewQuery(_c0$1, 7);
i0.ɵɵviewQuery(_c1$1, 7);
}
if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.target = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.controlDiv = _t.first);
}
}, inputs: { config: "config", action: "action" }, outputs: { questionSetData: "questionSetData", playerInstance: "playerInstance" }, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 8, consts: [["controls", "", "crossorigin", "anonymous", 1, "video-js", 3, "loadeddata"], ["target", ""], ["kind", "captions", 3, "default", "src", "srclang", "label", 4, "ngFor", "ngForOf"], ["controlDiv", ""], [3, "ngClass"], ["class", "player-container", 4, "ngIf"], ["kind", "captions", 3, "default", "src", "srclang", "label"], [1, "player-container"], [1, "back-ward", "hide-in-desktop", 3, "click"], ["width", "39px", "height", "49px", "viewBox", "0 0 39 49", "version", "1.1", "xmlns", "http://www.w3.org/2000/svg", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink"], ["id", "video/default-copy-2", "transform", "translate(-70.000000, -77.000000)", "fill", "#FFFFFF"], ["d", "M108.4,106.3 C108.4,116.86 99.76,125.5 89.2,125.5 C78.64,125.5 70,116.86 70,106.3 L74.8,106.3 C74.8,114.22 81.28,120.7 89.2,120.7 C97.12,120.7 103.6,114.22 103.6,106.3 C103.6,98.38 97.12,91.9 89.2,91.9 L89.2,101.5 L77.2,89.5 L89.2,77.5 L89.2,87.1 C99.76,87.1 108.4,95.74 108.4,106.3 L108.4,106.3 Z M86.4320312,113.5 L84.4,113.5 L84.4,105.667187 L81.9742187,106.419531 L81.9742187,104.767187 L86.2140625,103.248437 L86.4320312,103.248437 L86.4320312,113.5 Z M96.6484375,109.267188 C96.6484375,110.68282 96.3554717,111.765621 95.7695312,112.515625 C95.1835908,113.265629 94.3257869,113.640625 93.1960937,113.640625 C92.0804632,113.640625 91.2273467,113.27266 90.6367187,112.536719 C90.0460908,111.800778 89.7437501,110.746101 89.7296875,109.372656 L89.7296875,107.488281 C89.7296875,106.058587 90.0261689,104.973441 90.6191406,104.232812 C91.2121123,103.492184 92.0664007,103.121875 93.1820312,103.121875 C94.2976618,103.121875 95.1507783,103.488668 95.7414062,104.222266 C96.3320342,104.955863 96.6343749,106.009368 96.6484375,107.382812 L96.6484375,109.267188 Z M94.6164062,107.2 C94.6164062,106.351558 94.5003918,105.733986 94.2683594,105.347266 C94.036327,104.960545 93.6742212,104.767188 93.1820312,104.767188 C92.7039039,104.767188 92.351173,104.95117 92.1238281,105.319141 C91.8964832,105.687111 91.7757813,106.262496 91.7617187,107.045312 L91.7617187,109.534375 C91.7617187,110.368754 91.8753895,110.98867 92.1027344,111.394141 C92.3300793,111.799611 92.6945287,112.002344 93.1960937,112.002344 C93.6929712,112.002344 94.0515614,111.807814 94.271875,111.41875 C94.4921886,111.029686 94.6070312,110.434379 94.6164062,109.632812 L94.6164062,107.2 Z", "id", "Shape-Copy"], [1, "pause-play"], ["class", "pause", 3, "click", 4, "ngIf"], ["class", "play", 3, "click", 4, "ngIf"], [1, "forward", "hide-in-desktop", 3, "click"], ["id", "video/default-copy-2", "transform", "translate(-251.000000, -77.000000)", "fill", "#FFFFFF"], ["d", "M251.4,106.3 C251.4,116.86 260.04,125.5 270.6,125.5 C281.16,125.5 289.8,116.86 289.8,106.3 L285,106.3 C285,114.22 278.52,120.7 270.6,120.7 C262.68,120.7 256.2,114.22 256.2,106.3 C256.2,98.38 262.68,91.9 270.6,91.9 L270.6,101.5 L282.6,89.5 L270.6,77.5 L270.6,87.1 C260.04,87.1 251.4,95.74 251.4,106.3 L251.4,106.3 Z M267.832031,113.5 L265.8,113.5 L265.8,105.667187 L263.374219,106.419531 L263.374219,104.767187 L267.614062,103.248437 L267.832031,103.248437 L267.832031,113.5 Z M278.048438,109.267188 C278.048438,110.68282 277.755472,111.765621 277.169531,112.515625 C276.583591,113.265629 275.725787,113.640625 274.596094,113.640625 C273.480463,113.640625 272.627347,113.27266 272.036719,112.536719 C271.446091,111.800778 271.14375,110.746101 271.129687,109.372656 L271.129687,107.488281 C271.129687,106.058587 271.426169,104.973441 272.019141,104.232812 C272.612112,103.492184 273.466401,103.121875 274.582031,103.121875 C275.697662,103.121875 276.550778,103.488668 277.141406,104.222266 C277.732034,104.955863 278.034375,106.009368 278.048438,107.382812 L278.048438,109.267188 Z M276.016406,107.2 C276.016406,106.351558 275.900392,105.733986 275.668359,105.347266 C275.436327,104.960545 275.074221,104.767188 274.582031,104.767188 C274.103904,104.767188 273.751173,104.95117 273.523828,105.319141 C273.296483,105.687111 273.175781,106.262496 273.161719,107.045312 L273.161719,109.534375 C273.161719,110.368754 273.275389,110.98867 273.502734,111.394141 C273.730079,111.799611 274.094529,112.002344 274.596094,112.002344 C275.092971,112.002344 275.451561,111.807814 275.671875,111.41875 C275.892189,111.029686 276.007031,110.434379 276.016406,109.632812 L276.016406,107.2 Z", "id", "Shape"], [1, "pause", 3, "click"], ["width", "48px", "height", "48px", "viewBox", "0 0 48 48", "version", "1.1", "xmlns", "http://www.w3.org/2000/svg", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink"], ["id", "video/default-copy-2", "transform", "translate(-156.000000, -77.000000)", "fill", "#FFFFFF"], ["d", "M180.4,77.5 C167.152,77.5 156.4,88.252 156.4,101.5 C156.4,114.748 167.152,125.5 180.4,125.5 C193.648,125.5 204.4,114.748 204.4,101.5 C204.4,88.252 193.648,77.5 180.4,77.5 L180.4,77.5 Z M178,111.1 L173.2,111.1 L173.2,91.9 L178,91.9 L178,111.1 L178,111.1 Z M187.6,111.1 L182.8,111.1 L182.8,91.9 L187.6,91.9 L187.6,111.1 L187.6,111.1 Z", "id", "Shape"], [1, "play", 3, "click"], ["id", "video/default-copy", "transform", "translate(-296.000000, -156.000000)", "fill", "#FFFFFF"], ["d", "M320,156 C306.752,156 296,166.752 296,180 C296,193.248 306.752,204 320,204 C333.248,204 344,193.248 344,180 C344,166.752 333.248,156 320,156 L320,156 Z M315.2,190.8 L315.2,169.2 L329.6,180 L315.2,190.8 L315.2,190.8 Z", "id", "Shape"]], template: function VideoPlayerComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "video", 0, 1);
i0.ɵɵlistener("loadeddata", function VideoPlayerComponent_Template_video_loadeddata_0_listener($event) { return ctx.onLoadMetadata($event); });
i0.ɵɵtemplate(2, VideoPlayerComponent_track_2_Template, 1, 4, "track", 2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "div", null, 3)(5, "div", 4);
i0.ɵɵtemplate(6, VideoPlayerComponent_div_6_Template, 12, 6, "div", 5);
i0.ɵɵelementEnd()();
}
if (rf & 2) {
i0.ɵɵattribute("disablePictureInPicture", ctx.disablePictureInPicture)("playsinline", ctx.playsinline)("disableRemotePlayback", ctx.disableRemotePlayback);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", ctx.transcripts);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c2, ctx.currentPlayerState === "pause" || ctx.showControls));
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.currentPlayerState === "pause" || ctx.showControls);
}
}, dependencies: [i4$1.NgClass, i4$1.NgForOf, i4$1.NgIf], styles: [".video-js{width:100%;height:100%}.video-player{width:100%}.video-js .vjs-duration{display:block}.video-js .vjs-big-play-button{display:none}.video-js .vjs-control-bar{z-index:3;font-size:12px;background:rgba(0,0,0,.75)}@media (min-width: 1600px){.video-js .vjs-control-bar{font-size:16px}}.video-js .vjs-slider{background:#7b7b7b}.video-js .vjs-load-progress{background:#797979}.video-js .vjs-load-progress div{background:#a09f9f}.video-js .vjs-progress-holder,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{border-radius:.2em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#000000b8}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#d8d8d833;color:var(--white)}.video-js .vjs-play-progress:before{top:-.3em}.vjs-playback-rate .vjs-playback-rate-value{line-height:2.75}.vjs-menu li,.vjs-playback-rate .vjs-playback-rate-value{font-size:1.1em}@media screen and (min-width: 768px){.video-js .vjs-tech{pointer-events:none}.hide-in-desktop{visibility:hidden!important}}@media (hover: hover){.hide-in-desktop{visibility:hidden!important}}@media (pointer: fine){.hide-in-desktop{visibility:hidden!important}}.player-for-back-ward-controls{display:flex;align-items:center;justify-content:center;position:absolute;width:100%;height:100%;inset:0;z-index:2}.player-for-back-ward-controls .player-container{display:flex;align-items:center}.player-for-back-ward-controls .player-container .back-ward,.player-for-back-ward-controls .player-container .pause-play,.player-for-back-ward-controls .player-container .forward{width:2.5rem;height:2.5rem;padding:.5rem;transition:all .3s ease-in-out;box-sizing:content-box;display:flex;align-items:center;justify-content:center;background:rgba(var(--rc-rgba-black),.5);border-radius:50%;transform:scale(1)}@media (min-width: 768px){.player-for-back-ward-controls .player-container .back-ward:hover,.player-for-back-ward-controls .player-container .pause-play:hover,.player-for-back-ward-controls .player-container .forward:hover{background:rgba(var(--rc-rgba-black),1);border-radius:100%;transform:scale(1.25);cursor:pointer}.player-for-back-ward-controls .player-container .back-ward:hover svg g,.player-for-back-ward-controls .player-container .pause-play:hover svg g,.player-for-back-ward-controls .player-container .forward:hover svg g{fill:var(--primary-theme)}}.player-for-back-ward-controls .player-container .back-ward.touched,.player-for-back-ward-controls .player-container .pause-play.touched,.player-for-back-ward-controls .player-container .forward.touched{animation:scaling 2s;transform:scale(1)}@keyframes scaling{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.player-for-back-ward-controls .player-container .back-ward.touched svg g,.player-for-back-ward-controls .player-container .pause-play.touched svg g,.player-for-back-ward-controls .player-container .forward.touched svg g{animation:scalingColor 2s;fill:var(--white)}@keyframes scalingColor{0%{fill:var(--white)}50%{fill:var(--primary-theme)}to{fill:var(--white)}}.player-for-back-ward-controls .player-container .back-ward.touchout,.player-for-back-ward-controls .player-container .pause-play.touchout,.player-for-back-ward-controls .player-container .forward.touchout{animation:scaling2 2s;transform:scale(1)}@keyframes scaling2{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.player-for-back-ward-controls .player-container .back-ward.touchout svg g,.player-for-back-ward-controls .player-container .pause-play.touchout svg g,.player-for-back-ward-controls .player-container .forward.touchout svg g{animation:scalingColor2 2s;fill:var(--white)}@keyframes scalingColor2{0%{fill:var(--white)}50%{fill:var(--primary-theme)}to{fill:var(--white)}}.player-for-back-ward-controls .player-container .back-ward svg,.player-for-back-ward-controls .player-container .pause-play svg,.player-for-back-ward-controls .player-container .forward svg{width:100%}.player-for-back-ward-controls .player-container .pause-play{margin:0px 1.5rem}.player-for-back-ward-controls .player-container .pause-play .pause,.player-for-back-ward-controls .player-container .pause-play .play{display:flex;align-items:center}div[data-marker-key]{margin-left:.7%!important}.vjs-texttrack-settings{display:none}\n"], encapsulation: 2 });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VideoPlayerComponent, [{
type: Component,
args: [{ selector: 'video-player', encapsulation: ViewEncapsulation.None, template: "<video #target class=\"video-js\" controls [attr.disablePictureInPicture]=\"disablePictureInPicture\" [attr.playsinline]=\"playsinline\" [attr.disableRemotePlayback]=\"disableRemotePlayback\" crossorigin=\"anonymous\" (loadeddata)=\"onLoadMetadata($event)\">\n <track *ngFor=\"let trans of transcripts\" default=\"{{trans.default}}\" kind=\"captions\" src=\"{{trans.artifactUrl}}\" srclang=\"{{trans.languageCode}}\" label=\"{{trans.language}}\" >\n</video>\n<div #controlDiv>\n <div [ngClass]=\"{'player-for-back-ward-controls': currentPlayerState === 'pause' || showControls }\">\n <div class=\"player-container\" *ngIf=\"currentPlayerState === 'pause' || showControls\">\n <div class=\"back-ward hide-in-desktop\" [style.visibility]=\"showBackwardButton ? 'visible' : 'hidden'\" (click)=\"backward()\">\n <svg width=\"39px\" height=\"49px\" viewBox=\"0 0 39 49\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"video/default-copy-2\" transform=\"translate(-70.000000, -77.000000)\" fill=\"#FFFFFF\">\n <path\n d=\"M108.4,106.3 C108.4,116.86 99.76,125.5 89.2,125.5 C78.64,125.5 70,116.86 70,106.3 L74.8,106.3 C74.8,114.22 81.28,120.7 89.2,120.7 C97.12,120.7 103.6,114.22 103.6,106.3 C103.6,98.38 97.12,91.9 89.2,91.9 L89.2,101.5 L77.2,89.5 L89.2,77.5 L89.2,87.1 C99.76,87.1 108.4,95.74 108.4,106.3 L108.4,106.3 Z M86.4320312,113.5 L84.4,113.5 L84.4,105.667187 L81.9742187,106.419531 L81.9742187,104.767187 L86.2140625,103.248437 L86.4320312,103.248437 L86.4320312,113.5 Z M96.6484375,109.267188 C96.6484375,110.68282 96.3554717,111.765621 95.7695312,112.515625 C95.1835908,113.265629 94.3257869,113.640625 93.1960937,113.640625 C92.0804632,113.640625 91.2273467,113.27266 90.6367187,112.536719 C90.0460908,111.800778 89.7437501,110.746101 89.7296875,109.372656 L89.7296875,107.488281 C89.7296875,106.058587 90.0261689,104.973441 90.6191406,104.232812 C91.2121123,103.492184 92.0664007,103.121875 93.1820312,103.121875 C94.2976618,103.121875 95.1507783,103.488668 95.7414062,104.222266 C96.3320342,104.955863 96.6343749,106.009368 96.6484375,107.382812 L96.6484375,109.267188 Z M94.6164062,107.2 C94.6164062,106.351558 94.5003918,105.733986 94.2683594,105.347266 C94.036327,104.960545 93.6742212,104.767188 93.1820312,104.767188 C92.7039039,104.767188 92.351173,104.95117 92.1238281,105.319141 C91.8964832,105.687111 91.7757813,106.262496 91.7617187,107.045312 L91.7617187,109.534375 C91.7617187,110.368754 91.8753895,110.98867 92.1027344,111.394141 C92.3300793,111.799611 92.6945287,112.002344 93.1960937,112.002344 C93.6929712,112.002344 94.0515614,111.807814 94.271875,111.41875 C94.4921886,111.029686 94.6070312,110.434379 94.6164062,109.632812 L94.6164062,107.2 Z\"\n id=\"Shape-Copy\"></path>\n </g>\n </svg>\n </div>\n <div class=\"pause-play\">\n <span class=\"pause\" *ngIf=\"showPauseButton\" (click)=\"pause()\">\n <svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"video/default-copy-2\" transform=\"translate(-156.000000, -77.000000)\" fill=\"#FFFFFF\">\n <path\n d=\"M180.4,77.5 C167.152,77.5 156.4,88.252 156.4,101.5 C156.4,114.748 167.152,125.5 180.4,125.5 C193.648,125.5 204.4,114.748 204.4,101.5 C204.4,88.252 193.648,77.5 180.4,77.5 L180.4,77.5 Z M178,111.1 L173.2,111.1 L173.2,91.9 L178,91.9 L178,111.1 L178,111.1 Z M187.6,111.1 L182.8,111.1 L182.8,91.9 L187.6,91.9 L187.6,111.1 L187.6,111.1 Z\"\n id=\"Shape\"></path>\n </g>\n </svg>\n </span>\n <span class=\"play\" *ngIf=\"showPlayButton\" (click)=\"play()\">\n <svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"video/default-copy\" transform=\"translate(-296.000000, -156.000000)\" fill=\"#FFFFFF\">\n <path\n d=\"M320,156 C306.752,156 296,166.752 296,180 C296,193.248 306.752,204 320,204 C333.248,204 344,193.248 344,180 C344,166.752 333.248,156 320,156 L320,156 Z M315.2,190.8 L315.2,169.2 L329.6,180 L315.2,190.8 L315.2,190.8 Z\"\n id=\"Shape\"></path>\n </g>\n </svg>\n </span>\n </div>\n <div class=\"forward hide-in-desktop\" [style.visibility]=\"showForwardButton ? 'visible' : 'hidden'\" (click)=\"forward()\">\n <svg width=\"39px\" height=\"49px\" viewBox=\"0 0 39 49\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <g id=\"video/default-copy-2\" transform=\"translate(-251.000000, -77.000000)\" fill=\"#FFFFFF\">\n <path\n d=\"M251.4,106.3 C251.4,116.86 260.04,125.5 270.6,125.5 C281.16,125.5 289.8,116.86 289.8,106.3 L285,106.3 C285,114.22 278.52,120.7 270.6,120.7 C262.68,120.7 256.2,114.22 256.2,106.3 C256.2,98.38 262.68,91.9 270.6,91.9 L270.6,101.5 L282.6,89.5 L270.6,77.5 L270.6,87.1 C260.04,87.1 251.4,95.74 251.4,106.3 L251.4,106.3 Z M267.832031,113.5 L265.8,113.5 L265.8,105.667187 L263.374219,106.419531 L263.374219,104.767187 L267.614062,103.248437 L267.832031,103.248437 L267.832031,113.5 Z M278.048438,109.267188 C278.048438,110.68282 277.755472,111.765621 277.169531,112.515625 C276.583591,113.265629 275.725787,113.640625 274.596094,113.640625 C273.480463,113.640625 272.627347,113.27266 272.036719,112.536719 C271.446091,111.800778 271.14375,110.746101 271.129687,109.372656 L271.129687,107.488281 C271.129687,106.058587 271.426169,104.973441 272.019141,104.232812 C272.612112,103.492184 273.466401,103.121875 274.582031,103.121875 C275.697662,103.121875 276.550778,103.488668 277.141406,104.222266 C277.732034,104.955863 278.034375,106.009368 278.048438,107.382812 L278.048438,109.267188 Z M276.016406,107.2 C276.016406,106.351558 275.900392,105.733986 275.668359,105.347266 C275.436327,104.960545 275.074221,104.767188 274.582031,104.767188 C274.103904,104.767188 273.751173,104.95117 273.523828,105.319141 C273.296483,105.687111 273.175781,106.262496 273.161719,107.045312 L273.161719,109.534375 C273.161719,110.368754 273.275389,110.98867 273.502734,111.394141 C273.730079,111.799611 274.094529,112.002344 274.596094,112.002344 C275.092971,112.002344 275.451561,111.807814 275.671875,111.41875 C275.892189,111.029686 276.007031,110.434379 276.016406,109.632812 L276.016406,107.2 Z\"\n id=\"Shape\"></path>\n </g>\n </svg>\n </div>\n </div>\n </div>\n\n\n</div>", styles: [".video-js{width:100%;height:100%}.video-player{width:100%}.video-js .vjs-duration{display:block}.video-js .vjs-big-play-button{display:none}.video-js .vjs-control-bar{z-index:3;font-size:12px;background:rgba(0,0,0,.75)}@media (min-width: 1600px){.video-js .vjs-control-bar{font-size:16px}}.video-js .vjs-slider{background:#7b7b7b}.video-js .vjs-load-progress{background:#797979}.video-js .vjs-load-progress div{background:#a09f9f}.video-js .vjs-progress-holder,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{border-radius:.2em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#000000b8}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#d8d8d833;color:var(--white)}.video-js .vjs-play-progress:before{top:-.3em}.vjs-playback-rate .vjs-playback-rate-value{line-height:2.75}.vjs-menu li,.vjs-playback-rate .vjs-playback-rate-value{font-size:1.1em}@media screen and (min-width: 768px){.video-js .vjs-tech{pointer-events:none}.hide-in-desktop{visibility:hidden!important}}@media (hover: hover){.hide-in-desktop{visibility:hidden!important}}@media (pointer: fine){.hide-in-desktop{visibility:hidden!important}}.player-for-back-ward-controls{display:flex;align-items:center;justify-content:center;position:absolute;width:100%;height:100%;inset:0;z-index:2}.player-for-back-ward-controls .player-container{display:flex;align-items:center}.player-for-back-ward-controls .player-container .back-ward,.player-for-back-ward-controls .player-container .pause-play,.player-for-back-ward-controls .player-container .forward{width:2.5rem;height:2.5rem;padding:.5rem;transition:all .3s ease-in-out;box-sizing:content-box;display:flex;align-items:center;justify-content:center;background:rgba(var(--rc-rgba-black),.5);border-radius:50%;transform:scale(1)}@media (min-width: 768px){.player-for-back-ward-controls .player-container .back-ward:hover,.player-for-back-ward-controls .player-container .pause-play:hover,.player-for-back-ward-controls .player-container .forward:hover{background:rgba(var(--rc-rgba-black),1);border-radius:100%;transform:scale(1.25);cursor:pointer}.player-for-back-ward-controls .player-container .back-ward:hover svg g,.player-for-back-ward-controls .player-container .pause-play:hover svg g,.player-for-back-ward-controls .player-container .forward:hover svg g{fill:var(--primary-theme)}}.player-for-back-ward-controls .player-container .back-ward.touched,.player-for-back-ward-controls .player-container .pause-play.touched,.player-for-back-ward-controls .player-container .forward.touched{animation:scaling 2s;transform:scale(1)}@keyframes scaling{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.player-for-back-ward-controls .player-container .back-ward.touched svg g,.player-for-back-ward-controls .player-container .pause-play.touched svg g,.player-for-back-ward-controls .player-container .forward.touched svg g{animation:scalingColor 2s;fill:var(--white)}@keyframes scalingColor{0%{fill:var(--white)}50%{fill:var(--primary-theme)}to{fill:var(--white)}}.player-for-back-ward-controls .player-container .back-ward.touchout,.player-for-back-ward-controls .player-container .pause-play.touchout,.player-for-back-ward-controls .player-container .forward.touchout{animation:scaling2 2s;transform:scale(1)}@keyframes scaling2{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.player-for-back-ward-controls .player-container .back-ward.touchout svg g,.player-for-back-ward-controls .player-container .pause-play.touchout svg g,.player-for-back-ward-controls .player-container .forward.touchout svg g{animation:scalingColor2 2s;fill:var(--white)}@keyframes scalingColor2{0%{fill:var(--white)}50%{fill:var(--primary-theme)}to{fill:var(--white)}}.player-for-back-ward-controls .player-container .back-ward svg,.player-for-back-ward-controls .player-container .pause-play svg,.player-for-back-ward-controls .player-container .forward svg{width:100%}.player-for-back-ward-controls .player-container .pause-play{margin:0px 1.5rem}.player-for-back-ward-controls .player-container .pause-play .pause,.player-for-back-ward-controls .player-container .pause-play .play{display:flex;align-items:center}div[data-marker-key]{margin-left:.7%!important}.vjs-texttrack-settings{display:none}\n"] }]
}], function () {
return [{ type: ViewerService }, { type: i0.Renderer2 }, { type: i4.QuestionCursor, decorators: [{
type: Optional
}] }, { type: i3.HttpClient }, { type: i0.ChangeDetectorRef }];
}, { config: [{
type: Input
}], action: [{
type: Input
}], questionSetData: [{
type: Output
}], playerInstance: [{
type: Output
}], target: [{
type: ViewChild,
args: ['target', { static: true }]
}], controlDiv: [{
type: ViewChild,
args: ['controlDiv', { static: true }]
}] });
})();
const _c0 = ["videoPlayer"];
const _c1 = function (a0) { return { "isVisible": a0 }; };
function SunbirdVideoPlayerComponent_sb_player_side_menu_icon_2_Template(rf, ctx) {
if (rf & 1) {
const _r8 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "sb-player-side-menu-icon", 8);
i0.ɵɵlistener("sidebarMenuEvent", function SunbirdVideoPlayerComponent_sb_player_side_menu_icon_2_Template_sb_player_side_menu_icon_sidebarMenuEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.sideBarEvents($event)); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c1, ctx_r1.showControls));
}
}
function SunbirdVideoPlayerComponent_video_player_3_Template(rf, ctx) {
if (rf & 1) {
const _r10 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "video-player", 9);
i0.ɵɵlistener("questionSetData", function SunbirdVideoPlayerComponent_video_player_3_Template_video_player_questionSetData_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.questionSetData($event)); })("playerInstance", function SunbirdVideoPlayerComponent_video_player_3_Template_video_player_playerInstance_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.playerInstance($event)); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵproperty("config", ctx_r2.playerConfig.config)("action", ctx_r2.playerAction);
}
}
function SunbirdVideoPlayerComponent_sb_player_sidebar_4_Template(rf, ctx) {
if (rf & 1) {
const _r13 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "sb-player-sidebar", 10);
i0.ɵɵlistener("sidebarEvent", function SunbirdVideoPlayerComponent_sb_player_sidebar_4_Template_sb_player_sidebar_sidebarEvent_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.sideBarEvents($event)); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
const ctx_r3 = i0.ɵɵnextContext();
i0.ɵɵproperty("playerConfig", ctx_r3.playerConfig)("title", ctx_r3.viewerService.contentName)("config", ctx_r3.sideMenuConfig);
}
}
function SunbirdVideoPlayerComponent_sb_player_end_page_5_Template(rf, ctx) {
if (rf & 1) {
const _r15 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "sb-player-end-page", 11);
i0.ɵɵlistener("playNextContent", function SunbirdVideoPlayerComponent_sb_player_end_page_5_Template_sb_player_end_page_playNextContent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.playContent($event)); })("exitContent", function SunbirdVideoPlayerComponent_sb_player_end_page_5_Template_sb_player_end_page_exitContent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.exitContent($event)); })("replayContent", function SunbirdVideoPlayerComponent_sb_player_end_page_5_Template_sb_player_end_page_replayContent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.replayContent($event)); });
i0.ɵɵelementEnd();
}
if (rf & 2) {
const ctx_r4 = i0.ɵɵnextContext();
i0.ɵɵproperty("playerConfig", ctx_r4.playerConfig)("contentName", ctx_r4.viewerService.contentName)("outcomeLabel", ctx_r4.viewerService.showScore ? "Score: " : "")("outcome", ctx_r4.viewerService.showScore ? ctx_r4.viewerService.scoreObtained + (ctx_r4.viewerService.maxScore && ctx_r4.viewerService.maxScore > 0 ? "/" + ctx_r4.viewerService.maxScore : "") : "")("nextContent", ctx_r4.nextContent)("userName", ctx_r4.viewerService.userName)("showExit", ctx_r4.sideMenuConfig.showExit)("timeSpentLabel", ctx_r4.viewerService.timeSpent);
}
}
function SunbirdVideoPlayerComponent_sb_player_contenterror_6_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelement(0, "sb-player-contenterror");
}
}
function SunbirdVideoPlayerComponent_div_7_Template(rf, ctx) {
if (rf & 1) {
const _r20 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 12, 13)(2, "quml-main-player", 14);
i0.ɵɵlistener("playerEvent", function SunbirdVideoPlayerComponent_div_7_Template_quml_main_player_playerEvent_2_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.qumlPlayerEvents($event)); });
i0.ɵɵelementEnd()();
}
if (rf & 2) {
const ctx_r6 = i0.ɵɵnextContext();
i0.ɵɵadvance(2);
i0.ɵɵproperty("playerConfig", ctx_r6.QumlPlayerConfig);
}
}
class SunbirdVideoPlayerComponent {
constructor(videoPlayerService, viewerService, cdr, renderer2, errorService) {
this.videoPlayerService = videoPlayerService;
this.viewerService = viewerService;
this.cdr = cdr;
this.renderer2 = renderer2;
this.errorService = errorService;
this.telemetryEvent = new EventEmitter();
this.viewState = 'player';
this.showControls = true;
this.sideMenuConfig = {
showShare: true,
showDownload: true,
showReplay: true,
showExit: true
};
this.isPaused = false;
this.showQumlPlayer = false;
this.QumlPlayerConfig = {};
this.isFullScreen = false;
this.isInitialized = false;
this.raiseInternetDisconnectionError = () => {
const code = errorCode.internetConnectivity;
const message = errorMessage.internetConnectivity;
const stacktrace = `${code}: ${message}`;
this.viewerService.raiseExceptionLog(code, message, stacktrace, this.traceId);
};
this.playerEvent = this.viewerService.playerEvent;
this.viewerService.playerEvent.subscribe(event => {
if (event.type === 'pause') {
this.isPaused = true;
this.showControls = true;
}
if (event.type === 'play') {
this.isPaused = false;
}
if (event.type === 'loadstart') {
this.viewerService.raiseStartEvent(event);
}
if (event.type === 'ended') {
this.viewerService.endPageSeen = true;
this.viewerService.raiseEndEvent();
this.viewState = 'end';
this.cdr.detectChanges();
}
if (event.type === 'error') {
// eslint-disable-next-line one-var
let code = errorCode.contentLoadFails, message = errorMessage.contentLoadFails;
if (this.viewerService.isAvailableLocally) {
code = errorCode.contentLoadFails;
message = errorMessage.contentLoadFails;
}
if (code === errorCode.contentLoadFails) {
this.showContentError = true;
}
this.viewerService.raiseExceptionLog(code, message, event, this.traceId);
}
// eslint-disable-next-line max-len
const events = [{ type: 'volumechange', telemetryEvent: 'VOLUME_CHANGE' }, { type: 'seeking', telemetryEvent: 'DRAG' }, { type: 'fullscreen', telemetryEvent: 'FULLSCREEN' },
{ type: 'ratechange', telemetryEvent: 'RATE_CHANGE' }];
events.forEach(data => {
if (event.type === data.type) {
this.viewerService.raiseHeartBeatEvent(data.telemetryEvent);
}
});
});
}
onTelemetryEvent(event) {
this.telemetryEvent.emit(event.detail);
}
ngOnInit() {
var _a, _b;
this.isInitialized = true;
if (this.playerConfig) {
if (typeof this.playerConfig === 'string') {
try {
this.playerConfig = JSON.parse(this.playerConfig);
}
catch (error) {
console.error('Invalid playerConfig: ', error);
}
}
}
setInterval(() => {
if (!this.isPaused) {
this.showControls = false;
}
}, 5000);
/* eslint-disable @typescript-eslint/dot-notation */
this.nextContent = (_b = (_a = this.playerConfig) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.nextContent;
this.traceId = this.playerConfig.config['traceId'];
this.sideMenuConfig = Object.assign(Object.assign({}, this.sideMenuConfig), this.playerConfig.config.sideMenu);
this.videoPlayerService.initialize(this.playerConfig);
this.viewerService.initialize(this.playerConfig);
window.addEventListener('offline', this.raiseInternetDisconnectionError, true);
this.QumlPlayerConfig.config = this.playerConfig.config;
this.QumlPlayerConfig.config.sideMenu.enable = false;
this.QumlPlayerConfig.context = this.playerConfig.context;
this.setTelemetryObjectRollup(this.playerConfig.metadata.identifier);
}
ngOnChanges(changes) {
var _a;
if (changes.action) {
if (!this.showQumlPlayer) {
this.playerAction = this.action;
}
}
if (((_a = changes === null || changes === void 0 ? void 0 : changes.playerConfig) === null || _a === void 0 ? void 0 : _a.firstChange) && this.isInitialized) {
// Calling for web component explicitly and life cycle works in different order
this.ngOnInit();
}
}
ngAfterViewInit() {
const videoPlayerElement = this.videoPlayerRef.nativeElement;
this.unlistenMouseMove = this.renderer2.listen(videoPlayerElement, 'mousemove', () => {
this.showControls = true;
});
this.unlistenTouchStart = this.renderer2.listen(videoPlayerElement, 'touchstart', () => {
this.showControls = true;
});
const contentCompabilityLevel = this.playerConfig.metadata['compatibilityLevel'];
if (contentCompabilityLevel) {
const checkContentCompatible = this.errorService.checkContentCompatibility(contentCompabilityLevel);
if (!checkContentCompatible['isCompitable']) {
// eslint-disable-next-line max-len
this.viewerService.raiseExceptionLog(errorCode.contentCompatibility, errorMessage.contentCompatibility, checkContentCompatible['error']['message'], this.traceId);
}
}
}
sideBarEvents(event) {
this.playerEvent.emit(event);
if (event.type === 'DOWNLOAD') {
this.downloadVideo();
}
const events = ['SHARE', 'DOWNLOAD_MENU', 'EXIT', 'CLOSE_MENU', 'OPEN_MENU', 'DOWNLOAD_POPUP_CANCEL', 'DOWNLOAD_POPUP_CLOSE'];
events.forEach(data => {
if (event.type === data) {
this.viewerService.raiseHeartBeatEvent(data);
}
if (event.type === 'EXIT') {
this.viewerService.sidebarMenuEvent.emit('CLOSE_MENU');
}
});
}
setTelemetryObjectRollup(id) {
if (this.QumlPlayerConfig.context) {
const hasObjectRollup = this.QumlPlayerConfig && this.QumlPlayerConfig.context && this.QumlPlayerConfig.context.objectRollup;
if (!hasObjectRollup) {
this.QumlPlayerConfig.context.objectRollup = {};
}
const levels = Object.keys(this.QumlPlayerConfig.context.objectRollup);
this.QumlPlayerConfig.context.objectRollup[`l${levels.length + 1}`] = id;
}
}
playContent(event) {
this.viewerService.raiseHeartBeatEvent(event.type);
}
replayContent(event) {
this.playerEvent.emit(event);
this.viewState = 'player';
this.viewerService.isEndEventRaised = false;
this.viewerService.raiseHeartBeatEvent('REPLAY');
this.cdr.detectChanges();
}
exitContent(event) {
this.playerEvent.emit(event);
this.viewerService.raiseHeartBeatEvent('EXIT');
}
downloadVideo() {
const a = document.createElement('a');
a.href = this.viewerService.artifactUrl;
a.download = this.viewerService.contentName;
a.target = '_blank';
document.body.appendChild(a);
a.click();
a.remove();
this.viewerService.raiseHeartBeatEvent('DOWNLOAD');
}
qumlPlayerEvents(event) {
if (event.eid === 'QUML_SUMMARY') {
this.showQumlPlayer = false;
const score = parseInt(event.edata.extra.find(p => p.id === 'score')['value'], 10);
this.viewerService.interceptionResponses[this.currentInterceptionTime] = {
score,
isSkipped: false
};
const interceptPointElement = document.querySelector(`[data-marker-time="${this.currentInterceptionTime}"]`);
if (interceptPointElement) {
interceptPointElement['style'].background = 'green';
}
this.videoInstance.play();
this.videoInstance.controls(true);
this.viewerService.raiseImpressionEvent('video');
// if currently video is not in full screen and was previously full screen then set it back to full screen again
if (!document.fullscreenElement && this.isFullScreen) {
if (document.getElementsByClassName('video-js')[0]) {
document.getElementsByClassName('video-js')[0].requestFullscreen()
.catch((err) => console.error(err));
}
}
}
}
questionSetData({ response, time, identifier }) {
this.QumlPlayerConfig.metadata = response;
this.QumlPlayerConfig.metadata['showStartPage'] = 'No';
this.QumlPlayerConfig.metadata['showEndPage'] = 'No';
this.currentInterceptionTime = time;
this.currentInterceptionUIId = identifier;
if (document.fullscreenElement) {
this.isFullScreen = true;
document.exitFullscreen()
.catch((err) => console.error(err));
}
else {
this.isFullScreen = false;
}
this.showQumlPlayer = true;
this.viewerService.raiseImpressionEvent('interactive-question-set', { id: identifier, type: 'QuestionSet' });
this.viewerService.raiseHeartBeatEvent('VIDEO_MARKER_SELECTED', {
identifier,
type: 'QuestionSet',
interceptedAt: time // Time when the interception happened
});
}
playerInstance(event) {
this.videoInstance = event;
}
ngOnDestroy() {
this.viewerService.raiseEndEvent(true);
this.unlistenTouchStart();
this.unlistenMouseMove();
this.viewerService.isEndEventRaised = false;
window.removeEventListener('offline', this.raiseInternetDisconnectionError, true);
}
}
/** @nocollapse */ SunbirdVideoPlayerComponent.ɵfac = function SunbirdVideoPlayerComponent_Factory(t) { return new (t || SunbirdVideoPlayerComponent)(i0.ɵɵdirectiveInject(SunbirdVideoPlayerService), i0.ɵɵdirectiveInject(ViewerService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i3$1.ErrorService)); };
/** @nocollapse */ SunbirdVideoPlayerComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SunbirdVideoPlayerComponent, selectors: [["sunbird-video-player"]], viewQuery: function SunbirdVideoPlayerComponent_Query(rf, ctx) {
if (rf & 1) {
i0.ɵɵviewQuery(_c0, 7);
}
if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoPlayerRef = _t.first);
}
}, hostBindings: function SunbirdVideoPlayerComponent_HostBindings(rf, ctx) {
if (rf & 1) {
i0.ɵɵlistener("TelemetryEvent", function SunbirdVideoPlayerComponent_TelemetryEvent_HostBindingHandler($event) { return ctx.onTelemetryEvent($event); }, false, i0.ɵɵresolveDocument)("beforeunload", function SunbirdVideoPlayerComponent_beforeunload_HostBindingHandler() { return ctx.ngOnDestroy(); }, false, i0.ɵɵresolveWindow);
}
}, inputs: { playerConfig: "playerConfig", action: "action" }, outputs: { playerEvent: "playerEvent", telemetryEvent: "telemetryEvent" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 7, consts: [[1, "sunbird-video-player-container", 3, "ngClass"], ["videoPlayer", ""], ["class", "sb-player-side-menu-icon notVisible", "tabindex", "0", 3, "ngClass", "sidebarMenuEvent", 4, "ngIf"], [3, "config", "action", "questionSetData", "playerInstance", 4, "ngIf"], [3, "playerConfig", "title", "config", "sidebarEvent", 4, "ngIf"], ["tabindex", "0", 3, "playerConfig", "contentName", "outcomeLabel", "outcome", "nextContent", "userName", "showExit", "timeSpentLabel", "playNextContent", "exitContent", "replayContent", 4, "ngIf"], [4, "ngIf"], ["class", "sunbird-video-player-container", 4, "ngIf"], ["tabindex", "0", 1, "sb-player-side-menu-icon", "notVisible", 3, "ngClass", "sidebarMenuEvent"], [3, "config", "action", "questionSetData", "playerInstance"], [3, "playerConfig", "title", "config", "sidebarEvent"], ["tabindex", "0", 3, "playerConfig", "contentName", "outcomeLabel", "outcome", "nextContent", "userName", "showExit", "timeSpentLabel", "playNextContent", "exitContent", "replayContent"], [1, "sunbird-video-player-container"], ["qumlPlayer", ""], [3, "playerConfig", "playerEvent"]], template: function SunbirdVideoPlayerComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0, 1);
i0.ɵɵtemplate(2, SunbirdVideoPlayerComponent_sb_player_side_menu_icon_2_Template, 1, 3, "sb-player-side-menu-icon", 2);
i0.ɵɵtemplate(3, SunbirdVideoPlayerComponent_video_player_3_Template, 1, 2, "video-player", 3);
i0.ɵɵtemplate(4, SunbirdVideoPlayerComponent_sb_player_sidebar_4_Template, 1, 3, "sb-player-sidebar", 4);
i0.ɵɵtemplate(5, SunbirdVideoPlayerComponent_sb_player_end_page_5_Template, 1, 8, "sb-player-end-page", 5);
i0.ɵɵtemplate(6, SunbirdVideoPlayerComponent_sb_player_contenterror_6_Template, 1, 0, "sb-player-contenterror", 6);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(7, SunbirdVideoPlayerComponent_div_7_Template, 3, 1, "div", 7);
}
if (rf & 2) {
i0.ɵɵproperty("ngClass", ctx.showQumlPlayer ? "videoPlayerHide" : "videoPlayerShow");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.viewState === "player");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.viewState === "player");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.viewState === "player");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.viewState === "end");
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.showContentError);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx.showQumlPlayer);
}
}, dependencies: [i4$1.NgClass, i4$1.NgIf, i3$1.ɵd, i3$1.ɵe, i3$1.ɵf, i3$1.ɵl, i4.ɵbh, VideoPlayerComponent], styles: [".sunbird-video-player-container[_ngcontent-%COMP%]{width:100%;height:100%;overflow:hidden;position:relative}.videoPlayerHide[_ngcontent-%COMP%]{display:none}.videoPlayerShow[_ngcontent-%COMP%]{display:block}pdf-menu[_ngcontent-%COMP%]{position:absolute;top:0;left:0;z-index:99}.notVisible[_ngcontent-%COMP%], .BtmNotVisible[_ngcontent-%COMP%]{transition:all 1s ease-in-out;position:absolute;width:100%}.notVisible[_ngcontent-%COMP%]{top:-10rem}.notVisible.isVisible[_ngcontent-%COMP%]{top:0rem}.BtmNotVisible[_ngcontent-%COMP%]{bottom:-10rem}.BtmNotVisible.isVisible[_ngcontent-%COMP%]{bottom:0rem} .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span{background:none!important} .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span:after, .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span:before, .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button:hover span:before, .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button:hover span:after{background-color:#ffffffb3!important} .sunbird-video-player-container .sb-player-side-menu-icon label{background:rgba(51,51,51,.5)} .sunbird-video-player-container .sb-player-side-menu-icon label span, .sunbird-video-player-container .sb-player-side-menu-icon label span:before, .sunbird-video-player-container .sb-player-side-menu-icon label span:after{background-color:#ffffffb3!important} .sunbird-pdf-player{overflow:hidden} .pdfViewer .page{background:none!important;border-image:none!important;border:0!important} #toolbarContainer{background:none!important;height:auto!important} #viewerContainer{position:relative!important;height:calc(100% - 3rem)} .html, .body, .pdf-viewer button, .pdf-viewer input, .pdf-viewer select{font-size:inherit!important} .findbar, .secondaryToolbar, html[dir=ltr] #toolbarContainer, html[dir=rtl] #toolbarContainer{box-shadow:none!important} .zoom{min-height:inherit!important} html[dir=rtl] .sb-pdf-reading-status{left:auto;right:1rem}.sb-pdf-reading-status[_ngcontent-%COMP%]{color:var(--gray-800);font-size:.75rem;position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;background:var(--white);border-radius:.5rem;padding:.25em .5rem;z-index:5;line-height:normal}.sb-pdf-reading-status[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{background:var(--gray-800);width:.25rem;height:.25rem;display:block;margin:0px .5rem;border-radius:50%}.sbt-pdf-footer[_ngcontent-%COMP%]{background:var(--white);position:absolute;bottom:0;width:100%;height:3rem;display:flex;align-items:center;justify-content:flex-end;padding:.75rem .5rem}@media all and (orientation: landscape){ .visible-only-potrait{display:none}}@media all and (orientation: portrait){ #viewerContainer{height:calc(100% - 6rem)!important} .visible-only-landscape{display:none} .visible-only-potrait{display:block} .file-download__popup{height:15.125rem} .pdf-endpage{display:block!important;position:relative} .pdf-endpage__left-panel{margin-top:6rem} .pdf-endpage__right-panel .title-section{position:absolute;top:0;left:0;right:0}}@media all and (max-width: 640px){.visible-only-landscape[_ngcontent-%COMP%]{display:none}.visible-only-potrait[_ngcontent-%COMP%]{display:block}}@media all and (min-width: 640px){.visible-only-landscape[_ngcontent-%COMP%]{display:block}.visible-only-potrait[_ngcontent-%COMP%]{display:none}}"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SunbirdVideoPlayerComponent, [{
type: Component,
args: [{ selector: 'sunbird-video-player', template: "<div class=\"sunbird-video-player-container\" #videoPlayer [ngClass]=\"showQumlPlayer ? 'videoPlayerHide': 'videoPlayerShow'\">\n <sb-player-side-menu-icon class=\"sb-player-side-menu-icon notVisible\" tabindex=\"0\" (sidebarMenuEvent)=\"sideBarEvents($event)\"\n\n *ngIf=\"viewState ==='player'\" [ngClass]=\"{'isVisible': showControls}\"></sb-player-side-menu-icon>\n <video-player *ngIf=\"viewState === 'player'\" (questionSetData)=\"questionSetData($event)\" (playerInstance)=\"playerInstance($event)\" [config]=\"playerConfig.config\" [action]=\"playerAction\">\n </video-player>\n <sb-player-sidebar [playerConfig]=\"playerConfig\"\n *ngIf=\"viewState ==='player'\"\n [title]=\"viewerService.contentName\"\n (sidebarEvent)=\"sideBarEvents($event)\" [config]=\"sideMenuConfig\"></sb-player-sidebar>\n <sb-player-end-page\n [playerConfig]=\"playerConfig\"\n [contentName]=\"viewerService.contentName\" \n [outcomeLabel]=\"viewerService.showScore ? 'Score: ': ''\" \n [outcome]=\"viewerService.showScore ? viewerService.scoreObtained + ((viewerService.maxScore && viewerService.maxScore > 0) ? '/' + viewerService.maxScore : '') : ''\"\n [nextContent]=\"nextContent\" [userName]=\"viewerService.userName\" \n [showExit]=\"sideMenuConfig.showExit\"\n [timeSpentLabel]=\"viewerService.timeSpent\" tabindex=\"0\" (playNextContent)=\"playContent($event)\" \n (exitContent)=\"exitContent($event)\" (replayContent)=\"replayContent($event)\"\n *ngIf=\"viewState === 'end'\"></sb-player-end-page>\n <sb-player-contenterror *ngIf=\"showContentError\"></sb-player-contenterror>\n</div>\n\n<div class=\"sunbird-video-player-container\" *ngIf=\"showQumlPlayer\" #qumlPlayer>\n <quml-main-player [playerConfig]=\"QumlPlayerConfig\" (playerEvent)=\"qumlPlayerEvents($event)\"></quml-main-player>\n</div>", styles: [".sunbird-video-player-container{width:100%;height:100%;overflow:hidden;position:relative}.videoPlayerHide{display:none}.videoPlayerShow{display:block}pdf-menu{position:absolute;top:0;left:0;z-index:99}.notVisible,.BtmNotVisible{transition:all 1s ease-in-out;position:absolute;width:100%}.notVisible{top:-10rem}.notVisible.isVisible{top:0rem}.BtmNotVisible{bottom:-10rem}.BtmNotVisible.isVisible{bottom:0rem}::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span{background:none!important}::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span:after,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span:before,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button:hover span:before,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button:hover span:after{background-color:#ffffffb3!important}::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon label{background:rgba(51,51,51,.5)}::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon label span,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon label span:before,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon label span:after{background-color:#ffffffb3!important}::ng-deep .sunbird-pdf-player{overflow:hidden}::ng-deep .pdfViewer .page{background:none!important;border-image:none!important;border:0!important}::ng-deep #toolbarContainer{background:none!important;height:auto!important}::ng-deep #viewerContainer{position:relative!important;height:calc(100% - 3rem)}::ng-deep .html,::ng-deep .body,::ng-deep .pdf-viewer button,::ng-deep .pdf-viewer input,::ng-deep .pdf-viewer select{font-size:inherit!important}::ng-deep .findbar,::ng-deep .secondaryToolbar,::ng-deep html[dir=ltr] #toolbarContainer,::ng-deep html[dir=rtl] #toolbarContainer{box-shadow:none!important}::ng-deep .zoom{min-height:inherit!important}::ng-deep html[dir=rtl] .sb-pdf-reading-status{left:auto;right:1rem}.sb-pdf-reading-status{color:var(--gray-800);font-size:.75rem;position:absolute;left:1rem;bottom:1rem;display:flex;align-items:center;background:var(--white);border-radius:.5rem;padding:.25em .5rem;z-index:5;line-height:normal}.sb-pdf-reading-status span{background:var(--gray-800);width:.25rem;height:.25rem;display:block;margin:0px .5rem;border-radius:50%}.sbt-pdf-footer{background:var(--white);position:absolute;bottom:0;width:100%;height:3rem;display:flex;align-items:center;justify-content:flex-end;padding:.75rem .5rem}@media all and (orientation: landscape){::ng-deep .visible-only-potrait{display:none}}@media all and (orientation: portrait){::ng-deep #viewerContainer{height:calc(100% - 6rem)!important}::ng-deep .visible-only-landscape{display:none}::ng-deep .visible-only-potrait{display:block}::ng-deep .file-download__popup{height:15.125rem}::ng-deep .pdf-endpage{display:block!important;position:relative}::ng-deep .pdf-endpage__left-panel{margin-top:6rem}::ng-deep .pdf-endpage__right-panel .title-section{position:absolute;top:0;left:0;right:0}}@media all and (max-width: 640px){.visible-only-landscape{display:none}.visible-only-potrait{display:block}}@media all and (min-width: 640px){.visible-only-landscape{display:block}.visible-only-potrait{display:none}}\n"] }]
}], function () { return [{ type: SunbirdVideoPlayerService }, { type: ViewerService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i3$1.ErrorService }]; }, { playerConfig: [{
type: Input
}], action: [{
type: Input
}], playerEvent: [{
type: Output
}], telemetryEvent: [{
type: Output
}], videoPlayerRef: [{
type: ViewChild,
args: ['videoPlayer', { static: true }]
}], onTelemetryEvent: [{
type: HostListener,
args: ['document:TelemetryEvent', ['$event']]
}], ngOnDestroy: [{
type: HostListener,
args: ['window:beforeunload']
}] });
})();
class SunbirdVideoPlayerModule {
}
/** @nocollapse */ SunbirdVideoPlayerModule.ɵfac = function SunbirdVideoPlayerModule_Factory(t) { return new (t || SunbirdVideoPlayerModule)(); };
/** @nocollapse */ SunbirdVideoPlayerModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: SunbirdVideoPlayerModule });
/** @nocollapse */ SunbirdVideoPlayerModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [ErrorService], imports: [CommonModule,
FormsModule,
HttpClientModule,
SunbirdPlayerSdkModule,
QumlLibraryModule, SunbirdPlayerSdkModule] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SunbirdVideoPlayerModule, [{
type: NgModule,
args: [{
declarations: [SunbirdVideoPlayerComponent, VideoPlayerComponent],
imports: [
CommonModule,
FormsModule,
HttpClientModule,
SunbirdPlayerSdkModule,
QumlLibraryModule,
],
providers: [ErrorService],
exports: [SunbirdVideoPlayerComponent, SunbirdPlayerSdkModule]
}]
}], null, null);
})();
(function () {
(typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SunbirdVideoPlayerModule, { declarations: [SunbirdVideoPlayerComponent, VideoPlayerComponent], imports: [CommonModule,
FormsModule,
HttpClientModule,
SunbirdPlayerSdkModule,
QumlLibraryModule], exports: [SunbirdVideoPlayerComponent, SunbirdPlayerSdkModule] });
})();
/*
* Public API Surface of sunbird-video-player
*/
/**
* Generated bundle index. Do not edit.
*/
export { SunbirdVideoPlayerComponent, SunbirdVideoPlayerModule, SunbirdVideoPlayerService };
//# sourceMappingURL=project-sunbird-sunbird-video-player-v9.mjs.map