Add support for more video formats and switch to combo folders for co…

…mbos.json Change-Id: Id4127fb89af382a5dd7bd960d4afa9d782b2f9bd
google-marketing-solutions · May 7, 2024 · 0c0868f · 0c0868f
1 parent b6a67f3
commit 0c0868f
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,7 @@ Please make sure you have fulfilled all prerequisites mentioned under [Requireme
 1. Make sure your system has an up-to-date installation of the [gcloud CLI](https://cloud.google.com/sdk/docs/install).
 1. Make sure your system has an up-to-date installation of `git` and use it to clone this repository.
 1. Navigate to the directory where the source code lives.
+1. Install [clasp](https://github.com/google/clasp) by running `npm install @google/clasp -g`.
 1. Run `npm start`.
 
 You will be asked to enter a GCP Project ID, and whether you would like to deploy GCP components, the UI, or both. If you opt to deploy GCP components, you will be asked to enter an optional [Cloud Function region](https://cloud.google.com/functions/docs/locations) (defaults to `us-central1`) and an optional [GCS location](https://cloud.google.com/storage/docs/locations) (defaults to `us`).
@@ -179,6 +180,7 @@ Beyond the information outlined in our [Contributing Guide](CONTRIBUTING.md), yo
 ### Build and Serve the Angular UI
 
 1. Make sure your system has an up-to-date installation of [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
+1. Install [clasp](https://github.com/google/clasp) by running `npm install @google/clasp -g`.
 1. Navigate to the directory where the source code lives and run `cd ./ui`
 1. Run `npm install` to install dependencies.
 1. Run `npm run deploy` to build, test and deploy (via [clasp](https://github.com/google/clasp)) all UI and Apps Script code to the target spreadsheet / Apps Script project.

diff --git a/package-lock.json b/package-lock.json
diff --git a/service/combiner/combiner.py b/service/combiner/combiner.py
@@ -268,15 +268,6 @@ def render(self):
         bucket_name=self.gcs_bucket_name,
         target_dir=self.render_file.gcs_folder,
     )
-    StorageService.upload_gcs_file(
-        file_path=combos_json_path,
-        bucket_name=self.gcs_bucket_name,
-        destination_file_name=os.path.join(
-            self.render_file.gcs_root_folder,
-            ConfigService.OUTPUT_COMBINATIONS_FILE
-        ),
-        overwrite=True,
-    )
     logging.info('COMBINER - Rendering completed successfully!')
 
 

diff --git a/service/utils/utils.py b/service/utils/utils.py
@@ -32,7 +32,11 @@ class VideoExtension(enum.Enum):
 
   MP4 = 'mp4'
   MOV = 'mov'
+  WMV = 'wmv'
   WEBM = 'webm'
+  AVI = 'avi'
+  MKV = 'mkv'
+  M4V = 'm4v'
 
   @classmethod
   def has_value(cls, ext: str) -> bool:

diff --git a/ui/src/index.ts b/ui/src/index.ts
@@ -74,16 +74,22 @@ function generateVariants(gcsFolder: string, settings: GenerationSettings) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function renderVariants(gcsFolder: string, renderQueue: RenderQueueVariant[]) {
+function renderVariants(
+  gcsFolder: string,
+  renderQueue: RenderQueueVariant[]
+): string {
   const encodedRenderQueueJson = Utilities.base64Encode(
-    JSON.stringify(renderQueue)
+    JSON.stringify(renderQueue),
+    Utilities.Charset.UTF_8
   );
+  const folder = `${gcsFolder}/${Date.now()}-combos`;
   StorageManager.uploadFile(
     encodedRenderQueueJson,
-    `${gcsFolder}/${Date.now()}-combos`,
+    folder,
     'render.json',
     'application/json'
   );
+  return folder;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

diff --git a/ui/src/ui/src/app/api-calls/api-calls.mock.service.ts b/ui/src/ui/src/app/api-calls/api-calls.mock.service.ts
@@ -143,11 +143,11 @@ export class ApiCallsService implements ApiCalls {
   renderVariants(
     gcsFolder: string,
     renderQueue: RenderQueueVariant[]
-  ): Observable<void> {
+  ): Observable<string> {
     return new Observable(subscriber => {
       setTimeout(() => {
         this.ngZone.run(() => {
-          subscriber.next();
+          subscriber.next('12345-combos');
           subscriber.complete();
         });
       }, 1000);

diff --git a/ui/src/ui/src/app/api-calls/api-calls.service.interface.ts b/ui/src/ui/src/app/api-calls/api-calls.service.interface.ts
@@ -55,7 +55,7 @@ export interface RenderSettings {
 }
 
 export interface RenderQueueVariant {
-  variant_id: number;
+  original_variant_id: number;
   av_segments: AvSegment[];
   title: string;
   description: string;
@@ -102,5 +102,5 @@ export interface ApiCalls {
   renderVariants(
     gcsFolder: string,
     renderQueue: RenderQueueVariant[]
-  ): Observable<void>;
+  ): Observable<string>;
 }
diff --git a/ui/src/ui/src/app/api-calls/api-calls.service.ts b/ui/src/ui/src/app/api-calls/api-calls.service.ts
@@ -120,14 +120,17 @@ export class ApiCallsService implements ApiCalls {
     });
   }
 
-  renderVariants(gcsFolder: string, renderQueue: RenderQueueVariant[]) {
-    return new Observable<void>(subscriber => {
+  renderVariants(
+    gcsFolder: string,
+    renderQueue: RenderQueueVariant[]
+  ): Observable<string> {
+    return new Observable<string>(subscriber => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       google.script.run
-        .withSuccessHandler(() => {
+        .withSuccessHandler((response: string) => {
           this.ngZone.run(() => {
-            subscriber.next();
+            subscriber.next(response);
             subscriber.complete();
           });
         })

diff --git a/ui/src/ui/src/app/app.component.ts b/ui/src/ui/src/app/app.component.ts
@@ -172,7 +172,7 @@ export class AppComponent {
     this.selectedFile = file;
   }
 
-  failHandler() {
+  failHandler(folder: string) {
     this.loading = false;
     this.snackBar
       .open('An error occured.', 'Start over', {
@@ -183,9 +183,6 @@ export class AppComponent {
         this.videoUploadPanel.open();
         this.videoMagicPanel.close();
       });
-  }
-
-  cleanUpBrokenUpload(folder: string) {
     this.apiCallsService.deleteGcsFolder(folder);
     this.getPreviousRuns();
   }
@@ -315,10 +312,7 @@ export class AppComponent {
           this.segmentsStatus = 'check_circle';
           this.loading = false;
         },
-        error: () => {
-          this.failHandler();
-          this.cleanUpBrokenUpload(folder);
-        },
+        error: () => this.failHandler(folder),
       });
   }
 
@@ -335,7 +329,7 @@ export class AppComponent {
           this.videoMagicPanel.close();
           this.videoCombosPanel.open();
         },
-        error: () => this.failHandler(),
+        error: () => this.failHandler(folder),
       });
   }
 
@@ -350,10 +344,7 @@ export class AppComponent {
           this.parseAnalysis();
           this.getAvSegments(folder);
         },
-        error: () => {
-          this.failHandler();
-          this.cleanUpBrokenUpload(folder);
-        },
+        error: () => this.failHandler(folder),
       });
   }
 
@@ -367,10 +358,7 @@ export class AppComponent {
           this.transcriptStatus = 'check_circle';
           this.getMagicAnalysis(folder);
         },
-        error: () => {
-          this.failHandler();
-          this.cleanUpBrokenUpload(folder);
-        },
+        error: () => this.failHandler(folder),
       });
   }
 
@@ -403,6 +391,7 @@ export class AppComponent {
     this.previewTrackElem.nativeElement.src = '';
     this.renderQueue = [];
     this.renderQueueJsonArray = [];
+    this.segmentModeToggle.value = 'preview';
   }
 
   processVideo(folder: string) {
@@ -549,7 +538,7 @@ export class AppComponent {
       )
     );
     const renderQueueVariant: RenderQueueVariant = {
-      variant_id: this.selectedVariant,
+      original_variant_id: this.selectedVariant,
       av_segments: selectedSegments,
       title: variant.title,
       description: variant.description,
@@ -588,7 +577,7 @@ export class AppComponent {
 
   loadVariant(index: number) {
     const variant = this.renderQueue[index];
-    this.selectedVariant = variant.variant_id;
+    this.selectedVariant = variant.original_variant_id;
     this.setSelectedSegments(
       variant.av_segments.map((segment: AvSegment) => segment.av_segment_id)
     );
@@ -616,12 +605,12 @@ export class AppComponent {
     this.rendering = true;
     this.apiCallsService
       .renderVariants(this.folder, this.renderQueue)
-      .subscribe(() => {
+      .subscribe(combosFolder => {
         this.loading = false;
         this.renderQueue = [];
         this.renderQueueJsonArray = [];
         this.closeRenderQueueSidenav();
-        this.getMagicCombos(this.folder);
+        this.getMagicCombos(combosFolder);
       });
   }
 

diff --git a/ui/src/ui/src/app/file-chooser/file-chooser.component.html b/ui/src/ui/src/app/file-chooser/file-chooser.component.html
@@ -29,7 +29,7 @@
     (change)="onFileChange($event)"
     #fileInputElem
     type="file"
-    accept="video/mp4"
+    accept="video/mp4,video/*"
   />
 </div>
 <div class="row">