UNPKG

dictrigyn-video-player

Version:

Contains Video player library components powered by angular. These components are designed to be used in sunbird consumption platforms *(mobile app, web portal, offline desktop app)* to drive reusability, maintainability hence reducing the redundant devel

1,252 lines (1,248 loc) 95 kB
import { Injectable, ɵɵdefineInjectable, ɵɵinject, EventEmitter, Optional, Component, ChangeDetectorRef, Renderer2, Input, Output, ViewChild, HostListener, ViewEncapsulation, NgModule } from '@angular/core'; import { isEmpty, isArray, forEach, some, last, get, filter } from 'lodash-es'; import { CsTelemetryModule } from '@project-sunbird/client-services/telemetry'; import { __awaiter, __generator, __assign } from 'tslib'; import { errorCode, errorMessage, ErrorService, SunbirdPlayerSdkModule } from '@dicdikshaorg/player-sdk-v9'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { QuestionCursor, QumlLibraryModule } from '@project-sunbird/sunbird-quml-player-v9'; import { of } from 'rxjs'; import { map } from 'rxjs/operators'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import 'videojs-contrib-quality-levels'; import videojshttpsourceselector from 'videojs-http-source-selector'; /** * @fileoverview added by tsickle * Generated from: lib/services/util.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var UtilService = /** @class */ (function () { function UtilService() { } /** * @param {?=} length * @return {?} */ UtilService.prototype.uniqueId = /** * @param {?=} length * @return {?} */ function (length) { if (length === void 0) { length = 32; } /** @type {?} */ var result = ''; /** @type {?} */ var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; /** @type {?} */ var charactersLength = characters.length; for (var i = 0; i < length; i++) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; }; /** * @param {?} duration * @return {?} */ UtilService.prototype.getTimeSpentText = /** * @param {?} duration * @return {?} */ function (duration) { /** @type {?} */ var minutes = Math.floor(duration / 60000); /** @type {?} */ var seconds = Number(((duration % 60000) / 1000).toFixed(0)); return (minutes + ':' + (seconds < 10 ? '0' : '') + seconds); }; UtilService.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] } ]; /** @nocollapse */ UtilService.ɵprov = ɵɵdefineInjectable({ factory: function UtilService_Factory() { return new UtilService(); }, token: UtilService, providedIn: "root" }); return UtilService; }()); /** * @fileoverview added by tsickle * Generated from: lib/sunbird-video-player.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var SunbirdVideoPlayerService = /** @class */ (function () { function SunbirdVideoPlayerService(utilService) { this.utilService = utilService; this.contentSessionId = this.utilService.uniqueId(); } /** * @param {?} __0 * @return {?} */ SunbirdVideoPlayerService.prototype.initialize = /** * @param {?} __0 * @return {?} */ function (_a) { var context = _a.context, config = _a.config, metadata = _a.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 || {} }; }; /** * @param {?} duration * @return {?} */ SunbirdVideoPlayerService.prototype.start = /** * @param {?} duration * @return {?} */ function (duration) { CsTelemetryModule.instance.telemetryService.raiseStartTelemetry({ options: this.getEventOptions(), edata: { type: 'content', mode: 'play', pageid: '', duration: Number((duration / 1e3).toFixed(2)) } }); }; /** * @param {?} duration * @param {?} totallength * @param {?} currentlength * @param {?} endpageseen * @param {?} totalseekedlength * @param {?} visitedlength * @param {?} score * @return {?} */ SunbirdVideoPlayerService.prototype.end = /** * @param {?} duration * @param {?} totallength * @param {?} currentlength * @param {?} endpageseen * @param {?} totalseekedlength * @param {?} visitedlength * @param {?} score * @return {?} */ function (duration, totallength, currentlength, endpageseen, totalseekedlength, visitedlength, score) { /** @type {?} */ var durationSec = Number((duration / 1e3).toFixed(2)); CsTelemetryModule.instance.telemetryService.raiseEndTelemetry({ edata: { type: 'content', mode: 'play', pageid: 'sunbird-player-Endpage', summary: [ { progress: Number(((currentlength / totallength) * 100).toFixed(0)) }, { totallength: totallength }, { visitedlength: visitedlength }, { visitedcontentend: (totallength === currentlength) }, { totalseekedlength: totalseekedlength }, { endpageseen: endpageseen }, { score: score } ], duration: durationSec }, options: this.getEventOptions() }); }; /** * @param {?} id * @param {?} currentPage * @param {?=} extraValues * @return {?} */ SunbirdVideoPlayerService.prototype.interact = /** * @param {?} id * @param {?} currentPage * @param {?=} extraValues * @return {?} */ function (id, currentPage, extraValues) { CsTelemetryModule.instance.telemetryService.raiseInteractTelemetry({ options: this.getEventOptions(), edata: { type: 'TOUCH', subtype: '', id: id, pageid: currentPage + '', extra: extraValues } }); }; /** * @param {?} data * @return {?} */ SunbirdVideoPlayerService.prototype.heartBeat = /** * @param {?} data * @return {?} */ function (data) { CsTelemetryModule.instance.playerTelemetryService.onHeartBeatEvent(data, {}); }; /** * @param {?} currentPage * @param {?=} cdata * @return {?} */ SunbirdVideoPlayerService.prototype.impression = /** * @param {?} currentPage * @param {?=} cdata * @return {?} */ function (currentPage, cdata) { if (cdata === void 0) { cdata = {}; } /** @type {?} */ var 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); }; /** * @param {?} errorCode * @param {?} errorType * @param {?=} stacktrace * @return {?} */ SunbirdVideoPlayerService.prototype.error = /** * @param {?} errorCode * @param {?} errorType * @param {?=} stacktrace * @return {?} */ function (errorCode, errorType, stacktrace) { CsTelemetryModule.instance.telemetryService.raiseErrorTelemetry({ options: this.getEventOptions(), edata: { err: errorCode, errtype: errorType, stacktrace: (stacktrace && stacktrace.toString()) || '' } }); }; /** * @private * @return {?} */ SunbirdVideoPlayerService.prototype.getEventOptions = /** * @private * @return {?} */ function () { 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 || {} } }); }; SunbirdVideoPlayerService.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] } ]; /** @nocollapse */ SunbirdVideoPlayerService.ctorParameters = function () { return [ { type: UtilService } ]; }; /** @nocollapse */ SunbirdVideoPlayerService.ɵprov = ɵɵdefineInjectable({ factory: function SunbirdVideoPlayerService_Factory() { return new SunbirdVideoPlayerService(ɵɵinject(UtilService)); }, token: SunbirdVideoPlayerService, providedIn: "root" }); return SunbirdVideoPlayerService; }()); if (false) { /** * @type {?} * @private */ SunbirdVideoPlayerService.prototype.contentSessionId; /** * @type {?} * @private */ SunbirdVideoPlayerService.prototype.playSessionId; /** * @type {?} * @private */ SunbirdVideoPlayerService.prototype.telemetryObject; /** * @type {?} * @private */ SunbirdVideoPlayerService.prototype.context; /** @type {?} */ SunbirdVideoPlayerService.prototype.config; /** * @type {?} * @private */ SunbirdVideoPlayerService.prototype.utilService; } /** * @fileoverview added by tsickle * Generated from: lib/services/viewer.service.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var ViewerService = /** @class */ (function () { function ViewerService(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.sidebarMenuEvent = new EventEmitter(); this.isAvailableLocally = false; this.interceptionResponses = {}; this.showScore = false; this.scoreObtained = 0; this.contentMap = {}; this.isEndEventRaised = false; this.PlayerLoadStartedAt = new Date().getTime(); } /** * @param {?} __0 * @return {?} */ ViewerService.prototype.initialize = /** * @param {?} __0 * @return {?} */ function (_a) { var context = _a.context, config = _a.config, metadata = _a.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) { var _b = context.userData, firstName = _b.firstName, lastName = _b.lastName; 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) { /** @type {?} */ var basePath = (metadata.streamingUrl) ? (metadata.streamingUrl) : (metadata.basePath || metadata.baseDir); this.streamingUrl = basePath + "/" + metadata.artifactUrl; this.mimeType = metadata.mimeType; } }; /** * @param {?} selectedTranscripts * @return {?} */ ViewerService.prototype.handleTranscriptsData = /** * @param {?} selectedTranscripts * @return {?} */ function (selectedTranscripts) { var _this = this; 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, (/** * @param {?} value * @return {?} */ function (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; }; /** * @return {?} */ ViewerService.prototype.getPlayerOptions = /** * @return {?} */ function () { return __awaiter(this, void 0, void 0, function () { var data; var _this = this; return __generator(this, function (_a) { switch (_a.label) { case 0: if (!!this.streamingUrl) return [3 /*break*/, 1]; return [2 /*return*/, [{ src: this.artifactUrl, type: this.artifactMimeType }]]; case 1: return [4 /*yield*/, this.http.head(this.streamingUrl, { responseType: 'blob' }).toPromise().catch((/** * @param {?} error * @return {?} */ function (error) { // tslint:disable-next-line:max-line-length _this.raiseExceptionLog(errorCode.streamingUrlSupport, errorMessage.streamingUrlSupport, new Error("Streaming Url Not Supported " + _this.streamingUrl), _this.traceId); }))]; case 2: data = _a.sent(); if (data) { return [2 /*return*/, [{ src: this.streamingUrl, type: this.mimeType }]]; } else { return [2 /*return*/, [{ src: this.artifactUrl, type: this.artifactMimeType }]]; } _a.label = 3; case 3: return [2 /*return*/]; } }); }); }; /** * @return {?} */ ViewerService.prototype.getMarkers = /** * @return {?} */ function () { var _a, _b; if ((_b = (_a = this) === null || _a === void 0 ? void 0 : _a.interceptionPoints) === null || _b === void 0 ? void 0 : _b.items) { try { /** @type {?} */ var interceptionPoints = this.interceptionPoints; this.showScore = true; return interceptionPoints.items.map((/** * @param {?} __0 * @return {?} */ function (_a) { var interceptionPoint = _a.interceptionPoint, identifier = _a.identifier, type = _a.type; return { time: interceptionPoint, type: type, identifier: 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; }; /** * @param {?} identifier * @return {?} */ ViewerService.prototype.getQuestionSet = /** * @param {?} identifier * @return {?} */ function (identifier) { var _this = this; /** @type {?} */ var content = this.contentMap[identifier]; if (!content) { if (!this.questionCursor) { return null; } else { return this.questionCursor.getQuestionSet(identifier) .pipe(map((/** * @param {?} response * @return {?} */ function (response) { _this.contentMap[identifier] = response.questionSet; return _this.contentMap[identifier]; }))); } } else { return of(content); } }; /** * @return {?} */ ViewerService.prototype.preFetchContent = /** * @return {?} */ function () { /** @type {?} */ var nextMarker = this.getNextMarker(); if (nextMarker) { /** @type {?} */ var identifier = nextMarker.identifier; this.getQuestionSet(nextMarker.identifier); } }; /** * @return {?} */ ViewerService.prototype.getNextMarker = /** * @return {?} */ function () { /** @type {?} */ var currentTime = this.playerInstance.currentTime(); /** @type {?} */ var markersList = this.getMarkers(); if (!markersList) { return null; } return markersList.find((/** * @param {?} marker * @return {?} */ function (marker) { /** @type {?} */ var markerTime = marker.time; return markerTime > currentTime; })); }; /** * @param {?} event * @return {?} */ ViewerService.prototype.raiseStartEvent = /** * @param {?} event * @return {?} */ function (event) { /** @type {?} */ var duration = new Date().getTime() - this.PlayerLoadStartedAt; /** @type {?} */ var startEvent = { eid: 'START', ver: this.version, edata: { type: 'START', mode: 'play', duration: duration }, metaData: this.metaData }; this.playerEvent.emit(startEvent); this.videoPlayerService.start(duration); this.PlayerLoadStartedAt = new Date().getTime(); }; /** * @return {?} */ ViewerService.prototype.calculateScore = /** * @return {?} */ function () { this.scoreObtained = Object.values(this.interceptionResponses).reduce(( // tslint:disable-next-line:no-string-literal // tslint:disable-next-line:no-string-literal /** * @param {?} acc * @param {?} response * @return {?} */ function (acc, response) { return acc + response['score']; }), 0); }; /** * @return {?} */ ViewerService.prototype.raiseEndEvent = /** * @return {?} */ function () { if (!this.isEndEventRaised) { this.calculateScore(); /** @type {?} */ var duration = new Date().getTime() - this.PlayerLoadStartedAt; /** @type {?} */ var endEvent = { eid: 'END', ver: this.version, edata: { type: 'END', currentTime: this.currentlength, totalTime: this.totalLength, duration: duration }, metaData: this.metaData }; this.playerEvent.emit(endEvent); this.timeSpent = this.utilService.getTimeSpentText(this.visitedLength); this.videoPlayerService.end(duration, this.totalLength, this.currentlength, this.endPageSeen, this.totalSeekedLength, this.visitedLength / 1000, this.scoreObtained); this.isEndEventRaised = true; } }; /** * @param {?} type * @param {?=} extraValues * @return {?} */ ViewerService.prototype.raiseHeartBeatEvent = /** * @param {?} type * @param {?=} extraValues * @return {?} */ function (type, extraValues) { if (type === 'REPLAY') { this.interceptionResponses = {}; this.showScore = false; this.scoreObtained = 0; } /** @type {?} */ var hearBeatEvent = { eid: 'HEARTBEAT', ver: this.version, edata: { type: type, currentPage: 'videostage', extra: extraValues }, metaData: this.metaData }; this.playerEvent.emit(hearBeatEvent); this.videoPlayerService.heartBeat(hearBeatEvent); /** @type {?} */ var 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); } }; /** * @param {?} pageId * @param {?=} cdata * @return {?} */ ViewerService.prototype.raiseImpressionEvent = /** * @param {?} pageId * @param {?=} cdata * @return {?} */ function (pageId, cdata) { if (cdata === void 0) { cdata = {}; } this.videoPlayerService.impression(pageId, cdata); }; // tslint:disable-next-line:no-shadowed-variable // tslint:disable-next-line:no-shadowed-variable /** * @param {?} errorCode * @param {?} errorType * @param {?} stacktrace * @param {?} traceId * @return {?} */ ViewerService.prototype.raiseExceptionLog = // tslint:disable-next-line:no-shadowed-variable /** * @param {?} errorCode * @param {?} errorType * @param {?} stacktrace * @param {?} traceId * @return {?} */ function (errorCode, errorType, stacktrace, traceId) { /** @type {?} */ var exceptionLogEvent = { eid: 'ERROR', edata: { err: errorCode, errtype: errorType, requestid: traceId || '', stacktrace: (stacktrace && stacktrace.toString()) || '', } }; this.playerEvent.emit(exceptionLogEvent); this.videoPlayerService.error(errorCode, errorType, stacktrace); }; ViewerService.decorators = [ { type: Injectable, args: [{ providedIn: 'root' },] } ]; /** @nocollapse */ ViewerService.ctorParameters = function () { return [ { type: SunbirdVideoPlayerService }, { type: UtilService }, { type: HttpClient }, { type: QuestionCursor, decorators: [{ type: Optional }] } ]; }; /** @nocollapse */ ViewerService.ɵprov = ɵɵdefineInjectable({ factory: function ViewerService_Factory() { return new ViewerService(ɵɵinject(SunbirdVideoPlayerService), ɵɵinject(UtilService), ɵɵinject(HttpClient), ɵɵinject(QuestionCursor, 8)); }, token: ViewerService, providedIn: "root" }); return ViewerService; }()); if (false) { /** @type {?} */ ViewerService.prototype.endPageSeen; /** @type {?} */ ViewerService.prototype.timeSpent; /** * @type {?} * @private */ ViewerService.prototype.version; /** @type {?} */ ViewerService.prototype.playerEvent; /** @type {?} */ ViewerService.prototype.contentName; /** @type {?} */ ViewerService.prototype.showDownloadPopup; /** @type {?} */ ViewerService.prototype.streamingUrl; /** @type {?} */ ViewerService.prototype.mimeType; /** @type {?} */ ViewerService.prototype.artifactMimeType; /** @type {?} */ ViewerService.prototype.userName; /** @type {?} */ ViewerService.prototype.metaData; /** @type {?} */ ViewerService.prototype.PlayerLoadStartedAt; /** @type {?} */ ViewerService.prototype.totalLength; /** @type {?} */ ViewerService.prototype.currentlength; /** @type {?} */ ViewerService.prototype.totalSeekedLength; /** @type {?} */ ViewerService.prototype.artifactUrl; /** @type {?} */ ViewerService.prototype.visitedLength; /** @type {?} */ ViewerService.prototype.sidebarMenuEvent; /** @type {?} */ ViewerService.prototype.traceId; /** @type {?} */ ViewerService.prototype.isAvailableLocally; /** @type {?} */ ViewerService.prototype.interceptionPoints; /** @type {?} */ ViewerService.prototype.interceptionResponses; /** @type {?} */ ViewerService.prototype.showScore; /** @type {?} */ ViewerService.prototype.scoreObtained; /** @type {?} */ ViewerService.prototype.maxScore; /** @type {?} */ ViewerService.prototype.playerInstance; /** @type {?} */ ViewerService.prototype.contentMap; /** @type {?} */ ViewerService.prototype.isEndEventRaised; /** @type {?} */ ViewerService.prototype.transcripts; /** * @type {?} * @private */ ViewerService.prototype.videoPlayerService; /** * @type {?} * @private */ ViewerService.prototype.utilService; /** * @type {?} * @private */ ViewerService.prototype.http; /** @type {?} */ ViewerService.prototype.questionCursor; } /** * @fileoverview added by tsickle * Generated from: lib/sunbird-video-player.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var SunbirdVideoPlayerComponent = /** @class */ (function () { function SunbirdVideoPlayerComponent(videoPlayerService, viewerService, cdr, renderer2, errorService) { var _this = this; 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.raiseInternetDisconnectionError = (/** * @return {?} */ function () { /** @type {?} */ var code = errorCode.internetConnectivity; /** @type {?} */ var message = errorMessage.internetConnectivity; /** @type {?} */ var stacktrace = code + ": " + message; _this.viewerService.raiseExceptionLog(code, message, stacktrace, _this.traceId); }); this.playerEvent = this.viewerService.playerEvent; this.viewerService.playerEvent.subscribe((/** * @param {?} event * @return {?} */ function (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'; } if (event.type === 'error') { // tslint:disable-next-line:one-variable-per-declaration /** @type {?} */ var code = errorCode.contentLoadFails; /** @type {?} */ var 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); } // tslint:disable-next-line:max-line-length /** @type {?} */ var events = [{ type: 'volumechange', telemetryEvent: 'VOLUME_CHANGE' }, { type: 'seeking', telemetryEvent: 'DRAG' }, { type: 'fullscreen', telemetryEvent: 'FULLSCREEN' }, { type: 'ratechange', telemetryEvent: 'RATE_CHANGE' }]; events.forEach((/** * @param {?} data * @return {?} */ function (data) { if (event.type === data.type) { _this.viewerService.raiseHeartBeatEvent(data.telemetryEvent); } })); })); } /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.onTelemetryEvent = /** * @param {?} event * @return {?} */ function (event) { this.telemetryEvent.emit(event.detail); }; /** * @return {?} */ SunbirdVideoPlayerComponent.prototype.ngOnInit = /** * @return {?} */ function () { var _this = this; if (typeof this.playerConfig === 'string') { try { this.playerConfig = JSON.parse(this.playerConfig); } catch (error) { console.error('Invalid playerConfig: ', error); } } setInterval((/** * @return {?} */ function () { if (!_this.isPaused) { _this.showControls = false; } }), 5000); /* tslint:disable:no-string-literal */ this.nextContent = this.playerConfig.config.nextContent; this.traceId = this.playerConfig.config['traceId']; this.sideMenuConfig = __assign(__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); }; /** * @param {?} changes * @return {?} */ SunbirdVideoPlayerComponent.prototype.ngOnChanges = /** * @param {?} changes * @return {?} */ function (changes) { if (changes.action) { if (!this.showQumlPlayer) { this.playerAction = this.action; } } }; /** * @return {?} */ SunbirdVideoPlayerComponent.prototype.ngAfterViewInit = /** * @return {?} */ function () { var _this = this; /** @type {?} */ var videoPlayerElement = this.videoPlayerRef.nativeElement; this.unlistenMouseMove = this.renderer2.listen(videoPlayerElement, 'mousemove', (/** * @return {?} */ function () { _this.showControls = true; })); this.unlistenTouchStart = this.renderer2.listen(videoPlayerElement, 'touchstart', (/** * @return {?} */ function () { _this.showControls = true; })); /** @type {?} */ var contentCompabilityLevel = this.playerConfig.metadata['compatibilityLevel']; if (contentCompabilityLevel) { /** @type {?} */ var checkContentCompatible = this.errorService.checkContentCompatibility(contentCompabilityLevel); if (!checkContentCompatible['isCompitable']) { // tslint:disable-next-line:max-line-length this.viewerService.raiseExceptionLog(errorCode.contentCompatibility, errorMessage.contentCompatibility, checkContentCompatible['error']['message'], this.traceId); } } }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.sideBarEvents = /** * @param {?} event * @return {?} */ function (event) { var _this = this; this.playerEvent.emit(event); if (event.type === 'DOWNLOAD') { this.downloadVideo(); } /** @type {?} */ var events = ['SHARE', 'DOWNLOAD_MENU', 'EXIT', 'CLOSE_MENU', 'OPEN_MENU', 'DOWNLOAD_POPUP_CANCEL', 'DOWNLOAD_POPUP_CLOSE']; events.forEach((/** * @param {?} data * @return {?} */ function (data) { if (event.type === data) { _this.viewerService.raiseHeartBeatEvent(data); } if (event.type === 'EXIT') { _this.viewerService.sidebarMenuEvent.emit('CLOSE_MENU'); } })); }; /** * @param {?} id * @return {?} */ SunbirdVideoPlayerComponent.prototype.setTelemetryObjectRollup = /** * @param {?} id * @return {?} */ function (id) { if (this.QumlPlayerConfig.context) { /** @type {?} */ var hasObjectRollup = this.QumlPlayerConfig && this.QumlPlayerConfig.context && this.QumlPlayerConfig.context.objectRollup; if (!hasObjectRollup) { this.QumlPlayerConfig.context.objectRollup = {}; } /** @type {?} */ var levels = Object.keys(this.QumlPlayerConfig.context.objectRollup); this.QumlPlayerConfig.context.objectRollup["l" + (levels.length + 1)] = id; } }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.playContent = /** * @param {?} event * @return {?} */ function (event) { this.viewerService.raiseHeartBeatEvent(event.type); }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.replayContent = /** * @param {?} event * @return {?} */ function (event) { this.playerEvent.emit(event); this.viewState = 'player'; this.viewerService.isEndEventRaised = false; this.viewerService.raiseHeartBeatEvent('REPLAY'); }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.exitContent = /** * @param {?} event * @return {?} */ function (event) { this.playerEvent.emit(event); this.viewerService.raiseHeartBeatEvent('EXIT'); }; /** * @return {?} */ SunbirdVideoPlayerComponent.prototype.downloadVideo = /** * @return {?} */ function () { /** @type {?} */ var 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'); }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.qumlPlayerEvents = /** * @param {?} event * @return {?} */ function (event) { if (event.eid === 'QUML_SUMMARY') { this.showQumlPlayer = false; /** @type {?} */ var score = parseInt(event.edata.extra.find((/** * @param {?} p * @return {?} */ function (p) { return p.id === 'score'; }))['value'], 10); this.viewerService.interceptionResponses[this.currentInterceptionTime] = { score: score, isSkipped: false }; /** @type {?} */ var 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((/** * @param {?} err * @return {?} */ function (err) { return console.error(err); })); } } } }; /** * @param {?} __0 * @return {?} */ SunbirdVideoPlayerComponent.prototype.questionSetData = /** * @param {?} __0 * @return {?} */ function (_a) { var response = _a.response, time = _a.time, identifier = _a.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((/** * @param {?} err * @return {?} */ function (err) { return 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: identifier, // Question set id, type: 'QuestionSet', // Type of interaction interceptedAt: time // Time when the interception happened }); }; /** * @param {?} event * @return {?} */ SunbirdVideoPlayerComponent.prototype.playerInstance = /** * @param {?} event * @return {?} */ function (event) { this.videoInstance = event; }; /** * @return {?} */ SunbirdVideoPlayerComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { this.viewerService.raiseEndEvent(); this.unlistenTouchStart(); this.unlistenMouseMove(); this.viewerService.isEndEventRaised = false; window.removeEventListener('offline', this.raiseInternetDisconnectionError, true); }; SunbirdVideoPlayerComponent.decorators = [ { type: Component, args: [{ selector: 'sunbird-video-player', template: "<div class=\"sunbird-video-player-container\" #videoPlayer [ngClass]=\"showQumlPlayer ? 'videoPlayerHide': 'videoPlayerShow'\">\r\n <sb-player-side-menu-icon class=\"sb-player-side-menu-icon notVisible\" tabindex=\"0\" (sidebarMenuEvent)=\"sideBarEvents($event)\"\r\n\r\n *ngIf=\"viewState ==='player'\" [ngClass]=\"{'isVisible': showControls}\"></sb-player-side-menu-icon>\r\n <video-player *ngIf=\"viewState === 'player'\" (questionSetData)=\"questionSetData($event)\" (playerInstance)=\"playerInstance($event)\" [config]=\"playerConfig.config\" [action]=\"playerAction\">\r\n </video-player>\r\n <sb-player-sidebar *ngIf=\"viewState ==='player'\"\r\n [title]=\"viewerService.contentName\"\r\n (sidebarEvent)=\"sideBarEvents($event)\" [config]=\"sideMenuConfig\"></sb-player-sidebar>\r\n <sb-player-end-page \r\n [contentName]=\"viewerService.contentName\" \r\n [outcomeLabel]=\"viewerService.showScore ? 'Score: ': ''\" \r\n [outcome]=\"viewerService.showScore ? viewerService.scoreObtained + ((viewerService.maxScore && viewerService.maxScore > 0) ? '/' + viewerService.maxScore : '') : ''\"\r\n [nextContent]=\"nextContent\" [userName]=\"viewerService.userName\" \r\n [showExit]=\"sideMenuConfig.showExit\"\r\n [timeSpentLabel]=\"viewerService.timeSpent\" tabindex=\"0\" (playNextContent)=\"playContent($event)\" \r\n (exitContent)=\"exitContent($event)\" (replayContent)=\"replayContent($event)\"\r\n *ngIf=\"viewState === 'end'\"></sb-player-end-page>\r\n <sb-player-contenterror *ngIf=\"showContentError\"></sb-player-contenterror>\r\n</div>\r\n\r\n<div class=\"sunbird-video-player-container\" *ngIf=\"showQumlPlayer\" #qumlPlayer>\r\n <quml-main-player [playerConfig]=\"QumlPlayerConfig\" (playerEvent)=\"qumlPlayerEvents($event)\"></quml-main-player>\r\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}.BtmNotVisible,.notVisible{transition:1s ease-in-out;position:absolute;width:100%}.notVisible{top:-10rem}.notVisible.isVisible{top:0}.BtmNotVisible{bottom:-10rem}.BtmNotVisible.isVisible{bottom:0}::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button span{background:0 0!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:after,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon input[type=checkbox]:checked~#overlay-button:hover span:before{background-color:rgba(255,255,255,.7)!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:after,::ng-deep .sunbird-video-player-container .sb-player-side-menu-icon label span:before{background-color:rgba(255,255,255,.7)!important}::ng-deep .sunbird-pdf-player{overflow:hidden}::ng-deep .pdfViewer .page{background:0 0!important;-o-border-image:none!important;border-image:none!important;border:0!important}::ng-deep #toolbarContainer{background:0 0!important;height:auto!important}::ng-deep #viewerContainer{position:relative!important;height:calc(100% - 3rem)}::ng-deep .body,::ng-deep .html,::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:0 .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}}"] }] } ]; /** @nocollapse */ SunbirdVideoPlayerComponent.ctorParameters = function () { return [ { type: SunbirdVideoPlayerService }, { type: ViewerService }, { type: ChangeDetectorRef }, { type: Renderer2 }, { type: ErrorService } ]; }; SunbirdVideoPlayerComponent.propDecorators = { 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',] }] }; return SunbirdVideoPlayerComponent; }()); if (false) { /** @type {?} */ SunbirdVideoPlayerComponent.prototype.playerConfig; /** @type {?} */ SunbirdVideoPlayerComponent.prototype.action; /** @type {?} */ SunbirdVideoPlayerComponent.prototype.playerEvent; /** @type {?} */ SunbirdVideoPlayerComponent.prototype.telemetryEvent; /** @type {?} */ SunbirdVideoPlayerComponent.prototype.videoPlayerRef; /** @type {?} */ SunbirdVideoPlayerComponent.prototype.viewState; /** @type {?} */ Sun