antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fullscreen header image on click

Browse source
This commit is contained in:
Kendall Garner 2025-05-14 08:25:02 -07:00
parent 9b95f47a91
commit a8fb7ff11e
No known key found for this signature in database
GPG key ID: 9355F387FE765C94
1 changed files with 42 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/renderer/features/shared/components/library-header.tsx
View file

@ -1,5 +1,6 @@
import { forwardRef, ReactNode, Ref, useState } from 'react';
import { Group } from '@mantine/core';
import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
import { Center, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AutoTextSize } from 'auto-text-size';
import clsx from 'clsx';
import { useTranslation } from 'react-i18next';
@ -58,6 +59,35 @@ export const LibraryHeader = forwardRef(
}
};
const openImage = useCallback(() => {
if (imageUrl && !isImageError) {
const fullSized = imageUrl.replace(/&?(size|width|height)=\d+/, '');
openModal({
children: (
<Center
style={{
cursor: 'pointer',
height: 'calc(100vh - 80px)',
width: '100%',
}}
onClick={() => closeAllModals()}
>
<img
alt="cover"
src={fullSized}
style={{
maxHeight: '100%',
maxWidth: '100%',
}}
/>
</Center>
),
fullScreen: true,
});
}
}, [imageUrl, isImageError]);
return (
<div
ref={ref}
@ -72,7 +102,16 @@ export const LibraryHeader = forwardRef(
[styles.opaqueOverlay]: albumBackground,
})}
/>
<div className={styles.imageSection}>
<div
className={styles.imageSection}
role="button"
style={{ cursor: 'pointer' }}
tabIndex={0}
onClick={() => openImage()}
onKeyDown={(event) =>
['Spacebar', ' ', 'Enter'].includes(event.key) && openImage()
}
>
{imageUrl && !isImageError ? (
<img
alt="cover"