Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-08 20:57:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): audio player loading styles (#11384)

Browse Source 
fix BS-2998
This commit is contained in:
pengx17
2025-04-02 04:58:27 +00:00
parent 08eb248cb4
commit c20514f269
5 changed files with 15 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/component/src/ui/lottie/animated-play-icon.stories.tsx
+1 -8
View File
@@ -30,13 +30,8 @@ Pause.args = {
state: 'pause',
};
export const Loading = Template.bind({});
Loading.args = {
state: 'loading',
};
export const WithStateToggle: StoryFn<typeof AnimatedPlayIcon> = () => {
const [state, setState] = useState<'play' | 'pause' | 'loading'>('play');
const [state, setState] = useState<'play' | 'pause'>('play');
const cycleState = () => {
setState(current => {
@@ -45,8 +40,6 @@ export const WithStateToggle: StoryFn<typeof AnimatedPlayIcon> = () => {
return 'pause';
case 'pause':
return 'play';
case 'loading':
return 'play';
default:
return 'play';
}
packages/frontend/component/src/ui/lottie/animated-play-icon.tsx
+1 -5
View File
@@ -4,12 +4,11 @@ import type { LottieRef } from 'lottie-react';
import Lottie from 'lottie-react';
import { useEffect, useRef } from 'react';
import { Loading } from '../loading';
import playandpause from './playandpause.json';
import * as styles from './styles.css';
export interface AnimatedPlayIconProps {
state: 'play' | 'pause' | 'loading';
state: 'play' | 'pause';
className?: string;
onClick?: (e: React.MouseEvent) => void;
}
@@ -62,9 +61,6 @@ export const AnimatedPlayIcon = ({
onClick,
}: AnimatedPlayIconProps) => {
const state = useDebouncedValue(_state, 25);
if (state === 'loading') {
return <Loading size={40} />;
}
return (
<PlayAndPauseIcon state={state} onClick={onClick} className={className} />
);