@slopmachine/react 0.1.10 → 0.1.13

package/src/components/SlopImage.tsx

@@ -2,20 +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.13
+ */
 export const SlopImage: React.FC<SlopImageProps> = ({
   bucketId,
   className,
@@ -107,45 +137,23 @@ export const SlopImage: React.FC<SlopImageProps> = ({
           }
         }
       `}</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={className} style={props.style}>
+        <div
+          className="slop-wrapper relative overflow-hidden w-full h-full"
+          style={{
+            aspectRatio: String(aspectRatio).replace(":", "/"),
+            backgroundColor: "var(--muted, #f3f4f6)",
+            position: "relative",
+            overflow: "hidden",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          {/* Loading UI */}
+          {loader ? (
             <div
               className={cn(
-                "absolute inset-0 z-10 flex items-center justify-center bg-muted transition-opacity duration-300",
+                "absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300",
                 isLoading ? "opacity-100" : "opacity-0 pointer-events-none",
               )}
               style={{
@@ -158,104 +166,130 @@ export const SlopImage: React.FC<SlopImageProps> = ({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                backgroundColor: "var(--muted, #f3f4f6)",
                 opacity: isLoading ? 1 : 0,
                 pointerEvents: isLoading ? "auto" : "none",
                 transition: "opacity 300ms ease-in-out",
               }}
             >
+              {loader}
+            </div>
+          ) : (
+            <>
+              {/* Loading overlay */}
               <div
-                className="flex flex-col items-center gap-2"
+                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",
-                  flexDirection: "column",
                   alignItems: "center",
-                  gap: "0.5rem",
+                  justifyContent: "center",
+                  backgroundColor: "var(--muted, #f3f4f6)",
+                  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"
+                <div
+                  className="flex flex-col items-center gap-2"
                   style={{
-                    width: "24px",
-                    height: "24px",
-                    color: "var(--muted-foreground, #6b7280)",
-                    animation: "slop-spin 1s linear infinite",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: "0.5rem",
                   }}
                 >
-                  <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>
+                  <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>
-            </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
-          key={src}
-          src={src}
-          alt={alt}
-          onLoad={() => setIsLoading(false)}
-          onError={() => setIsLoading(false)}
-          className={cn(
-            "h-full w-full object-cover transition-opacity duration-500",
-            isLoading ? "opacity-0" : "opacity-100",
+              {/* 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",
+                }}
+              />
+            </>
           )}
-          style={{
-            height: "100%",
-            width: "100%",
-            objectFit: "cover",
-            transition: "opacity 500ms",
-            opacity: isLoading ? 0 : 1,
-          }}
-          {...props}
-        />
+
+          {/* Image */}
+          <img
+            key={src}
+            src={src}
+            alt={alt}
+            onLoad={() => 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>
       </div>
     </>
   );

package/src/components/SlopVideo.tsx

@@ -0,0 +1,312 @@
+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={className} style={props.style}>
+        <div
+          className="slop-wrapper relative overflow-hidden w-full h-full"
+          style={{
+            aspectRatio: String(aspectRatio).replace(":", "/"),
+            backgroundColor: "var(--muted, #f3f4f6)",
+            position: "relative",
+            overflow: "hidden",
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          {/* 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>
+      </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"],
 });