PlayPauseButton

PlayPauseButton muestra un ícono de reproducción o pausa según la prop booleana value. Al hacer clic envía una petición POST al path configurado con el valor alternado, luego llama a onChangeSuccess o onChangeError. Se muestra un spinner mientras la petición está en curso. Cuando value es true el componente renderiza un ícono de pausa en el color primario; cuando es false renderiza un ícono de reproducción en un color de texto más claro.

Úsalo para controles de medios, toggles de estado de flujo de trabajo (ejecutando/pausado), o cualquier estado binario activo/inactivo persistido en el servidor.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | boolean | Sí | — | Estado actual. true muestra el ícono de pausa; false muestra el ícono de reproducción. | | path | string | Sí | — | Endpoint de la API que recibe un POST con { value: boolean } al alternar. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Controla el tamaño del botón y del spinner. | | apiBaseUrl | string | No | — | Sobreescritura de la URL base para la petición HTTP. | | useAuthToken | boolean | No | false | Cuando es true, usa el cliente HTTP autenticado. | | onChangeSuccess | (newValue: boolean) => void | No | — | Callback que se dispara con el nuevo valor booleano tras una petición exitosa. | | onChangeError | (error: any) => void | No | — | Callback que se dispara cuando la petición falla. | | className | string | No | — | Clase CSS aplicada al elemento contenedor. | | style | React.CSSProperties | No | — | Estilos en línea aplicados al elemento contenedor. |

Uso

Básico

import PlayPauseButton from '@/components/buttons/PlayPauseButton';
import { useState } from 'react';

export default function Example() {
  const [playing, setPlaying] = useState(false);

  return (
    <PlayPauseButton
      value={playing}
      path="/v1/streams/42/toggle"
      useAuthToken
      onChangeSuccess={(val) => setPlaying(val)}
      onChangeError={(err) => console.error(err)}
    />
  );
}

Control de estado de flujo de trabajo

import PlayPauseButton from '@/components/buttons/PlayPauseButton';

export default function WorkflowRow({ workflow }: { workflow: { id: string; running: boolean } }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>{workflow.id}</span>
      <PlayPauseButton
        value={workflow.running}
        path={`/v1/workflows/${workflow.id}/toggle`}
        useAuthToken
        size="sm"
        onChangeSuccess={(val) => console.log('Ejecutando:', val)}
      />
    </div>
  );
}