@testgorilla/tgo-immersive-test 0.0.1

package/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "tgo",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "tgo",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"],
+            "ignoredDependencies": ["@vimeo/player"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,89 @@
+# @testgorilla/tgo-immersive-test
+
+Immersive Test component for TestGorilla assessments.
+
+## Installation
+
+```bash
+npm install @testgorilla/tgo-immersive-test
+```
+
+## Usage
+
+```typescript
+import { ImmersiveTestComponent } from '@testgorilla/tgo-immersive-test';
+
+@Component({
+  imports: [ImmersiveTestComponent],
+  template: `
+    <tgo-immersive-test
+      [question]="question"
+      [test]="test"
+      [isFirstQuestion]="false"
+      [expirationObservable]="expirationObservable"
+      [selectedMediaDevices]="selectedMediaDevices"
+      [mediaAccessChanged]="mediaAccessChanged"
+      (submissionStateChanged)="onSubmissionStateChanged($event)"
+      (loadingStateChanged)="onLoadingStateChanged($event)"
+      (requestMediaAccess)="onRequestMediaAccess()"
+    ></tgo-immersive-test>
+  `,
+})
+export class MyComponent {}
+```
+
+## API
+
+### Inputs
+
+| Name                 | Type                               | Required | Default | Description                                      |
+| -------------------- | ---------------------------------- | -------- | ------- | ------------------------------------------------ |
+| question             | Question                           | Yes      | -       | Question data containing text/media content      |
+| test                 | TestResultRead                     | Yes      | -       | Test configuration and metadata                  |
+| isFirstQuestion      | boolean                            | No       | false   | Whether this is the first question in the test   |
+| expirationObservable | Observable\<void\>                 | No       | -       | Observable to trigger test expiration externally |
+| selectedMediaDevices | SelectedMediaDevices               | No       | -       | Selected audio/video device IDs                  |
+| mediaAccessChanged   | Observable\<SelectedMediaDevices\> | No       | -       | Observable for media device changes              |
+
+### Outputs
+
+| Name                   | Type                                     | Description                                     |
+| ---------------------- | ---------------------------------------- | ----------------------------------------------- |
+| submissionStateChanged | EventEmitter\<ISubmissionState \| null\> | Emits submission state when answer is submitted |
+| loadingStateChanged    | EventEmitter\<boolean\>                  | Emits loading state changes                     |
+| requestMediaAccess     | EventEmitter\<void\>                     | Emits when media access permission is needed    |
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `@angular/common` ~18.2.13
+- `@angular/core` ~18.2.13
+- `@angular/animations` ~18.2.13
+- `@angular/material` ~18.2.14 (for dialog support)
+- `@ngneat/transloco` ~4.3.0
+- `@testgorilla/tgo-ui` ~3.14.10
+- `@vimeo/player` ^2.25.1
+- `ngx-quill` ^26.0.10 (for rich text display in review instructions)
+- `rxjs` ~7.8.1
+
+## Internal Dependencies
+
+All required services, models, and components are included within this library:
+
+- `MediaService` - Handles audio/video recording and playback
+- `ThemeService` - Provides theme/company color configuration
+- `Question`, `TestResultRead`, `SelectedMediaDevices`, `ISubmissionState` - Type definitions
+- `AudioAnimationComponent`, `RingingPhoneAnimationComponent`, `VideoCountdownComponent`, `VimeoVideoComponent` - UI components
+- `ReviewInstructionsDialogComponent` - Dialog component for review instructions
+- `TranslocoLazyModuleUtils`, `getAvailableLangs` - Translation utilities
+
+## Features
+
+- Audio and video question playback
+- Candidate video recording
+- Audio answer recording
+- Media device selection
+- Translation support via Transloco
+- Review instructions dialog
+- Preview mode support

package/jest.config.ts

@@ -0,0 +1,28 @@
+export default {
+  displayName: 'tgo-immersive-test',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/tgo-immersive-test',
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.spec.[jt]s?(x)'],
+  testPathIgnorePatterns: ['/node_modules/', '/src/lib/models/'],
+  moduleNameMapper: {
+    '^@testgorilla/tgo-ui$': '<rootDir>/../tgo-test-shared/src/test-mocks/tgo-ui.mock.ts',
+  },
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|lodash-es|@testgorilla|ng2-charts|chart\\.js|chartjs-plugin-datalabels)',
+  ],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/tgo-immersive-test",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/assets",
+      "output": "./assets"
+    }
+  ],
+  "lib": {
+    "entryFile": "./src/index.ts"
+  },
+  "allowedNonPeerDependencies": []
+}
+

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@testgorilla/tgo-immersive-test",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "~18.2.13",
+    "@angular/core": "~18.2.13",
+    "@angular/animations": "~18.2.13",
+    "@angular/material": "~18.2.14",
+    "@ngneat/transloco": "~4.3.0",
+    "@testgorilla/tgo-ui": "~3.14.10",
+    "@testgorilla/tgo-test-shared": "~0.0.1",
+    "jest-preset-angular": "~14.2.4",
+    "ngx-quill": "^26.0.10",
+    "rxjs": "~7.8.1"
+  },
+  "typings": "src/lib/types",
+  "sideEffects": false,
+  "license": "PROPRIETARY",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "displayName": "Immersive Test",
+  "description": "Immersive Test component"
+}

package/project.json

@@ -0,0 +1,37 @@
+{
+  "name": "tgo-immersive-test",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tgo-immersive-test/src",
+  "prefix": "tgo",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/tgo-immersive-test/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/tgo-immersive-test/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/tgo-immersive-test/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/tgo-immersive-test/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}
+

package/src/assets/i18n/en.json

@@ -0,0 +1,18 @@
+{
+  "TEST": {
+    "YOU": "You",
+    "RECORDING_STARTED": "Recording started",
+    "ANSWER_THE_QUESTION": "Answer the customer's question, then submit.",
+    "ANSWER_COMPLETED": "Submit answer",
+    "ANSWER": "Answer",
+    "CUSTOMER": "Customer",
+    "AUDIO_READY": "Your audio file is ready.",
+    "AUDIO_PREVIEW": "Audio is only available during practice questions.",
+    "REVIEW_INSTRUCTIONS": "Review Instructions",
+    "GET_READY": "Get ready to answer the customer's question."
+  },
+  "INSTRUCTIONS_MODAL": {
+    "TITLE": "Review Instructions",
+    "CLOSE": "Close"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/components';
+export * from './lib/components/immersive-test/immersive-test.component';
+export * from './lib/models';
+export * from './lib/services';

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

@@ -0,0 +1,100 @@
+<div class="immersive-test">
+  <div class="test-container">
+    <div
+      class="media-container"
+      [class.is-video-visible]="isQuestionPlaying() && !isAnswering()"
+      [class.is-playing]="isVideoPlaying()"
+      [class.is-answering]="isAnswering()"
+    >
+      <div class="candidate-no-camera" *ngIf="!candidateVideoStreamReady()">
+        <h3>&nbsp;</h3>
+        <tgo-audio-animation
+          *ngIf="isAnswering()"
+          [volume]="volume()"
+          [fakeData]="false"
+        ></tgo-audio-animation>
+        <ui-icon name="User-profile-in-line" color="white" size="24"></ui-icon>
+        <h3 class="bold">{{ translations['YOU'] }}</h3>
+      </div>
+      <div class="candidate-camera" [hidden]="!candidateVideoStreamReady()">
+        <tgo-audio-animation
+          *ngIf="isAnswering() && candidateVideoStreamReady()"
+          [volume]="volume()"
+          [fakeData]="false"
+        ></tgo-audio-animation>
+        <video height #video id="video" playsinline (loadedmetadata)="onVideoLoad()"></video>
+        <h3 class="bold" *ngIf="candidateVideoStreamReady()">
+          {{ translations['YOU'] }}
+        </h3>
+      </div>
+      <tgo-audio-animation *ngIf="isVideoPlaying()" [fakeData]="true"></tgo-audio-animation>
+      <tgo-vimeo-video
+        *ngIf="isVideo"
+        [isPlaying]="isQuestionPlaying()"
+        [videoUrl]="fileUrl"
+        (videoEnded)="startCountdown()"
+        (videoStarted)="isVideoPlaying.set(true)"
+      ></tgo-vimeo-video>
+      <div class="audio-info" *ngIf="isQuestionPlaying() && !isVideo">
+        <ui-icon name="User-profile-filled" color="white" size="80"></ui-icon>
+      </div>
+      <div class="start" *ngIf="isFirstQuestion && !isQuestionPlaying()">
+        <tgo-ringing-phone-animation [isRinging]="true"></tgo-ringing-phone-animation>
+        <ui-button
+          [label]="translations['ANSWER']"
+          [class.white-btn]="test.is_preview_mode"
+          variant="primary"
+          [companyColor]="companyColor"
+          (click)="startQuestion()"
+          data-testid="immersive-test.start-question-btn"
+        ></ui-button>
+      </div>
+      <div class="overlay" *ngIf="isAnswering() || isCountingDown()" [@fadeInFadeOut]>
+        <div class="answer" *ngIf="!audioUrl() && isAnswering()">
+          <div>
+            <h3 class="uppercase recording-started">
+              <span class="recording-dot"></span>{{ translations['RECORDING_STARTED'] }}
+            </h3>
+            <h1 class="bold">
+              {{ translations['ANSWER_THE_QUESTION'] }}
+            </h1>
+          </div>
+          <ui-button
+            [label]="translations['ANSWER_COMPLETED']"
+            [class.white-btn]="test.is_preview_mode"
+            variant="primary"
+            [companyColor]="companyColor"
+            (click)="stopRecording()"
+            data-testid="immersive-test.stop-recording-btn"
+          ></ui-button>
+        </div>
+        <div class="answer" *ngIf="isCountingDown()">
+          <div>
+            <h1 class="bold">
+              {{ translations['GET_READY'] }}
+            </h1>
+          </div>
+          <tgo-video-countdown (finish)="startRecordAnswer()"></tgo-video-countdown>
+          <div>&nbsp;</div>
+        </div>
+        <div class="preview" [class.hidden]="!audioUrl()" *ngIf="test.is_preview_mode">
+          <h4>{{ translations['AUDIO_READY'] }}</h4>
+          <p>{{ translations['AUDIO_PREVIEW'] }}</p>
+          <audio #audio controls></audio>
+        </div>
+      </div>
+    </div>
+    <div class="media-info">
+      <h3 class="bold">{{ translations['CUSTOMER'] }}</h3>
+      <ui-button
+        [hidden]="!test.test_instruction && !test.intro_text"
+        class="review-button"
+        [label]="translations['REVIEW_INSTRUCTIONS']"
+        variant="secondary"
+        size="small"
+        (click)="openReviewInstructionsDialog()"
+        data-testid="immersive-test.review-instructions-btn"
+      ></ui-button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,247 @@
+@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
+
+$border-radius: 10px;
+
+.immersive-test {
+  padding: 0 64px;
+  margin-top: 40px;
+
+  .media-info {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(36, 36, 36, 0.66);
+    background-color: $black;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    padding: 13px 32px;
+    color: $tgo-white;
+
+    ::ng-deep ui-button button {
+      border-color: $tgo-white;
+      color: $tgo-white;
+    }
+  }
+
+  .test-container {
+    min-width: 360px;
+    max-width: 1312px;
+    min-height: 725px;
+    height: min(
+      725px,
+      100%,
+      max(calc(100vw - 200px), calc(100vh - 200px), 200px)
+    );
+    border-radius: $border-radius;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    background-color: $black;
+  }
+
+  .media-container {
+    position: relative;
+    color: $tgo-white;
+    flex-grow: 1;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    aspect-ratio: 16 / 9;
+
+    .candidate-no-camera {
+      position: absolute;
+      width: 200px;
+      aspect-ratio: 16 / 9;
+      z-index: 3;
+      top: 32px;
+      left: 32px;
+      border-radius: $border-radius;
+      background-color: #1a47aa;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      padding: 16px;
+
+      ui-icon {
+        margin: auto;
+      }
+    }
+
+    .candidate-camera {
+      position: absolute;
+      width: 200px;
+      top: 32px;
+      left: 32px;
+      z-index: 3;
+
+      video {
+        width: 200px;
+        border-radius: $border-radius;
+      }
+
+      h3 {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+      }
+    }
+
+    tgo-audio-animation {
+      position: absolute;
+      top: 32px;
+      right: 32px;
+      z-index: 1;
+    }
+
+    tgo-vimeo-video {
+      display: none;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+
+    &.is-video-visible {
+      tgo-vimeo-video {
+        display: block;
+      }
+    }
+
+    &.is-playing {
+      border: 4px solid $informative-40;
+      border-bottom-width: 3px;
+    }
+
+    &.is-answering {
+      .candidate-camera,
+      .candidate-no-camera {
+        tgo-audio-animation {
+          position: absolute;
+          top: 16px;
+          right: 16px;
+        }
+      }
+
+      .candidate-camera video,
+      .candidate-no-camera {
+        border: 3px solid $informative-40;
+        border-radius: $border-radius;
+      }
+
+      tgo-vimeo-video {
+        display: block;
+      }
+    }
+
+    .start,
+    .audio-info,
+    .overlay,
+    .answer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      gap: 40px;
+      height: 100%;
+    }
+
+    .preview {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 24px;
+
+      p {
+        color: $grayscale-30;
+        margin: 8px 0;
+      }
+
+      audio {
+        margin: 16px 0;
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+
+  h3,
+  h4 {
+    color: $tgo-white;
+  }
+
+  .bold {
+    font-weight: 700;
+  }
+
+  ui-button.review-button ::ng-deep button {
+    border: 1px solid $tgo-white;
+  }
+
+  ui-button.white-btn ::ng-deep button {
+    background-color: $tgo-white;
+    border-color: $tgo-white;
+    color: $tgo-black;
+
+    &:hover {
+      background-color: $grayscale-50 !important;
+    }
+  }
+
+  .overlay {
+    top: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(36 36 36 / 88%);
+    z-index: 2;
+    border-radius: $border-radius;
+
+    h1,
+    h3 {
+      color: $tgo-white;
+      text-align: center;
+    }
+
+    h3 {
+      margin-bottom: 10px;
+    }
+  }
+
+  tgo-radial-progress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .uppercase {
+    text-transform: uppercase;
+  }
+
+  .recording-started {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .recording-dot {
+    background-color: $error-40;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .immersive-test {
+    padding: 0 24px;
+    margin-top: 16px;
+  }
+}
+