@odori/cli 0.0.4 → 0.0.5

package/studio/src/settings.ts

@@ -0,0 +1,87 @@
+import {useCallback, useEffect, useState} from "react";
+
+/**
+ * Workspace preferences: the choices that belong to the person using Studio
+ * rather than to the project.
+ *
+ * They are deliberately not in `odori.config.ts`. A config file is checked in
+ * and shared, and "start muted" is a fact about someone's desk and how loud
+ * the room is, not about the video. Everything here is per browser, best
+ * effort, and safe to lose.
+ */
+export const STORAGE_PREFIX = "odori-studio-";
+
+/**
+ * Whether the transport starts with sound.
+ *
+ * Sound belongs on by default: a video with a score is not the same video
+ * without one, and a preview that silently drops half the work teaches you
+ * the wrong thing about it. But somebody working in an open office, or with
+ * Studio parked beside an agent all day, wants the opposite, and that is a
+ * setting rather than an argument.
+ */
+export type StartSound = "on" | "off";
+
+export const SETTINGS = {
+  sound: {key: "sound", values: ["on", "off"] as const, fallback: "on" as StartSound},
+} as const;
+
+const read = <T extends string>(key: string, values: readonly T[], fallback: T): T => {
+  try {
+    const stored = window.localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+    return values.includes(stored as T) ? (stored as T) : fallback;
+  } catch {
+    // Private browsing and hardened profiles refuse storage. A preference is
+    // not worth failing a render over.
+    return fallback;
+  }
+};
+
+/** A single preference, persisted per browser. */
+export const usePreference = <T extends string>(
+  key: string,
+  values: readonly T[],
+  fallback: T,
+): [T, (next: T) => void] => {
+  const [value, setValue] = useState<T>(() =>
+    typeof window === "undefined" ? fallback : read(key, values, fallback),
+  );
+
+  const update = useCallback(
+    (next: T) => {
+      setValue(next);
+      try {
+        window.localStorage.setItem(`${STORAGE_PREFIX}${key}`, next);
+      } catch {
+        // Applied for this session either way.
+      }
+    },
+    [key],
+  );
+
+  return [value, update];
+};
+
+/** Read once, outside React, for state that has to be right on first render. */
+export const readStartSound = (): StartSound =>
+  typeof window === "undefined"
+    ? SETTINGS.sound.fallback
+    : read(SETTINGS.sound.key, SETTINGS.sound.values, SETTINGS.sound.fallback);
+
+export const useStartSound = () =>
+  usePreference<StartSound>(SETTINGS.sound.key, SETTINGS.sound.values, SETTINGS.sound.fallback);
+
+/**
+ * Other tabs of the same Studio should not disagree about a preference. The
+ * storage event fires only in the tabs that did not make the change, which is
+ * exactly the set that needs telling.
+ */
+export const useSettingsSync = (onChange: () => void) => {
+  useEffect(() => {
+    const listener = (event: StorageEvent) => {
+      if (event.key?.startsWith(STORAGE_PREFIX)) onChange();
+    };
+    window.addEventListener("storage", listener);
+    return () => window.removeEventListener("storage", listener);
+  }, [onChange]);
+};

package/studio/src/studio.css

@@ -306,6 +306,66 @@ a.button {
   font-size: 11px;
 }
 
+/* ---------- settings ---------- */
+
+.settings {
+  position: relative;
+}
+/* Right-aligned: the trigger is the last thing in the header, so a menu
+   growing rightward from its left edge would leave the window. */
+.settings-menu {
+  left: auto;
+  right: 0;
+}
+.menu-heading {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 6px 0 2px;
+  padding: 0 9px;
+  text-transform: uppercase;
+}
+.menu-heading:first-child {
+  margin-top: 2px;
+}
+.menu-hint {
+  color: var(--subtle);
+  font-size: 11px;
+}
+/* A tick in a reserved column, so choosing an option never reflows the row
+   or nudges the one under the cursor. */
+.menu-item {
+  display: grid;
+  grid-template-columns: 1fr 14px;
+}
+.menu-item > span:first-child {
+  grid-column: 1;
+}
+.menu-hint {
+  grid-column: 1;
+}
+.menu-item[data-selected="true"]::after {
+  align-self: center;
+  color: var(--foreground);
+  content: "✓";
+  font-size: 11px;
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  justify-self: end;
+}
+/* A stalled bar stops looking like a working one. */
+.progress[data-stalled="true"] > span {
+  opacity: 0.5;
+}
+
+.menu-note {
+  border-top: 1px solid var(--border);
+  color: var(--subtle);
+  font-size: 11px;
+  margin: 4px 0 0;
+  padding: 7px 9px 3px;
+}
+
 /* Matches the transport's icon buttons rather than the host select. */
 .rate {
   appearance: none;
@@ -951,6 +1011,13 @@ select.input {
 
 .stage {
   display: grid;
+  /* The column has to be named. An implicit grid column is auto, which means
+     max-content, so the transport's row of controls set the width and the
+     timeline was laid out at its natural size and then clipped: in a pane this
+     narrow the right half of every video sat under the inspector, unclickable,
+     and the playhead walked off the edge on its way there. min-width on .stage
+     does not help, because the overflow is the track inside it. */
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr) auto;
   min-width: 0;
   overflow: hidden;
@@ -993,13 +1060,19 @@ select.input {
   border-top: 1px solid var(--border);
   display: grid;
   gap: 10px;
+  min-width: 0;
   padding: 10px 14px 14px;
 }
 
 .transport-row {
   align-items: center;
   display: flex;
+  /* Wrapping is what lets the transport be narrower than its controls. Without
+     it the row is a single min-content block and it is the row, not the
+     timeline, that decides how wide the stage has to be. */
+  flex-wrap: wrap;
   gap: 8px;
+  min-width: 0;
 }
 
 .timecode {
@@ -1014,8 +1087,13 @@ select.input {
 }
 
 .timeline {
-  cursor: pointer;
+  /* Only the track is clickable, so only the track shows a pointer. */
   display: grid;
+  /* Named for the same reason .stage is: an implicit auto column would take
+     its width from the ruler and the scene labels rather than from the space
+     available, and push the track out from under the cursor. */
+  grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
   gap: 4px;
   position: relative;
   user-select: none;
@@ -1029,6 +1107,8 @@ select.input {
   justify-content: space-between;
 }
 .track {
+  /* The track is a click target, not something to drag. */
+  cursor: pointer;
   background: var(--field);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -1140,6 +1220,21 @@ select.input {
   width: 7.5px;
 }
 
+/* The frame under the cursor, which is a suggestion until it is clicked. It
+   reads as the same instrument as the playhead, turned down. */
+.playhead[data-preview="true"],
+.playhead[data-preview="true"]::before {
+  background: var(--subtle);
+}
+.playhead[data-preview="true"] {
+  opacity: 0.75;
+}
+/* Muted rather than moved: the readout must not change width when it starts
+   reporting the hovered frame, or the whole row shifts under the cursor. */
+.timecode[data-preview="true"] {
+  color: var(--subtle);
+}
+
 /* ---------- inspector ---------- */
 
 .facts {

package/studio/src/views/VideosView.tsx

@@ -23,6 +23,7 @@ import {Inspector} from "../components/Inspector";
 import {Navigator} from "../components/Navigator";
 import {Badge, Empty, Fact, SectionTitle, Separator} from "../components/ui";
 import {measureTrack} from "../lib/mix-loudness";
+import {readStartSound} from "../settings";
 import {useShortcuts} from "../shortcuts";
 
 /**
@@ -51,9 +52,15 @@ export const VideosView = ({
   const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
   const [track, setTrack] = useState<AudioTrack | null>(null);
   const [loop, setLoop] = useState(true);
-  const [muted, setMuted] = useState(false);
+  /* Read once per mount rather than watched: flipping the default while a
+     video is open would mute the thing being listened to, and a default is a
+     statement about what happens next. */
+  const [muted, setMuted] = useState(() => readStartSound() === "off");
   const [soloCue, setSoloCue] = useState<string | null>(null);
-  const [scrubbing, setScrubbing] = useState(false);
+  /* The frame the cursor is over, which the stage shows instead of the
+     playhead frame. Preview never moves the playhead and never sounds: it
+     answers "what is here" and nothing else. */
+  const [preview, setPreview] = useState<number | null>(null);
   const [rate, setRate] = useState(1);
   const [loudness, setLoudness] = useState<number | null>(null);
   const [audioBlocked, setAudioBlocked] = useState(false);
@@ -108,7 +115,7 @@ export const VideosView = ({
     playing: playback.playing,
     muted,
     soloCue,
-    scrubbing,
+    scrubbing: preview !== null,
     rate,
     onBlocked: setAudioBlocked,
     onFailed: setAudioFailed,
@@ -238,7 +245,7 @@ export const VideosView = ({
           <PreviewBoundary resetKey={selected.metadata.id}>
             <OdoriRuntime
               entry={selected}
-              frame={playback.frame}
+              frame={preview ?? playback.frame}
               input={input}
               assets={project.assets}
               onTimeline={handleTimeline}
@@ -258,7 +265,7 @@ export const VideosView = ({
           audioBlocked={audioBlocked}
           onEnableAudio={() => setMuted(false)}
           onSoloCue={setSoloCue}
-          onScrubbing={setScrubbing}
+          onPreview={setPreview}
           rate={rate}
           onRate={setRate}
           onToggleLoop={() => setLoop((value) => !value)}