Add Z-AMPP UI: screens-asset + screens-projects: screens-asset.jsx

services/web-ui/public/screens-asset.jsx

@@ -0,0 +1,400 @@
+// screens-asset.jsx — asset detail (Frame.io-style player, filmstrip, comments)
+
+const { COMMENTS: SEED_COMMENTS } = window.ZAMPP_DATA;
+
+function AssetDetail({ asset, onClose }) {
+  const [playing, setPlaying] = React.useState(false);
+  const [currentMs, setCurrentMs] = React.useState(720000);
+  const [tab, setTab] = React.useState("comments");
+  const [showResolved, setShowResolved] = React.useState(false);
+  const [comments, setComments] = React.useState(SEED_COMMENTS);
+  const [newComment, setNewComment] = React.useState("");
+
+  const totalMs = parseDuration(asset.duration);
+
+  React.useEffect(() => {
+    if (!playing) return;
+    const i = setInterval(() => {
+      setCurrentMs(t => {
+        const next = t + 100;
+        if (next >= totalMs) { setPlaying(false); return totalMs; }
+        return next;
+      });
+    }, 100);
+    return () => clearInterval(i);
+  }, [playing, totalMs]);
+
+  const seek = (ms) => setCurrentMs(Math.max(0, Math.min(totalMs, ms)));
+  const addComment = () => {
+    if (!newComment.trim()) return;
+    const t = msToTimecode(currentMs);
+    setComments(c => [...c, {
+      id: `n${Date.now()}`,
+      who: "Zach Gaetano",
+      avatar: "ZG",
+      time: t,
+      real: "just now",
+      text: newComment,
+      resolved: false,
+      frame: Math.floor(currentMs / 1000 * 30),
+    }]);
+    setNewComment("");
+  };
+
+  const visibleComments = comments.filter(c => showResolved || !c.resolved);
+
+  return (
+    <div className="asset-detail fade-in">
+      <div className="asset-detail-header">
+        <button className="icon-btn" onClick={onClose}><Icon name="arrowLeft" /></button>
+        <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span style={{ fontWeight: 600, fontSize: 14 }}>{asset.name}</span>
+            <StatusDot status={asset.status} />
+            <span className="badge accent">v3</span>
+          </div>
+          <div style={{ fontSize: 11.5, color: "var(--text-3)", display: "flex", gap: 6 }}>
+            <span>{asset.project}</span><span>·</span><span>{asset.bin}</span><span>·</span><span>updated {asset.updated}</span>
+          </div>
+        </div>
+        <div style={{ flex: 1 }} />
+        <button className="btn ghost sm"><Icon name="share" />Share</button>
+        <button className="btn ghost sm"><Icon name="download" />Download</button>
+        <button className="btn subtle sm"><Icon name="check" />Approve</button>
+        <button className="icon-btn"><Icon name="more" /></button>
+      </div>
+
+      <div className="asset-detail-body">
+        <div className="player-col">
+          <div className="player">
+            <div className="player-canvas">
+              <FauxFrame seed={asset.seed || 1} />
+              <div className="scanlines" />
+              {!playing && (
+                <button className="player-play-overlay" onClick={() => setPlaying(true)}>
+                  <Icon name="play" size={28} />
+                </button>
+              )}
+              <div className="player-overlay-markers">
+                {visibleComments
+                  .filter(c => Math.abs(parseDuration(c.time) - currentMs) < 200)
+                  .map(c => (
+                    <div key={c.id} className="player-pin">
+                      <div className="player-pin-avatar">{c.avatar}</div>
+                      <div className="player-pin-bubble">{c.text}</div>
+                    </div>
+                  ))}
+              </div>
+              {asset.status === "live" && (
+                <div style={{ position: "absolute", top: 12, left: 12 }}>
+                  <span className="badge live">LIVE · REC</span>
+                </div>
+              )}
+              <div className="player-tc">
+                <span className="mono">{msToTimecode(currentMs)}</span>
+                <span style={{ opacity: 0.5 }}> / {asset.duration}</span>
+              </div>
+            </div>
+
+            <div className="player-controls">
+              <button className="icon-btn" onClick={() => setPlaying(p => !p)}>
+                <Icon name={playing ? "pause" : "play"} size={14} />
+              </button>
+              <span className="mono" style={{ fontSize: 11.5, color: "var(--text-2)", minWidth: 70 }}>{msToTimecode(currentMs)}</span>
+              <PlaybackBar current={currentMs} total={totalMs} onSeek={seek} comments={visibleComments} />
+              <span className="mono" style={{ fontSize: 11.5, color: "var(--text-3)", minWidth: 70, textAlign: "right" }}>{asset.duration}</span>
+              <div style={{ width: 1, height: 18, background: "var(--border-strong)" }} />
+              <button className="icon-btn"><Icon name="audio" size={14} /></button>
+              <button className="icon-btn"><Icon name="layout" size={14} /></button>
+              <button className="icon-btn"><Icon name="externalLink" size={14} /></button>
+            </div>
+
+            <FilmStrip seed={asset.seed || 1} current={currentMs} total={totalMs} onSeek={seek} comments={visibleComments} />
+          </div>
+
+          <div className="asset-detail-tabs">
+            <button className={tab === "comments" ? "active" : ""} onClick={() => setTab("comments")}>
+              Comments <span className="count">{comments.length}</span>
+            </button>
+            <button className={tab === "versions" ? "active" : ""} onClick={() => setTab("versions")}>
+              Versions <span className="count">3</span>
+            </button>
+            <button className={tab === "metadata" ? "active" : ""} onClick={() => setTab("metadata")}>
+              Metadata
+            </button>
+            <button className={tab === "audio" ? "active" : ""} onClick={() => setTab("audio")}>
+              Audio
+            </button>
+            <button className={tab === "activity" ? "active" : ""} onClick={() => setTab("activity")}>
+              Activity
+            </button>
+            <div style={{ flex: 1 }} />
+            {tab === "comments" && (
+              <label className="tiny-toggle">
+                <input type="checkbox" checked={showResolved} onChange={e => setShowResolved(e.target.checked)} /> Show resolved
+              </label>
+            )}
+          </div>
+
+          <div className="asset-detail-content">
+            {tab === "comments" && (
+              <CommentsList comments={visibleComments} onSeek={(c) => seek(parseDuration(c.time))} onResolve={(id) => {
+                setComments(cs => cs.map(c => c.id === id ? { ...c, resolved: !c.resolved } : c));
+              }} />
+            )}
+            {tab === "versions" && <VersionsTab />}
+            {tab === "metadata" && <MetadataTab asset={asset} />}
+            {tab === "audio" && <AudioTab asset={asset} />}
+            {tab === "activity" && <AssetActivityTab />}
+          </div>
+        </div>
+
+        <div className="comment-composer-col">
+          <CommentComposer
+            asset={asset}
+            currentMs={currentMs}
+            value={newComment}
+            onChange={setNewComment}
+            onSubmit={addComment}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PlaybackBar({ current, total, onSeek, comments }) {
+  const ref = React.useRef(null);
+  const handle = (e) => {
+    const r = ref.current.getBoundingClientRect();
+    const p = (e.clientX - r.left) / r.width;
+    onSeek(Math.max(0, Math.min(1, p)) * total);
+  };
+  const pct = (current / total) * 100;
+  return (
+    <div className="playback-bar" ref={ref} onClick={handle}>
+      <div className="playback-fill" style={{ width: `${pct}%` }} />
+      <div className="playback-handle" style={{ left: `${pct}%` }} />
+      {comments.map(c => {
+        const x = (parseDuration(c.time) / total) * 100;
+        return (
+          <div
+            key={c.id}
+            className={`playback-marker ${c.resolved ? "resolved" : ""}`}
+            style={{ left: `${x}%` }}
+            data-tip={`${c.who}: ${c.text.slice(0, 40)}…`}
+            onClick={(e) => { e.stopPropagation(); onSeek(parseDuration(c.time)); }}
+          >
+            <span className="marker-avatar">{c.avatar}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function FilmStrip({ seed, current, total, onSeek, comments }) {
+  const ref = React.useRef(null);
+  const frames = 28;
+  const handle = (e) => {
+    const r = ref.current.getBoundingClientRect();
+    onSeek(((e.clientX - r.left) / r.width) * total);
+  };
+  return (
+    <div className="filmstrip-wrap">
+      <div className="filmstrip" ref={ref} onClick={handle}>
+        {Array.from({ length: frames }).map((_, i) => (
+          <div key={i} className="film-frame" style={{ background: window.ZAMPP_DATA.thumbGrad((seed + i) % 11) }}>
+            <FauxFrame seed={(seed + i) % 6} />
+          </div>
+        ))}
+        <div className="filmstrip-playhead" style={{ left: `${(current / total) * 100}%` }} />
+        {comments.map(c => {
+          const x = (parseDuration(c.time) / total) * 100;
+          return (
+            <div key={c.id} className={`filmstrip-pin ${c.resolved ? "resolved" : ""}`} style={{ left: `${x}%` }}
+              data-tip={`${c.who} @ ${c.time}`}>
+              <span className="filmstrip-pin-avatar">{c.avatar}</span>
+            </div>
+          );
+        })}
+      </div>
+      <div className="filmstrip-tc">
+        {[0, 0.25, 0.5, 0.75, 1].map(p => (
+          <span key={p} className="mono">{msToTimecode(p * total)}</span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CommentsList({ comments, onSeek, onResolve }) {
+  if (comments.length === 0) {
+    return <div style={{ padding: 40, textAlign: "center", color: "var(--text-3)" }}>No comments yet.</div>;
+  }
+  return (
+    <div className="comments-list">
+      {comments.map(c => (
+        <div key={c.id} className={`comment ${c.resolved ? "resolved" : ""}`}>
+          <div className="comment-avatar avatar" style={{ background: avatarColor(c.avatar) }}>{c.avatar}</div>
+          <div className="comment-body">
+            <div className="comment-head">
+              <span className="comment-who">{c.who}</span>
+              <button className="comment-time" onClick={() => onSeek(c)}><Icon name="clock" size={10} />{c.time}</button>
+              <span className="comment-when">{c.real}</span>
+              <div style={{ flex: 1 }} />
+              <button className="comment-action" data-tip={c.resolved ? "Reopen" : "Resolve"} onClick={() => onResolve(c.id)}>
+                <Icon name={c.resolved ? "refresh" : "check"} size={12} />
+              </button>
+            </div>
+            <div className="comment-text">{c.text}</div>
+            {c.resolved && <div className="comment-resolved">✓ Resolved</div>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CommentComposer({ asset, currentMs, value, onChange, onSubmit }) {
+  return (
+    <div className="comment-composer">
+      <div className="composer-head">
+        <span style={{ fontWeight: 600, fontSize: 12 }}>Reviewers</span>
+        <div className="avatar-stack">
+          {["KM", "ZG", "MO", "JT"].map((a, i) => (
+            <div key={i} className="avatar" style={{ background: avatarColor(a), width: 22, height: 22, fontSize: 10 }}>{a}</div>
+          ))}
+          <button className="add-reviewer" data-tip="Add reviewer"><Icon name="plus" size={11} /></button>
+        </div>
+      </div>
+      <div className="composer-tag">
+        <span className="badge accent">@ {msToTimecode(currentMs)}</span>
+        <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-3)" }}>Drawing tools <Icon name="editor" size={10} /></span>
+      </div>
+      <textarea
+        className="composer-input"
+        placeholder="Leave a comment at this timecode…"
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        onKeyDown={e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) onSubmit(); }}
+      />
+      <div className="composer-bar">
+        <div className="composer-tools">
+          <button className="icon-btn"><Icon name="image" size={13} /></button>
+          <button className="icon-btn"><Icon name="link" size={13} /></button>
+          <button className="icon-btn"><Icon name="layers" size={13} /></button>
+        </div>
+        <span style={{ flex: 1 }} />
+        <span style={{ fontSize: 10.5, color: "var(--text-3)" }}>⌘↵ to send</span>
+        <button className="btn primary sm" onClick={onSubmit} disabled={!value.trim()}>Comment</button>
+      </div>
+    </div>
+  );
+}
+
+function VersionsTab() {
+  const versions = [
+    { v: "v3", current: true, by: "Kira Morales", when: "1h ago", note: "Color graded for sponsor compliance" },
+    { v: "v2", by: "Zach Gaetano", when: "yesterday", note: "Updated lower thirds, fixed audio dip" },
+    { v: "v1", by: "Jules Tran", when: "2d ago", note: "Initial edit from Stage_Cam_A" },
+  ];
+  return (
+    <div className="versions-list">
+      {versions.map(v => (
+        <div key={v.v} className="version-row">
+          <div className="version-thumb"><FauxFrame seed={Math.random() * 6 | 0} /></div>
+          <div style={{ flex: 1 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span style={{ fontWeight: 600 }}>{v.v}</span>
+              {v.current && <span className="badge success">Current</span>}
+            </div>
+            <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{v.by} · {v.when}</div>
+            <div style={{ fontSize: 12.5, marginTop: 4, color: "var(--text-2)" }}>{v.note}</div>
+          </div>
+          <button className="btn ghost sm">Compare</button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MetadataTab({ asset }) {
+  const rows = [
+    { k: "Filename", v: asset.name },
+    { k: "Duration", v: asset.duration },
+    { k: "Resolution", v: asset.res },
+    { k: "Frame rate", v: `${asset.fps} fps` },
+    { k: "Codec", v: asset.codec },
+    { k: "File size", v: asset.size },
+    { k: "Color space", v: "Rec. 709" },
+    { k: "Bit depth", v: "10-bit" },
+    { k: "Audio channels", v: "2.0 stereo" },
+    { k: "Audio sample rate", v: "48 kHz" },
+    { k: "Storage path", v: "s3://dragonmam/projects/protour/stage_a/master_001.mov" },
+    { k: "Checksum (xxh3)", v: "f4a8c2e9b15d3a07" },
+  ];
+  return (
+    <div className="meta-table">
+      {rows.map(r => (
+        <div key={r.k} className="meta-row">
+          <div className="meta-k">{r.k}</div>
+          <div className="meta-v">{r.v}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AudioTab({ asset }) {
+  return (
+    <div style={{ padding: "16px 0" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
+        <span style={{ fontSize: 12, fontWeight: 600 }}>Stereo Mix</span>
+        <span className="badge neutral">L</span>
+        <span className="badge neutral">R</span>
+      </div>
+      <div style={{ background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
+        <Waveform seed={3} color="var(--accent)" />
+        <Waveform seed={7} color="var(--purple)" />
+      </div>
+      <div style={{ marginTop: 16, fontSize: 12, color: "var(--text-3)" }}>
+        Loudness <span style={{ color: "var(--text-1)", marginLeft: 8 }}>-14.2 LUFS</span>
+        <span style={{ marginLeft: 24 }}>True peak <span style={{ color: "var(--text-1)", marginLeft: 8 }}>-1.4 dBTP</span></span>
+      </div>
+    </div>
+  );
+}
+
+function AssetActivityTab() {
+  return (
+    <div className="activity-feed" style={{ border: 0, background: "transparent" }}>
+      {window.ZAMPP_DATA.ACTIVITY.slice(0, 6).map(a => (
+        <div key={a.id} className="activity-row" style={{ paddingLeft: 0, paddingRight: 0 }}>
+          <div className={`activity-icon ${a.kind}`}><Icon name="clock" size={12} /></div>
+          <div className="activity-text"><strong>{a.who}</strong> {a.what} <span className="target">{a.target}</span></div>
+          <div className="activity-time">{a.time}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function parseDuration(d) {
+  const [h, m, s] = d.split(":").map(Number);
+  return ((h * 60 + m) * 60 + s) * 1000;
+}
+function msToTimecode(ms) {
+  const total = Math.floor(ms / 1000);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+function avatarColor(initials) {
+  let h = 0;
+  for (const c of initials) h = (h * 31 + c.charCodeAt(0)) & 0xff;
+  return `linear-gradient(135deg, hsl(${h % 360} 60% 50%), hsl(${(h + 60) % 360} 60% 45%))`;
+}
+
+Object.assign(window, { AssetDetail, msToTimecode, parseDuration, avatarColor });