@slopmachine/react 0.1.9 → 0.1.12

package/src/components/SlopImage.tsx

@@ -2,18 +2,50 @@ import React, { useMemo, useState } from "react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { buildImageUrl, type SlopImageOptions } from "@slopmachine/core";
+import {
+  buildImageUrl,
+  type SlopImageOptions,
+  type ImageAspectRatio,
+} from "@slopmachine/core";
 
 // Utility for Tailwind classes
 function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-interface SlopImageProps
+export interface SlopImageProps
   extends
     Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
-    SlopImageOptions {}
+    Omit<SlopImageOptions, "aspectRatio"> {
+  /**
+   * The aspect ratio of the generated image. Defaults to "1:1".
+   */
+  aspectRatio?: ImageAspectRatio;
+  /**
+   * Custom React node to display while the image is loading.
+   * If not provided, a default spinner and shimmer effect will be shown.
+   */
+  loader?: React.ReactNode;
+}
 
+/**
+ * Renders an image generated by Slop Machine.
+ *
+ * This component automatically constructs the correct URL for the Slop Machine API,
+ * displays a loading skeleton or custom loader while fetching, and handles errors.
+ *
+ * @example
+ * ```tsx
+ * <SlopImage
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ * />
+ * ```
+ *
+ * @version 0.1.12
+ */
 export const SlopImage: React.FC<SlopImageProps> = ({
   bucketId,
   className,
@@ -23,6 +55,7 @@ export const SlopImage: React.FC<SlopImageProps> = ({
   model,
   variables = {},
   baseUrl,
+  loader,
   ...props
 }) => {
   // Construct API URL
@@ -113,97 +146,125 @@ export const SlopImage: React.FC<SlopImageProps> = ({
           overflow: "hidden",
         }}
       >
-        {/* Loading overlay */}
-        <div
-          className={cn(
-            "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
-            isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
-          )}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 10,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: "var(--muted, #f3f4f6)",
-            opacity: isLoading ? 1 : 0,
-            pointerEvents: isLoading ? "auto" : "none",
-            transition: "opacity 300ms ease-in-out",
-          }}
-        >
+        {/* Loading UI */}
+        {loader ? (
           <div
-            className="flex flex-col items-center gap-2"
+            className={cn(
+              "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
+              isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
+            )}
             style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 10,
               display: "flex",
-              flexDirection: "column",
               alignItems: "center",
-              gap: "0.5rem",
+              justifyContent: "center",
+              opacity: isLoading ? 1 : 0,
+              pointerEvents: isLoading ? "auto" : "none",
+              transition: "opacity 300ms ease-in-out",
             }}
           >
-            <svg
-              className="spinner size-6 text-muted-foreground"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
+            {loader}
+          </div>
+        ) : (
+          <>
+            {/* Loading overlay */}
+            <div
+              className={cn(
+                "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
+                isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
+              )}
               style={{
-                width: "24px",
-                height: "24px",
-                color: "var(--muted-foreground, #6b7280)",
-                animation: "slop-spin 1s linear infinite",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "var(--muted, #f3f4f6)",
+                opacity: isLoading ? 1 : 0,
+                pointerEvents: isLoading ? "auto" : "none",
+                transition: "opacity 300ms ease-in-out",
               }}
             >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-                style={{ opacity: 0.25 }}
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                style={{ opacity: 0.75 }}
-              />
-            </svg>
-            <span
-              className="text-xs text-muted-foreground"
+              <div
+                className="flex flex-col items-center gap-2"
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                }}
+              >
+                <svg
+                  className="spinner size-6 text-muted-foreground"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  style={{
+                    width: "24px",
+                    height: "24px",
+                    color: "var(--muted-foreground, #6b7280)",
+                    animation: "slop-spin 1s linear infinite",
+                  }}
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    style={{ opacity: 0.25 }}
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    style={{ opacity: 0.75 }}
+                  />
+                </svg>
+                <span
+                  className="text-xs text-muted-foreground"
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--muted-foreground, #6b7280)",
+                  }}
+                >
+                  Loading...
+                </span>
+              </div>
+            </div>
+
+            {/* Shimmer effect underneath */}
+            <div
+              className={cn(
+                "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
+                isLoading ? "opacity-100" : "opacity-0",
+              )}
               style={{
-                fontSize: "0.75rem",
-                color: "var(--muted-foreground, #6b7280)",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background:
+                  "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
+                backgroundSize: "200% 100%",
+                animation: "slop-shimmer 2s ease-in-out infinite",
+                opacity: isLoading ? 1 : 0,
+                transition: "opacity 300ms",
               }}
-            >
-              Loading...
-            </span>
-          </div>
-        </div>
-
-        {/* Shimmer effect underneath */}
-        <div
-          className={cn(
-            "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
-            isLoading ? "opacity-100" : "opacity-0",
-          )}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            background:
-              "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
-            backgroundSize: "200% 100%",
-            animation: "slop-shimmer 2s ease-in-out infinite",
-            opacity: isLoading ? 1 : 0,
-            transition: "opacity 300ms",
-          }}
-        />
+            />
+          </>
+        )}
 
         {/* Image */}
         <img

package/src/components/SlopVideo.tsx

@@ -0,0 +1,308 @@
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+import {
+  buildVideoUrl,
+  type SlopVideoOptions,
+  type VideoAspectRatio,
+} from "@slopmachine/core";
+
+// Utility for Tailwind classes
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export interface SlopVideoProps
+  extends
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "src">,
+    Omit<SlopVideoOptions, "aspectRatio"> {
+  /**
+   * The aspect ratio of the generated video. Defaults to "16:9".
+   */
+  aspectRatio?: VideoAspectRatio;
+  /**
+   * Custom React node to display while the video is loading.
+   * If not provided, a default spinner and shimmer effect will be shown.
+   */
+  loader?: React.ReactNode;
+}
+
+/**
+ * Renders a video generated by Slop Machine.
+ *
+ * This component automatically constructs the correct URL for the Slop Machine API,
+ * displays a loading skeleton or custom loader while fetching, and handles errors.
+ *
+ * @example
+ * ```tsx
+ * <SlopVideo
+ *   bucketId="my-bucket"
+ *   resultId="some-result"
+ *   aspectRatio="16:9"
+ *   className="rounded-lg"
+ *   autoPlay
+ *   loop
+ *   muted
+ * />
+ * ```
+ */
+export const SlopVideo: React.FC<SlopVideoProps> = ({
+  bucketId,
+  className,
+  aspectRatio = "16:9",
+  version,
+  resultId,
+  model,
+  variables = {},
+  duration,
+  baseUrl,
+  loader,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  ...props
+}) => {
+  // Construct API URL
+  const rawSrc = useMemo(
+    () =>
+      buildVideoUrl({
+        bucketId,
+        aspectRatio,
+        version,
+        resultId,
+        variables,
+        duration,
+        baseUrl,
+        model,
+      }),
+    [
+      bucketId,
+      aspectRatio,
+      version,
+      resultId,
+      variables,
+      duration,
+      baseUrl,
+      model,
+    ],
+  );
+
+  const [src, setSrc] = useState(rawSrc);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSrc(rawSrc);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [rawSrc]);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  if (src !== currentSrc) {
+    setCurrentSrc(src);
+    setIsLoading(true);
+  }
+
+  useEffect(() => {
+    if (!src) return;
+
+    fetch(src, { method: "HEAD" })
+      .then(async (res) => {
+        if (!res.ok) {
+          try {
+            const errRes = await fetch(src);
+            const errJson = await errRes.json();
+            console.error("SlopVideo error:", res.status, errJson.error);
+          } catch (e) {
+            // Failed to fetch or parse error details
+          }
+          setIsLoading(false);
+        }
+      })
+      .catch((err) => {
+        console.error(`Error fetching video from ${src}:`, err);
+        setIsLoading(false);
+      });
+  }, [src]);
+
+  return (
+    <>
+      <style>{`
+        @keyframes slop-shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+        @keyframes slop-spin {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `}</style>
+      <div
+        className={cn("relative overflow-hidden", className)}
+        style={{
+          aspectRatio: String(aspectRatio).replace(":", "/"),
+          backgroundColor: "var(--muted, #f3f4f6)",
+          position: "relative",
+          overflow: "hidden",
+        }}
+      >
+        {/* Loading UI */}
+        {loader ? (
+          <div
+            className={cn(
+              "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
+              isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
+            )}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 10,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: isLoading ? 1 : 0,
+              pointerEvents: isLoading ? "auto" : "none",
+              transition: "opacity 300ms ease-in-out",
+            }}
+          >
+            {loader}
+          </div>
+        ) : (
+          <>
+            {/* Loading overlay */}
+            <div
+              className={cn(
+                "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
+                isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
+              )}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 10,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "var(--muted, #f3f4f6)",
+                opacity: isLoading ? 1 : 0,
+                pointerEvents: isLoading ? "auto" : "none",
+                transition: "opacity 300ms ease-in-out",
+              }}
+            >
+              <div
+                className="flex flex-col items-center gap-2"
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                }}
+              >
+                <svg
+                  className="spinner size-6 text-muted-foreground"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  style={{
+                    width: "24px",
+                    height: "24px",
+                    color: "var(--muted-foreground, #6b7280)",
+                    animation: "slop-spin 1s linear infinite",
+                  }}
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    style={{ opacity: 0.25 }}
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    style={{ opacity: 0.75 }}
+                  />
+                </svg>
+                <span
+                  className="text-xs text-muted-foreground"
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--muted-foreground, #6b7280)",
+                  }}
+                >
+                  Loading...
+                </span>
+              </div>
+            </div>
+
+            {/* Shimmer effect underneath */}
+            <div
+              className={cn(
+                "shimmer-effect absolute inset-0 bg-gradient-to-r from-muted via-muted/50 to-muted",
+                isLoading ? "opacity-100" : "opacity-0",
+              )}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background:
+                  "linear-gradient(90deg, var(--muted, #f3f4f6) 0%, var(--muted-foreground, #e5e7eb) 50%, var(--muted, #f3f4f6) 100%)",
+                backgroundSize: "200% 100%",
+                animation: "slop-shimmer 2s ease-in-out infinite",
+                opacity: isLoading ? 1 : 0,
+                transition: "opacity 300ms",
+              }}
+            />
+          </>
+        )}
+
+        {/* Video */}
+        <video
+          key={src}
+          ref={videoRef}
+          src={src}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          playsInline={playsInline}
+          onLoadedData={() => setIsLoading(false)}
+          onError={() => setIsLoading(false)}
+          className={cn(
+            "h-full w-full object-cover transition-opacity duration-500",
+            isLoading ? "opacity-0" : "opacity-100",
+          )}
+          style={{
+            height: "100%",
+            width: "100%",
+            objectFit: "cover",
+            transition: "opacity 500ms",
+            opacity: isLoading ? 0 : 1,
+          }}
+          {...props}
+        />
+      </div>
+    </>
+  );
+};

package/src/index.ts

@@ -1 +1,8 @@
-export { SlopImage } from './components/SlopImage';
+export { SlopImage, type SlopImageProps } from "./components/SlopImage";
+export { SlopVideo, type SlopVideoProps } from "./components/SlopVideo";
+export type {
+  ImageAspectRatio,
+  VideoAspectRatio,
+  SlopImageOptions,
+  SlopVideoOptions,
+} from "@slopmachine/core";

package/tsconfig.json

@@ -21,6 +21,7 @@
     "noFallthroughCasesInSwitch": true,
 
     "declaration": true,
+    "declarationMap": true,
     "baseUrl": "."
   },
   "include": ["src"],

package/tsup.config.ts

@@ -1,9 +1,10 @@
-import { defineConfig } from 'tsup';
+import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
   dts: true,
+  sourcemap: true,
   clean: true,
-  external: ['react', 'react-dom'],
+  external: ["react", "react-dom"],
 });