Add support for creating scenes directly from GLBs

src/api/Api.js

@@ -228,6 +228,25 @@ export default class Project extends EventEmitter {
     return json;
   }
 
+  async getProjectlessScenes() {
+    const token = this.getToken();
+
+    const headers = {
+      "content-type": "application/json",
+      authorization: `Bearer ${token}`
+    };
+
+    const response = await this.fetch(`https://${RETICULUM_SERVER}/api/v1/scenes/projectless`, { headers });
+
+    const json = await response.json();
+
+    if (!Array.isArray(json.scenes)) {
+      throw new Error(`Error fetching scenes: ${json.error || "Unknown error."}`);
+    }
+
+    return json.scenes;
+  }
+
   async resolveUrl(url, index) {
     if (!shouldCorsProxy(url)) {
       return { origin: url };
@@ -955,6 +974,51 @@ export default class Project extends EventEmitter {
     return project;
   }
 
+  async publishGLBScene(screenshotFile, glbFile, params, signal, sceneId) {
+    let screenshotId, screenshotToken;
+    if (screenshotFile) {
+      const {
+        file_id,
+        meta: { access_token }
+      } = await this.upload(screenshotFile, null, signal);
+      screenshotId = file_id;
+      screenshotToken = access_token;
+    }
+
+    let glbId, glbToken;
+    if (glbFile) {
+      const {
+        file_id,
+        meta: { access_token }
+      } = await this.upload(glbFile, null, signal);
+      glbId = file_id;
+      glbToken = access_token;
+    }
+
+    const headers = {
+      "content-type": "application/json",
+      authorization: `Bearer ${this.getToken()}`
+    };
+
+    const sceneParams = {
+      screenshot_file_id: screenshotId,
+      screenshot_file_token: screenshotToken,
+      model_file_id: glbId,
+      model_file_token: glbToken,
+      ...params
+    };
+
+    const body = JSON.stringify({ scene: sceneParams });
+
+    const resp = await this.fetch(`https://${RETICULUM_SERVER}/api/v1/scenes${sceneId ? "/" + sceneId : ""}`, {
+      method: sceneId ? "PUT" : "POST",
+      headers,
+      body
+    });
+
+    return resp.json();
+  }
+
   async upload(blob, onUploadProgress, signal) {
     // Use direct upload API, see: https://github.com/mozilla/reticulum/pull/319
     const { phx_host: uploadHost } = await (await this.fetch(`https://${RETICULUM_SERVER}/api/v1/meta`)).json();

src/ui/App.js

@@ -20,6 +20,7 @@ import LoginPage from "./auth/LoginPage";
 import LogoutPage from "./auth/LogoutPage";
 import ProjectsPage from "./projects/ProjectsPage";
 import CreateProjectPage from "./projects/CreateProjectPage";
+import CreateScenePage from "./projects/CreateScenePage";
 
 import { ThemeProvider } from "styled-components";
 
@@ -82,6 +83,7 @@ export default class App extends Component {
                   <Route path="/projects" exact component={ProjectsPage} />
                   <Route path="/projects/:projectId" component={EditorContainer} />
                   <Route path="/kits/package" component={PackageKitPage} />
+                  <Route path="/scenes/:sceneId" component={CreateScenePage} />
                   <Route render={() => <Error message="Page not found." />} />
                 </Switch>
               </Column>

src/ui/inputs/FileInput.js

@@ -1,18 +1,33 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
+import styled from "styled-components";
+
 import { Button } from "./Button";
-import Hidden from "../layout/Hidden";
 
 let nextId = 0;
 
+export const FileInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+// We do this instead of actually hiding it so that form validation can still display tooltips correctly
+export const StyledInput = styled.input`
+  opacity: 0;
+  position: absolute;
+`;
+
 export default class FileInput extends Component {
   static propTypes = {
     label: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    showSelectedFile: PropTypes.bool
   };
 
   static defaultProps = {
-    label: "Upload..."
+    label: "Upload...",
+    showSelectedFile: false
   };
 
   constructor(props) {
@@ -24,19 +39,21 @@ export default class FileInput extends Component {
   }
 
   onChange = e => {
+    this.setState({ filename: e.target.files[0].name });
     this.props.onChange(e.target.files, e);
   };
 
   render() {
     const { label, onChange, ...rest } = this.props;
 
     return (
-      <div>
+      <FileInputContainer>
         <Button as="label" htmlFor={this.state.id}>
           {label}
         </Button>
-        <Hidden as="input" {...rest} id={this.state.id} type="file" onChange={this.onChange} />
-      </div>
+        <StyledInput {...rest} id={this.state.id} type="file" onChange={this.onChange} />
+        {this.props.showSelectedFile && <span>{this.state.filename ? this.state.filename : "No File chosen"}</span>}
+      </FileInputContainer>
     );
   }
 }

src/ui/projects/CreateProjectPage.js

@@ -122,6 +122,9 @@ export default function CreateProjectPage({ history, location }) {
                   <SearchInput placeholder="Search scenes..." value={params.q} onChange={onChangeQuery} />
                 </ProjectGridHeaderRow>
                 <ProjectGridHeaderRow>
+                  <Button as={Link} to="/scenes/new">
+                    Import From Blender
+                  </Button>
                   <Button as={Link} to="/projects/new">
                     New Empty Project
                   </Button>