veza/apps/web/src/features/player/components/AudioPlayer.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import AudioPlayer from './AudioPlayer';
import { AudioPlayerSkeleton } from './audio-player';

/**
 * AudioPlayer - Lecteur audio complet
 *
 * Composant principal du lecteur audio avec contrôles,
 * qualité, vitesse et visualisation.
 */
const meta: Meta<typeof AudioPlayer> = {
    title: 'Components/Features/Player/AudioPlayer',
    component: AudioPlayer,
    parameters: {
        layout: 'padded',
        docs: {
            description: {
                component: 'Lecteur audio intégré avec tous les contrôles de lecture.',
            },
        },
    },
    tags: ['autodocs'],
    argTypes: {
        compact: {
            control: 'boolean',
            description: 'Mode compact du lecteur',
        },
        showQualitySelector: {
            control: 'boolean',
            description: 'Afficher le sélecteur de qualité',
        },
        showSpeedControl: {
            control: 'boolean',
            description: 'Afficher le contrôle de vitesse',
        },
    },
    decorators: [
        (Story) => (
            <div className="bg-kodo-background min-h-screen p-4">
                <Story />
            </div>
        ),
    ],
};

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * État en lecture.
 */
export const Playing: Story = {
    name: 'En lecture',
    args: {
        autoPlay: true,
        showQualitySelector: true,
        showSpeedControl: true,
    },
};

/**
 * État en pause.
 */
export const Paused: Story = {
    name: 'En pause',
    args: {
        autoPlay: false,
    },
};

/**
 * État de chargement (Skeleton).
 */
export const Loading: Story = {
    name: 'Chargement',
    render: () => <AudioPlayerSkeleton />,
};

/**
 * État d'erreur.
 */
export const Error: Story = {
    name: 'Erreur',
    parameters: {
        docs: {
            description: {
                story: 'Affiche le message d\'erreur avec option de retry.',
            },
        },
    },
};