antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 19:01:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add image loader/unloader and only toggle source

Browse source
This commit is contained in:
Kendall Garner 2025-09-03 19:56:51 -07:00
parent 1aac1a6361
commit f5af1c314c
No known key found for this signature in database
GPG key ID: 9355F387FE765C94
3 changed files with 34 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/features/player/hooks/use-handle-playqueue-add.ts
View file

@ -78,7 +78,7 @@ export const useHandlePlayQueueAdd = () => {
// Allow this to be undefined for "play shuffled". If undefined, default to 0, // Allow this to be undefined for "play shuffled". If undefined, default to 0,
// otherwise, choose the selected item in the queue // otherwise, choose the selected item in the queue
let initialSongIndex: number | undefined; let initialSongIndex: number | undefined;
let toastId: string | null = null; let toastId: null | string = null;
if (byItemType) { if (byItemType) {
let songList: SongListResponse | undefined; let songList: SongListResponse | undefined;
@ -148,7 +148,7 @@ export const useHandlePlayQueueAdd = () => {
clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>); clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
delete timeoutIds.current[fetchId]; delete timeoutIds.current[fetchId];
if(toastId){ if (toastId) {
toast.hide(toastId); toast.hide(toastId);
} }
} catch (err: any) { } catch (err: any) {

4
src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
View file

@ -230,19 +230,19 @@ export const AddToPlaylistContextModal = ({
clearable clearable
data={playlistSelect} data={playlistSelect}
disabled={playlistList.isLoading} disabled={playlistList.isLoading}
dropdownOpened={isDropdownOpened}
label={t('form.addToPlaylist.input', { label={t('form.addToPlaylist.input', {
context: 'playlists', context: 'playlists',
postProcess: 'titleCase', postProcess: 'titleCase',
})} })}
searchable searchable
size="md" size="md"
dropdownOpened={isDropdownOpened}
{...form.getInputProps('playlistId')} {...form.getInputProps('playlistId')}
onClick={() => setIsDropdownOpened(true)}
onChange={(e) => { onChange={(e) => {
setIsDropdownOpened(false); setIsDropdownOpened(false);
form.getInputProps('playlistId').onChange(e); form.getInputProps('playlistId').onChange(e);
}} }}
onClick={() => setIsDropdownOpened(true)}
/> />
<Switch <Switch
label={t('form.addToPlaylist.input', { label={t('form.addToPlaylist.input', {

57
src/shared/components/image/image.tsx
View file

@ -34,6 +34,9 @@ interface ImageUnloaderProps {
className?: string; className?: string;
} }
const FALLBACK_SVG =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
export function Image({ export function Image({
className, className,
containerClassName, containerClassName,
@ -48,35 +51,33 @@ export function Image({
<InView> <InView>
{({ inView, ref }) => ( {({ inView, ref }) => (
<div ref={ref}> <div ref={ref}>
{inView && ( <Img
<Img className={clsx(styles.image, className)}
className={clsx(styles.image, className)} container={(children) => (
container={(children) => ( <ImageContainer
<ImageContainer className={containerClassName}
className={containerClassName} enableAnimation={enableAnimation}
enableAnimation={enableAnimation} {...imageContainerProps}
{...imageContainerProps} >
> {children}
{children} </ImageContainer>
)}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
<ImageLoader className={className} />
</ImageContainer> </ImageContainer>
)} ) : null
loader={ }
includeLoader ? ( src={inView ? src : FALLBACK_SVG}
<ImageContainer className={containerClassName}> unloader={
<ImageLoader className={className} /> includeUnloader ? (
</ImageContainer> <ImageContainer className={containerClassName}>
) : null <ImageUnloader className={className} />
} </ImageContainer>
src={src} ) : null
unloader={ }
includeUnloader ? ( />
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
)}
</div> </div>
)} )}
</InView> </InView>