@kolkrabbi/kol-component 0.105.0 → 0.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.105.0",
+  "version": "0.106.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -142,6 +142,7 @@ export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'
 export { default as KindPreview } from './molecules/KindPreview.jsx'
+export { default as AudioPreview, AudioTile, VideoTile, formatLength } from './molecules/AudioPreview.jsx'
 export { kindOf, extOf, isSystemFile, KINDS, KIND_LABEL } from './utilities/mediaKinds.js'
 export { default as markdownToHtml, inlineToHtml } from './utilities/markdownToHtml.js'
 export { default as RecordManager } from './organisms/RecordManager.jsx'

package/src/molecules/AudioPreview.jsx

@@ -0,0 +1,123 @@
+/* eslint-disable react-hooks/refs -- floating-ui's `refs.setReference` is a callback ref, not a ref read; the DS Tooltip wires it the same way */
+import { useRef, useState } from 'react';
+import IconFrame from '../atoms/IconFrame.jsx';
+import Slider from './Slider.jsx';
+import { usePopover, PopoverPanel } from '../utilities/Popover.jsx';
+
+/* taxonomy-ok: molecule — nests IconFrame (atom) + Slider / PopoverPanel (relative). */
+
+/**
+ * AudioPreview · AudioTile · VideoTile — kol-r2b2's `AudioPreview.jsx`, promoted
+ * verbatim 2026-08-27 (ColumnBrowserMediaFacts): players composed from DS parts
+ * (IconFrame · Slider · Popover) — the DS AudioPlayer is a native <audio controls>,
+ * whose one-row layout can't be reshaped. Finder model (user ruling 2026-08-27):
+ * the COLUMN gets a square tile with one play/pause control and nothing else —
+ * `AudioTile` / `VideoTile` (KindPreview's audio and video branches); timeline +
+ * volume belong to the OVERLAY / Quick Look — `AudioPreview` (play/pause ·
+ * Slider seek with an m:ss readout · volume behind `slider-01`, a vertical
+ * `slider-black` range in a PopoverPanel, placement top; no title line — the
+ * name sits in the facts).
+ *
+ * @param {string}   src         the media URL
+ * @param {string}   poster      VideoTile — the poster URL
+ * @param {Function} onDuration  AudioPreview — (seconds) => void once metadata lands
+ * @param {string}   className   AudioPreview — wrapper classes (the width is the consumer's)
+ */
+export const formatLength = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+const fmt = formatLength;
+
+function useAudio(onDuration) {
+  const ref = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [time, setTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const toggle = () => (playing ? ref.current.pause() : ref.current.play());
+  const element = (src) => (
+    <audio
+      ref={ref}
+      src={src}
+      preload="metadata"
+      onPlay={() => setPlaying(true)}
+      onPause={() => setPlaying(false)}
+      onEnded={() => setPlaying(false)}
+      onTimeUpdate={(e) => setTime(e.target.currentTime)}
+      onLoadedMetadata={(e) => { setDuration(e.target.duration); onDuration?.(e.target.duration); }}
+    />
+  );
+  return { ref, playing, time, duration, toggle, element, setTime };
+}
+
+export function AudioTile({ src }) {
+  const { playing, toggle, element } = useAudio();
+  return (
+    <div className="w-full aspect-square flex items-center justify-center">
+      {element(src)}
+      <IconFrame name={playing ? 'pause' : 'play'} variant="secondary" size="lg" onClick={toggle} />
+    </div>
+  );
+}
+
+// Video tile: covers the square, one play/pause control — native controls stay in the overlay.
+export function VideoTile({ src, poster }) {
+  const ref = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  return (
+    <div className="relative w-full aspect-square rounded overflow-hidden">
+      <video
+        ref={ref}
+        src={src}
+        poster={poster}
+        playsInline
+        preload="metadata"
+        className="w-full h-full object-cover"
+        onPlay={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => setPlaying(false)}
+      />
+      <div className="absolute inset-0 flex items-center justify-center">
+        <IconFrame name={playing ? 'pause' : 'play'} variant="secondary" size="lg" onClick={() => (playing ? ref.current.pause() : ref.current.play())} />
+      </div>
+    </div>
+  );
+}
+
+export default function AudioPreview({ src, className = '', onDuration }) {
+  const { ref, playing, time, duration, toggle, element, setTime } = useAudio(onDuration);
+  const [volume, setVolume] = useState(100);
+  const [open, setOpen] = useState(false);
+  const pop = usePopover({ open, onOpenChange: setOpen, placement: 'top' });
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      {element(src)}
+      <IconFrame name={playing ? 'pause' : 'play'} variant="ghost" size="sm" onClick={toggle} />
+      <Slider
+        className="flex-1"
+        min={0}
+        max={duration || 0}
+        step={0.1}
+        value={time}
+        onChange={(v) => { ref.current.currentTime = v; setTime(v); }}
+        formatValue={fmt}
+        displayWidth={5}
+      />
+      <span ref={pop.refs.setReference} {...pop.getReferenceProps()} className="inline-flex">
+        <IconFrame name="slider-01" variant={open ? 'secondary' : 'ghost'} size="sm" onClick={() => {}} />
+      </span>
+      <PopoverPanel popover={pop} className="p-2">
+        {/* DS track class on a native range, turned upright: the one thing the DS Slider can't do. */}
+        <div className="w-6 h-24 flex items-center justify-center">
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={volume}
+            onChange={(e) => { const v = Number(e.target.value); ref.current.volume = v / 100; setVolume(v); }}
+            className="slider-black cursor-pointer w-24 -rotate-90"
+            aria-label="Volume"
+          />
+        </div>
+      </PopoverPanel>
+    </div>
+  );
+}

package/src/molecules/KindPreview.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import AudioPlayer from '../atoms/AudioPlayer.jsx'
+import { AudioTile, VideoTile } from './AudioPreview.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import CodeBlock from './CodeBlock.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
@@ -13,7 +13,10 @@ import markdownToHtml from '../utilities/markdownToHtml.js'
  * promoted 2026-08-27 (SettingsPanelChromeAndColumnPreview). Before it, anything
  * that was not an image or a video showed a grey box with the word "text".
  * HLS → `HlsVideo` (inert — the DS's background-video atom, preview only),
- * audio → `AudioPlayer`, markdown → rendered prose in `.kol-prose`
+ * video → `VideoTile` and audio → `AudioTile` (ColumnBrowserMediaFacts
+ * 2026-08-27 — the square column tile with one play/pause control; no Figure, no
+ * border — `VideoBlock`'s Figure border is why kol-r2b2 bypassed it; the overlay
+ * player is `AudioPreview`), markdown → rendered prose in `.kol-prose`
  * (markdownToHtml, KindPreviewMarkdown 2026-08-27), json / yaml / text / code →
  * `CodeBlock` (language by kind or extension), the rest
  * → `AssetPlaceholder`. Images are the caller's (ColumnBrowser keeps its own
@@ -71,13 +74,8 @@ export default function KindPreview({ o, urlOf = (x) => x.url, poster, kindOf =
       </div>
     )
   }
-  if (kind === 'audio') {
-    return (
-      <div className="flex justify-center p-8">
-        <AudioPlayer src={url} label={name} className="items-center w-[420px] max-w-full" />
-      </div>
-    )
-  }
+  if (kind === 'video') return <VideoTile src={url} poster={poster} />
+  if (kind === 'audio') return <AudioTile src={url} />
   if (isText) {
     if (loading) return <span className="kol-mono-12 text-meta">Loading…</span>
     if (error) return <span className="kol-mono-12 text-ui-error">Couldn’t load: {error}</span>

package/src/organisms/ColumnBrowser.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import KindPreview from '../molecules/KindPreview.jsx'
+import { formatLength } from '../molecules/AudioPreview.jsx'
 import { kindOf as dsKindOf, KIND_LABEL as DS_KIND_LABEL } from '../utilities/mediaKinds.js'
 
 /**
@@ -43,7 +44,7 @@ import { kindOf as dsKindOf, KIND_LABEL as DS_KIND_LABEL } from '../utilities/me
  * @param {Object}   kindLabel    kind → label shown when there is no visual preview
  * @param {Function} formatSize   (bytes) => string
  * @param {Function} partition    (objects, level) => { folders: string[], files: object[] }
- * @param {Function} renderPreview  (file) => ReactNode — replaces the preview column's media frame (the facts stay); without it images render the organism's <img>, everything else the DS KindPreview
+ * @param {Function} renderPreview  (file) => ReactNode — replaces the preview column's media frame (the facts stay — Dimensions and Length are read off whatever <img> / <video> / <audio> the node loads); without it images render the organism's <img>, everything else the DS KindPreview
  * @param {string}   className    extra classes on the browser
  */
 
@@ -96,14 +97,21 @@ function Row({ icon, label, active, cursor = false, trailing, onClick, muted = f
 }
 
 function Preview({ o, urlOf, kindOf, kindLabel, formatSize, renderPreview }) {
-  // Pixel size comes from the loaded image itself — the bucket stores none.
+  // Pixel size and length come from the loaded media itself — the bucket stores
+  // none. `{ w, h }` off an <img> load, `{ w, h, len }` off a <video>'s and
+  // `{ len }` off an <audio>'s loadedmetadata (ColumnBrowserMediaFacts, kol-r2b2
+  // 2026-08-27 — "missing pixel dimensions and length in info").
   const [dims, setDims] = useState(null)
+  const kind = kindOf(o)
   const src = isImage(o) ? urlOf?.(o) : null
+  const sized = src || kind === 'video'
+  const timed = kind === 'video' || kind === 'audio'
   const facts = [
-    ['Kind', kindLabel[kindOf(o)] || 'file'],
+    ['Kind', kindLabel[kind] || 'file'],
     ['Type', o.contentType || '—'],
     ['Size', formatSize(o.size)],
-    ...(src ? [['Dimensions', dims ? `${dims.w} × ${dims.h} px` : '…']] : []),
+    ...(sized ? [['Dimensions', dims?.w ? `${dims.w} × ${dims.h} px` : '…']] : []),
+    ...(timed ? [['Length', dims?.len != null ? formatLength(dims.len) : '…']] : []),
     ['Date', o.uploaded ? new Date(o.uploaded).toISOString().slice(0, 10) : '—'],
   ]
   return (
@@ -111,7 +119,9 @@ function Preview({ o, urlOf, kindOf, kindLabel, formatSize, renderPreview }) {
       {/* the media frame: an image is the organism's own <img> (it reads the
         * dimensions); anything else is `renderPreview(o)` or the DS KindPreview
         * (video · audio · code · text — SettingsPanelChromeAndColumnPreview,
-        * 2026-08-27). Dimensions also come off any <img> a custom node loads. */}
+        * 2026-08-27). Dimensions and Length also come off any <img> / <video> /
+        * <audio> a custom node loads — captured on the frame, so consumer
+        * `renderPreview` nodes count. */}
       {src && !renderPreview ? (
         <div className="w-full aspect-square bg-fg-04 rounded flex items-center justify-center overflow-hidden">
           <img
@@ -126,6 +136,11 @@ function Preview({ o, urlOf, kindOf, kindLabel, formatSize, renderPreview }) {
         <div
           className="kol-column-browser-media w-full min-h-[160px] max-h-[60vh] overflow-auto rounded bg-fg-04 flex items-center justify-center"
           onLoadCapture={(e) => { if (e.target?.tagName === 'IMG') setDims({ w: e.target.naturalWidth, h: e.target.naturalHeight }) }}
+          onLoadedMetadataCapture={(e) => {
+            const t = e.target
+            if (t?.tagName === 'VIDEO') setDims({ w: t.videoWidth, h: t.videoHeight, len: t.duration })
+            else if (t?.tagName === 'AUDIO') setDims({ len: t.duration })
+          }}
         >
           {renderPreview ? renderPreview(o) : <KindPreview o={o} urlOf={urlOf} kindOf={kindOf} kindLabel={kindLabel} />}
         </div>