npm - @odori/cli - Versions diffs - 0.0.4 → 0.0.6 - Mend

@odori/cli 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/bin/odori.mjs +33 -11
package/dist/{chunk-NYXWEZU2.js → chunk-6CE7U5KB.js} +124 -39
package/dist/cli.js +1 -1
package/dist/index.d.ts +11 -0
package/dist/index.js +1 -1
package/dist/{registry-snapshot-MSH2EA36.js → registry-snapshot-ADKSTGDR.js} +15 -14
package/package.json +3 -3
package/src/cli.ts +26 -4
package/src/commands/add.ts +12 -1
package/src/commands/dev.ts +4 -1
package/src/commands/exportVideo.ts +6 -0
package/src/commands/init.ts +34 -1
package/src/commands/test.ts +24 -2
package/src/commands/update.ts +58 -7
package/src/jobs.ts +1 -1
package/src/registry-snapshot.json +15 -15
package/src/render.ts +8 -1
package/studio/index.html +26 -0
package/studio/src/Studio.tsx +6 -22
package/studio/src/components/CanvasStage.tsx +40 -3
package/studio/src/components/ExportPanel.tsx +90 -6
package/studio/src/components/Inspector.tsx +36 -30
package/studio/src/components/Navigator.tsx +64 -2
package/studio/src/components/Settings.tsx +109 -0
package/studio/src/components/Transport.tsx +136 -58
package/studio/src/components/ui.tsx +20 -1
package/studio/src/settings.ts +87 -0
package/studio/src/studio.css +269 -20
package/studio/src/views/VideosView.tsx +12 -5

package/src/render.ts CHANGED Viewed

@@ -469,6 +469,13 @@ export type RenderOptions = {
   /** Container and codec. Defaults to H.264 in MP4. */
   format?: VideoFormat;
   skipUnchangedFrames?: boolean;
+  /**
+   * Mix the composition's cues into the file. Defaults to true, because the
+   * score is part of the video. Set false for a silent cut: a loop for a
+   * landing page, a clip going into an editor that has its own audio, or a
+   * reviewer who just wants the picture.
+   */
+  audio?: boolean;
   /** Reuse encoded chunks whose frames still look identical. */
   cache?: boolean;
   signal?: AbortSignal;
@@ -571,7 +578,7 @@ export const renderMovie = async (
     const captureMs = performance.now() - captureStart;
     onProgress?.(1, "encoding");
-    const mixInputs: MixInput[] = (target.audio ?? [])
+    const mixInputs: MixInput[] = (options.audio === false ? [] : (target.audio ?? []))
       .map((cue) => {
         const file = resolveCueFile(config, cue.src);
         if (!file) log.warn(`Skipping audio cue ${cue.src}: only project-local files can be encoded.`);

package/studio/index.html CHANGED Viewed

@@ -32,6 +32,32 @@
         root.style.colorScheme = theme;
         root.style.background = theme === "dark" ? "#000000" : "#ffffff";
       })();
+      // The panes, for the same reason and one step further: the grid columns
+      // are animated, so a pane whose state only arrives with React does not
+      // merely flash, it plays its opening or closing on every reload. The
+      // list defaults closed, the inspector open, matching the components; a
+      // stored width is restored here too, or the pane would slide from the
+      // default to it.
+      (function () {
+        var read = function (key) {
+          try {
+            return localStorage.getItem(key);
+          } catch (error) {
+            return null;
+          }
+        };
+        var root = document.documentElement;
+        root.dataset.navigator = read("odori-navigator-collapsed") === "false" ? "open" : "collapsed";
+        root.dataset.inspector = read("odori-inspector-collapsed") === "true" ? "collapsed" : "open";
+        var width = function (key, property) {
+          var stored = parseInt(read(key), 10);
+          if (stored > 0) root.style.setProperty(property, stored + "px");
+        };
+        width("odori-navigator-width", "--navigator-column");
+        width("odori-inspector-width", "--inspector-width");
+      })();
     </script>
   </head>
   <body>

package/studio/src/Studio.tsx CHANGED Viewed

@@ -8,15 +8,11 @@ import {HomeView} from "./views/HomeView";
 import {CommandPalette} from "./components/CommandPalette";
 import {Wordmark} from "./components/Wordmark";
 import {Button, Icon, Kbd} from "./components/ui";
-import {useTheme, type Theme} from "./theme";
+import {Settings} from "./components/Settings";
+import {useTheme} from "./theme";
 const VIEWS = ["videos", "components", "brands", "assets"] as const;
-const THEMES: Array<{id: Theme; label: string; icon: "display" | "sun" | "moon"}> = [
-  {id: "system", label: "System", icon: "display"},
-  {id: "light", label: "Light", icon: "sun"},
-  {id: "dark", label: "Dark", icon: "moon"},
-];
 export type StudioView = (typeof VIEWS)[number] | "home";
 const ROUTES: readonly string[] = ["home", ...VIEWS];
@@ -48,7 +44,9 @@ export const Studio = () => {
   const routeRef = useRef(route);
   routeRef.current = route;
   const search = useRef<HTMLInputElement>(null);
-  const {theme, setTheme} = useTheme();
+  // Mounted here as well as in the menu so the stored theme is applied on
+  // load, whether or not anybody opens settings.
+  useTheme();
   const navigate = (view: StudioView, selection?: string | null) => {
     const next: Route = {view, selection: selection ?? null};
@@ -132,21 +130,7 @@ export const Studio = () => {
             />
             <Kbd>⌘K</Kbd>
           </div>
-          <div className="tabs" role="group" aria-label="Theme">
-            {THEMES.map((option) => (
-              <Button
-                key={option.id}
-                icon
-                active={theme === option.id}
-                aria-pressed={theme === option.id}
-                aria-label={option.label}
-                title={`${option.label} theme`}
-                onClick={() => setTheme(option.id)}
-              >
-                <Icon name={option.icon} />
-              </Button>
-            ))}
-          </div>
+          <Settings />
         </div>
       </header>

package/studio/src/components/CanvasStage.tsx CHANGED Viewed

@@ -1,11 +1,29 @@
-import {useEffect, useRef, useState, type ReactNode, type RefObject} from "react";
+import {useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject} from "react";
+/**
+ * Before the browser paints, and inert on the server.
+ *
+ * The fit has to be known for the first frame or it is not a fit, it is a
+ * correction the viewer watches happen.
+ */
+const useBeforePaint = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Fit a fixed composition size into whatever space the container has. */
 export const useFitScale = (width: number, height: number): [RefObject<HTMLDivElement | null>, number] => {
   const container = useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(0.25);
+  /*
+   * Zero until measured, not a guess.
+   *
+   * This started at 0.25, so every load drew the composition at a quarter of
+   * its size and then snapped it to the real fit once an effect had run. That
+   * is the flash: a frame arriving small, and everything around it moving as
+   * it grew. Zero paints nothing, and the measurement below lands before the
+   * browser paints at all, so the first frame the viewer sees is the right
+   * one.
+   */
+  const [scale, setScale] = useState(0);
-  useEffect(() => {
+  useBeforePaint(() => {
     const element = container.current;
     if (!element) return;
     const fit = () => {
@@ -41,6 +59,22 @@ export const CanvasStage = ({
   children: ReactNode;
 }) => {
   const [container, scale] = useFitScale(width, height);
+  /*
+   * Brand faces arrive after the composition mounts, and text set in a face
+   * that lands late repaints at a different width. The gallery cards already
+   * hold their pixels until the faces are in; the stage is the one place it
+   * matters most, because it is the biggest thing on screen.
+   */
+  const [fontsReady, setFontsReady] = useState(false);
+  useEffect(() => {
+    let live = true;
+    void document.fonts.ready.then(() => {
+      if (live) setFontsReady(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
   return (
     <div className="viewport">
@@ -54,6 +88,9 @@ export const CanvasStage = ({
             {
               height: Math.round(height * scale),
               width: Math.round(width * scale),
+              // The box is laid out; only its contents wait for the faces, so
+              // nothing around it moves when they arrive.
+              visibility: scale > 0 && fontsReady ? undefined : "hidden",
               "--safe-x": `${(safeArea?.x ?? 0) * scale}px`,
               "--safe-y": `${(safeArea?.y ?? 0) * scale}px`,
             } as React.CSSProperties

package/studio/src/components/ExportPanel.tsx CHANGED Viewed

@@ -65,24 +65,82 @@ export const ExportPanel = ({
 }) => {
   const [job, setJob] = useState<JobState | null>(null);
   const [busy, setBusy] = useState(false);
+  /** Set when a job stops reporting progress, so a wedge reads as a wedge. */
+  const [stalled, setStalled] = useState(false);
+  /* Sound is part of the video, so it ships unless it is turned off. GIF has
+     no audio track at all and a still is one frame, so the choice only exists
+     where it means something. */
+  const [sound, setSound] = useState(true);
   const [format, setFormat] = useState<Format>("mp4");
   const [quality, setQuality] = useState<Quality>("studio");
   const [scale, setScale] = useState(1);
   const [notice, setNotice] = useState<string | null>(null);
+  /**
+   * Watch a job until it finishes, and say so if it does not.
+   *
+   * The old loop treated every unreadable response as "try again" and, after
+   * fifteen minutes of that, returned without a word. A dev server restarted
+   * mid-export takes its job records with it, so what you saw was a bar frozen
+   * at whatever percentage it had reached, no error, and no end: the export
+   * looked like it was still going hours later. A watcher that cannot see the
+   * job has to say the job is unwatchable.
+   */
   const poll = async (id: string) => {
-    for (let attempt = 0; attempt < 900; attempt += 1) {
+    let unreachable = 0;
+    let last = -1;
+    let stalledFor = 0;
+    for (let attempt = 0; attempt < 1800; attempt += 1) {
       await new Promise((wait) => setTimeout(wait, 1000));
-      const response = await fetch(`/__odori/jobs/${id}`);
-      if (!response.ok) continue;
-      const payload = (await response.json()) as JobState;
+      let payload: JobState | null = null;
+      try {
+        const response = await fetch(`/__odori/jobs/${id}`);
+        if (response.ok) payload = (await response.json()) as JobState;
+      } catch {
+        // Network error and 404 are the same thing here: no news about the job.
+      }
+      if (!payload) {
+        unreachable += 1;
+        // Ten seconds of silence is a server that went away, not a slow reply.
+        if (unreachable >= 10) {
+          setJob((current) => ({
+            ...(current ?? {id, progress: 0}),
+            status: "failed",
+            error:
+              "Lost contact with the dev server, so this export can no longer be tracked. It may still have finished; check the out directory, or run odori jobs.",
+          }));
+          return;
+        }
+        continue;
+      }
+      unreachable = 0;
       setJob(payload);
       if (payload.status === "ready" || payload.status === "failed") return;
+      /* A long render is normal; a silent one is the thing worth naming. The
+         encoder reports every five percent, so two minutes without a number
+         means something is wedged rather than slow. */
+      if (payload.progress === last) stalledFor += 1;
+      else {
+        stalledFor = 0;
+        last = payload.progress;
+      }
+      setStalled(stalledFor >= 120);
     }
+    setJob((current) => ({
+      ...(current ?? {id, progress: 0}),
+      status: "failed",
+      error: "Stopped watching after thirty minutes. Run odori jobs to see whether it is still going.",
+    }));
   };
   const post = async (path: string, body?: unknown) => {
     setBusy(true);
+    setStalled(false);
     setJob({id: "pending", status: "queued", progress: 0});
     try {
       const response = await fetch(path, {
@@ -135,7 +193,7 @@ export const ExportPanel = ({
   const run = async () => {
     setNotice(null);
     if (format === "frame") return post("/__odori/still", {videoId, input, frame});
-    return post("/__odori/exports", {videoId, input, format, quality, scale});
+    return post("/__odori/exports", {videoId, input, format, quality, scale, audio: hasSound ? sound : false});
   };
   const file = outputName(videoId);
@@ -143,6 +201,8 @@ export const ExportPanel = ({
   // video's layout and every frame number in the project depends on it.
   const still = format === "frame";
   const hasQuality = format === "mp4" || format === "webm";
+  /** GIF carries no audio track and a still is one frame. */
+  const hasSound = format !== "gif" && format !== "frame";
   const inFlight = job && job.status !== "ready" && job.status !== "failed";
   // The button names the file it will write - extension implied by the type
   // above it - and reports its own progress while writing it.
@@ -220,6 +280,22 @@ export const ExportPanel = ({
         </div>
       ) : null}
+      {hasSound ? (
+        <div className="export-row">
+          <span className="export-label">Sound</span>
+          <div className="export-options">
+            <Button variant="outline" active={sound} disabled={busy} onClick={() => setSound(true)}
+              title="Mix the brand's cues into the file">
+              On
+            </Button>
+            <Button variant="outline" active={!sound} disabled={busy} onClick={() => setSound(false)}
+              title="Write the picture with no audio track">
+              Off
+            </Button>
+          </div>
+        </div>
+      ) : null}
       <div className="export-actions">
         <Button
           variant="primary"
@@ -256,10 +332,18 @@ export const ExportPanel = ({
             </span>
           </div>
           {job.status === "rendering" || job.status === "encoding" ? (
-            <div className="progress">
+            <div className="progress" data-stalled={stalled ? "true" : undefined}>
               <span style={{width: `${Math.round((job.progress ?? 0) * 100)}%`}} />
             </div>
           ) : null}
+          {/* A bar that has not moved in two minutes looks exactly like one
+              that is about to. Saying which is the whole point. */}
+          {stalled ? (
+            <p className="hint" style={{marginTop: 6}}>
+              No progress for two minutes. It may be a slow frame, or the render may be wedged. Run{" "}
+              <code>odori jobs</code> to see the log, and the dev server terminal for the error.
+            </p>
+          ) : null}
         </>
       ) : null}

package/studio/src/components/Inspector.tsx CHANGED Viewed

@@ -95,12 +95,18 @@ export const Inspector = ({
           event.preventDefault();
           document.body.style.userSelect = "none";
           document.body.style.cursor = "col-resize";
+          /* The column eases when a pane is put away, and a drag writes that
+             same column many times a second. Easing it then means the track
+             is always behind the pointer while the pane's own width is not,
+             and the difference between them is a strip of empty page. */
+          document.documentElement.dataset.resizing = "";
           const onMove = (move: PointerEvent) => applyWidth(window.innerWidth - move.clientX);
           const onUp = () => {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
             document.body.style.userSelect = "";
             document.body.style.cursor = "";
+            delete document.documentElement.dataset.resizing;
             const width = getComputedStyle(document.documentElement).getPropertyValue(WIDTH_VAR).trim();
             if (width) window.localStorage.setItem(STORAGE_KEY, String(Number.parseInt(width, 10)));
           };
@@ -113,37 +119,37 @@ export const Inspector = ({
           window.localStorage.removeItem(STORAGE_KEY);
         }}
       />
+      <div className="inspector-head">
+        <span className="inspector-title" title={hint ?? title}>
+          {title}
+        </span>
+        {files.length > 0 ? (
+          <div className="inspector-views" role="tablist">
+            {(["inspect", "code"] as const).map((view) => (
+              <button
+                key={view}
+                type="button"
+                role="tab"
+                aria-selected={showing === view}
+                data-active={showing === view ? "true" : undefined}
+                onClick={() => setShowing(view)}
+              >
+                {view === "inspect" ? "Inspect" : "Code"}
+              </button>
+            ))}
+          </div>
+        ) : null}
+        <button
+          type="button"
+          className="inspector-toggle"
+          aria-label="Hide inspector"
+          title="Hide inspector"
+          onClick={() => setCollapsed(true)}
+        >
+          <Icon name="sidebar" />
+        </button>
+      </div>
       <div className="inspector-scroll">
-        <div className="inspector-head">
-          <span className="inspector-title" title={hint ?? title}>
-            {title}
-          </span>
-          {files.length > 0 ? (
-            <div className="inspector-views" role="tablist">
-              {(["inspect", "code"] as const).map((view) => (
-                <button
-                  key={view}
-                  type="button"
-                  role="tab"
-                  aria-selected={showing === view}
-                  data-active={showing === view ? "true" : undefined}
-                  onClick={() => setShowing(view)}
-                >
-                  {view === "inspect" ? "Inspect" : "Code"}
-                </button>
-              ))}
-            </div>
-          ) : null}
-          <button
-            type="button"
-            className="inspector-toggle"
-            aria-label="Hide inspector"
-            title="Hide inspector"
-            onClick={() => setCollapsed(true)}
-          >
-            <Icon name="sidebar" />
-          </button>
-        </div>
         {files.length > 0 && showing === "code" ? (
           <>
             {/* One file is the file; several want naming, so the pane says

package/studio/src/components/Navigator.tsx CHANGED Viewed

@@ -15,6 +15,19 @@ import {Icon} from "./ui";
  * is the part a gallery cannot do at all.
  */
 const COLLAPSED_KEY = "odori-navigator-collapsed";
+const WIDTH_VAR = "--navigator-column";
+const WIDTH_KEY = "odori-navigator-width";
+/* Narrow enough for a filter box and a title, wide enough for a nested
+   category path without truncating every row. */
+const MIN = 180;
+const MAX = 420;
+const clampWidth = (value: number): number =>
+  Math.round(Math.min(Math.max(value, MIN), Math.min(MAX, window.innerWidth * 0.4)));
+const applyWidth = (value: number) => {
+  document.documentElement.style.setProperty(WIDTH_VAR, `${clampWidth(value)}px`);
+};
 export type NavigatorItem = {
   id: string;
@@ -37,7 +50,15 @@ export const Navigator = ({
   selected: string | null;
   onSelect: (id: string) => void;
 }) => {
-  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) === "true");
+  /* Closed until asked for. Studio is most often docked beside something else,
+     where the stage wants every pixel, and the list is one click and a
+     remembered choice away. Anyone who opens it keeps it open. */
+  const [collapsed, setCollapsed] = useState(() => window.localStorage.getItem(COLLAPSED_KEY) !== "false");
+  useEffect(() => {
+    const stored = Number(window.localStorage.getItem(WIDTH_KEY));
+    if (Number.isFinite(stored) && stored > 0) applyWidth(stored);
+  }, []);
   const [query, setQuery] = useState("");
   const field = useRef<HTMLInputElement>(null);
@@ -86,6 +107,43 @@ export const Navigator = ({
   return (
     <aside className="navigator" aria-label={label}>
+      {/* The mirror of the inspector's handle, on the inside edge for the same
+          reason: the pane clips its overflow, so a divider hung across the
+          border loses the clipped half of its hit area. */}
+      <div
+        className="navigator-resize"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize list"
+        onPointerDown={(event) => {
+          // Eight pixels wide, and a fast drag leaves it between events, so
+          // the window owns the move for the duration rather than the handle.
+          event.preventDefault();
+          document.body.style.userSelect = "none";
+          document.body.style.cursor = "col-resize";
+          /* The column eases when a pane is put away, and a drag writes that
+             same column many times a second. Easing it then means the track
+             is always behind the pointer while the pane's own width is not,
+             and the difference between them is a strip of empty page. */
+          document.documentElement.dataset.resizing = "";
+          const onMove = (move: PointerEvent) => applyWidth(move.clientX);
+          const onUp = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+            delete document.documentElement.dataset.resizing;
+            const width = getComputedStyle(document.documentElement).getPropertyValue(WIDTH_VAR).trim();
+            if (width) window.localStorage.setItem(WIDTH_KEY, String(Number.parseInt(width, 10)));
+          };
+          window.addEventListener("pointermove", onMove);
+          window.addEventListener("pointerup", onUp);
+        }}
+        onDoubleClick={() => {
+          document.documentElement.style.removeProperty(WIDTH_VAR);
+          window.localStorage.removeItem(WIDTH_KEY);
+        }}
+      />
       <div className="navigator-head">
         <button
           type="button"
@@ -119,7 +177,11 @@ export const Navigator = ({
           <p className="hint navigator-empty">Nothing matches {query}.</p>
         ) : (
           runs.map((run) => (
-            <div key={run.group ?? "."}>
+            /* Keyed by the first item, not by the group. A run without a group
+               used to key on a constant, so a list that goes ungrouped, then
+               grouped, then ungrouped again handed React two siblings with the
+               same key - which it is free to drop or duplicate. */
+            <div key={run.items[0].id}>
               {run.group ? <h3 className="navigator-group">{run.group}</h3> : null}
               <ul className="list">
                 {run.items.map((item) => (

package/studio/src/components/Settings.tsx ADDED Viewed

@@ -0,0 +1,109 @@
+import {useEffect, useRef, useState} from "react";
+import {Button, Icon} from "./ui";
+import {useStartSound} from "../settings";
+import {useTheme, type Theme} from "../theme";
+/**
+ * The workspace preferences, behind one control in the header.
+ *
+ * This replaced a three-button theme switcher. Theme was the only preference
+ * Studio had, so spending a permanent row of chrome on it was fine right up
+ * until there was a second one; three more buttons for sound would have made
+ * the header a settings panel that never closes. A gear says "there are
+ * choices here" in the space one of the old buttons used.
+ */
+const THEMES: Array<{id: Theme; label: string; hint: string}> = [
+  {id: "system", label: "System", hint: "Follow the operating system"},
+  {id: "light", label: "Light", hint: "Always light"},
+  {id: "dark", label: "Dark", hint: "Always dark"},
+];
+const SOUNDS = [
+  {id: "on" as const, label: "On", hint: "Play the score with the video"},
+  {id: "off" as const, label: "Off", hint: "Open every video muted"},
+];
+export const Settings = () => {
+  const [open, setOpen] = useState(false);
+  const {theme, setTheme} = useTheme();
+  const [sound, setSound] = useStartSound();
+  const wrapper = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!open) return undefined;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!wrapper.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      setOpen(false);
+      // Closing with the keyboard has to put the focus somewhere, and the
+      // control that opened the menu is the only place that is not a surprise.
+      trigger.current?.focus();
+    };
+    // Capture, so a click that also does something else still closes the menu.
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return (
+    <div className="settings" ref={wrapper}>
+      <Button
+        ref={trigger}
+        icon
+        active={open}
+        aria-label="Settings"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        title="Settings"
+        onClick={() => setOpen((value) => !value)}
+      >
+        <Icon name="settings" />
+      </Button>
+      {open ? (
+        <div className="menu settings-menu" role="menu" aria-label="Settings">
+          <p className="menu-heading">Theme</p>
+          {THEMES.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              role="menuitemradio"
+              aria-checked={theme === option.id}
+              className="menu-item"
+              data-selected={theme === option.id ? "true" : undefined}
+              onClick={() => setTheme(option.id)}
+            >
+              <span>{option.label}</span>
+              <span className="menu-hint">{option.hint}</span>
+            </button>
+          ))}
+          <p className="menu-heading">Sound</p>
+          {SOUNDS.map((option) => (
+            <button
+              key={option.id}
+              type="button"
+              role="menuitemradio"
+              aria-checked={sound === option.id}
+              className="menu-item"
+              data-selected={sound === option.id ? "true" : undefined}
+              onClick={() => setSound(option.id)}
+            >
+              <span>{option.label}</span>
+              <span className="menu-hint">{option.hint}</span>
+            </button>
+          ))}
+          {/* Changing it now would mute or unmute the video being watched,
+              which is not what a default is. */}
+          <p className="menu-note">Applies to the next video you open.</p>
+        </div>
+      ) : null}
+    </div>
+  );
+};