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

import type { Meta, StoryObj } from '@storybook/react';
import { MiniPlayer } from './MiniPlayer';
import { usePlayerStore } from '../store/playerStore';
import { useEffect } from 'react';

const MiniPlayerWithState = (props: any) => {
    useEffect(() => {
        usePlayerStore.setState({
            currentTrack: {
                id: '1',
                title: 'Midnight City',
                artist: 'M83',
                cover: 'https://picsum.photos/id/50/200/200',
                duration: 240,
                url: '',
            } as any,
            isPlaying: props.isPlaying || false,
            currentTime: 120,
            duration: 240,
            volume: 0.8,
            muted: false,
            queue: [{}, {}] as any[],
            currentIndex: 0,
        });
    }, [props.isPlaying]);

    return <MiniPlayer {...props} />;
};

const meta = {
    title: 'Components/Features/Player/MiniPlayer',
    component: MiniPlayer,
    tags: ['autodocs'],
    argTypes: {
        onToggle: { action: 'toggle' },
        onClose: { action: 'close' },
    },
    decorators: [
        (Story) => (
            <div className="h-[200px] relative bg-background overflow-hidden transform-gpu">
                {/* Simulate body content */}
                <div className="p-4">Content behind player</div>
                <Story />
            </div>
        ),
    ],
} satisfies Meta<typeof MiniPlayer>;

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

export const Default: Story = {
    render: (args) => <MiniPlayerWithState {...args} />,
    args: {
        isVisible: true,
        onToggle: () => {},
    },
};

export const Playing: Story = {
    render: (args) => <MiniPlayerWithState {...args} isPlaying />,
    args: {
        isVisible: true,
        onToggle: () => {},
    },
};