@testgorilla/tgo-immersive-test 0.0.1

package/src/lib/components/immersive-test/immersive-test.component.ts

@@ -0,0 +1,279 @@
+import {
+  AudioAnimationComponent,
+  VimeoVideoComponent,
+  Question,
+  TestResultRead,
+  SelectedMediaDevices,
+  ISubmissionState,
+  IQuestionDataContract,
+  MediaService,
+  ThemeService,
+  TranslocoLazyModuleUtils,
+  getAvailableLangs,
+} from '@testgorilla/tgo-test-shared';
+import { VideoCountdownComponent } from '../video-countdown';
+import { RingingPhoneAnimationComponent } from '../ringing-phone-animation';
+import {
+  ReviewInstructionsDialogComponent,
+  ReviewInstructionsDialogData,
+} from '../review-instructions-dialog';
+import { ROOT_TRANSLATIONS_SCOPE } from '../../models/translations';
+import { catchError, firstValueFrom, Observable, takeUntil } from 'rxjs';
+import { transition, style, animate, trigger } from '@angular/animations';
+import {
+  ElementRef,
+  OnDestroy,
+  signal,
+  ViewChild,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  OnInit,
+  Inject,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import {
+  ButtonComponentModule,
+  DialogService,
+  IconComponentModule,
+} from '@testgorilla/tgo-ui';
+import { CommonModule } from '@angular/common';
+import {
+  TRANSLOCO_SCOPE,
+  TranslocoModule,
+  TranslocoScope,
+  TranslocoService,
+} from '@ngneat/transloco';
+
+@Component({
+  selector: 'tgo-immersive-test',
+  templateUrl: './immersive-test.component.html',
+  styleUrl: './immersive-test.component.scss',
+  animations: [
+    trigger('fadeInFadeOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('600ms', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [animate('600ms', style({ opacity: 0 }))]),
+    ]),
+  ],
+  standalone: true,
+  imports: [
+    TranslocoModule,
+    ButtonComponentModule,
+    IconComponentModule,
+    CommonModule,
+    VimeoVideoComponent,
+    VideoCountdownComponent,
+    RingingPhoneAnimationComponent,
+    AudioAnimationComponent,
+    ReviewInstructionsDialogComponent,
+  ],
+  providers: [
+    TranslocoLazyModuleUtils.getScopeProvider(
+      'tgo-immersive-test',
+      getAvailableLangs(),
+      ROOT_TRANSLATIONS_SCOPE,
+      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
+    ),
+    DialogService,
+    ThemeService,
+  ],
+})
+export class ImmersiveTestComponent
+  implements OnInit, OnDestroy, IQuestionDataContract
+{
+  @ViewChild('video') videoElement?: ElementRef<HTMLVideoElement>;
+  @ViewChild('audio') audioElement?: ElementRef<HTMLAudioElement>;
+  @Input({ required: true }) question!: Question;
+  @Input({ required: true }) test!: TestResultRead;
+  @Input() isFirstQuestion?: boolean;
+  @Input() expirationObservable?: Observable<void>;
+  @Input() selectedMediaDevices?: SelectedMediaDevices;
+  @Input() mediaAccessChanged?: Observable<SelectedMediaDevices> | undefined;
+
+  @Output() submissionStateChanged =
+    new EventEmitter<ISubmissionState | null>();
+  @Output() loadingStateChanged: EventEmitter<boolean> =
+    new EventEmitter<boolean>();
+  @Output() requestMediaAccess: EventEmitter<void> = new EventEmitter<void>();
+
+  isAnswering = signal(false);
+  isCountingDown = signal(false);
+  isVideoPlaying = signal(false);
+  isQuestionPlaying = signal(false);
+  candidateVideoStreamReady = signal(false);
+  translations: { [key: string]: string } = {};
+  volume = signal(0);
+  audioUrl = signal('');
+
+  private unsubscribe$ = new Subject<void>();
+  private mediaService = inject(MediaService);
+  private translocoService = inject(TranslocoService);
+  private dialog = inject(DialogService);
+  private cdr = inject(ChangeDetectorRef);
+  private themeService = inject(ThemeService);
+
+  companyColor = this.themeService.getCompanyColor();
+
+  get fileUrl(): string {
+    const match = this.question?.text.match(/(src|href)="([^"]*)"/);
+    return (match && match.pop()) || '';
+  }
+
+  get isVideo() {
+    return this.fileUrl.includes('player.vimeo.com');
+  }
+
+  constructor(
+    @Inject(TRANSLOCO_SCOPE) private translationScope: TranslocoScope
+  ) {}
+
+  ngOnInit(): void {
+    this.initExpirationSubscription();
+    this.initMediaAccessSubscription();
+    this.loadingStateChanged.emit(false);
+    this.mediaService.setSelectedMediaDevices(this.selectedMediaDevices);
+    void this.setTranslations();
+    void this.initVideoStream();
+    if (!this.isFirstQuestion) {
+      void this.startQuestion();
+    }
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  stopRecording() {
+    this.mediaService.stopRecording();
+  }
+
+  onVideoLoad() {
+    this.candidateVideoStreamReady.set(true);
+  }
+
+  async startQuestion() {
+    this.isQuestionPlaying.set(true);
+
+    if (!this.isVideo) {
+      await this.mediaService.playAudio(this.fileUrl);
+      this.startCountdown();
+    }
+  }
+
+  async startCountdown() {
+    if (
+      !(await this.mediaService.checkPermission({ audio: true, video: false }))
+    ) {
+      this.requestMediaAccess.emit();
+      return;
+    }
+    this.isCountingDown.set(true);
+    this.isVideoPlaying.set(false);
+  }
+
+  startRecordAnswer() {
+    this.isCountingDown.set(false);
+    this.isAnswering.set(true);
+    this.mediaService
+      .recordAudio()
+      .pipe(
+        takeUntil(this.unsubscribe$),
+        catchError((error) => {
+          console.error('Error recording answer', error);
+          this.isAnswering.set(false);
+          this.startCountdown();
+          throw error;
+        })
+      )
+      .subscribe((event) => {
+        if (event.type === 'complete') {
+          if (!this.test.is_preview_mode) {
+            this.submissionStateChanged.emit({ file: event.file, text: '' });
+            this.isAnswering.set(false);
+            this.loadingStateChanged.emit(true);
+          } else {
+            const url = window.URL.createObjectURL(event.file);
+            this.audioUrl.set(url);
+            if (this.audioElement) {
+              this.audioElement.nativeElement.src = url;
+              this.audioElement.nativeElement.play();
+            }
+          }
+        } else {
+          this.volume.set(event.value);
+        }
+      });
+  }
+
+  openReviewInstructionsDialog() {
+    const dialogData: ReviewInstructionsDialogData = {
+      backgroundInfoData: this.test.intro_text,
+      instructionsInfoData: this.test.test_instruction,
+    };
+    this.dialog.open(ReviewInstructionsDialogComponent, {
+      size: 'large',
+      extraData: dialogData,
+    });
+  }
+
+  private async initVideoStream() {
+    try {
+      const stream = await this.mediaService.getMediaStream({
+        video: true,
+        audio: false,
+      });
+      if (this.videoElement) {
+        this.videoElement.nativeElement.srcObject = stream;
+        await this.videoElement?.nativeElement.play();
+      }
+    } catch (error) {
+      console.error('Error initializing video stream:', error);
+      this.candidateVideoStreamReady.set(false);
+    }
+  }
+
+  private async setTranslations() {
+    this.translations = await firstValueFrom(
+      this.translocoService.selectTranslateObject(
+        `TEST`,
+        {},
+        this.translationScope as string
+      )
+    );
+    this.cdr.markForCheck();
+  }
+
+  private initExpirationSubscription() {
+    this.expirationObservable
+      ?.pipe(takeUntil(this.unsubscribe$))
+      .subscribe(() => {
+        if (!this.test?.is_preview_mode) {
+          if (this.mediaService.isRecording()) {
+            this.stopRecording();
+          } else {
+            this.submissionStateChanged.emit({ file: undefined, text: '' });
+          }
+        }
+      });
+  }
+
+  private initMediaAccessSubscription() {
+    this.mediaAccessChanged
+      ?.pipe(takeUntil(this.unsubscribe$))
+      .subscribe((selectedMediaDevices) => {
+        this.mediaService.setSelectedMediaDevices(selectedMediaDevices);
+        if (!this.isCountingDown()) {
+          void this.startCountdown();
+        }
+        void this.initVideoStream();
+      });
+  }
+}
+

package/src/lib/components/index.ts

@@ -0,0 +1,6 @@
+// Library-specific components only (shared components are in @testgorilla/tgo-test-shared)
+export * from './immersive-test/immersive-test.component';
+export * from './review-instructions-dialog';
+export * from './ringing-phone-animation';
+export * from './video-countdown';
+

package/src/lib/components/review-instructions-dialog/index.ts

@@ -0,0 +1 @@
+export * from './review-instructions-dialog.component';

package/src/lib/components/review-instructions-dialog/review-instructions-dialog.component.html

@@ -0,0 +1,39 @@
+<ng-container *transloco="let t">
+  <ui-dialog
+    class="dialog-wrapper"
+    [title]="translations['TITLE']"
+    [secondaryButtonLabel]="translations['CLOSE']"
+    (secondaryButtonClickEvent)="closeDialog()"
+  >
+    <section class="containers-section">
+      <div class="immersive-test-instructions-container">
+        <div
+          class="background-information-container"
+          *ngIf="dialogData?.backgroundInfoData"
+        >
+          <ui-card class="background-information-card" variant="neutral">
+            <quill-view
+              theme="snow"
+              [content]="dialogData?.backgroundInfoData"
+              class="content-container notranslate"
+            ></quill-view>
+          </ui-card>
+        </div>
+
+        <div
+          class="inner-instructions-container"
+          *ngIf="dialogData?.instructionsInfoData"
+        >
+          <ui-card class="instructions-card" variant="educative">
+            <quill-view
+              theme="snow"
+              [content]="dialogData?.instructionsInfoData"
+              class="content-container notranslate"
+            ></quill-view>
+          </ui-card>
+        </div>
+      </div>
+    </section>
+  </ui-dialog>
+</ng-container>
+

package/src/lib/components/review-instructions-dialog/review-instructions-dialog.component.scss

@@ -0,0 +1,160 @@
+:host {
+  .dialog-wrapper {
+    width: 100%;
+
+    ::ng-deep {
+      .mat-mdc-dialog-content {
+        .containers-section {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 0.3rem 0.8rem;
+
+          .immersive-test-instructions-container {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            gap: 2.5rem;
+
+            .background-information-container {
+              display: flex;
+              flex-direction: column;
+              width: 100%;
+              max-width: 450px;
+
+              .background-information-card {
+                .content-container {
+                  .ql-container {
+                    .ql-editor {
+                      padding: 0;
+
+                      h1,
+                      h2,
+                      h3,
+                      h4,
+                      h5,
+                      h6 {
+                        font-size: 16px;
+                        font-weight: 700;
+                        line-height: 20px;
+                        margin-bottom: 0.6rem;
+                      }
+
+                      p,
+                      span {
+                        font-size: 14px;
+                        margin-bottom: 1.5rem;
+                      }
+
+                      p:last-child,
+                      span:last-child {
+                        margin-bottom: 0;
+                      }
+
+                      br {
+                        display: none;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            .inner-instructions-container {
+              display: flex;
+              flex-direction: column;
+              gap: 2.5rem;
+              width: 100%;
+              max-width: 450px;
+
+              .instructions-card {
+                .card-container {
+                  border-width: 1px;
+
+                  .ql-container {
+                    .ql-editor {
+                      padding: 0;
+
+                      h1,
+                      h2,
+                      h3,
+                      h4,
+                      h5,
+                      h6 {
+                        font-size: 16px;
+                        font-weight: 700;
+                        line-height: 20px;
+                        margin-bottom: 0.6rem;
+                      }
+
+                      p::before,
+                      span::before {
+                        content: '• ';
+                        color: black;
+                        font-size: 1em;
+                        position: absolute;
+                        left: 8px;
+                        top: 0;
+                      }
+
+                      p,
+                      span {
+                        position: relative;
+                        font-size: 14px;
+                        padding-left: 22px;
+                        margin: 3px 0 0;
+                      }
+
+                      ul,
+                      ol {
+                        padding-left: 10px;
+                        margin: 5px 0 0;
+
+                        li {
+                          font-size: 14px;
+                          padding-left: 0;
+
+                          span::before {
+                            top: -3px;
+                          }
+
+                          span {
+                            padding-left: 12px;
+                          }
+                        }
+                      }
+
+                      br {
+                        display: none;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        @media (max-width: 799px) {
+          .containers-section {
+            padding-top: 0;
+
+            .immersive-test-instructions-container {
+              flex-wrap: wrap;
+
+              .background-information-container {
+                max-width: none;
+              }
+
+              .inner-instructions-container {
+                max-width: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

package/src/lib/components/review-instructions-dialog/review-instructions-dialog.component.spec.ts

@@ -0,0 +1,81 @@
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ReviewInstructionsDialogComponent } from './review-instructions-dialog.component';
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TRANSLOCO_SCOPE, TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { of } from 'rxjs';
+
+const mockedTranslations = { testTranslationKey: 'test-translation' };
+const mockDialog = { close: jest.fn() };
+
+describe('ReviewInstructionsDialogComponent', () => {
+  let component: ReviewInstructionsDialogComponent;
+  let fixture: ComponentFixture<ReviewInstructionsDialogComponent>;
+  let transLocoServiceMock: Partial<jest.Mocked<TranslocoService>>;
+
+  beforeEach(async () => {
+    transLocoServiceMock = {
+      selectTranslateObject: jest.fn().mockReturnValue(of(mockedTranslations)),
+    };
+    await TestBed.configureTestingModule({
+      imports: [ReviewInstructionsDialogComponent, TranslocoModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        { provide: TranslocoService, useValue: transLocoServiceMock },
+        {
+          provide: TRANSLOCO_SCOPE,
+          useValue: 'tgo-immersive-test-review-instructions',
+        },
+        {
+          provide: ChangeDetectorRef,
+          useValue: { markForCheck: jest.fn() },
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            backgroundInfoData: 'backgroundInfoData',
+            instructionsInfoData: 'instructionsInfoData',
+          },
+        },
+        {
+          provide: MatDialogRef,
+          useValue: mockDialog,
+        },
+      ],
+    })
+      .overrideComponent(ReviewInstructionsDialogComponent, {
+        set: {
+          providers: [],
+        },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(ReviewInstructionsDialogComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fixture.destroy();
+  });
+
+  describe('when initialized', () => {
+    beforeEach(() => {
+      component.ngOnInit();
+    });
+
+    it('should set translations', () => {
+      expect(component.translations).toEqual(mockedTranslations);
+    });
+
+    describe('when call closeDialog', () => {
+      beforeEach(() => {
+        component.closeDialog();
+      });
+
+      it('should call dialog close', () => {
+        expect(mockDialog.close).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+});
+

package/src/lib/components/review-instructions-dialog/review-instructions-dialog.component.ts

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Inject,
+  OnInit,
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  TRANSLOCO_SCOPE,
+  TranslocoModule,
+  TranslocoScope,
+  TranslocoService,
+} from '@ngneat/transloco';
+import { CardComponentModule, DialogComponentModule } from '@testgorilla/tgo-ui';
+import { QuillViewComponent } from 'ngx-quill';
+import { firstValueFrom } from 'rxjs';
+import { getAvailableLangs, TranslocoLazyModuleUtils } from '../../services';
+
+export interface ReviewInstructionsDialogData {
+  backgroundInfoData?: string;
+  instructionsInfoData?: string;
+}
+
+@Component({
+  selector: 'tgo-review-instructions-dialog',
+  templateUrl: './review-instructions-dialog.component.html',
+  styleUrls: ['./review-instructions-dialog.component.scss'],
+  providers: [
+    TranslocoLazyModuleUtils.getScopeProvider(
+      'tgo-immersive-test-review-instructions',
+      getAvailableLangs(),
+      'INSTRUCTIONS_MODAL',
+      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
+    ),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslocoModule,
+    DialogComponentModule,
+    CardComponentModule,
+    QuillViewComponent,
+  ],
+})
+export class ReviewInstructionsDialogComponent implements OnInit {
+  translations: { [key: string]: string } = {};
+
+  private translocoService = inject(TranslocoService);
+  private cdr = inject(ChangeDetectorRef);
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public dialogData: ReviewInstructionsDialogData,
+    @Inject(TRANSLOCO_SCOPE) private translationScope: TranslocoScope,
+    private dialogRef: MatDialogRef<ReviewInstructionsDialogComponent>
+  ) {}
+
+  ngOnInit(): void {
+    void this.setTranslations();
+  }
+
+  closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+
+  private async setTranslations(): Promise<void> {
+    this.translations = await firstValueFrom(
+      this.translocoService.selectTranslateObject(
+        `INSTRUCTIONS_MODAL`,
+        {},
+        this.translationScope as string
+      )
+    );
+    this.cdr.markForCheck();
+  }
+}

package/src/lib/components/ringing-phone-animation/index.ts

@@ -0,0 +1 @@
+export * from './ringing-phone-animation.component';

package/src/lib/components/ringing-phone-animation/ringing-phone-animation.component.html

@@ -0,0 +1,16 @@
+<div class="ringing-phone-animation-wrapper">
+  <section class="ringing-phone-animation-container">
+    <div class="ringing-effect" *ngIf="ringingSignal()">
+      <div class="ringing-line first-line"></div>
+      <div class="ringing-line second-line"></div>
+      <div class="ringing-line third-line"></div>
+    </div>
+    <svg width="76" height="30" viewBox="0 0 76 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M9.33348 28.5122L1.66681 21.0122C1.00014 20.3455 0.666809 19.5678 0.666809 18.6789C0.666809 17.79 1.00014 17.0122 1.66681 16.3455C6.5557 11.0678 12.1946 7.10943 18.5835 4.47054C24.9724 1.83165 31.4446 0.512207 38.0001 0.512207C44.5557 0.512207 51.014 1.83165 57.3751 4.47054C63.7363 7.10943 69.389 11.0678 74.3335 16.3455C75.0001 17.0122 75.3335 17.79 75.3335 18.6789C75.3335 19.5678 75.0001 20.3455 74.3335 21.0122L66.6668 28.5122C66.0557 29.1233 65.3474 29.4567 64.5418 29.5122C63.7363 29.5678 63.0001 29.3455 62.3335 28.8455L52.6668 21.5122C52.2224 21.1789 51.889 20.79 51.6668 20.3455C51.4446 19.9011 51.3335 19.4011 51.3335 18.8455V9.34554C49.2224 8.67888 47.0557 8.1511 44.8335 7.76221C42.6113 7.37332 40.3335 7.17887 38.0001 7.17887C35.6668 7.17887 33.389 7.37332 31.1668 7.76221C28.9446 8.1511 26.7779 8.67888 24.6668 9.34554V18.8455C24.6668 19.4011 24.5557 19.9011 24.3335 20.3455C24.1113 20.79 23.7779 21.1789 23.3335 21.5122L13.6668 28.8455C13.0001 29.3455 12.264 29.5678 11.4585 29.5122C10.6529 29.4567 9.94459 29.1233 9.33348 28.5122ZM18.0001 11.6789C16.389 12.5122 14.8335 13.4705 13.3335 14.5539C11.8335 15.6372 10.2779 16.8455 8.66681 18.1789L12.0001 21.5122L18.0001 16.8455V11.6789ZM58.0001 11.8455V16.8455L64.0001 21.5122L67.3335 18.3455C65.7224 16.9011 64.1668 15.6511 62.6668 14.5955C61.1668 13.54 59.6113 12.6233 58.0001 11.8455Z"
+        fill="white"
+      />
+    </svg>
+  </section>
+</div>
+