@wakastellar/ui 2.1.2 → 2.3.2

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

@@ -0,0 +1,406 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useState, useEffect, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { WakaAdPlaceholder } from "../waka-ad-placeholder"
+import { Play, Pause, Volume2, VolumeX, Maximize, ExternalLink } from "lucide-react"
+
+export interface WakaVideoAdProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Video width */
+  width?: number
+  /** Video height */
+  height?: number
+  /** Aspect ratio */
+  aspectRatio?: "16/9" | "4/3" | "1/1" | "9/16"
+  /** Autoplay when visible */
+  autoplay?: boolean
+  /** Mute by default */
+  muted?: boolean
+  /** Show controls */
+  showControls?: boolean
+  /** Skip time in seconds (0 = no skip) */
+  skipAfter?: number
+  /** Show progress bar */
+  showProgress?: boolean
+  /** CTA overlay position */
+  ctaPosition?: "bottom" | "overlay" | "end"
+  /** Custom class name */
+  className?: string
+  /** Callback when video completes */
+  onComplete?: () => void
+  /** Callback when skipped */
+  onSkip?: () => void
+  /** Callback when clicked */
+  onClick?: () => void
+}
+
+export function WakaVideoAd({
+  slotId,
+  width = 640,
+  height = 360,
+  aspectRatio = "16/9",
+  autoplay = true,
+  muted = true,
+  showControls = true,
+  skipAfter = 5,
+  showProgress = true,
+  ctaPosition = "bottom",
+  className,
+  onComplete,
+  onSkip,
+  onClick,
+}: WakaVideoAdProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef)
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading")
+  const [ad, setAd] = useState<CustomAd | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isMuted, setIsMuted] = useState(muted)
+  const [progress, setProgress] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [canSkip, setCanSkip] = useState(skipAfter === 0)
+  const [skipCountdown, setSkipCountdown] = useState(skipAfter)
+  const [showCta, setShowCta] = 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("error")
+        }
+      } catch {
+        setStatus("error")
+      }
+    }
+
+    loadAd()
+  }, [isReady, hasConsent, slotId, getCustomAd, trackEvent])
+
+  // Auto-play when visible
+  useEffect(() => {
+    if (!videoRef.current || !autoplay || status !== "loaded") return
+
+    if (isVisible) {
+      videoRef.current.play().catch(() => {})
+    } else {
+      videoRef.current.pause()
+    }
+  }, [isVisible, autoplay, status])
+
+  // Track impression when starts playing
+  useEffect(() => {
+    if (isPlaying && ad) {
+      trackEvent({ type: "impression", slotId, timestamp: new Date() })
+      if (ad.impressionUrl) {
+        fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+      }
+    }
+  }, [isPlaying, ad, slotId, trackEvent])
+
+  // Skip countdown
+  useEffect(() => {
+    if (!isPlaying || canSkip || skipAfter === 0) return
+
+    const interval = setInterval(() => {
+      setSkipCountdown((prev) => {
+        if (prev <= 1) {
+          setCanSkip(true)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [isPlaying, canSkip, skipAfter])
+
+  const handlePlay = () => {
+    videoRef.current?.play()
+  }
+
+  const handlePause = () => {
+    videoRef.current?.pause()
+  }
+
+  const handleTogglePlay = () => {
+    if (isPlaying) {
+      handlePause()
+    } else {
+      handlePlay()
+    }
+  }
+
+  const handleToggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted
+      setIsMuted(!isMuted)
+    }
+  }
+
+  const handleFullscreen = () => {
+    containerRef.current?.requestFullscreen?.()
+  }
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current) {
+      const current = videoRef.current.currentTime
+      const total = videoRef.current.duration
+      setProgress((current / total) * 100)
+
+      // Show CTA near end
+      if (ctaPosition === "end" && total - current < 5) {
+        setShowCta(true)
+      }
+    }
+  }
+
+  const handleLoadedMetadata = () => {
+    if (videoRef.current) {
+      setDuration(videoRef.current.duration)
+    }
+  }
+
+  const handleEnded = () => {
+    setIsPlaying(false)
+    setShowCta(true)
+    trackEvent({ type: "viewable", slotId, timestamp: new Date(), data: { completed: true } })
+    onComplete?.()
+  }
+
+  const handleSkip = () => {
+    if (!canSkip) return
+    videoRef.current?.pause()
+    setShowCta(true)
+    onSkip?.()
+  }
+
+  const handleClick = useCallback(() => {
+    if (!ad) return
+
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onClick?.()
+
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }, [ad, slotId, trackEvent, onClick])
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, "0")}`
+  }
+
+  if (status === "error") {
+    return null
+  }
+
+  if (status === "loading") {
+    return (
+      <div ref={containerRef}>
+        <WakaAdPlaceholder width={width} height={height} />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative overflow-hidden rounded-lg bg-black group",
+        className
+      )}
+      style={{ width, maxWidth: "100%" }}
+    >
+      <div className={cn("relative", `aspect-[${aspectRatio}]`)}>
+        {/* Video */}
+        <video
+          ref={videoRef}
+          src={ad?.videoUrl}
+          muted={isMuted}
+          playsInline
+          onClick={handleTogglePlay}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+          onTimeUpdate={handleTimeUpdate}
+          onLoadedMetadata={handleLoadedMetadata}
+          onEnded={handleEnded}
+          className="w-full h-full object-contain cursor-pointer"
+        />
+
+        {/* Sponsored badge */}
+        <div className="absolute top-2 left-2 z-10">
+          <WakaSponsoredBadge variant="dark" size="sm" sponsor={ad?.sponsor} />
+        </div>
+
+        {/* Skip button */}
+        {skipAfter > 0 && (
+          <div className="absolute top-2 right-2 z-10">
+            {canSkip ? (
+              <button
+                onClick={handleSkip}
+                className="px-3 py-1.5 bg-white/90 text-black text-sm font-medium rounded hover:bg-white transition-colors"
+              >
+                Skip Ad
+              </button>
+            ) : (
+              <div className="px-3 py-1.5 bg-black/50 text-white text-sm rounded">
+                Skip in {skipCountdown}s
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Play/Pause overlay */}
+        {!isPlaying && (
+          <button
+            onClick={handlePlay}
+            className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <Play className="h-16 w-16 text-white fill-white" />
+          </button>
+        )}
+
+        {/* CTA overlay */}
+        {ctaPosition === "overlay" && ad?.cta && (
+          <button
+            onClick={handleClick}
+            className="absolute bottom-16 left-1/2 -translate-x-1/2 px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2"
+          >
+            {ad.cta}
+            <ExternalLink className="h-4 w-4" />
+          </button>
+        )}
+
+        {/* End screen with CTA */}
+        {showCta && ctaPosition === "end" && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/80 p-6">
+            {ad?.imageUrl && (
+              <img
+                src={ad.imageUrl}
+                alt=""
+                className="w-24 h-24 rounded-lg object-cover mb-4"
+              />
+            )}
+            <h3 className="text-white text-xl font-bold text-center mb-2">
+              {ad?.title}
+            </h3>
+            {ad?.description && (
+              <p className="text-white/80 text-center mb-4 max-w-sm">
+                {ad.description}
+              </p>
+            )}
+            <button
+              onClick={handleClick}
+              className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2"
+            >
+              {ad?.cta || "Learn More"}
+              <ExternalLink className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+
+        {/* Controls */}
+        {showControls && (
+          <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
+            {/* Progress bar */}
+            {showProgress && (
+              <div className="mb-2">
+                <div className="h-1 bg-white/30 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-primary transition-all"
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleTogglePlay}
+                  className="p-1.5 hover:bg-white/20 rounded transition-colors"
+                >
+                  {isPlaying ? (
+                    <Pause className="h-5 w-5 text-white" />
+                  ) : (
+                    <Play className="h-5 w-5 text-white fill-white" />
+                  )}
+                </button>
+
+                <button
+                  onClick={handleToggleMute}
+                  className="p-1.5 hover:bg-white/20 rounded transition-colors"
+                >
+                  {isMuted ? (
+                    <VolumeX className="h-5 w-5 text-white" />
+                  ) : (
+                    <Volume2 className="h-5 w-5 text-white" />
+                  )}
+                </button>
+
+                <span className="text-white text-xs">
+                  {formatTime((progress / 100) * duration)} / {formatTime(duration)}
+                </span>
+              </div>
+
+              <button
+                onClick={handleFullscreen}
+                className="p-1.5 hover:bg-white/20 rounded transition-colors"
+              >
+                <Maximize className="h-5 w-5 text-white" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom CTA */}
+      {ctaPosition === "bottom" && ad?.cta && (
+        <button
+          onClick={handleClick}
+          className="w-full px-4 py-3 bg-muted hover:bg-muted/80 transition-colors flex items-center justify-between"
+        >
+          <div className="flex items-center gap-3">
+            {ad.imageUrl && (
+              <img
+                src={ad.imageUrl}
+                alt=""
+                className="w-10 h-10 rounded object-cover"
+              />
+            )}
+            <div className="text-left">
+              <p className="font-medium text-sm">{ad.title}</p>
+              <p className="text-xs text-muted-foreground">{ad.sponsor}</p>
+            </div>
+          </div>
+          <span className="px-4 py-1.5 bg-primary text-primary-foreground rounded text-sm font-medium flex items-center gap-1">
+            {ad.cta}
+            <ExternalLink className="h-3 w-3" />
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default WakaVideoAd

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

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { X, ExternalLink } from "lucide-react"
+
+export type OverlayPosition = "bottom" | "top" | "corner"
+export type OverlayTrigger = "start" | "pause" | "time" | "manual"
+
+export interface WakaVideoOverlayProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Whether overlay is visible */
+  visible?: boolean
+  /** Trigger for showing overlay */
+  trigger?: OverlayTrigger
+  /** Time trigger (seconds from start) */
+  triggerTime?: number
+  /** Position of overlay */
+  position?: OverlayPosition
+  /** Allow dismissing */
+  dismissable?: boolean
+  /** Auto-hide after seconds (0 = manual) */
+  hideAfter?: number
+  /** Custom class name */
+  className?: string
+  /** Callback when dismissed */
+  onDismiss?: () => void
+  /** Callback when clicked */
+  onClick?: () => void
+}
+
+export function WakaVideoOverlay({
+  slotId,
+  visible = true,
+  trigger = "manual",
+  triggerTime = 0,
+  position = "bottom",
+  dismissable = true,
+  hideAfter = 0,
+  className,
+  onDismiss,
+  onClick,
+}: WakaVideoOverlayProps) {
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error" | "hidden">("loading")
+  const [ad, setAd] = useState<CustomAd | null>(null)
+  const [isVisible, setIsVisible] = useState(visible)
+
+  // Load ad
+  useEffect(() => {
+    if (!isReady || hasConsent === false) return
+
+    const loadAd = async () => {
+      try {
+        const customAd = await getCustomAd(slotId)
+        if (customAd) {
+          setAd(customAd)
+          setStatus("loaded")
+          trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+        } else {
+          setStatus("error")
+        }
+      } catch {
+        setStatus("error")
+      }
+    }
+
+    loadAd()
+  }, [isReady, hasConsent, slotId, getCustomAd, trackEvent])
+
+  // Track impression when visible
+  useEffect(() => {
+    if (isVisible && status === "loaded" && ad) {
+      trackEvent({ type: "impression", slotId, timestamp: new Date() })
+      if (ad.impressionUrl) {
+        fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+      }
+    }
+  }, [isVisible, status, ad, slotId, trackEvent])
+
+  // Update visibility based on prop
+  useEffect(() => {
+    setIsVisible(visible)
+  }, [visible])
+
+  // Auto-hide timer
+  useEffect(() => {
+    if (hideAfter === 0 || !isVisible) return
+
+    const timer = setTimeout(() => {
+      setIsVisible(false)
+      setStatus("hidden")
+      onDismiss?.()
+    }, hideAfter * 1000)
+
+    return () => clearTimeout(timer)
+  }, [hideAfter, isVisible, onDismiss])
+
+  const handleDismiss = useCallback(() => {
+    if (!dismissable) return
+    setIsVisible(false)
+    setStatus("hidden")
+    onDismiss?.()
+  }, [dismissable, onDismiss])
+
+  const handleClick = useCallback(() => {
+    if (!ad) return
+
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onClick?.()
+
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }, [ad, slotId, trackEvent, onClick])
+
+  if (status === "error" || status === "hidden" || !isVisible) {
+    return null
+  }
+
+  if (status === "loading") {
+    return null
+  }
+
+  const positionClasses = {
+    bottom: "bottom-0 left-0 right-0",
+    top: "top-0 left-0 right-0",
+    corner: "bottom-4 right-4 max-w-sm",
+  }
+
+  // Corner position (card style)
+  if (position === "corner") {
+    return (
+      <div
+        className={cn(
+          "absolute z-20 rounded-lg overflow-hidden shadow-lg bg-card border animate-in slide-in-from-right",
+          positionClasses[position],
+          className
+        )}
+      >
+        {dismissable && (
+          <button
+            onClick={handleDismiss}
+            className="absolute top-2 right-2 p-1 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10"
+          >
+            <X className="h-3 w-3 text-white" />
+          </button>
+        )}
+
+        <button onClick={handleClick} className="w-full text-left">
+          {ad?.imageUrl && (
+            <div className="aspect-video bg-muted">
+              <img
+                src={ad.imageUrl}
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
+
+          <div className="p-3">
+            <div className="flex items-start justify-between gap-2 mb-1">
+              <p className="font-medium text-sm line-clamp-2">{ad?.title}</p>
+            </div>
+
+            {ad?.description && (
+              <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
+                {ad.description}
+              </p>
+            )}
+
+            <div className="flex items-center justify-between">
+              <WakaSponsoredBadge size="sm" sponsor={ad?.sponsor} showIcon={false} />
+              {ad?.cta && (
+                <span className="text-xs text-primary font-medium flex items-center gap-1">
+                  {ad.cta}
+                  <ExternalLink className="h-3 w-3" />
+                </span>
+              )}
+            </div>
+          </div>
+        </button>
+      </div>
+    )
+  }
+
+  // Banner style (top/bottom)
+  return (
+    <div
+      className={cn(
+        "absolute z-20 bg-gradient-to-t from-black/80 to-black/50 backdrop-blur-sm",
+        position === "top" && "bg-gradient-to-b",
+        positionClasses[position],
+        className
+      )}
+    >
+      <div className="flex items-center gap-4 p-3">
+        {ad?.imageUrl && (
+          <button onClick={handleClick} className="flex-shrink-0">
+            <img
+              src={ad.imageUrl}
+              alt=""
+              className="w-16 h-16 rounded object-cover"
+            />
+          </button>
+        )}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <WakaSponsoredBadge variant="dark" size="sm" showIcon={false} />
+          </div>
+          <button onClick={handleClick} className="text-left">
+            <p className="font-medium text-white text-sm line-clamp-1">
+              {ad?.title}
+            </p>
+            {ad?.description && (
+              <p className="text-xs text-white/70 line-clamp-1">
+                {ad.description}
+              </p>
+            )}
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {ad?.cta && (
+            <button
+              onClick={handleClick}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded text-sm font-medium hover:bg-primary/90 transition-colors flex items-center gap-1"
+            >
+              {ad.cta}
+              <ExternalLink className="h-3 w-3" />
+            </button>
+          )}
+
+          {dismissable && (
+            <button
+              onClick={handleDismiss}
+              className="p-1.5 rounded-full hover:bg-white/20 transition-colors"
+            >
+              <X className="h-4 w-4 text-white" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WakaVideoOverlay