Metadata editor

studio/app/api/embeds/[id]/data/route.ts

@@ -0,0 +1,15 @@
+import getEmbedFile from "@features/embeds/queries/getEmbedFile";
+import mime from "mime";
+
+export async function GET(
+  req: Request,
+  { params }: { params: { id: string } },
+) {
+  const fileStream: ReadableStream = await getEmbedFile(parseInt(params.id));
+
+  return new Response(fileStream, {
+    headers: {
+      "Content-Type": mime.getType(params.id) ?? "application/octet-stream",
+    },
+  });
+}

studio/app/api/embeds/route.ts

@@ -0,0 +1,29 @@
+import { createEmbed } from "@features/embeds/mutations/createEmbed";
+import { z } from "zod";
+import { zfd } from "zod-form-data";
+
+const postSchema = zfd.formData({
+  dataFile: zfd.file(),
+  thumbnailFileContents: zfd.text(),
+  projectId: zfd.numeric(),
+  name: zfd.text(),
+});
+
+export async function POST(req: Request) {
+  try {
+    const data = postSchema.parse(await req.formData());
+    const model = await createEmbed(
+      data.projectId,
+      data.name,
+      data.dataFile,
+      data.thumbnailFileContents,
+    );
+
+    return Response.json(model, { status: 201 });
+  } catch (e) {
+    if (e instanceof z.ZodError) {
+      return new Response(e.message, { status: 400 });
+    }
+    throw e;
+  }
+}

studio/app/api/projectVersions/route.ts

@@ -3,14 +3,19 @@ import { z } from "zod";
 import { zfd } from "zod-form-data";
 
 const postSchema = zfd.formData({
-  file: zfd.file(),
+  dataFile: zfd.file(),
+  thumbnailFileContents: zfd.text(),
   projectId: zfd.numeric(),
 });
 
 export async function POST(req: Request) {
   try {
     const data = postSchema.parse(await req.formData());
-    const model = await createProjectVersion(data.projectId, data.file);
+    const model = await createProjectVersion(
+      data.projectId,
+      data.dataFile,
+      data.thumbnailFileContents,
+    );
 
     return Response.json(model, { status: 201 });
   } catch (e) {

studio/app/embeds/[embedId]/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Flex, View } from "@adobe/react-spectrum";
+import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
+import { withUserEnabled } from "@core/utils/withUserEnabled";
+import { MetadataProvider } from "@features/editor-metadata/providers/MetadataProvider";
+
+import { EditorProvider } from "@features/editor/providers/EditorProvider";
+import Viewer from "@features/viewer/components/Viewer";
+import ViewerHeader from "@features/viewer/components/ViewerHeader";
+
+type ProjectPageProps = {
+  params: {
+    embedId: string;
+  };
+};
+
+function EmbedPage({ params }: ProjectPageProps) {
+  const embedId = params.embedId;
+  const sanitizedId = parseInt(embedId, 10);
+
+  return (
+    <EditorProvider>
+      <MetadataProvider>
+        <Flex width="100vw" height="100vh" direction="column">
+          <View gridArea="header" width="100%">
+            <ViewerHeader embedId={sanitizedId} />
+          </View>
+          <View gridArea="content" overflow="hidden" width="100%" height="100%">
+            <Viewer embedId={sanitizedId} />
+          </View>
+        </Flex>
+      </MetadataProvider>
+    </EditorProvider>
+  );
+}
+
+export default withPageAuthRequired(withUserEnabled(EmbedPage));

studio/app/globals.css

@@ -7,8 +7,18 @@ body,
 }
 
 :root {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif,
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif,
     "Segoe UI Emoji";
   font-size: 12px;
   line-height: 24px;

studio/app/projects/[projectId]/page.tsx

@@ -3,6 +3,7 @@
 import { Flex, View } from "@adobe/react-spectrum";
 import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
 import { withUserEnabled } from "@core/utils/withUserEnabled";
+import { MetadataProvider } from "@features/editor-metadata/providers/MetadataProvider";
 import Editor from "@features/editor/components/Editor";
 
 import EditorHeader from "@features/editor/components/EditorHeader";
@@ -20,14 +21,16 @@ function ProjectPage({ params }: ProjectPageProps) {
 
   return (
     <EditorProvider>
-      <Flex width="100vw" height="100vh" direction="column">
-        <View gridArea="header" width="100%">
-          <EditorHeader sanitizedId={sanitizedId} />
-        </View>
-        <View gridArea="content" overflow="hidden" width="100%" height="100%">
-          <Editor projectId={sanitizedId} />
-        </View>
-      </Flex>
+      <MetadataProvider>
+        <Flex width="100vw" height="100vh" direction="column">
+          <View gridArea="header" width="100%">
+            <EditorHeader sanitizedId={sanitizedId} />
+          </View>
+          <View gridArea="content" overflow="hidden" width="100%" height="100%">
+            <Editor projectId={sanitizedId} />
+          </View>
+        </Flex>
+      </MetadataProvider>
     </EditorProvider>
   );
 }

studio/app/projects/page.tsx

@@ -3,7 +3,6 @@
 import { Grid, View } from "@adobe/react-spectrum";
 import { withPageAuthRequired } from "@auth0/nextjs-auth0/client";
 import { withUserEnabled } from "@core/utils/withUserEnabled";
-import ModelList from "@features/models/components/ModelList";
 import Header from "@features/projects/components/Header";
 import ProjectList from "@features/projects/components/ProjectList";
 import { ToastContainer } from "@react-spectrum/toast";
@@ -12,7 +11,7 @@ function ProjectListPage() {
   return (
     <Grid
       areas={{
-        base: ["header header", "projects models"],
+        base: ["header", "projects"],
       }}
       width="100vw"
       gap="size-100"
@@ -31,18 +30,10 @@ function ProjectListPage() {
         gridArea="projects"
         position="relative"
         overflow="hidden"
-        marginStart="size-100"
+        marginX="size-100"
       >
         <ProjectList />
       </View>
-      <View
-        gridArea="models"
-        position="relative"
-        overflow="hidden"
-        marginEnd="size-100"
-      >
-        <ModelList />
-      </View>
       <ToastContainer />
     </Grid>
   );