@bygghammar/cms-platform 0.15.0 → 0.17.0

package/src/media/library-types.ts

@@ -0,0 +1,22 @@
+/** Shapes the shared Media Library screen needs from the host. */
+
+export type MediaLibraryItem = {
+  path: string;
+  name: string;
+  url: string;
+  size: number;
+  contentType?: string | null;
+  uploadedAt?: string | null;
+  updatedAt?: string | null;
+  uploadedBy?: string | null;
+};
+
+export type MediaTrashItem = {
+  id: string;
+  originalPath: string;
+  url: string;
+  size: number;
+  contentType?: string | null;
+  deletedAt: string;
+  deletedByEmail?: string | null;
+};

package/src/media/pick-video-poster.tsx

@@ -0,0 +1,128 @@
+/**
+ * Imperative poster-frame picker for video uploads.
+ *
+ * Mounts a small dialog on demand so any upload surface (Media Library, block
+ * media picker) can ask the editor which frame to use as the video poster.
+ * Resolves with the chosen time in seconds, or `null` to keep the automatic
+ * frame (~10% into the clip).
+ */
+import { useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+function formatTime(s: number) {
+  if (!Number.isFinite(s)) return "0:00";
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${String(sec).padStart(2, "0")}`;
+}
+
+function PosterDialog({ file, onDone }: { file: File; onDone: (seconds: number | null) => void }) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [url] = useState(() => URL.createObjectURL(file));
+  const [duration, setDuration] = useState(0);
+  const [time, setTime] = useState(0);
+
+  useEffect(() => () => URL.revokeObjectURL(url), [url]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onDone(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onDone]);
+
+  const seek = (v: number) => {
+    setTime(v);
+    if (videoRef.current) videoRef.current.currentTime = v;
+  };
+
+  return (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center bg-ink/70 p-4">
+      <div className="w-full max-w-2xl border border-ink/15 bg-white shadow-xl">
+        <header className="flex items-center justify-between border-b border-ink/10 px-4 py-3">
+          <div>
+            <h2 className="text-sm font-medium text-ink">Choose poster frame</h2>
+            <p className="text-[0.7rem] text-ink/55">{file.name}</p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onDone(null)}
+            className="text-[0.7rem] uppercase tracking-[0.18em] text-ink/50 hover:text-ink"
+          >
+            Cancel
+          </button>
+        </header>
+
+        <div className="space-y-3 p-4">
+          <video
+            ref={videoRef}
+            src={url}
+            muted
+            playsInline
+            preload="auto"
+            className="max-h-[50vh] w-full bg-ink/5 object-contain"
+            onLoadedMetadata={(e) => {
+              const v = e.currentTarget;
+              const d = Number.isFinite(v.duration) ? v.duration : 0;
+              setDuration(d);
+              const start = Math.min(d, d * 0.1);
+              setTime(start);
+              v.currentTime = start;
+            }}
+          />
+          <input
+            type="range"
+            min={0}
+            max={Math.max(0.1, duration)}
+            step={0.05}
+            value={time}
+            onChange={(e) => seek(Number(e.target.value))}
+            className="w-full accent-sea"
+          />
+          <div className="flex items-center justify-between text-[0.72rem] text-ink/60">
+            <span>
+              {formatTime(time)} / {formatTime(duration)}
+            </span>
+            <span>Drag the slider to the frame you want as the poster image.</span>
+          </div>
+        </div>
+
+        <footer className="flex justify-end gap-2 border-t border-ink/10 px-4 py-3">
+          <button
+            type="button"
+            onClick={() => onDone(null)}
+            className="border border-ink/15 px-3 py-1.5 text-sm hover:border-ink/40"
+          >
+            Use automatic frame
+          </button>
+          <button
+            type="button"
+            onClick={() => onDone(time)}
+            className="bg-ink px-4 py-1.5 text-sm text-paper hover:bg-sea"
+          >
+            Use this frame
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+/** Ask the editor to pick a poster frame. Returns seconds, or null for auto. */
+export function pickVideoPoster(file: File): Promise<number | null> {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    const done = (seconds: number | null) => {
+      resolve(seconds);
+      setTimeout(() => {
+        root.unmount();
+        host.remove();
+      }, 0);
+    };
+    root.render(<PosterDialog file={file} onDone={done} />);
+  });
+}