(feat) Pulse the avatar of users in groups who are participants of the gathering - Related to #1515

src/app/common/services/update-markers.service.ts

@@ -89,8 +89,10 @@ export class UpdateMarkersService {
  if (!opts.marker)
  throw "marker must be set";
 
- this.http.post('api/v2/notifications/markers/read', opts)
- .subscribe(res => null, err => console.warn(err));
+ if (!opts.noReply) {
+ this.http.post('api/v2/notifications/markers/read', opts)
+ .subscribe(res => null, err => console.warn(err));
+ }
 
  for (let i = 0; i < this.data.length; i++) {
  if (this.data[i].entity_guid == opts.entity_guid) {

src/app/modules/groups/profile/member-previews/member-previews.component.html

 <ul class="m-groupMemberPreviews__list">
- <li class="m-groupMemberPreviews__member" *ngFor="let member of members">
+ <li class="m-groupMemberPreviews__member" [ngClass]="{'m-pulsating--small': member.inGathering }" *ngFor="let member of members">
  <a [routerLink]="['/', member.username]">
  <img [src]="minds.cdn_url + 'icon/' + member.guid + '/small'" />
  </a>

src/app/modules/groups/profile/member-previews/member-previews.component.ts

 import { Component, ViewChild, ChangeDetectorRef, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { Subscription } from 'rxjs';
 import { Client } from '../../../../services/api';
+import { UpdateMarkersService } from '../../../../common/services/update-markers.service';
+import { VideoChatService } from '../../../videochat/videochat.service';
 
 @Component({
  selector: 'm-group--member-previews',
@@ -13,18 +14,29 @@ export class GroupMemberPreviews {
 
  @Input() group;
  members: Array<any> = [];
- count: Number = 0; 
+ count: Number = 0;
  inProgress: boolean = false;
  minds = window.Minds;
 
- constructor(private client: Client) {
+ private updateMarkersSubscription;
+ private gatheringParticipantsInterval;
 
- }
+ constructor(
+ private client: Client,
+ private updateMarkers: UpdateMarkersService
+ ) { }
 
  ngOnInit() {
  this.load();
  }
 
+ ngOnDestroy() {
+ if (this.updateMarkersSubscription) {
+ this.updateMarkersSubscription.unsubscribe();
+ }
+ clearInterval(this.gatheringParticipantsInterval);
+ }
+
  async load() {
  this.inProgress = true;
 
@@ -42,8 +54,62 @@ export class GroupMemberPreviews {
  }
  this.inProgress = false;
  } catch {
- this.inProgress = false;
+ this.inProgress = false;
+ }
+
+ this.updateMarkersSubscription = this.updateMarkers.getByEntityGuid(this.group.guid).subscribe((marker => {
+ if (!marker) {
+ return;
+ }
+
+ if (marker.entity_guid === this.group.guid &&
+ marker.marker === 'gathering-heartbeat' &&
+ marker.updated_timestamp > this.currentTimestamp() - 30) {
+ this.updateMarkers.markAsRead({
+ entity_guid: this.group.guid,
+ entity_type: 'group',
+ marker: 'gathering-heartbeat',
+ noReply: true
+ });
+ this.userIsInGathering(marker.user_guid);
+ }
+ }).bind(this));
+
+ this.pollGatheringParticipants();
+ }
+
+ userIsInGathering(user_guid) {
+ for (let member of this.members) {
+ if (member.guid === user_guid) {
+ console.log('user entered gathering: ' + member.guid); // TODO: Remove debug log
+ member.inGathering = true;
+ member.lastGatheringMarkerTimestamp = this.currentTimestamp();
+ }
  }
  }
 
+ pollGatheringParticipants() {
+ const checkIntervalSeconds = 2;
+ clearInterval(this.gatheringParticipantsInterval);
+
+ this.gatheringParticipantsInterval = setInterval(() => {
+ this.checkGatheringParticipantsForMarkerTimeout();
+ }, checkIntervalSeconds);
+ }
+
+ checkGatheringParticipantsForMarkerTimeout() {
+ const timestampThreshold = this.currentTimestamp() - (2 * VideoChatService.heartBeatIntervalSeconds);
+ for (let member of this.members) {
+ if (member.inGathering) {
+ if (member.lastGatheringMarkerTimestamp < timestampThreshold) {
+ console.log('user left gathering: ' + member.guid); // TODO: Remove debug log
+ member.inGathering = false;
+ }
+ }
+ }
+ }
+
+ currentTimestamp() {
+ return Date.now() / 1000;
+ }
 }

src/app/modules/videochat/videochat.service.ts

@@ -11,13 +11,12 @@ export type JitsiConfig = {
 
 @Injectable()
 export class VideoChatService {
+ static heartBeatIntervalSeconds = 5;
 
  isActive: boolean;
  activate$: EventEmitter<JitsiConfig | false> = new EventEmitter<JitsiConfig | false>();
  heartBeatSubscription;
 
- keepAliveInterval;
-
  constructor(
  private client: Client,
  private session: Session
@@ -41,7 +40,7 @@ export class VideoChatService {
  if (this.heartBeatSubscription)
  this.heartBeatSubscription.unsubscribe();
 
- this.heartBeatSubscription = interval(10000) //10 seconds
+ this.heartBeatSubscription = interval(VideoChatService.heartBeatIntervalSeconds * 1000)
  .pipe(startWith(0))
  .subscribe(() => this.heartBeat(entity.guid));
 

[Mark Harding]

Can we use interval function from rxjs? setInterval and setTimeout prevent server side rending, so we'll run into issues here when we deploy that