@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/src/components/buttons/index.tsx

@@ -2,6 +2,7 @@ import React, { type FC, type MutableRefObject } from 'react';
 import cn from 'classnames';
 
 import { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';
+import { useIsDesktop } from '@alfalab/core-components-mq';
 import { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';
 import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
 import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
@@ -14,6 +15,8 @@ import { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';
 import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
 import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
 
+import { downloadFile, isVideo } from '../../utils';
+
 import styles from './index.module.css';
 
 type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
@@ -21,13 +24,10 @@ type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
     download?: string | boolean;
 };
 
-export const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Открыть в полноэкранном режиме'
-        fallbackPlacements={['bottom-end']}
-    >
+export const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    const iconButton = (
         <IconButton
             {...restProps}
             ref={buttonRef}
@@ -35,8 +35,23 @@ export const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
             aria-label='Открыть в полноэкранном режиме'
             className={styles.iconButton}
         />
-    </TooltipDesktop>
-);
+    );
+
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Открыть в полноэкранном режиме'
+            fallbackPlacements={['bottom-end']}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
 
 export const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (
     <IconButton
@@ -68,13 +83,10 @@ export const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (
     />
 );
 
-export const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Выйти из полноэкранного режима'
-        fallbackPlacements={['bottom-end']}
-    >
+export const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    const iconButton = (
         <IconButton
             {...restProps}
             ref={buttonRef}
@@ -82,17 +94,28 @@ export const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
             aria-label='Выйти из полноэкранного режима'
             className={styles.iconButton}
         />
-    </TooltipDesktop>
-);
+    );
+
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Выйти из полноэкранного режима'
+            fallbackPlacements={['bottom-end']}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
 
-export const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Выключить звук'
-        fallbackPlacements={['bottom-end']}
-        targetClassName={className}
-    >
+export const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    const iconButton = (
         <IconButton
             {...restProps}
             ref={buttonRef}
@@ -100,17 +123,29 @@ export const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) =>
             aria-label='Выключить звук'
             className={styles.iconButton}
         />
-    </TooltipDesktop>
-);
+    );
+
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Выключить звук'
+            fallbackPlacements={['bottom-end']}
+            targetClassName={className}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
 
-export const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Включить звук'
-        fallbackPlacements={['bottom-end']}
-        targetClassName={className}
-    >
+export const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+
+    const iconButton = (
         <IconButton
             {...restProps}
             ref={buttonRef}
@@ -118,40 +153,100 @@ export const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) =
             aria-label='Включить звук'
             className={styles.iconButton}
         />
-    </TooltipDesktop>
-);
+    );
 
-export const Download: FC<Props> = (props) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Скачать'
-        fallbackPlacements={['bottom-end']}
-    >
-        <IconButton
-            {...props}
-            icon={PointerDownMIcon}
-            aria-label='Скачать'
-            className={styles.iconButton}
-        />
-    </TooltipDesktop>
-);
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Включить звук'
+            fallbackPlacements={['bottom-end']}
+            targetClassName={className}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
+
+export const Download: FC<Props & { href?: string }> = ({ href, ...props }) => {
+    const isDesktop = useIsDesktop();
+
+    const handleMobileVideoDownload = async (e: React.MouseEvent) => {
+        e.preventDefault();
+
+        if (!href) return;
+
+        const fileName = props.download?.toString() || 'video';
+        const fileType = isVideo(href) ? 'video/*' : undefined;
+
+        await downloadFile({
+            url: href,
+            fileName,
+            fileType,
+        });
+    };
 
-export const Share: FC<Props> = (props) => (
-    <TooltipDesktop
-        trigger='hover'
-        position='bottom'
-        content='Поделиться'
-        fallbackPlacements={['bottom-end']}
-    >
+    const iconButtonProps = {
+        ...props,
+        icon: PointerDownMIcon,
+        'aria-label': 'Скачать' as const,
+        className: styles.iconButton,
+    };
+
+    const iconButton =
+        !isDesktop && isVideo(href) ? (
+            <IconButton {...iconButtonProps} onClick={handleMobileVideoDownload} />
+        ) : (
+            <IconButton {...iconButtonProps} href={href} />
+        );
+
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Скачать'
+            fallbackPlacements={['bottom-end']}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
+
+export const Share: FC<Props> = (props) => {
+    const isDesktop = useIsDesktop();
+
+    const iconButton = (
         <IconButton
             {...props}
             icon={ShareMIcon}
             aria-label='Поделиться'
             className={styles.iconButton}
         />
-    </TooltipDesktop>
-);
+    );
+
+    return isDesktop ? (
+        <TooltipDesktop
+            view='hint'
+            colors='inverted'
+            trigger='hover'
+            position='bottom'
+            content='Поделиться'
+            fallbackPlacements={['bottom-end']}
+        >
+            {iconButton}
+        </TooltipDesktop>
+    ) : (
+        iconButton
+    );
+};
 
 export const Exit: FC<Props> = (props) => (
     <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />

package/src/components/header/index.module.css

@@ -5,6 +5,6 @@
     justify-content: space-between;
     flex-shrink: 0;
     width: 100%;
-    padding: var(--gap-16) var(--gap-32);
+    padding: var(--gap-16) var(--gap-24) var(--gap-16) var(--gap-32);
     box-sizing: border-box;
 }

package/src/components/header-info-block/Component.tsx

@@ -18,9 +18,9 @@ export const HeaderInfoBlock: FC<HeaderInfoBlockProps> = ({ filename, descriptio
         <div className={styles.info}>
             <div className={styles.filenameContainer}>
                 <TypographyTitle
-                    tag='h1'
+                    tag='h2'
                     className={styles.filenameHead}
-                    view='xsmall'
+                    view='small'
                     font='system'
                     color='static-primary-light'
                 >

package/src/components/image-preview/Component.tsx

@@ -151,7 +151,7 @@ export const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect
             return (
                 <div
                     className={cn(styles.preview, styles.image, {
-                        [styles.loading]: !meta,
+                        [styles.loading]: !meta?.loaded,
                         [styles.mobile]: isMobile,
                     })}
                 >

package/src/components/image-preview/index.module.css

@@ -59,7 +59,7 @@
     background-color: var(--color-static-neutral-100-inverted);
 
     & .active {
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 }
 
@@ -67,7 +67,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-static-neutral-300-inverted);
+    background-color: var(--color-static-neutral-translucent-100-inverted);
     opacity: 0.3;
 
     &.active {

package/src/components/image-viewer/hooks.ts

@@ -42,9 +42,10 @@ export const useHandleImageViewer = () => {
 
             const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));
 
-            const isImg = eventTarget.tagName === 'IMG';
+            const isContentArea = Boolean(eventTarget.closest('[data-content-area]'));
 
-            if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
+            // Закрываем галерею только при клике вне элементов контента и только на desktop
+            if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {
                 onClose();
             }
         },

package/src/components/image-viewer/index.module.css

@@ -132,7 +132,7 @@
 
         max-height: calc(100vh - 80px);
         max-height: calc(100dvh - 80px);
-        padding: var(--gap-32);
+        padding: var(--gap-0) var(--gap-32) var(--gap-32);
         box-sizing: border-box;
 
         &.mobile {
@@ -242,7 +242,7 @@
         width: 100%;
         height: 100%;
         border-radius: var(--border-radius-8);
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 
     .brokenImgWrapper {

package/src/components/image-viewer/slide.tsx

@@ -53,7 +53,7 @@ const SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoVie
     );
 
     return (
-        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>
+        <div className={cn(styles.slide, { [styles.slideLoading]: loading && !isVideoView })}>
             {broken ? <div className={styles.placeholder}>{content}</div> : content}
             <Spinner className={styles.spinner} preset={48} visible={loading} />
         </div>
@@ -135,6 +135,7 @@ export const Slide: FC<SlideProps> = ({
                 onLoad={(event) => handleLoad(event, index)}
                 onError={() => handleLoadError(index)}
                 style={imageStyle}
+                data-content-area='true'
                 data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}
             />
         </SlideInner>

package/src/components/image-viewer/video/index.module.css

@@ -5,10 +5,23 @@
     align-items: center;
     justify-content: center;
     height: 100%;
-    width: 100%;
-    min-width: 0;
-    min-height: 0;
+    width: auto;
+    max-width: 100%;
     position: relative;
+    min-width: 300px;
+    min-height: 200px;
+}
+
+.mobileWrapper {
+    width: 100%;
+}
+
+.videoWrapper.loading {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: var(--color-static-neutral-translucent-100-inverted);
+    border-radius: var(--border-radius-24);
+    align-items: center;
 }
 
 .video {

package/src/components/image-viewer/video/index.tsx

@@ -27,9 +27,12 @@ type Props = {
 };
 
 export const Video = ({ url, index, className, isActive }: Props) => {
+    const [videoLoaded, setVideoLoaded] = useState(false);
     const playerRef = useRef<HTMLVideoElement>(null);
     const timer = useRef<ReturnType<typeof setTimeout>>();
     const [hlsSupported, setHlsSupported] = useState<boolean>(true);
+    const abortController = useRef(new AbortController());
+    const [videoError, setVideoError] = useState(false);
 
     const {
         setImageMeta,
@@ -83,6 +86,47 @@ export const Video = ({ url, index, className, isActive }: Props) => {
         [setImageMeta, index],
     );
 
+    useEffect(() => () => abortController.current.abort(), []);
+
+    useEffect(() => {
+        const video = playerRef.current;
+
+        if (!video) {
+            return;
+        }
+
+        const { signal } = abortController.current;
+
+        const handleCanPlay = () => {
+            setVideoLoaded(true);
+            setVideoError(false);
+            setImageMeta(
+                {
+                    player: playerRef,
+                    width: video.videoWidth || 1920,
+                    height: video.videoHeight || 1080,
+                    loaded: true,
+                },
+                index,
+            );
+        };
+
+        const handleError = () => {
+            setVideoError(true);
+            setVideoLoaded(false);
+            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);
+        };
+
+        const handleLoadStart = () => {
+            setVideoLoaded(false);
+            setVideoError(false);
+        };
+
+        video.addEventListener('canplay', handleCanPlay, { signal });
+        video.addEventListener('error', handleError, { signal });
+        video.addEventListener('loadstart', handleLoadStart, { signal });
+    }, [setImageMeta, index]);
+
     useEffect(() => {
         let hls: Hls | null = null;
 
@@ -158,8 +202,12 @@ export const Video = ({ url, index, className, isActive }: Props) => {
     }, [isActive, playingVideo]);
 
     useEffect(() => {
+        const { signal } = abortController.current;
+
         const handleSpacePress = (e: KeyboardEvent) => {
             if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (playingVideo) {
                     setPlayingVideo(false);
                 } else {
@@ -168,11 +216,7 @@ export const Video = ({ url, index, className, isActive }: Props) => {
             }
         };
 
-        document.addEventListener('keyup', handleSpacePress);
-
-        return () => {
-            document.removeEventListener('keyup', handleSpacePress);
-        };
+        document.addEventListener('keydown', handleSpacePress, { signal });
     }, [isActive, playingVideo, setPlayingVideo]);
 
     const handleWrapperClick = (e: MouseEvent) => {
@@ -189,11 +233,9 @@ export const Video = ({ url, index, className, isActive }: Props) => {
                     setHideNavigation(true);
                 }, 3000);
             }
-
-            return;
+        } else {
+            setPlayingVideo(!playingVideo);
         }
-
-        setPlayingVideo(!playingVideo);
     };
 
     const handleBottomButtonClick = useCallback(
@@ -230,8 +272,15 @@ export const Video = ({ url, index, className, isActive }: Props) => {
     };
 
     return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        <div onClick={handleWrapperClick} className={styles.videoWrapper}>
+        <div
+            aria-hidden={true}
+            onClick={handleWrapperClick}
+            data-content-area='true'
+            className={cn(styles.videoWrapper, {
+                [styles.loading]: !videoLoaded && !videoError,
+                [styles.mobileWrapper]: isMobile,
+            })}
+        >
             <video
                 onPlay={onPlay}
                 onPause={onPause}
@@ -244,7 +293,7 @@ export const Video = ({ url, index, className, isActive }: Props) => {
             >
                 <track kind='captions' />
             </video>
-            {isDesktop && !playingVideo && (
+            {isDesktop && !playingVideo && videoLoaded && (
                 <div className={styles.videoButton}>
                     <Circle size={64} shapeClassName={styles.iconShape}>
                         <PlayCompactMIcon className={styles.icon} />
@@ -252,7 +301,7 @@ export const Video = ({ url, index, className, isActive }: Props) => {
                 </div>
             )}
             {isDesktop && <Subtitles />}
-            {isDesktop && image?.bottomButton && (
+            {isDesktop && image?.bottomButton && videoLoaded && (
                 <BottomButton
                     bottomButton={image.bottomButton}
                     onClick={handleBottomButtonClick}