Merge branch '116-freeze-comment-stream' into 'master'

Resolve "Freeze comment stream"

Closes #116

See merge request frag.jetzt!144

src/app/components/shared/comment-list/comment-list.component.html

@@ -35,9 +35,21 @@
       <mat-icon class="searchBarIcon">filter_list</mat-icon>
     </button>
 
-    <button id="add_comment_small-button" mat-fab aria-labelledby="add" class="addButton" *ngIf="!searchBox.value && !search" (click)="openCreateDialog()"
+    <button id="pause-comments" mat-fab aria-labelledby="pause" class="actionButton"
+            *ngIf="!searchBox.value && !search && !freeze" (click)="pauseCommentStream()"
+            matTooltip="{{ 'comment-list.pause-comments' | translate }}">
+      <mat-icon class="freezeIcon">pause_circle_filled</mat-icon>
+    </button>
+
+    <button id="play-comments" mat-fab aria-labelledby="play" class="actionButton"
+            *ngIf="!searchBox.value && !search && freeze" (click)="playCommentStream()"
+            matTooltip="{{ 'comment-list.play-comments' | translate }}">
+      <mat-icon class="freezeIcon">play_circle_filled</mat-icon>
+    </button>
+
+    <button id="add_comment_small-button" mat-fab aria-labelledby="add" class="actionButton" *ngIf="!searchBox.value && !search" (click)="openCreateDialog()"
             matTooltip="{{ 'comment-list.add-comment' | translate }}">
-      <mat-icon class="addCommentIcon">add</mat-icon>
+      <mat-icon class="actionIcon">add</mat-icon>
     </button>
   </div>
 
@@ -133,6 +145,8 @@
   <div id="beamer_icon">{{'comment-list.a11y-beamer_icon' | translate}}</div>
   <div id="close">{{'comment-list.a11y-close' | translate}}</div>
   <div id="add">{{'comment-list.a11y-add' | translate}}</div>
+  <div id="pause">{{'comment-list.a11y-pause' | translate}}</div>
+  <div id="play">{{'comment-list.a11y-play' | translate}}</div>
   <div id="close_search">{{'comment-list.a11y-close_search' | translate}}</div>
   <div id="new-comment">{{ 'comment-page.new-comment' | translate:{comment: newestComment} }}</div>
 </div>

src/app/components/shared/comment-list/comment-list.component.scss

@@ -64,18 +64,23 @@ app-comment {
   color: var(--secondary);
 }
 
-.addButton {
+.actionButton {
   width: 40px;
   height: 40px;
   margin: 0 5% 0 5%;
   background-color: var(--primary);
 }
 
-.addCommentIcon {
+.actionIcon {
   transform: scale(1.5);
   color: var(--surface)
 }
 
+.freezeIcon {
+  transform: scale(1.3);
+  color: var(--surface);
+}
+
 .close {
   margin: 5px 0 5px 0;
 }

src/app/components/shared/comment-list/comment-list.component.ts

@@ -17,6 +17,7 @@ import { NotificationService } from '../../../services/util/notification.service
 import { CorrectWrong } from '../../../models/correct-wrong.enum';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { EventService } from '../../../services/util/event.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-comment-list',
@@ -54,6 +55,8 @@ export class CommentListComponent implements OnInit {
   moderationEnabled = false;
   thresholdEnabled = false;
   newestComment: string;
+  freeze = false;
+  commentStream: Subscription;
 
   constructor(private commentService: CommentService,
               private translateService: TranslateService,
@@ -88,9 +91,7 @@ export class CommentListComponent implements OnInit {
         });
     });
     this.hideCommentsList = false;
-    this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
-      this.parseIncomingMessage(message);
-    });
+    this.subscribeCommentStream();
     this.translateService.use(localStorage.getItem('currentLang'));
     this.deviceType = localStorage.getItem('deviceType');
     if (this.userRole === 0) {
@@ -311,6 +312,32 @@ export class CommentListComponent implements OnInit {
     this.currentSort = type;
   }
 
+  pauseCommentStream() {
+    this.freeze = true;
+    this.commentStream.unsubscribe();
+    this.translateService.get('comment-list.comment-stream-stopped').subscribe(msg => {
+      this.notificationService.show(msg);
+    });
+  }
+
+  playCommentStream() {
+    this.freeze = false;
+    this.commentService.getAckComments(this.roomId)
+      .subscribe(comments => {
+        this.comments = comments;
+        this.getComments();
+      });
+    this.subscribeCommentStream();
+    this.translateService.get('comment-list.comment-stream-started').subscribe(msg => {
+      this.notificationService.show(msg);
+    });
+  }
+
+  subscribeCommentStream() {
+    this.commentStream = this.wsCommentService.getCommentStream(this.roomId).subscribe((message: Message) => {
+      this.parseIncomingMessage(message);
+    });
+  }
 
   /**
    * Announces a new comment receive.

src/assets/i18n/creator/de.json

@@ -2,6 +2,8 @@
   "comment-list": {
     "a11y-access_time": "Sortiert Fragen nach der Uhrzeit",
     "a11y-add": "Option eine Frage zu stellen",
+    "a11y-pause": "Stoppt Kommentar-Stream",
+    "a11y-play": "Startet Kommentar-Stream",
     "a11y-beamer_icon": "Filtert alle besprochenen Fragen",
     "a11y-check_circle": "Filtert alle bejahten Fragen",
     "a11y-close": "Hebt alle Filter auf",
@@ -14,6 +16,10 @@
     "a11y-search_box": "Gib die gewünschte Frage ein",
     "a11y-swap_vert": "Option Fragen zu sortieren",
     "add-comment": "Frage stellen",
+    "pause-comments": "Pausiere den Kommentar-Stream",
+    "play-comments": "Starte den Kommentar-Stream",
+    "comment-stream-stopped": "Der Kommentar-Stream wurde gestoppt.",
+    "comment-stream-started": "Der Kommentar-Stream wurde gestartet.",
     "comment-sent": "Die Frage wurde veröffentlicht.",
     "comment-deleted": "Die Frage wurde gelöscht.",
     "correct": "Fragen, die vom Dozenten als richtig markiert wurden",

src/assets/i18n/creator/en.json

@@ -2,6 +2,8 @@
   "comment-list": {
     "a11y-access_time": "Sorts questions by time",
     "a11y-add": "Option to ask a question",
+    "a11y-pause": "Stops comment-stream",
+    "a11y-play": "Starts comment-stream",
     "a11y-beamer_icon": "Filters all discussed questions",
     "a11y-check_circle": "Filters all questions marked as correct",
     "a11y-close": "Picks up all filters",
@@ -14,6 +16,10 @@
     "a11y-search_box": "Enter the desired question",
     "a11y-swap_vert": "Option to sort questions",
     "add-comment": "Ask a question!",
+    "pause-comments": "Pause comment-stream",
+    "play-comments": "Start comment-stream",
+    "comment-stream-stopped": "Comment-stream has been stopped.",
+    "comment-stream-started": "Comment-stream has been started.",
     "comment-sent": "The question has been published.",
     "comment-deleted": "The question has been deleted.",
     "correct": "Marked as correct by you",

src/assets/i18n/participant/de.json

@@ -12,6 +12,8 @@
   "comment-list": {
     "a11y-access_time": "Sortiert Fragen nach der Uhrzeit",
     "a11y-add": "Option eine Frage zu stellen",
+    "a11y-pause": "Stoppt Kommentar-Stream",
+    "a11y-play": "Startet Kommentar-Stream",
     "a11y-beamer_icon": "Filtert alle besprochenen Fragen",
     "a11y-check_circle": "Filtert alle bejahten Fragen",
     "a11y-close": "Hebt alle Filter auf",
@@ -24,6 +26,10 @@
     "a11y-search_box": "Gib die gewünschte Frage ein",
     "a11y-swap_vert": "Option Fragen zu sortieren",
     "add-comment": "Stell deine Frage!",
+    "pause-comments": "Pausiere den Kommentar-Stream",
+    "play-comments": "Starte den Kommentar-Stream",
+    "comment-stream-stopped": "Der Kommentar-Stream wurde gestoppt.",
+    "comment-stream-started": "Der Kommentar-Stream wurde gestartet.",
     "comment-sent": "Die Frage wurde veröffentlicht.",
     "comment-sent-to-moderator": "Die Frage wird nun von einem Moderator überprüft.",
     "comment-deleted": "Die Frage wurde gelöscht.",

src/assets/i18n/participant/en.json

@@ -12,6 +12,8 @@
   "comment-list": {
     "a11y-access_time": "Sorts questions by time",
     "a11y-add": "Option to ask a question",
+    "a11y-pause": "Stops comment-stream",
+    "a11y-play": "Starts comment-stream",
     "a11y-beamer_icon": "Filters all discussed questions",
     "a11y-check_circle": "Filters all questions marked as correct",
     "a11y-close": "Picks up all filters",
@@ -24,6 +26,10 @@
     "a11y-search_box": "Enter the desired question",
     "a11y-swap_vert": "Option to sort questions",
     "add-comment": "Ask a question!",
+    "pause-comments": "Pause comment-stream",
+    "play-comments": "Start comment-stream",
+    "comment-stream-stopped": "Comment-stream has been stopped.",
+    "comment-stream-started": "Comment-stream has been started.",
     "comment-sent": "The question has been published.",
     "comment-sent-to-moderator": "The question will be reviewed by a moderator.",
     "comment-deleted": "The question has been deleted.",