@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-outstream-video/index.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useState, useEffect } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { X, Volume2, VolumeX } from "lucide-react"
+
+export interface WakaOutstreamVideoProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Collapse when video ends or is closed */
+  collapseOnEnd?: boolean
+  /** Collapse animation duration (ms) */
+  collapseDuration?: number
+  /** Start muted */
+  muted?: boolean
+  /** Show close button */
+  showClose?: boolean
+  /** Close after seconds (0 = manual only) */
+  closeAfter?: number
+  /** Minimum visibility to start playing (0-1) */
+  visibilityThreshold?: number
+  /** Custom class name */
+  className?: string
+  /** Callback when video completes */
+  onComplete?: () => void
+  /** Callback when closed */
+  onClose?: () => void
+}
+
+export function WakaOutstreamVideo({
+  slotId,
+  collapseOnEnd = true,
+  collapseDuration = 300,
+  muted = true,
+  showClose = true,
+  closeAfter = 0,
+  visibilityThreshold = 0.5,
+  className,
+  onComplete,
+  onClose,
+}: WakaOutstreamVideoProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef, visibilityThreshold)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | "collapsed">("loading")
+  const [ad, setAd] = useState<CustomAd | null>(null)
+  const [isMuted, setIsMuted] = useState(muted)
+  const [isCollapsing, setIsCollapsing] = useState(false)
+  const [containerHeight, setContainerHeight] = useState<number | "auto">("auto")
+  const [hasStarted, setHasStarted] = useState(false)
+
+  // Load ad
+  useEffect(() => {
+    if (!isReady || hasConsent === false) return
+
+    const loadAd = async () => {
+      try {
+        const customAd = await getCustomAd(slotId)
+        if (customAd?.videoUrl) {
+          setAd(customAd)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+        } else {
+          setStatus("collapsed")
+        }
+      } catch {
+        setStatus("collapsed")
+      }
+    }
+
+    loadAd()
+  }, [isReady, hasConsent, slotId, getCustomAd, trackEvent])
+
+  // Play/pause based on visibility
+  useEffect(() => {
+    if (!videoRef.current || status !== "loaded") return
+
+    if (isVisible) {
+      videoRef.current.play().then(() => {
+        if (!hasStarted) {
+          setHasStarted(true)
+          trackEvent({ type: "impression", slotId, timestamp: new Date() })
+          if (ad?.impressionUrl) {
+            fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+          }
+        }
+      }).catch(() => {})
+    } else {
+      videoRef.current.pause()
+    }
+  }, [isVisible, status, hasStarted, slotId, ad, trackEvent])
+
+  // Auto-close timer
+  useEffect(() => {
+    if (closeAfter === 0 || !hasStarted) return
+
+    const timer = setTimeout(() => {
+      handleCollapse()
+    }, closeAfter * 1000)
+
+    return () => clearTimeout(timer)
+  }, [closeAfter, hasStarted])
+
+  // Set initial height after load
+  useEffect(() => {
+    if (status === "loaded" && containerRef.current) {
+      setContainerHeight(containerRef.current.offsetHeight)
+    }
+  }, [status])
+
+  const handleCollapse = () => {
+    if (collapseOnEnd) {
+      setIsCollapsing(true)
+      setContainerHeight(0)
+      setTimeout(() => {
+        setStatus("collapsed")
+        onClose?.()
+      }, collapseDuration)
+    } else {
+      setStatus("collapsed")
+      onClose?.()
+    }
+  }
+
+  const handleEnded = () => {
+    trackEvent({ type: "viewable", slotId, timestamp: new Date(), data: { completed: true } })
+    onComplete?.()
+    handleCollapse()
+  }
+
+  const handleToggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted
+      setIsMuted(!isMuted)
+    }
+  }
+
+  const handleClick = () => {
+    if (!ad) return
+
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }
+
+  if (status === "collapsed" || status === "error") {
+    return null
+  }
+
+  if (status === "loading") {
+    return (
+      <div
+        ref={containerRef}
+        className={cn("w-full aspect-video bg-muted animate-pulse rounded-lg", className)}
+      />
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative w-full overflow-hidden rounded-lg bg-black",
+        isCollapsing && "transition-all",
+        className
+      )}
+      style={{
+        height: containerHeight,
+        transitionDuration: `${collapseDuration}ms`,
+      }}
+    >
+      <div className="relative aspect-video">
+        {/* Video */}
+        <video
+          ref={videoRef}
+          src={ad?.videoUrl}
+          muted={isMuted}
+          playsInline
+          loop={false}
+          onClick={handleClick}
+          onEnded={handleEnded}
+          className="w-full h-full object-contain cursor-pointer"
+        />
+
+        {/* Overlay controls */}
+        <div className="absolute inset-0 pointer-events-none">
+          {/* Top bar */}
+          <div className="absolute top-0 left-0 right-0 p-3 flex items-center justify-between bg-gradient-to-b from-black/50 to-transparent pointer-events-auto">
+            <WakaSponsoredBadge variant="dark" size="sm" sponsor={ad?.sponsor} />
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleToggleMute}
+                className="p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors"
+              >
+                {isMuted ? (
+                  <VolumeX className="h-4 w-4 text-white" />
+                ) : (
+                  <Volume2 className="h-4 w-4 text-white" />
+                )}
+              </button>
+
+              {showClose && (
+                <button
+                  onClick={handleCollapse}
+                  className="p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors"
+                >
+                  <X className="h-4 w-4 text-white" />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* CTA button */}
+          {ad?.cta && (
+            <div className="absolute bottom-3 left-3 right-3 pointer-events-auto">
+              <button
+                onClick={handleClick}
+                className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors text-center"
+              >
+                {ad.cta}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WakaOutstreamVideo

package/src/components/waka-player-card/index.tsx

@@ -59,7 +59,7 @@ const rarityConfig: Record<PlayerRarity, {
   common: {
     borderColor: "border-zinc-400 dark:border-zinc-500",
     bgGradient: "from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900",
-    glowColor: "rgba(161, 161, 170, 0.3)",
+    glowColor: "hsl(var(--muted-foreground) / 0.3)",
     textColor: "text-zinc-600 dark:text-zinc-400",
     label: "Common",
     frameGradient: "from-zinc-300 via-zinc-400 to-zinc-300 dark:from-zinc-600 dark:via-zinc-500 dark:to-zinc-600",
@@ -67,7 +67,7 @@ const rarityConfig: Record<PlayerRarity, {
   rare: {
     borderColor: "border-blue-400 dark:border-blue-500",
     bgGradient: "from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900",
-    glowColor: "rgba(59, 130, 246, 0.4)",
+    glowColor: "hsl(var(--info) / 0.4)",
     textColor: "text-blue-600 dark:text-blue-400",
     label: "Rare",
     frameGradient: "from-blue-300 via-blue-500 to-blue-300 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600",
@@ -75,7 +75,7 @@ const rarityConfig: Record<PlayerRarity, {
   epic: {
     borderColor: "border-purple-400 dark:border-purple-500",
     bgGradient: "from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900",
-    glowColor: "rgba(168, 85, 247, 0.5)",
+    glowColor: "hsl(var(--chart-2) / 0.5)",
     textColor: "text-purple-600 dark:text-purple-400",
     label: "Epic",
     frameGradient: "from-purple-300 via-purple-500 to-purple-300 dark:from-purple-600 dark:via-purple-400 dark:to-purple-600",
@@ -83,7 +83,7 @@ const rarityConfig: Record<PlayerRarity, {
   legendary: {
     borderColor: "border-amber-400 dark:border-amber-500",
     bgGradient: "from-amber-50 to-orange-100 dark:from-amber-950 dark:to-orange-900",
-    glowColor: "rgba(245, 158, 11, 0.5)",
+    glowColor: "hsl(var(--warning) / 0.5)",
     textColor: "text-amber-600 dark:text-amber-400",
     label: "Legendary",
     frameGradient: "from-yellow-300 via-amber-500 to-orange-400 dark:from-yellow-500 dark:via-amber-400 dark:to-orange-500",
@@ -91,7 +91,7 @@ const rarityConfig: Record<PlayerRarity, {
   mythic: {
     borderColor: "border-rose-400 dark:border-rose-500",
     bgGradient: "from-rose-50 via-pink-50 to-violet-50 dark:from-rose-950 dark:via-pink-950 dark:to-violet-950",
-    glowColor: "rgba(244, 63, 94, 0.6)",
+    glowColor: "hsl(var(--destructive) / 0.6)",
     textColor: "text-rose-600 dark:text-rose-400",
     label: "Mythic",
     frameGradient: "from-rose-400 via-pink-500 to-violet-500 dark:from-rose-500 dark:via-pink-400 dark:to-violet-400",