@slopmachine/react 0.6.0 → 0.8.0

package/src/components/SlopVideo.tsx

@@ -1,350 +0,0 @@
-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
- * // Using a Bucket
- * <SlopVideo
- *   bucketId="my-bucket"
- *   resultId="some-result"
- *   aspectRatio="16:9"
- *   className="rounded-lg"
- *   autoPlay
- *   loop
- *   muted
- * />
- *
- * // Using a Pipeline with runtime prompt
- * <SlopVideo
- *   pipelineId="pipe_live_abc123"
- *   prompt="Drone shot of a cyberpunk city in rain"
- *   aspectRatio="16:9"
- *   metadata={{ campaign: "spring_launch" }}
- * />
- * ```
- *
- * @version 0.6.0
- */
-export const SlopVideo: React.FC<SlopVideoProps> = ({
-  bucketId,
-  pipelineId,
-  siloId,
-  prompt,
-  metadata,
-  className,
-  aspectRatio = "16:9",
-  version,
-  resultId,
-  variables = {},
-  duration,
-  baseUrl,
-  original,
-  attachments,
-  loader,
-  autoPlay = true,
-  loop = true,
-  muted = true,
-  playsInline = true,
-  onLoadedData,
-  onError,
-  ...props
-}) => {
-  // Construct API URL
-  const rawSrc = useMemo(
-    () =>
-      buildVideoUrl({
-        bucketId,
-        pipelineId,
-        siloId,
-        prompt,
-        metadata,
-        aspectRatio,
-        version,
-        resultId,
-        variables,
-        duration,
-        baseUrl,
-        original,
-        attachments,
-      }),
-    [
-      bucketId,
-      pipelineId,
-      siloId,
-      prompt,
-      metadata,
-      aspectRatio,
-      version,
-      resultId,
-      variables,
-      duration,
-      baseUrl,
-      original,
-      attachments,
-    ],
-  );
-
-  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) {
-          let errorMessage = res.statusText;
-          try {
-            const errRes = await fetch(src);
-            const errorText = await errRes.text();
-            const errorData = JSON.parse(errorText);
-            if (errorData.error) {
-              errorMessage = errorData.error;
-            }
-          } catch (e) {
-            // Failed to fetch or parse error details
-          }
-          console.error("SlopVideo error:", res.status, errorMessage);
-          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(":", "/"),
-            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}
-            {...props}
-            onLoadedData={(e) => {
-              setIsLoading(false);
-              onLoadedData?.(e);
-            }}
-            onError={(e) => {
-              setIsLoading(false);
-              onError?.(e);
-            }}
-            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,
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-};

package/src/index.ts

@@ -1,21 +0,0 @@
-export { SlopImage, type SlopImageProps } from "./components/SlopImage";
-export { SlopVideo, type SlopVideoProps } from "./components/SlopVideo";
-export { SlopText, type SlopTextProps } from "./components/SlopText";
-
-export type {
-  ImageAspectRatio,
-  VideoAspectRatio,
-  SlopImageOptions,
-  SlopVideoOptions,
-  SlopTextOptions,
-  ResultRating,
-  RateResultOptions,
-  RateResultResponse,
-} from "@slopmachine/core";
-
-export {
-  preloadImage,
-  preloadVideo,
-  preloadText,
-  rateResult,
-} from "@slopmachine/core";

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "declaration": true,
-    "declarationMap": true,
-    "baseUrl": "."
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsup.config.ts

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