Development: use a simpler and smaller library to check for mobile de…

…vices

package.json

@@ -49,7 +49,7 @@
         "js-video-url-parser": "0.5.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-beta.0",
-        "ngx-device-detector": "3.0.0",
+        "ismobilejs-es5": "0.0.1",
         "ngx-infinite-scroll": "13.0.2",
         "ngx-webstorage": "9.0.0",
         "papaparse": "5.3.2",

src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.html

@@ -109,11 +109,11 @@ <h2 [ngSwitch]="mode">
                         <ng-template #tooltipNotExplanationTranslate>{{ 'artemisApp.quizExercise.explanationNotAnswered' | artemisTranslate }}</ng-template>
                     </div>
                 </div>
-                <div *ngIf="quizExercise.quizQuestions && !this.isMobile()" class="align-text hide-mobile">
+                <div *ngIf="quizExercise.quizQuestions && !this.isMobile" class="align-text hide-mobile">
                     {{ quizExercise.quizQuestions ? quizExercise.quizQuestions.length : 0 }} <span jhiTranslate="artemisApp.quizExercise.questions"></span>, {{ totalScore }}
                     <span jhiTranslate="artemisApp.quizExercise.totalPoints"></span>
                 </div>
-                <div *ngIf="quizExercise.quizQuestions && this.isMobile()" class="align-text show-mobile">
+                <div *ngIf="quizExercise.quizQuestions && this.isMobile" class="align-text show-mobile">
                     {{ quizExercise.quizQuestions ? quizExercise.quizQuestions.length : 0 }} Q / {{ totalScore }} P
                 </div>
             </div>
@@ -134,15 +134,15 @@ <h2 [ngSwitch]="mode">
                     <span jhiTranslate="artemisApp.quizExercise.waitingForStart"></span>
                 </div>
                 <div *ngIf="mode === 'live' && !waitingForQuizStart">
-                    <span *ngIf="!isMobile()" ngbTooltip="{{ submission.submissionDate | artemisDate: 'long':true }}" placement="right">
+                    <span *ngIf="!isMobile" ngbTooltip="{{ submission.submissionDate | artemisDate: 'long':true }}" placement="right">
                         <span *ngIf="!submission.submitted" jhiTranslate="artemisApp.quizExercise.lastSaved" class="colon-suffix"></span>
                         <span *ngIf="submission.submitted" jhiTranslate="artemisApp.quizExercise.submitted" class="colon-suffix"></span>
                         <span *ngIf="justSaved" jhiTranslate="justNow"></span>
                         <span *ngIf="!justSaved && lastSavedTimeText !== ''">{{ lastSavedTimeText }}</span>
                         <span *ngIf="!justSaved && lastSavedTimeText === ''" jhiTranslate="artemisApp.quizExercise.lastSavedTimeNever"></span>
                     </span>
                     <!-- Only display save and submission hint without time stamps for mobile -->
-                    <span *ngIf="isMobile()" ngbTooltip="{{ submission.submissionDate | artemisDate: 'long':true }}" placement="right">
+                    <span *ngIf="isMobile" ngbTooltip="{{ submission.submissionDate | artemisDate: 'long':true }}" placement="right">
                         <span *ngIf="!submission.submitted" jhiTranslate="artemisApp.quizExercise.lastSaved"></span>
                         <span *ngIf="submission.submitted" jhiTranslate="artemisApp.quizExercise.submitted"></span>
                     </span>
@@ -181,7 +181,7 @@ <h2 [ngSwitch]="mode">
                 *ngIf="mode === 'live' && !quizBatch?.started && !quizBatch?.startTime"
                 id="refresh-quiz"
                 (onClick)="refreshQuiz(true)"
-                [btnSize]="isMobile() ? ButtonSize.SMALL : ButtonSize.LARGE"
+                [btnSize]="isMobile ? ButtonSize.SMALL : ButtonSize.LARGE"
                 [btnType]="ButtonType.PRIMARY"
                 [title]="'artemisApp.exercise.refresh'"
                 [disabled]="refreshingQuiz"
@@ -192,7 +192,7 @@ <h2 [ngSwitch]="mode">
                     *ngIf="!showingResult"
                     id="submit-quiz"
                     (onClick)="onSubmit()"
-                    [btnSize]="isMobile() ? ButtonSize.SMALL : ButtonSize.LARGE"
+                    [btnSize]="isMobile ? ButtonSize.SMALL : ButtonSize.LARGE"
                     [btnType]="ButtonType.SUCCESS"
                     [title]="submission.submitted ? 'artemisApp.quizExercise.submitted' : 'entity.action.submit'"
                     [disabled]="submission.submitted || isSubmitting || waitingForQuizStart || remainingTimeSeconds < 0"

src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import dayjs from 'dayjs/esm';
+import isMobile from 'ismobilejs-es5';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { Subscription } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
@@ -13,7 +14,6 @@ import { ShortAnswerQuestionComponent } from 'app/exercises/quiz/shared/question
 import { TranslateService } from '@ngx-translate/core';
 import * as smoothscroll from 'smoothscroll-polyfill';
 import { StudentParticipation } from 'app/entities/participation/student-participation.model';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
 import { JhiWebsocketService } from 'app/core/websocket/websocket.service';
 import { ShortAnswerSubmittedAnswer } from 'app/entities/quiz/short-answer-submitted-answer.model';
@@ -106,6 +106,7 @@ export class QuizParticipationComponent implements OnInit, OnDestroy {
     endDate: dayjs.Dayjs | undefined;
     password = '';
     previousRunning = false;
+    isMobile = false;
 
     /**
      * Websocket channels
@@ -137,14 +138,14 @@ export class QuizParticipationComponent implements OnInit, OnDestroy {
         private alertService: AlertService,
         private quizParticipationService: QuizParticipationService,
         private translateService: TranslateService,
-        private deviceService: DeviceDetectorService,
         private quizService: ArtemisQuizService,
         private serverDateService: ArtemisServerDateService,
     ) {
         smoothscroll.polyfill();
     }
 
     ngOnInit() {
+        this.isMobile = isMobile(window.navigator.userAgent).any;
         // set correct mode
         this.subscriptionData = this.route.data.subscribe((data) => {
             this.mode = data.mode;
@@ -930,13 +931,6 @@ export class QuizParticipationComponent implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Determines if the current device is a mobile device
-     */
-    isMobile(): boolean {
-        return this.deviceService.isMobile();
-    }
-
     /**
      * Refresh quiz
      */

src/main/webapp/app/exercises/quiz/participate/quiz-participation.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { quizParticipationRoute } from './quiz-participation.route';
 import { QuizParticipationComponent } from './quiz-participation.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
@@ -9,7 +8,6 @@ import { ArtemisQuizQuestionTypesModule } from 'app/exercises/quiz/shared/questi
 
 @NgModule({
     imports: [ArtemisSharedModule, RouterModule.forChild(quizParticipationRoute), ArtemisSharedComponentModule, ArtemisQuizQuestionTypesModule],
-    providers: [DeviceDetectorService],
     declarations: [QuizParticipationComponent],
 })
 export class ArtemisQuizParticipationModule {}

src/main/webapp/app/exercises/quiz/shared/questions/artemis-quiz-question-types.module.ts

@@ -4,7 +4,6 @@ import { DragAndDropQuestionComponent } from 'app/exercises/quiz/shared/question
 import { MultipleChoiceQuestionComponent } from 'app/exercises/quiz/shared/questions/multiple-choice-question/multiple-choice-question.component';
 import { ShortAnswerQuestionComponent } from 'app/exercises/quiz/shared/questions/short-answer-question/short-answer-question.component';
 import { DragItemComponent } from './drag-and-drop-question/drag-item.component';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { QuizScoringInfoStudentModalComponent } from 'app/exercises/quiz/shared/questions/quiz-scoring-infostudent-modal/quiz-scoring-info-student-modal.component';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
@@ -13,7 +12,6 @@ import { FitTextModule } from 'app/exercises/quiz/shared/fit-text/fit-text.modul
 @NgModule({
     imports: [ArtemisSharedModule, DragDropModule, ArtemisMarkdownModule, FitTextModule],
     declarations: [DragItemComponent, DragAndDropQuestionComponent, MultipleChoiceQuestionComponent, ShortAnswerQuestionComponent, QuizScoringInfoStudentModalComponent],
-    providers: [DeviceDetectorService],
     exports: [DragItemComponent, DragAndDropQuestionComponent, MultipleChoiceQuestionComponent, ShortAnswerQuestionComponent],
 })
 export class ArtemisQuizQuestionTypesModule {}

src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { DeviceDetectorService, DeviceInfo } from 'ngx-device-detector';
+import isMobile from 'ismobilejs-es5';
 import { DragItem } from 'app/entities/quiz/drag-item.model';
 
 @Component({
@@ -13,16 +13,14 @@ export class DragItemComponent implements OnInit {
     @Input() dragItem: DragItem;
     @Input() clickDisabled: boolean;
     @Input() invalid: boolean;
-    deviceInfo: DeviceInfo;
     isMobile = false;
 
-    constructor(private deviceService: DeviceDetectorService) {}
+    constructor() {}
 
     /**
      * Initializes device information and whether the device is a mobile device
      */
     ngOnInit(): void {
-        this.deviceInfo = this.deviceService.getDeviceInfo();
-        this.isMobile = this.deviceService.isMobile();
+        this.isMobile = isMobile(window.navigator.userAgent).any;
     }
 }

src/main/webapp/app/grading-system/grading-system.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { DetailedGradingSystemComponent } from 'app/grading-system/detailed-grading-system/detailed-grading-system.component';
 import { GradingSystemInfoModalComponent } from 'app/grading-system/grading-system-info-modal/grading-system-info-modal.component';
 import { GradingSystemComponent } from 'app/grading-system/grading-system.component';
@@ -15,6 +14,5 @@ import { ArtemisSharedComponentModule } from 'app/shared/components/shared-compo
     imports: [ArtemisSharedModule, RouterModule.forChild(gradingSystemState), ArtemisModePickerModule, ArtemisSharedComponentModule],
     exports: [GradingSystemComponent, GradingSystemInfoModalComponent],
     entryComponents: [GradingSystemComponent],
-    providers: [DeviceDetectorService],
 })
 export class GradingSystemModule {}

src/main/webapp/app/guided-tour/guided-tour.module.ts

@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { GuidedTourComponent } from './guided-tour.component';
-import { DeviceDetectorService } from 'ngx-device-detector';
 
 @NgModule({
     declarations: [GuidedTourComponent],
     imports: [ArtemisSharedModule],
     exports: [GuidedTourComponent],
     entryComponents: [GuidedTourComponent],
-    providers: [DeviceDetectorService],
 })
 export class GuidedTourModule {}

src/main/webapp/app/guided-tour/guided-tour.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import isMobile from 'ismobilejs-es5';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { cloneDeep } from 'lodash-es';
@@ -10,7 +11,6 @@ import { GuidedTourState, Orientation, OrientationConfiguration, ResetParticipat
 import { User } from 'app/core/user/user.model';
 import { TextTourStep, TourStep, UserInterActionTourStep, VideoTourStep } from 'app/guided-tour/guided-tour-step.model';
 import { GuidedTour } from 'app/guided-tour/guided-tour.model';
-import { DeviceDetectorService } from 'ngx-device-detector';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { Course } from 'app/entities/course.model';
 import { checkPageUrlEnding, clickOnElement, determineUrlMatching, getUrlParams } from 'app/guided-tour/guided-tour.utils';
@@ -59,12 +59,13 @@ export class GuidedTourService {
     public isBackPageNavigation = new BehaviorSubject<boolean>(false);
     private isComponentPageLoaded = new Subject<boolean>();
 
+    private isMobile = false;
+
     constructor(
         private http: HttpClient,
         private alertService: AlertService,
         private accountService: AccountService,
         private router: Router,
-        private deviceService: DeviceDetectorService,
         private profileService: ProfileService,
         private participationService: ParticipationService,
         private tutorParticipationService: TutorParticipationService,
@@ -75,6 +76,7 @@ export class GuidedTourService {
      * Init method for guided tour settings to retrieve the guided tour settings and subscribe to window resize events
      */
     public init() {
+        this.isMobile = isMobile(window.navigator.userAgent).any;
         // Retrieve the guided tour setting from the account service after the user is logged in
         this.accountService.getAuthenticationState().subscribe((user: User | undefined) => {
             if (user) {
@@ -125,7 +127,8 @@ export class GuidedTourService {
         fromEvent(window, 'resize')
             .pipe(debounceTime(200))
             .subscribe(() => {
-                if (this.currentTour && this.deviceService.isDesktop()) {
+                // TODO: we should use responsive design here instead of checking for mobile/desktop
+                if (this.currentTour && !this.isMobile) {
                     // Show resize tour step if the window size falls below the defined minimum tour size, except for VideoTourSteps
                     if (this.tourMinimumScreenSize >= window.innerWidth && !(this.currentTour.steps[this.currentTourStepIndex] instanceof VideoTourStep)) {
                         this.onResizeMessage = true;
@@ -190,7 +193,8 @@ export class GuidedTourService {
     public getGuidedTourAvailabilityStream(): Observable<boolean> {
         // The guided tour is currently disabled for mobile devices and tablets
         // TODO optimize guided tour layout for mobile devices and tablets
-        return this.guidedTourAvailabilitySubject.pipe(map((isTourAvailable) => isTourAvailable && this.deviceService.isDesktop()));
+        // TODO: we should use responsive design here instead of checking for mobile/desktop
+        return this.guidedTourAvailabilitySubject.pipe(map((isTourAvailable) => isTourAvailable && !this.isMobile));
     }
 
     /**
@@ -945,7 +949,7 @@ export class GuidedTourService {
         }
         return this.checkSelectorValidity()
             ? this.setTourOrientation(this.currentTour.steps[this.currentTourStepIndex])
-            : this.setStepAlreadyFinishedHint(this.currentTour.steps[this.currentTourStepIndex]);
+            : GuidedTourService.setStepAlreadyFinishedHint(this.currentTour.steps[this.currentTourStepIndex]);
     }
 
     /**
@@ -996,7 +1000,7 @@ export class GuidedTourService {
     /** If the current tour step cannot be displayed because it has already been successfully completed, then this
      * extra TourStep should be displayed instead
      */
-    private setStepAlreadyFinishedHint(step: any): TourStep | undefined {
+    private static setStepAlreadyFinishedHint(step: any): TourStep | undefined {
         if (step.skipStepIfNoSelector) {
             return undefined;
         }