feat: togglePlay 方法取消使用 useCallback
This commit is contained in:
parent
4b67542799
commit
33a6abab7f
@ -18,7 +18,6 @@ import {
|
|||||||
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
|
||||||
import { useCallback, useRef } from 'react';
|
import { useCallback, useRef } from 'react';
|
||||||
import { useAppDispatch } from '~/hooks';
|
import { useAppDispatch } from '~/hooks';
|
||||||
import coverFallback from '~/assets/no-cover.svg';
|
|
||||||
|
|
||||||
interface FileRowProps {
|
interface FileRowProps {
|
||||||
id: string;
|
id: string;
|
||||||
@ -35,7 +34,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
const decryptedName = nameWithoutExt + '.' + file.ext;
|
const decryptedName = nameWithoutExt + '.' + file.ext;
|
||||||
|
|
||||||
const audioPlayerRef = useRef<HTMLAudioElement>(null);
|
const audioPlayerRef = useRef<HTMLAudioElement>(null);
|
||||||
const togglePlay = useCallback(() => {
|
const togglePlay = () => {
|
||||||
const player = audioPlayerRef.current;
|
const player = audioPlayerRef.current;
|
||||||
if (!player) {
|
if (!player) {
|
||||||
return;
|
return;
|
||||||
@ -46,7 +45,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
} else {
|
} else {
|
||||||
player.pause();
|
player.pause();
|
||||||
}
|
}
|
||||||
}, []);
|
};
|
||||||
|
|
||||||
const handleDeleteRow = useCallback(() => {
|
const handleDeleteRow = useCallback(() => {
|
||||||
onClose();
|
onClose();
|
||||||
@ -89,7 +88,7 @@ export function FileRow({ id, file }: FileRowProps) {
|
|||||||
objectFit="cover"
|
objectFit="cover"
|
||||||
src={metadata.cover}
|
src={metadata.cover}
|
||||||
alt={`"${metadata.album}" 的专辑封面`}
|
alt={`"${metadata.album}" 的专辑封面`}
|
||||||
fallbackSrc={coverFallback}
|
fallbackSrc={'/assets/no-cover.svg'}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Center>
|
</Center>
|
||||||
|
Loading…
Reference in New Issue
Block a user