useAdaptiveController

Advanced hook to access the adaptive lighting controller and retrieve colors from registered items.

Basic Usage

Use the controller to get colors from any registered cinematic component by its ID. This allows you to create custom UI elements that respond to extracted colors.

tsx

import { useAdaptiveController } from "react-cinematic-lighting";

export function CustomComponent() {
  const controller = useAdaptiveController();
  
  // Get color for a specific item by ID
  const videoColor = controller.getColor("my-video-id");
  
  return (
    <div 
      style={{ 
        background: videoColor 
          ? `rgb(${videoColor.r}, ${videoColor.g}, ${videoColor.b})` 
          : "#000" 
      }}
    >
      <p>Background synced with video color</p>
    </div>
  );
}

Syncing Multiple Elements

Create synchronized experiences by polling the controller for color updates. Perfect for creating ambient UI that matches your media content.

tsx

import { useAdaptiveController, CinematicVideo } from "react-cinematic-lighting";
import { useState, useEffect } from "react";

export function VideoSync() {
  const controller = useAdaptiveController();
  const [dominantColor, setDominantColor] = useState(null);
  
  useEffect(() => {
    // Poll for color updates from any registered item
    const interval = setInterval(() => {
      const color = controller.getColor("main-video");
      if (color) {
        setDominantColor(color);
      }
    }, 100);
    
    return () => clearInterval(interval);
  }, [controller]);
  
  return (
    <div>
      <CinematicVideo 
        id="main-video"
        src="video.mp4" 
        preset="youtube" 
      />
      
      {/* Separate UI element synced to video */}
      <div 
        className="mt-4 p-4 rounded-lg"
        style={{
          backgroundColor: dominantColor 
            ? `rgba(${dominantColor.r}, ${dominantColor.g}, ${dominantColor.b}, 0.2)`
            : "transparent"
        }}
      >
        Current color: {dominantColor ? `RGB(${dominantColor.r}, ${dominantColor.g}, ${dominantColor.b})` : "None"}
      </div>
    </div>
  );
}

Dynamic Theme System

Build dynamic theming systems that automatically update based on media colors. Update CSS variables or state to theme your entire application.

tsx

import { useAdaptiveController } from "react-cinematic-lighting";
import { useEffect } from "react";

export function ThemeSync() {
  const controller = useAdaptiveController();
  
  useEffect(() => {
    const updateTheme = () => {
      // Get colors from multiple sources
      const videoColor = controller.getColor("hero-video");
      const imageColor = controller.getColor("banner-image");
      
      // Update CSS variables
      if (videoColor) {
        document.documentElement.style.setProperty(
          '--theme-primary',
          `${videoColor.r}, ${videoColor.g}, ${videoColor.b}`
        );
      }
      
      if (imageColor) {
        document.documentElement.style.setProperty(
          '--theme-secondary',
          `${imageColor.r}, ${imageColor.g}, ${imageColor.b}`
        );
      }
    };
    
    const interval = setInterval(updateTheme, 200);
    return () => clearInterval(interval);
  }, [controller]);
  
  return <div>Theme automatically syncs with media colors</div>;
}

API Reference

getColor(id: string)ColorRGB | null

Retrieves the current extracted color for a specific item by ID.

Parameters:

id - The unique identifier of the cinematic component

Returns:

ColorRGB | null - The extracted color object or null if not found

ColorRGB Type

interface ColorRGB {
  r: number;  // Red channel (0-255)
  g: number;  // Green channel (0-255)
  b: number;  // Blue channel (0-255)
}

Important Notes

Requires Provider

This hook must be used within an AdaptiveProvider. Using it outside will throw an error.

ID Registration

Components must have an id prop set to be accessible via the controller. If no ID is provided, components generate a random ID that may not be predictable.