(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) {
@@ -127,15 +129,16 @@ export class UpdateMarkersService {
  (marker) => {
  marker = JSON.parse(marker);
  let entity_guid = marker.entity_guid;
- 
- if (this.muted.indexOf(entity_guid) > -1)
- return; //muted, so take no action
- //this.entityGuids$[entity_guid].next(marker);
-
- let found:boolean = false;
- for(let i in this.data) {
- if (this.data[i].entity_guid === entity_guid
- && this.data[i].marker === marker.marker) {
+
+ if (this.muted.indexOf(entity_guid) > -1) {
+ return;
+ }
+
+ let found = false;
+ for (let i in this.data) {
+ if (this.data[i].entity_guid === entity_guid &&
+ this.data[i].marker === marker.marker &&
+ this.data[i].user_guid === marker.user_guid) {
  this.data[i].updated_timestamp = marker.updated_timestamp;
  found = true;
  }

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';
+import {timer, Subscription} from 'rxjs';
 
 @Component({
  selector: 'm-group--member-previews',
@@ -13,18 +15,35 @@ export class GroupMemberPreviews {
 
  @Input() group;
  members: Array<any> = [];
- count: Number = 0; 
+ count: Number = 0;
  inProgress: boolean = false;
  minds = window.Minds;
+ gatheringParticipantTimer;
 
- constructor(private client: Client) {
+ private updateMarkersSubscription: Subscription;
+ private gatheringParticipantUpdateSubscription: Subscription;
 
- }
+ constructor(
+ private client: Client,
+ private updateMarkers: UpdateMarkersService
+ ) { }
 
  ngOnInit() {
+ const checkIntervalSeconds = 2;
+ this.gatheringParticipantTimer = timer(0, checkIntervalSeconds * 1000);
  this.load();
  }
 
+ ngOnDestroy() {
+ if (this.updateMarkersSubscription) {
+ this.updateMarkersSubscription.unsubscribe();
+ }
+
+ if (this.gatheringParticipantUpdateSubscription) {
+ this.gatheringParticipantUpdateSubscription.unsubscribe();
+ }
+ }
+
  async load() {
  this.inProgress = true;
 
@@ -42,8 +61,45 @@ 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.userIsInGathering(marker.user_guid);
+ }
+ }).bind(this));
+
+ this.gatheringParticipantUpdateSubscription = this.gatheringParticipantTimer.subscribe(() => this.updateGatheringParticipants());
+ }
+
+ userIsInGathering(user_guid) {
+ for (let member of this.members) {
+ if (member.guid === user_guid) {
+ member.inGathering = true;
+ member.lastGatheringMarkerTimestamp = this.currentTimestamp();
+ }
  }
  }
 
+ updateGatheringParticipants() {
+ const timestampThreshold = this.currentTimestamp() - (2 * VideoChatService.heartBeatIntervalSeconds);
+ for (let member of this.members) {
+ if (member.inGathering) {
+ if (member.lastGatheringMarkerTimestamp < timestampThreshold) {
+ 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));