add type field to assets

tourforge · Mar 21, 2024 · b2e13f7 · b2e13f7
1 parent 3cd0c92
commit b2e13f7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Asset.tsx b/src/components/Asset.tsx
@@ -4,12 +4,13 @@ import { type Component, createSignal, createUniqueId, For, type JSX, Show } fro
 import { useDB } from "../db";
 import { useProject } from "../hooks/Project";
 import { useAssetUrl } from "../hooks/AssetUrl";
+import { type AssetType } from "../data";
 
 import styles from "./Asset.module.css";
 
 export const Asset: Component<{
   id?: string,
-  type: "image" | "audio",
+  type: AssetType,
   asset: string | undefined,
   onIdChange: (newId: string) => void,
   onDeleteClick?: () => void,
@@ -26,7 +27,7 @@ export const Asset: Component<{
   const [project, setProject] = useProject();
   const assetUrl = useAssetUrl(project, () => props.asset);
 
-  const assets = () => Object.keys(project()?.assets ?? {});
+  const assets = () => Object.keys(project()?.assets ?? {}).filter(a => project()?.assets[a]?.type === props.type);
 
   const handleQueryInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = async (event) => {
     const newQuery = event.currentTarget.value;
@@ -62,6 +63,7 @@ export const Asset: Component<{
         [assetName]: {
           alt: "",
           attrib: "",
+          type: props.type,
           ...(assetName in project.assets ? project.assets[assetName] : {}),
           hash: assetHash,
         },
@@ -85,14 +87,14 @@ export const Asset: Component<{
     <div id={props.id} class={styles.Asset}>
       <Show when={props.type === "image"}>
         <img
-          src={assetUrl()}
+          src={props.asset === query() ? assetUrl() : ""}
           class={styles.AssetThumbnail}
           classList={{ [styles.Error]: !imageLoaded() }}
           onLoad={handleImageLoad}
           onError={handleImageError}
           onClick={() => window.open(assetUrl(), "_blank")}
         />
-        <Show when={!imageLoaded()}>
+        <Show when={!imageLoaded() || props.asset !== query()}>
           <div title="Image not found" class={styles.AssetThumbnail} onClick={() => window.open(assetUrl(), "_blank")}><FiImage /></div>
         </Show>
       </Show>

diff --git a/src/data.ts b/src/data.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-export const AssetTypeSchema = z.literal("narration").or(z.literal("image")).or(z.literal("tiles"));
+export const AssetTypeSchema = z.literal("audio").or(z.literal("image")).or(z.literal("tiles"));
 
 export const AssetReferenceSchema = z.string();
 
@@ -68,6 +68,7 @@ export const ProjectModelSchema = z.object({
   tours: z.array(TourModelSchema),
   assets: z.record(AssetReferenceSchema, z.object({
     hash: z.string(),
+    type: AssetTypeSchema,
     alt: z.string(),
     attrib: z.string(),
   })),

diff --git a/src/pages/project/ProjectAssetsEditor.tsx b/src/pages/project/ProjectAssetsEditor.tsx
@@ -59,9 +59,7 @@ const AssetCard: Component<{ asset: string }> = (props) => {
       assets: {
         ...project.assets,
         [props.asset]: {
-          alt: "",
-          attrib: "",
-          ...(props.asset in project.assets ? project.assets[props.asset] : {}),
+          ...project.assets[props.asset],
           hash: assetHash,
         },
       },