@testgorilla/tgo-immersive-test 0.0.1

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

@@ -0,0 +1,79 @@
+.ringing-phone-animation-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .ringing-phone-animation-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    .ringing-effect {
+      display: flex;
+      gap: 15px;
+      opacity: 1;
+      animation: blink-wrapper 1.4s infinite;
+      animation-delay: 0.8s;
+
+      .ringing-line {
+        width: 6px;
+        height: 16px;
+        background-color: white;
+        opacity: 0;
+      }
+
+      .first-line {
+        animation: blink-line 1.4s infinite;
+        animation-delay: 0.1s;
+        transform: rotate(-45deg);
+      }
+
+      .second-line {
+        animation: blink-line 1.4s infinite;
+        animation-delay: 0.3s;
+        transform: translate(0, -50%);
+      }
+
+      .third-line {
+        animation: blink-line 1.4s infinite;
+        animation-delay: 0.6s;
+        transform: rotate(45deg);
+      }
+    }
+
+    .answer-btn {
+      margin-top: 20px;
+      padding: 10px 20px;
+      background-color: white;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+  }
+}
+
+@keyframes blink-line {
+  0%,
+  49% {
+    opacity: 0;
+  }
+  50%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink-wrapper {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+

package/src/lib/components/ringing-phone-animation/ringing-phone-animation.component.spec.ts

@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { SimpleChanges } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RingingPhoneAnimationComponent } from './ringing-phone-animation.component';
+import SpyInstance = jest.SpyInstance;
+
+describe('RingingPhoneAnimationComponent', () => {
+  let component: RingingPhoneAnimationComponent;
+  let fixture: ComponentFixture<RingingPhoneAnimationComponent>;
+
+  let playSpy: SpyInstance;
+  let pauseSpy: SpyInstance;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RingingPhoneAnimationComponent, CommonModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RingingPhoneAnimationComponent);
+    component = fixture.componentInstance;
+
+    playSpy = jest
+      .spyOn(HTMLAudioElement.prototype, 'play')
+      .mockImplementation(() => Promise.resolve());
+    pauseSpy = jest.spyOn(HTMLAudioElement.prototype, 'pause').mockImplementation(() => undefined);
+
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('when initializing the component', () => {
+    it('should initialize with default values', () => {
+      expect(component.isRinging).toBe(true);
+      expect(component.ringingSignal()).toBe(true);
+    });
+
+    it('should update "ringingSignal" when "isRinging" changes', () => {
+      const changes: SimpleChanges = {
+        isRinging: {
+          previousValue: false,
+          currentValue: true,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      };
+
+      component.isRinging = false;
+      component.ngOnChanges(changes);
+
+      expect(component.ringingSignal()).toBe(false);
+    });
+
+    it('should call "playSpy" if "isRinging" changes to true', () => {
+      const changes: SimpleChanges = {
+        isRinging: {
+          previousValue: true,
+          currentValue: false,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      };
+
+      component.isRinging = true;
+      component.ngOnChanges(changes);
+
+      expect(component.ringingSignal()).toBe(true);
+      expect(component.audio.loop).toBe(true);
+      expect(component.audio.volume).toBe(0.15);
+      expect(playSpy).toHaveBeenCalled();
+    });
+
+    it('should call "pauseSpy" if isRinging changes to false', () => {
+      const changes: SimpleChanges = {
+        isRinging: {
+          previousValue: false,
+          currentValue: true,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      };
+
+      component.isRinging = false;
+      component.ngOnChanges(changes);
+
+      expect(component.ringingSignal()).toBe(false);
+      expect(component.audio.currentTime).toBe(0);
+      expect(pauseSpy).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+import {
+  Component,
+  WritableSignal,
+  signal,
+  Input,
+  SimpleChanges,
+  OnChanges,
+  OnDestroy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ringingPhoneSound } from './ringing-phone-animation.sound';
+
+@Component({
+  selector: 'tgo-ringing-phone-animation',
+  templateUrl: './ringing-phone-animation.component.html',
+  styleUrls: ['./ringing-phone-animation.component.scss'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class RingingPhoneAnimationComponent implements OnChanges, OnDestroy {
+  @Input() isRinging = true;
+
+  ringingSignal: WritableSignal<boolean> = signal(this.isRinging);
+  audio: HTMLAudioElement = new Audio(ringingPhoneSound);
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['isRinging']) {
+      this.ringingSignal.set(this.isRinging);
+
+      if (this.isRinging) {
+        this.startRinging();
+      } else {
+        this.stopRinging();
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.stopRinging();
+  }
+
+  private stopRinging(): void {
+    this.ringingSignal.set(false);
+    this.audio.pause();
+    this.audio.currentTime = 0;
+  }
+
+  private startRinging(): void {
+    this.audio.loop = true;
+    this.audio.volume = 0.15;
+    void this.audio.play();
+  }
+}
+

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

@@ -0,0 +1,2 @@
+export const ringingPhoneSound = `data:audio/mp3;base64,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`;
+

package/src/lib/components/video-countdown/index.ts

@@ -0,0 +1 @@
+export * from './video-countdown.component';

package/src/lib/components/video-countdown/video-countdown.component.html

@@ -0,0 +1,10 @@
+<div class="video-countdown">
+  <div
+    class="video-countdown-element"
+    *ngFor="let num of [displayNum]"
+    @zoomInOut
+  >
+    {{ num.value }}
+  </div>
+</div>
+

package/src/lib/components/video-countdown/video-countdown.component.scss

@@ -0,0 +1,16 @@
+.video-countdown {
+  display: flex;
+  justify-content: center;
+
+  &-element {
+    position: absolute;
+    font-size: 80px;
+    font-weight: 700;
+    line-height: 1;
+    -webkit-user-select: none;
+    user-select: none;
+    opacity: 1;
+    backface-visibility: hidden;
+  }
+}
+

package/src/lib/components/video-countdown/video-countdown.component.spec.ts

@@ -0,0 +1,59 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { VideoCountdownComponent } from './video-countdown.component';
+
+describe('VideoCountdownComponent', () => {
+  let component: VideoCountdownComponent;
+  let fixture: ComponentFixture<VideoCountdownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VideoCountdownComponent, NoopAnimationsModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoCountdownComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should start counting on component init', () => {
+    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    component.ngOnInit();
+    expect(setTimeoutSpy).toHaveBeenCalled();
+  });
+
+  it('should set isActive to true on start', () => {
+    component.start();
+    expect(component.isActive).toBe(true);
+  });
+
+  it('should count down from startFrom to endAt', (done) => {
+    component.startFrom = 3;
+    component.endAt = 0;
+    component.interval = 100;
+    const finishSpy = jest.spyOn(component.finish, 'emit');
+
+    component.start();
+
+    setTimeout(() => {
+      expect(component.displayNum.value).toBe(0);
+      expect(finishSpy).toHaveBeenCalled();
+      expect(component.isActive).toBe(false);
+      done();
+    }, 1000);
+  });
+
+  it('should clean up on ngOnDestroy', () => {
+    const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+    component.ngOnDestroy();
+    expect(clearTimeoutSpy).toHaveBeenCalledWith(component.timeoutId);
+  });
+});
+

package/src/lib/components/video-countdown/video-countdown.component.ts

@@ -0,0 +1,102 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'tgo-video-countdown',
+  templateUrl: './video-countdown.component.html',
+  styleUrls: ['./video-countdown.component.scss'],
+  animations: [
+    trigger('zoomInOut', [
+      transition(':enter', [
+        style({ transform: 'scale(0)', opacity: 0 }),
+        animate('300ms ease-out', style({ transform: 'scale(1.2)', opacity: 1 })),
+        animate('100ms ease-in', style({ transform: 'scale(1)' })),
+      ]),
+      transition(':leave', [
+        style({ opacity: 1 }),
+        animate('100ms ease-out', style({ transform: 'scale(1.2)', opacity: 0.5 })),
+        animate('200ms ease-in', style({ transform: 'scale(0)', opacity: 0 })),
+      ]),
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class VideoCountdownComponent implements OnInit, OnDestroy {
+  @Input() startFrom = 5;
+  @Input() endAt = 0;
+  @Input() interval = 1325;
+  @Output() finish: EventEmitter<void> = new EventEmitter<void>();
+
+  isActive = false;
+  displayNum: { key: number; value: number } = {
+    key: this.startFrom,
+    value: this.startFrom,
+  };
+  timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.start();
+  }
+
+  start() {
+    this.isActive = true;
+    this.displayNum = { key: this.startFrom, value: this.startFrom };
+    this.scheduleAnimation();
+  }
+
+  ngOnDestroy(): void {
+    this.isActive = false;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+  }
+
+  private scheduleAnimation() {
+    this.timeoutId = setTimeout(() => {
+      this.anim();
+    }, this.interval);
+  }
+
+  private anim() {
+    if (!this.isActive) {
+      return;
+    }
+
+    this.updateNumber();
+    this.cdr.markForCheck();
+
+    if (this.displayNum && this.displayNum.value === this.endAt) {
+      this.finish.emit();
+      this.isActive = false;
+      return;
+    }
+
+    this.scheduleAnimation();
+  }
+
+  private updateNumber() {
+    if (this.displayNum && this.displayNum.value === this.endAt) {
+      this.displayNum = { key: this.startFrom, value: this.startFrom - 1 };
+    } else {
+      this.displayNum = {
+        key: this.displayNum.value - 1,
+        value: this.displayNum.value - 1,
+      };
+    }
+  }
+}
+

package/src/lib/models/index.ts

@@ -0,0 +1,9 @@
+// Re-export shared models
+export {
+  Question,
+  TestResultRead,
+  SelectedMediaDevices,
+  ISubmissionState,
+  IQuestionDataContract,
+} from '@testgorilla/tgo-test-shared';
+export * from './translations';

package/src/lib/models/translations.ts

@@ -0,0 +1,3 @@
+// Re-export from shared
+export { ROOT_TRANSLATIONS_SCOPE } from '@testgorilla/tgo-test-shared';
+

package/src/lib/services/index.ts

@@ -0,0 +1,7 @@
+// Re-export shared services
+export {
+  MediaService,
+  ThemeService,
+  TranslocoLazyModuleUtils,
+  getAvailableLangs,
+} from '@testgorilla/tgo-test-shared';

package/src/test-setup.ts

@@ -0,0 +1,22 @@
+import 'jest-preset-angular/setup-jest';
+
+// Mock HTMLMediaElement.play() for jsdom
+Object.defineProperty(HTMLMediaElement.prototype, 'play', {
+  writable: true,
+  value: jest.fn().mockResolvedValue(undefined),
+});
+
+// Mock @vimeo/player
+jest.mock('@vimeo/player', () => {
+  return {
+    default: jest.fn().mockImplementation(() => ({
+      on: jest.fn(),
+      off: jest.fn(),
+      loadVideo: jest.fn(),
+      play: jest.fn(),
+      pause: jest.fn(),
+      destroy: jest.fn(),
+    })),
+  };
+});
+

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2022"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
+

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [
+      "node",
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}
+

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
+

package/tsconfig.spec.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
+  "exclude": ["src/lib/models/test.ts"]
+}
+