Saving scene with thumbnail. (#315)

app/api.tsx

@@ -29,5 +29,6 @@ export const uploadMedia = `${apiHost}/v1/media_files/upload`;
 
 // Scenes
 export const uploadNewScene = `${apiHost}/v1/media_files/upload/new_scene`;
+export const uploadThumbnail = `${apiHost}/v1/media_files/cover_image/`;
 export const updateExistingScene = (sceneToken:string)=>`${apiHost}/v1/media_files/upload/saved_scene/${sceneToken}`
 export const renameScene = (sceneToken:string)=>`${apiHost}/v1/media_files/rename/${sceneToken}`

app/pages/PageEnigma/js/api_fetchers.ts

@@ -7,7 +7,7 @@ import {
 export const uploadNewScene = async (
   file:File,
   sceneTitle: string,
-  sessionToken: string,
+  sessionToken: string
 ) => {
   const endpoint = uploadNewSceneEndpoint;
   const formData = new FormData();

app/pages/PageEnigma/js/api_manager.ts

@@ -2,11 +2,12 @@ import { v4 as uuidv4 } from "uuid";
 import * as THREE from "three";
 import { GLTFExporter } from "three/addons/exporters/GLTFExporter.js";
 import { STORAGE_KEYS } from "~/contexts/Authentication/types";
-import { environmentVariables } from "~/store";
+import { environmentVariables, scene } from "~/store";
 import {
   updateExistingScene,
   uploadNewScene
 } from "./api_fetchers";
+import { uploadThumbnail } from "~/api";
 
 /**
  * Storyteller Studio API Manager
@@ -93,11 +94,12 @@ export class APIManager {
    * @returns APIManagerResponseMessage
    */
   public async saveSceneState({
-    saveJson, sceneTitle, sceneToken
+    saveJson, sceneTitle, sceneToken, sceneThumbnail
   }:{
     saveJson: string,
     sceneTitle: string,
     sceneToken?: string,
+    sceneThumbnail: Blob | undefined
   }): Promise<string> {
     const file = new File([saveJson], `${sceneTitle}.glb`, {
       type: "application/json",
@@ -107,6 +109,22 @@ export class APIManager {
       ? await updateExistingScene(file, sceneToken, this.sessionToken)
       : await uploadNewScene(file, sceneTitle, this.sessionToken);
 
+    if (sceneThumbnail) {
+      let image_resp = await this.uploadMedia(sceneThumbnail, "render.png");
+      if (image_resp["media_file_token"]){
+        let image_token = image_resp["media_file_token"];
+        await fetch(uploadThumbnail+uploadSceneResponse["media_file_token"], {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            "Content-Type": "application/json",
+            session: this.sessionToken,
+          },
+          body: JSON.stringify({"cover_image_media_file_token": image_token}),
+        })
+      }
+    }
+
     console.log(uploadSceneResponse)
     return uploadSceneResponse["media_file_token"];
   }
@@ -189,7 +207,7 @@ export class APIManager {
   public async uploadMedia(
     blob: any,
     fileName: string,
-  ): Promise<APIManagerResponseSuccess> {
+  ) { // Promise<APIManagerResponseSuccess>
     const url = `${this.baseUrl}/v1/media_files/upload`;
     const uuid = uuidv4();
 

app/pages/PageEnigma/js/editor.ts

@@ -650,10 +650,19 @@ class Editor {
     };
 
     // TODO turn scene information into and object ...
+    let sceneThumbnail = undefined;
+
+    if (this.renderer) {
+      const imgData = this.renderer.domElement.toDataURL();
+      const response = await fetch(imgData); // Fetch the data URL
+      sceneThumbnail = await response.blob(); // Convert to Blob
+    }
+
     const result = await this.api_manager.saveSceneState({
       saveJson: JSON.stringify(save_data),
       sceneTitle,
       sceneToken,
+      sceneThumbnail
     });
 
     this.dispatchAppUiState({
@@ -1358,7 +1367,7 @@ class Editor {
             : ClipGroup.OBJECT, // TODO: add meta data to determine what it is a camera or a object or a character into prefab clips
         object_uuid: this.selected.uuid,
         object_name: this.selected.name,
-        version: this.version,
+        version: String(this.version),
         objectVectors: {
           position: {
             x: parseFloat(pos.x.toFixed(2)),