1- import { AfterViewInit , Component , ElementRef , OnInit , ViewChild } from '@angular/core' ;
2- import { combineLatest , EMPTY , Observable } from 'rxjs' ;
1+ import { AfterViewInit , Component , ElementRef , OnInit , ViewChild , OnDestroy } from '@angular/core' ;
2+ import { combineLatest , EMPTY , Observable , share , Subject , takeUntil , timer } from 'rxjs' ;
33import { ActivatedRoute , Router } from '@angular/router' ;
44import { CourseMembers , Lecture , ManService } from '../../man.service' ;
55import { map , switchMap } from 'rxjs/operators' ;
@@ -8,18 +8,19 @@ import 'videojs-hotkeys';
88import 'videojs-youtube' ;
99import { AlertController } from '@ionic/angular/standalone' ;
1010import { DomSanitizer } from '@angular/platform-browser' ;
11- import { PlayHistory , PlayTrackerService } from '../../play-tracker.service' ;
11+ import { PlayHistory } from '../../play-tracker.service' ;
1212import { Analytics , logEvent } from '@angular/fire/analytics' ;
1313import { addIcons } from "ionicons" ;
1414import { checkmarkOutline , closeOutline , documentAttachOutline , download , pauseCircleOutline } from "ionicons/icons" ;
1515import type Player from 'video.js/dist/types/player' ;
16+ import { ulid } from 'ulid' ;
1617
1718@Component ( {
1819 selector : 'app-course' ,
1920 templateUrl : './course.page.html' ,
2021 styleUrls : [ './course.page.scss' ] ,
2122} )
22- export class CoursePage implements OnInit , AfterViewInit {
23+ export class CoursePage implements OnInit , AfterViewInit , OnDestroy {
2324 @ViewChild ( 'videoPlayer' ) videoPlayerElement : ElementRef ;
2425 videoPlayer : Player ;
2526 currentVideo : Lecture ;
@@ -33,11 +34,12 @@ export class CoursePage implements OnInit, AfterViewInit {
3334 isAndroid = / A n d r o i d / i. test ( navigator . userAgent ) ;
3435 isIos = / i P a d / i. test ( navigator . userAgent ) || / i P h o n e / i. test ( navigator . userAgent ) ;
3536 lastPlayedVideoKey : string | null = null ;
37+ sessionUid : string ; // Unique ID for session x video (new id for each video)
38+ stopPolling = new Subject ( ) ;
3639
3740 constructor ( private route : ActivatedRoute , private router : Router ,
3841 private manService : ManService , private alertController : AlertController ,
39- private analytics : Analytics , private sanitizer : DomSanitizer ,
40- private playTracker : PlayTrackerService ) {
42+ private analytics : Analytics , private sanitizer : DomSanitizer ) {
4143 addIcons ( { download, documentAttachOutline, checkmarkOutline, closeOutline, pauseCircleOutline } ) ;
4244 }
4345
@@ -48,8 +50,13 @@ export class CoursePage implements OnInit, AfterViewInit {
4850 this . course = s . get ( 'course' ) ;
4951 if ( this . year && this . course ) {
5052 return combineLatest ( [
51- this . manService . getVideosInCourse ( this . year , this . course ) , this . playTracker . retrieve ( ) ] )
52- . pipe ( map ( ( [ videos , history ] ) => this . mergeVideoInfo ( videos , history ) ) ) ;
53+ this . manService . getVideosInCourse ( this . year , this . course ) ,
54+ timer ( 1 , 30000 ) . pipe (
55+ switchMap ( ( ) => this . manService . getPlayRecord ( this . year , this . course ) ) ,
56+ share ( ) ,
57+ takeUntil ( this . stopPolling ) ,
58+ ) ,
59+ ] ) . pipe ( map ( ( [ videos , history ] ) => this . mergeVideoInfo ( videos , history ) ) ) ;
5360 } else if ( this . year ) {
5461 this . router . navigate ( [ 'home/' + this . year ] ) ;
5562 } else {
@@ -80,24 +87,23 @@ export class CoursePage implements OnInit, AfterViewInit {
8087 this . videoPlayer . on ( 'pause' , ( ) => {
8188 if ( ! this . videoPlayer . seeking ( ) ) {
8289 // is paused, not seeking
83- this . playTracker . updateCurrentTime ( this . currentVideo . identifier , this . videoPlayer . currentTime ( ) , this . year , this . course , this . videoPlayer . duration ( ) ) ;
90+ this . updatePlayRecord ( ) ;
8491 }
8592 } ) ;
86- this . videoPlayer . on ( 'ended' , ( ) =>
87- this . playTracker . updateCurrentTime ( this . currentVideo . identifier , this . videoPlayer . currentTime ( ) , this . year , this . course , this . videoPlayer . duration ( ) ) ) ;
93+ this . videoPlayer . on ( 'ended' , ( ) => this . updatePlayRecord ( ) ) ;
8894 let lastUpdated = 0 ;
8995 this . videoPlayer . on ( 'timeupdate' , ( ) => {
90- // Update while playing every 10 minutes
91- if ( Date . now ( ) - lastUpdated > 600000 ) {
96+ // Update while playing every 2 minutes
97+ if ( Date . now ( ) - lastUpdated > 120000 ) {
9298 lastUpdated = Date . now ( ) ;
93- this . playTracker . updateCurrentTime ( this . currentVideo . identifier , this . videoPlayer . currentTime ( ) , this . year , this . course , this . videoPlayer . duration ( ) ) ;
99+ this . updatePlayRecord ( ) ;
94100 }
95101 } ) ;
96102 this . videoPlayer . on ( 'tracking:performance' , ( _e , data ) => {
97103 console . log ( 'performance' ) ;
98104 if ( this . videoPlayer . currentTime ( ) > 30 ) {
99105 logEvent ( this . analytics , 'video_performance' , this . attachEventLabel ( data , true ) ) ;
100- this . playTracker . updateCurrentTime ( this . currentVideo . identifier , data . currentTime , this . year , this . course ) ;
106+ this . updatePlayRecord ( ) ;
101107 }
102108 } ) ;
103109 this . videoPlayer . on ( 'loadedmetadata' , ( ) => {
@@ -109,6 +115,10 @@ export class CoursePage implements OnInit, AfterViewInit {
109115 } ) ;
110116 }
111117
118+ ngOnDestroy ( ) {
119+ this . stopPolling . next ( true ) ;
120+ }
121+
112122 mergeVideoInfo ( videos : CourseMembers , history : PlayHistory ) {
113123 const progress = {
114124 viewed : 0 ,
@@ -119,11 +129,7 @@ export class CoursePage implements OnInit, AfterViewInit {
119129 return history [ b ] . updatedAt - history [ a ] . updatedAt ;
120130 } ) . slice ( 0 , 1 ) [ 0 ] ?? null ;
121131 Object . keys ( videos ) . forEach ( lectureKey => {
122- videos [ lectureKey ] . history = history [ videos [ lectureKey ] . identifier ] ?? { currentTime : null , updatedAt : null , duration : null } ;
123- if ( ! videos [ lectureKey ] . duration && videos [ lectureKey ] . history . duration ) {
124- videos [ lectureKey ] . duration = videos [ lectureKey ] . history . duration ;
125- videos [ lectureKey ] . durationInMin = videos [ lectureKey ] . duration ? Math . round ( videos [ lectureKey ] . duration / 60 ) : 0
126- }
132+ videos [ lectureKey ] . history = history [ videos [ lectureKey ] . id ] ?? { currentTime : null , updatedAt : null } ;
127133 if ( videos [ lectureKey ] . duration ) {
128134 progress . duration -= - videos [ lectureKey ] . duration ;
129135 if ( videos [ lectureKey ] . history . currentTime ) {
@@ -154,6 +160,7 @@ export class CoursePage implements OnInit, AfterViewInit {
154160 this . videoPlayer . src ( video . sources ) ;
155161 this . currentVideo = video ;
156162 this . videoPlayerElement . nativeElement . focus ( ) ;
163+ this . sessionUid = ulid ( ) ;
157164 }
158165
159166 async setPlaybackSpeed ( ) {
@@ -215,4 +222,7 @@ export class CoursePage implements OnInit, AfterViewInit {
215222 } ;
216223 }
217224
225+ protected updatePlayRecord ( ) {
226+ this . manService . updatePlayRecord ( this . sessionUid , this . currentVideo . id , this . videoPlayer . currentTime ( ) , this . videoPlayer . playbackRate ( ) ) . subscribe ( ) ;
227+ }
218228}
0 commit comments