66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
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-gray-100 dark:bg-gray-900 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,
|
|
isPlaying: false,
|
|
},
|
|
};
|
|
|
|
export const Playing: Story = {
|
|
render: (args) => <MiniPlayerWithState {...args} />,
|
|
args: {
|
|
isVisible: true,
|
|
isPlaying: true,
|
|
},
|
|
};
|