@odori/cli 0.0.2 → 0.0.3

package/studio/src/views/VideosView.tsx

@@ -19,22 +19,33 @@ import {Thumbnail} from "../components/Thumbnail";
 import {InputControls} from "../components/InputControls";
 import {ExportPanel} from "../components/ExportPanel";
 import {Diagnostics} from "../components/Diagnostics";
-import {Badge, Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {Inspector} from "../components/Inspector";
+import {Badge, Empty, Fact, SectionTitle, Separator} from "../components/ui";
 import {measureTrack} from "../lib/mix-loudness";
 import {useShortcuts} from "../shortcuts";
 
+/**
+ * What a cue is called in the mix, not what its file is called on disk. A
+ * generated cue's filename carries a 16-character content hash that means
+ * nothing while mixing and is wide enough to collide with the column beside
+ * it; the full filename stays one hover away.
+ */
+const cueLabel = (src: string): string => {
+  const file = src.split("/").pop() ?? src;
+  return file.replace(/-[0-9a-f]{16}\.wav$/, "");
+};
+
 export const VideosView = ({
   selection,
   onSelect,
-  mode,
 }: {
   selection: string | null;
   onSelect: (id: string) => void;
-  mode: "player" | "gallery";
 }) => {
-  // Finding one by name is ⌘K; this list is for browsing them all.
+  // Finding one by name is ⌘K; the gallery is for browsing them all. A route
+  // with no selection is the gallery; a selection is that video's player.
   const filtered = videos;
-  const selected = filtered.find((video) => video.metadata.id === selection) ?? filtered[0] ?? videos[0];
+  const selected = selection ? (filtered.find((video) => video.metadata.id === selection) ?? null) : null;
   const [input, setInput] = useState<Record<string, unknown>>({});
   const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
   const [track, setTrack] = useState<AudioTrack | null>(null);
@@ -150,7 +161,7 @@ export const VideosView = ({
     s: () => setShowSafeArea((value) => !value),
   });
 
-  if (!selected || !layout) {
+  if (videos.length === 0) {
     return (
       <Empty title="No videos yet">
         Create <code>{project.videosDir}/launch/video.tsx</code> or run <code>odori new launch</code>. A video exists
@@ -159,7 +170,7 @@ export const VideosView = ({
     );
   }
 
-  if (mode === "gallery") {
+  if (!selected || !layout) {
     return (
       <div className="gallery">
         {filtered.map((video) => {
@@ -169,19 +180,17 @@ export const VideosView = ({
               key={video.metadata.id}
               type="button"
               className="card"
-              data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
               onClick={() => onSelect(video.metadata.id)}
             >
               <Thumbnail
                 entry={video}
                 frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, videoLayout) * 0.4)}
                 durationInFrames={entryDurationInFrames(video, videoLayout)}
+                audioBadge
               />
               <div className="card-meta">
                 <strong>{video.metadata.title}</strong>
-                <span>
-                  {videoLayout.format.width}x{videoLayout.format.height} · {String(video.metadata.duration ?? "auto")}
-                </span>
+                <span>{String(video.metadata.duration ?? "auto")}</span>
               </div>
             </button>
           );
@@ -196,28 +205,6 @@ export const VideosView = ({
 
   return (
     <>
-      <aside className="sidebar">
-        <div className="sidebar-scroll">
-          <ul className="list">
-            {filtered.map((video) => (
-              <li key={video.metadata.id}>
-                <button
-                  type="button"
-                  className="list-item"
-                  data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
-                  onClick={() => onSelect(video.metadata.id)}
-                >
-                  {/* Format and duration are facts about the selection, and the
-                      inspector states both. The list is for choosing. */}
-                  <strong>{video.metadata.title}</strong>
-                </button>
-              </li>
-            ))}
-          </ul>
-
-        </div>
-      </aside>
-
       <section className="stage">
         <CanvasStage
           width={layout.format.width}
@@ -259,7 +246,18 @@ export const VideosView = ({
         />
       </section>
 
-      <aside className="inspector">
+      <Inspector title={selected.metadata.title} hint={file}>
+        {/* Export sits first: it is the pane's one action, and the header
+            names what is being worked on right above it. */}
+        <ExportPanel
+          videoId={selected.metadata.id}
+          input={input}
+          frame={playback.frame}
+          width={layout.format.width}
+          height={layout.format.height}
+        />
+        <Separator />
+
         <SectionTitle>Video</SectionTitle>
         <dl className="facts">
           <Fact label="id">{selected.metadata.id}</Fact>
@@ -282,11 +280,6 @@ export const VideosView = ({
           ) : null}
         </dl>
         {selected.metadata.description ? <p className="hint">{selected.metadata.description}</p> : null}
-        <div style={{marginTop: 8}}>
-          <Button variant="outline" active={showSafeArea} onClick={() => setShowSafeArea((value) => !value)}>
-            Safe area
-          </Button>
-        </div>
 
         {Object.keys(fields).length > 0 ? (
           <>
@@ -304,7 +297,7 @@ export const VideosView = ({
             <SectionTitle>Audio</SectionTitle>
             <dl className="facts">
               {track.cues.map((cue) => (
-                <Fact key={cue.id} label={cue.src.split("/").pop() ?? cue.src}>
+                <Fact key={cue.id} label={cueLabel(cue.src)} title={cue.src.split("/").pop()}>
                   {cue.fromFrame}-{cue.fromFrame + cue.durationInFrames - 1} · gain {cue.gain}
                   {cue.duckUnder ? ` · ducked to ${DUCK_GAIN}` : ""}
                   {soloCue === cue.id ? " · solo" : ""}
@@ -329,15 +322,7 @@ export const VideosView = ({
         ) : null}
 
         <Diagnostics entry={selected} timeline={timeline} track={track} />
-
-        <Separator />
-        <ExportPanel
-          videoId={selected.metadata.id}
-          input={input}
-          frame={playback.frame}
-          exportDir={project.exportDir}
-        />
-      </aside>
+      </Inspector>
     </>
   );
 };