Merge branch '126-optimize-and-correct-views-for-safari-users' into 'master'

Check if another browser is used on mac device

Closes #126

See merge request arsnova/frag.jetzt!264

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

@@ -40,7 +40,7 @@
   </div>
 
   <mat-menu #sortMenu="matMenu" xPosition="before">
-    <button mat-menu-item *ngIf="isApple === 'false'" matTooltip="{{ 'comment-list.time' | translate }}"
+    <button mat-menu-item *ngIf="isSafari === 'false'" matTooltip="{{ 'comment-list.time' | translate }}"
             (click)="sortComments(time)" aria-labelledby="access_time">
       <mat-icon [ngClass]="{time: 'unread-icon'}[currentSort]">access_time</mat-icon>
       <span>{{ 'comment-list.sort-list-time' | translate }}</span>

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

@@ -32,7 +32,7 @@ export class ModeratorCommentListComponent implements OnInit {
   filteredComments: Comment[];
   userRole: UserRole;
   deviceType: string;
-  isApple: string;
+  isSafari: string;
   isLoading = true;
   voteasc = 'voteasc';
   votedesc = 'votedesc';
@@ -79,7 +79,7 @@ export class ModeratorCommentListComponent implements OnInit {
     });
     this.translateService.use(localStorage.getItem('currentLang'));
     this.deviceType = localStorage.getItem('deviceType');
-    this.isApple = localStorage.getItem('isApple');
+    this.isSafari = localStorage.getItem('isSafari');
     this.currentSort = this.votedesc;
     this.commentService.getRejectedComments(this.roomId)
       .subscribe(comments => {

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

@@ -69,7 +69,7 @@
 
   <mat-menu #sortMenu="matMenu" xPosition="before">
 
-    <button mat-menu-item *ngIf="isApple === 'false'" matTooltip="{{ 'comment-list.time' | translate }}"
+    <button mat-menu-item *ngIf="isSafari === 'false'" matTooltip="{{ 'comment-list.time' | translate }}"
             (click)="sortComments(time)" aria-labelledby="access_time">
       <mat-icon [ngClass]="{time: 'unread-icon'}[currentSort]">access_time</mat-icon>
       <span>{{ 'comment-list.sort-list-time' | translate }}</span>

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

@@ -37,7 +37,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   filteredComments: Comment[];
   userRole: UserRole;
   deviceType: string;
-  isApple: string;
+  isSafari: string;
   isLoading = true;
   voteasc = 'voteasc';
   votedesc = 'votedesc';
@@ -108,7 +108,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
     this.subscribeCommentStream();
     this.translateService.use(localStorage.getItem('currentLang'));
     this.deviceType = localStorage.getItem('deviceType');
-    this.isApple = localStorage.getItem('isApple');
+    this.isSafari = localStorage.getItem('isSafari');
     if (this.userRole === 0) {
       this.voteService.getByRoomIdAndUserID(this.roomId, userId).subscribe(votes => {
         for (const v of votes) {

src/app/components/shared/header/header.component.html

@@ -5,7 +5,7 @@
             matTooltip="{{'header.back' | translate}}">
       <mat-icon class="header-icons">arrow_back</mat-icon>
     </button>
-    <button mat-icon-button aria-hidden="true" *ngIf="isApple === 'false'">
+    <button mat-icon-button aria-hidden="true" *ngIf="isSafari === 'false'">
       <mat-icon class="header-icons" (click)="getRescale().toggleState();">fullscreen</mat-icon>
     </button>
     <span class="fill-remaining-space"></span>

src/app/components/shared/header/header.component.ts

@@ -30,7 +30,7 @@ export class HeaderComponent implements OnInit {
   cTime: string;
   shortId: string;
   deviceType: string;
-  isApple = 'false';
+  isSafari = 'false';
   moderationEnabled: boolean;
 
   constructor(public location: Location,
@@ -50,19 +50,26 @@ export class HeaderComponent implements OnInit {
     if (localStorage.getItem('loggedin') !== null && localStorage.getItem('loggedin') === 'true') {
       this.authenticationService.refreshLogin();
     }
-    // Subscribe to user data (update component's user when user data changes: e.g. login, logout)
-    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-      if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
-        this.isApple = 'true';
+    const userAgent = navigator.userAgent;
+    console.log(userAgent);
+    // Check if mobile device
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
+      // Check if IOS device
+      if (/iPhone|iPad|iPod/.test(userAgent)) {
+        this.isSafari = 'true';
       }
       this.deviceType = 'mobile';
     } else {
-      if (/Macintosh|MacIntel|MacPPC|Mac68k/.test(navigator.userAgent)) {
-        this.isApple = 'true';
+      // Check if Mac
+      if (/Macintosh|MacIntel|MacPPC|Mac68k/.test(userAgent)) {
+        // Check if Safari browser
+        if (userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1) {
+          this.isSafari = 'true';
+        }
       }
       this.deviceType = 'desktop';
     }
-    localStorage.setItem('isApple', this.isApple);
+    localStorage.setItem('isSafari', this.isSafari);
     localStorage.setItem('deviceType', this.deviceType);
     if (!localStorage.getItem('currentLang')) {
       const lang = this.translationService.getBrowserLang();