Active speaker and audio levels

import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Tile({ sessionId }) {
  const activeSpeakerId = useActiveSpeakerId();
  const isSpeaking = sessionId === activeSpeakerId;
  return (
    <div style={{ outline: isSpeaking ? '3px solid limegreen' : 'none' }}>
      <DailyVideo sessionId={sessionId} type="video" />
    </div>
  );
}

import { useActiveSpeakerId, DailyVideo } from '@daily-co/daily-react';

function Spotlight() {
  const activeSpeakerId = useActiveSpeakerId({ ignoreLocal: true });
  if (!activeSpeakerId) return <p>Waiting for someone to speak…</p>;
  return <DailyVideo sessionId={activeSpeakerId} type="video" fit="cover" />;
}

const activeSpeakerId = useActiveSpeakerId({
  filter: (sessionId) => presenterIds.includes(sessionId),
});

import { useAudioLevelObserver, useLocalSessionId } from '@daily-co/daily-react';
import { useCallback, useRef } from 'react';

function MicMeter() {
  const localSessionId = useLocalSessionId();
  const barRef = useRef(null);

  useAudioLevelObserver(
    localSessionId,
    useCallback((volume) => {
      // Drive the DOM directly; avoid setState on every frame.
      if (barRef.current) barRef.current.style.transform = `scaleY(${Math.max(0.05, volume)})`;
    }, [])
  );

  return <div ref={barRef} style={{ height: 40, width: 8, background: 'limegreen', transformOrigin: 'bottom' }} />;
}

import { useCallback, useRef } from 'react';
import { useAudioLevelObserver, useMediaTrack } from '@daily-co/daily-react';

function SpeakingDot({ sessionId }) {
  const audio = useMediaTrack(sessionId, 'audio');
  const dotRef = useRef(null);

  useAudioLevelObserver(
    sessionId,
    useCallback((volume) => {
      if (dotRef.current) dotRef.current.style.opacity = String(Math.min(1, volume * 4));
    }, [])
  );

  if (audio.isOff) return <span>🔇</span>;
  return <span ref={dotRef} style={{ opacity: 0 }}>🟢</span>;
}