show thumbnail per-file and allow directly opening viewer from there

prefrontalcortex · Apr 8, 2024 · d4813aa · d4813aa
1 parent c0bc03e
commit d4813aa
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 11 deletions.
diff --git a/web/src/app.html b/web/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-		<link rel="stylesheet" href="./src/lib/global.css">
+		<link rel="stylesheet" href="%sveltekit.assets%/global.css">
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/web/src/lib/files.ts b/web/src/lib/files.ts
@@ -8,6 +8,7 @@ export class HierarchyItem {
     absoluteUsd: string = "";
     src: string = "";
     path: string = "";
+    ext: string = "";
 }
 
 export class HierarchyEntry {
@@ -52,7 +53,6 @@ export function getFiles() {
         }
 
         const relative = normalizePath(path.relative(base, item));
-        const filename = path.basename(item);
         // without ext
         const name = path.basename(item, path.extname(item));
         const absolute = normalizePath(item);
@@ -64,13 +64,15 @@ export function getFiles() {
             return allowedExtensions.includes(ext);
         });
         const firstUsdFile = usdFiles.length > 0 ? usdFiles[0] : "";
+        const relativeUsdFile = normalizePath(path.relative(base, firstUsdFile));
 
         current.items.push({
             filename: name,
             absolute: absolute,
             absoluteUsd: firstUsdFile,
             src: path.dirname(relative) + "/" + path.basename(relative),
-            path: current.path + "/" + path.basename(firstUsdFile),
+            path: path.dirname(relativeUsdFile) + "/" + path.basename(firstUsdFile, path.extname(firstUsdFile)),
+            ext: path.extname(firstUsdFile),
         });
 
         // log last item

diff --git a/web/src/routes/GridItem.svelte b/web/src/routes/GridItem.svelte
@@ -21,7 +21,7 @@ function stripFileExtension(filename: string) {
 {#if child.items}
 <div class="grid">
     {#each child.items as item}
-    <a href={base}{item.path}>
+    <a href={base}/{item.path}>
         <div>
             <img src={base}/{item.src} alt="Thumbnail"/>
             <span>{item.filename}</span>

diff --git a/web/src/routes/[...path]/+page.svelte b/web/src/routes/[...path]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { base } from '$app/paths';
 import type { HierarchyEntry, HierarchyItem } from '$lib/files';
-  import { onMount } from 'svelte';
+import { onMount } from 'svelte';
 import GridItem from '../GridItem.svelte';
 export let data;
 
@@ -34,22 +34,48 @@ let dirs: HierarchyEntry[];
 let items: HierarchyItem[];
 
 $: currentDir = dirs?.find(child => child.path === "/" + data.slug);
-$: currentItem = items?.find(item => item.path === "/" + data.slug);
+$: currentItem = items?.find(item => item.path === data.slug);
+$: currentPath = currentItem ? currentItem.path : currentDir ? currentDir.path : "";
+
+$: relativeUrl = currentItem ? base + "/" + currentItem.path + currentItem.ext : "";
+$: absoluteUrl = window.location.origin + relativeUrl;
+
+function getViewerUrl(abs: string) {
+    const encoded = encodeURIComponent(abs);
+    return "https://usd-viewer.glitch.me/?file=" + encoded;
+}
+
+$: absoluteGithubUrl = currentItem ? "https://github.com/usd-wg/assets/blob/main/" + currentItem.path + currentItem.ext : "";
 
 </script>
 
 <div>
 <a href={base}>See all assets</a>
-<p>{data.slug} --- {currentDir?.path}</p>
+<p>{currentPath}</p>
 
 {#if currentDir}
     <article>
         <GridItem child={currentDir} />
     </article>
 {:else if currentItem}
     <article>
-        <p>{JSON.stringify(currentItem, null, 2)}</p>
-        <a href={base}{currentItem.path}>Download</a>
+
+        <span>{currentItem.filename}</span>
+        <br/>
+
+        <a href={getViewerUrl(absoluteGithubUrl)} target="_blank" class="viewer-link">
+            <img src={base}/{currentItem.src} alt="Thumbnail"/>  
+            <span>Open in USD Viewer</span>
+        </a>
+        <a href={absoluteGithubUrl} target="_blank">View file on GitHub</a>
+
+        <!--
+
+        <a href={relativeUrl} download>Download</a>
+        <a href={getViewerUrl(absoluteUrl)} target="_blank">View in USD Viewer (local file)</a>
+        <iframe src="https://usd-viewer.glitch.me/?file={absoluteUrl}" sandbox="allow-scripts allow-same-origin"></iframe>
+        
+        -->
     </article>
 {:else}
 <code><pre>
@@ -60,4 +86,23 @@ $: currentItem = items?.find(item => item.path === "/" + data.slug);
 {JSON.stringify(data, null, 2)}
 </pre></code>
 {/if}
-</div>
+</div>
+
+<style>
+article {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+p {
+    opacity: 0.5;
+    font-size: 0.7em;
+}
+
+a.viewer-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+</style>
diff --git a/web/src/lib/global.css → web/static/global.css b/web/src/lib/global.css → web/static/global.css
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -17,14 +17,15 @@ export default defineConfig(() => {
 	const copyTargets: Target[] = [];
 	copyTargets.push(...childItems.flatMap(file => {
 		const dest = path.dirname(file.src);
+		const destParent = path.dirname(file.path);
 		return [
 			{
 				src: file.absolute,
 				dest: dest,
 			},
 			{
 				src: file.absoluteUsd,
-				dest: dest,
+				dest: destParent,
 			},
 		]
 	}));
@@ -34,5 +35,12 @@ export default defineConfig(() => {
 			viteStaticCopy({ targets: copyTargets, structured: false }),
 			sveltekit(),
 		],
+		server: {
+			headers: {
+				// allow SharedArrayBuffers
+				'Cross-Origin-Opener-Policy': 'same-origin',
+				'Cross-Origin-Embedder-Policy': 'credentialless',
+			},
+		},
 	}
 });