feat(coscrad-frontend): update video index and detail presentation (#458

) * WIP: update video detail and create e2e test for query flow * WIP: test transcript presentation * WIP: create transcript presenter * WIP: refactors based off PR suggestions * WIP: add unique keys to media player * update stale snaphshots * Update media player source keys and update video test data * WIP Test video index filtering * update video index Cypress test * update video detail Cypress test * remove stale comment --------- Co-authored-by: Aaron Plahn <[email protected]>
COSCRAD · Sep 13, 2023 · ac52327 · ac52327
1 parent 31e684e
commit ac52327
Show file tree

Hide file tree

Showing 24 changed files with 1,148 additions and 71 deletions.
diff --git a/apps/api/src/app/controllers/__tests__/__snapshots__/fetchManyViewModels.e2e.spec.ts.snap b/apps/api/src/app/controllers/__tests__/__snapshots__/fetchManyViewModels.e2e.spec.ts.snap
@@ -2952,8 +2952,44 @@ exports[`When fetching multiple resources GET /resources/videos when all of the
         ],
       },
       "tags": [],
-      "text": "[12000] [DM] This is how. {en} (role: original) [15550]
-[18300] [DM] It is done {en} (role: original) [19240]",
+      "transcript": {
+        "items": [
+          {
+            "inPointMilliseconds": 12000,
+            "outPointMilliseconds": 15550,
+            "speakerInitials": "DM",
+            "text": {
+              "items": [
+                {
+                  "languageCode": "en",
+                  "role": "original",
+                  "text": "This is how.",
+                },
+              ],
+            },
+          },
+          {
+            "inPointMilliseconds": 18300,
+            "outPointMilliseconds": 19240,
+            "speakerInitials": "DM",
+            "text": {
+              "items": [
+                {
+                  "languageCode": "en",
+                  "role": "original",
+                  "text": "It is done",
+                },
+              ],
+            },
+          },
+        ],
+        "participants": [
+          {
+            "initials": "DM",
+            "name": "Dee Monstrator",
+          },
+        ],
+      },
       "videoUrl": "https://coscrad.org/wp-content/uploads/2023/05/Rexy-and-The-Egg-_3D-Dinosaur-Animation_-_-3D-Animation-_-Maya-3D.mp4",
     },
   ],
@@ -2979,8 +3015,44 @@ exports[`When fetching multiple resources GET /resources/videos when some of the
         ],
       },
       "tags": [],
-      "text": "[12000] [DM] This is how. {en} (role: original) [15550]
-[18300] [DM] It is done {en} (role: original) [19240]",
+      "transcript": {
+        "items": [
+          {
+            "inPointMilliseconds": 12000,
+            "outPointMilliseconds": 15550,
+            "speakerInitials": "DM",
+            "text": {
+              "items": [
+                {
+                  "languageCode": "en",
+                  "role": "original",
+                  "text": "This is how.",
+                },
+              ],
+            },
+          },
+          {
+            "inPointMilliseconds": 18300,
+            "outPointMilliseconds": 19240,
+            "speakerInitials": "DM",
+            "text": {
+              "items": [
+                {
+                  "languageCode": "en",
+                  "role": "original",
+                  "text": "It is done",
+                },
+              ],
+            },
+          },
+        ],
+        "participants": [
+          {
+            "initials": "DM",
+            "name": "Dee Monstrator",
+          },
+        ],
+      },
       "videoUrl": "https://coscrad.org/wp-content/uploads/2023/05/Rexy-and-The-Egg-_3D-Dinosaur-Animation_-_-3D-Animation-_-Maya-3D.mp4",
     },
   ],

diff --git a/apps/api/src/app/controllers/__tests__/__snapshots__/fetchViewModelById.e2e.spec.ts.snap b/apps/api/src/app/controllers/__tests__/__snapshots__/fetchViewModelById.e2e.spec.ts.snap
@@ -518,8 +518,44 @@ exports[`GET  (fetch view models) When querying for a single View Model by ID GE
     ],
   },
   "tags": [],
-  "text": "[12000] [DM] This is how. {en} (role: original) [15550]
-[18300] [DM] It is done {en} (role: original) [19240]",
+  "transcript": {
+    "items": [
+      {
+        "inPointMilliseconds": 12000,
+        "outPointMilliseconds": 15550,
+        "speakerInitials": "DM",
+        "text": {
+          "items": [
+            {
+              "languageCode": "en",
+              "role": "original",
+              "text": "This is how.",
+            },
+          ],
+        },
+      },
+      {
+        "inPointMilliseconds": 18300,
+        "outPointMilliseconds": 19240,
+        "speakerInitials": "DM",
+        "text": {
+          "items": [
+            {
+              "languageCode": "en",
+              "role": "original",
+              "text": "It is done",
+            },
+          ],
+        },
+      },
+    ],
+    "participants": [
+      {
+        "initials": "DM",
+        "name": "Dee Monstrator",
+      },
+    ],
+  },
   "videoUrl": "https://coscrad.org/wp-content/uploads/2023/05/Rexy-and-The-Egg-_3D-Dinosaur-Animation_-_-3D-Animation-_-Maya-3D.mp4",
 }
 `;

diff --git a/apps/api/src/app/controllers/__tests__/__snapshots__/resourceDescriptions.e2e.spec.ts.snap b/apps/api/src/app/controllers/__tests__/__snapshots__/resourceDescriptions.e2e.spec.ts.snap
@@ -711,12 +711,162 @@ exports[`GET /resources should return the expected result 1`] = `
           },
         },
       },
-      "text": {
-        "coscradDataType": "NON_EMPTY_STRING",
-        "description": "a plain-text representation of the transcript",
+      "transcript": {
+        "complexDataType": "NESTED_TYPE",
+        "description": "transcript for this video",
         "isArray": false,
         "isOptional": false,
-        "label": "plain text",
+        "label": "transcript",
+        "schema": {
+          "items": {
+            "complexDataType": "NESTED_TYPE",
+            "description": "time stamps with text and speaker labels",
+            "isArray": true,
+            "isOptional": true,
+            "label": "items",
+            "schema": {
+              "inPointMilliseconds": {
+                "coscradDataType": "NON_NEGATIVE_FINITE_NUMBER",
+                "description": "starting time stamp (ms)",
+                "isArray": false,
+                "isOptional": false,
+                "label": "in point",
+              },
+              "outPointMilliseconds": {
+                "coscradDataType": "NON_NEGATIVE_FINITE_NUMBER",
+                "description": "ending time stamp (ms)",
+                "isArray": false,
+                "isOptional": false,
+                "label": "out point",
+              },
+              "speakerInitials": {
+                "coscradDataType": "NON_EMPTY_STRING",
+                "description": "the label for the current timestamped item",
+                "isArray": false,
+                "isOptional": false,
+                "label": "label",
+              },
+              "text": {
+                "complexDataType": "NESTED_TYPE",
+                "description": "multi-lingual text transcription \\ translation for this item",
+                "isArray": false,
+                "isOptional": false,
+                "label": "text",
+                "schema": {
+                  "items": {
+                    "complexDataType": "NESTED_TYPE",
+                    "description": "one item for each provided language",
+                    "isArray": true,
+                    "isOptional": false,
+                    "label": "items",
+                    "schema": {
+                      "languageCode": {
+                        "complexDataType": "ENUM",
+                        "description": "an official identifier of the language",
+                        "enumLabel": "Language_Code",
+                        "enumName": "LangaugeCode",
+                        "isArray": false,
+                        "isOptional": false,
+                        "label": "language code",
+                        "labelsAndValues": [
+                          {
+                            "label": "Chilcotin",
+                            "value": "clc",
+                          },
+                          {
+                            "label": "Haida",
+                            "value": "hai",
+                          },
+                          {
+                            "label": "English",
+                            "value": "en",
+                          },
+                          {
+                            "label": "French",
+                            "value": "fra",
+                          },
+                          {
+                            "label": "Chinook",
+                            "value": "chn",
+                          },
+                          {
+                            "label": "Zapotec",
+                            "value": "zap",
+                          },
+                          {
+                            "label": "Spanish",
+                            "value": "spa",
+                          },
+                        ],
+                      },
+                      "role": {
+                        "complexDataType": "ENUM",
+                        "description": "role of this text in the translation process",
+                        "enumLabel": "text item role",
+                        "enumName": "Multilingual Text Item Role",
+                        "isArray": false,
+                        "isOptional": false,
+                        "label": "text item role",
+                        "labelsAndValues": [
+                          {
+                            "label": "original",
+                            "value": "original",
+                          },
+                          {
+                            "label": "glossed to",
+                            "value": "glossed to",
+                          },
+                          {
+                            "label": "prompt",
+                            "value": "prompt",
+                          },
+                          {
+                            "label": "free translation",
+                            "value": "free translation",
+                          },
+                          {
+                            "label": "literal translation",
+                            "value": "literal translation",
+                          },
+                        ],
+                      },
+                      "text": {
+                        "coscradDataType": "NON_EMPTY_STRING",
+                        "description": "plain text in the given language",
+                        "isArray": false,
+                        "isOptional": false,
+                        "label": "text",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+          "participants": {
+            "complexDataType": "NESTED_TYPE",
+            "description": "a list of participants and their initials",
+            "isArray": true,
+            "isOptional": true,
+            "label": "participants",
+            "schema": {
+              "initials": {
+                "coscradDataType": "NON_EMPTY_STRING",
+                "description": "the initials or text identifier for this speaker",
+                "isArray": false,
+                "isOptional": false,
+                "label": "speaker initials",
+              },
+              "name": {
+                "coscradDataType": "NON_EMPTY_STRING",
+                "description": "the participant's name",
+                "isArray": false,
+                "isOptional": false,
+                "label": "name",
+              },
+            },
+          },
+        },
       },
       "videoUrl": {
         "coscradDataType": "URL",

diff --git a/apps/api/src/app/domain-modules/audio-visual.module.ts b/apps/api/src/app/domain-modules/audio-visual.module.ts
@@ -12,6 +12,10 @@ import {
     TranslateLineItem,
     TranslateLineItemCommandHandler,
 } from '../../domain/models/audio-item/commands';
+import {
+    ImportLineItemsToTranscript,
+    ImportLineItemsToTranscriptCommandHandler,
+} from '../../domain/models/audio-item/commands/transcripts/import-line-items-to-transcript';
 import {
     CreateVideo,
     CreateVideoCommandHandler,
@@ -47,6 +51,8 @@ import { VideoController } from '../controllers/resources/video.controller';
         AddParticipantToTranscriptCommandHandler,
         TranslateLineItem,
         TranslateLineItemCommandHandler,
+        ImportLineItemsToTranscript,
+        ImportLineItemsToTranscriptCommandHandler,
     ],
 })
 export class AudioVisualModule {}
diff --git a/apps/api/src/domain/common/entities/multilingual-text.ts b/apps/api/src/domain/common/entities/multilingual-text.ts
@@ -1,6 +1,6 @@
 import {
     IMultilingualText,
-    IMultlingualTextItem,
+    IMultilingualTextItem,
     LanguageCode,
     MultilingualTextItemRole,
 } from '@coscrad/api-interfaces';
@@ -43,7 +43,7 @@ export const LanguageCodeEnum = (options: TypeDecoratorOptions) =>
         options
     );
 
-export class MultilingualTextItem extends BaseDomainModel implements IMultlingualTextItem {
+export class MultilingualTextItem extends BaseDomainModel implements IMultilingualTextItem {
     @ExternalEnum(
         {
             labelsAndValues: Object.entries(LanguageCode).map(([label, value]) => ({