@testgorilla/tgo-immersive-test 1.0.0 → 2.0.0

package/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "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"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    },
+    {
+      "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/jest.config.ts

@@ -0,0 +1,34 @@
+// Detect CI environment
+const isCI = process.env.CI === 'true' || process.env.CIRCLECI === 'true';
+
+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/'],
+  // Run tests sequentially in CI to prevent OOM with media-related tests
+  ...(isCI && { maxWorkers: 1 }),
+  moduleNameMapper: {
+    '^@testgorilla/tgo-ui$': '<rootDir>/../shared/src/test-mocks/tgo-ui.mock.ts',
+    '^@testgorilla/tgo-test-shared$': '<rootDir>/src/shared/index.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

@@ -1,35 +1,20 @@
 {
   "name": "@testgorilla/tgo-immersive-test",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/animations": "~18.2.13",
-    "@angular/material": "~18.2.14",
+    "@angular/common": "~19.2.17",
+    "@angular/core": "~19.2.17",
+    "@angular/animations": "~19.2.17",
+    "@angular/material": "~19.2.19",
     "@ngneat/transloco": "~4.3.0",
-    "@testgorilla/tgo-ui": "~3.14.10",
-    "jest-preset-angular": "~14.2.4",
-    "ngx-quill": "^26.0.10",
+    "@testgorilla/tgo-ui": "~4.0.0",
+    "jest-preset-angular": "14.4.2",
+    "ngx-quill": "^27.1.2",
     "rxjs": "~7.8.1"
   },
-  "typings": "index.d.ts",
+  "typings": "src/lib/types",
   "sideEffects": false,
   "license": "PROPRIETARY",
   "displayName": "Immersive Test",
-  "description": "Immersive Test component",
-  "module": "fesm2022/testgorilla-tgo-immersive-test.mjs",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-immersive-test.mjs",
-      "esm": "./esm2022/testgorilla-tgo-immersive-test.mjs",
-      "default": "./fesm2022/testgorilla-tgo-immersive-test.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "description": "Immersive Test component"
 }

package/project.json

@@ -0,0 +1,48 @@
+{
+  "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:run-commands",
+      "outputs": ["{workspaceRoot}/dist/packages/tgo-immersive-test"],
+      "options": {
+        "commands": [
+          "nx run tgo-immersive-test:package",
+          "node scripts/replace-shared-alias.js dist/packages/tgo-immersive-test @testgorilla/tgo-test-shared"
+        ],
+        "parallel": false,
+        "forwardAllArgs": false
+      }
+    },
+    "package": {
+      "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/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 (finished)="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;
+  }
+}
+