@alfalab/core-components-gallery 5.7.4 → 5.8.0

package/src/Component.tsx

@@ -1,9 +1,11 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
+import cn from 'classnames';
 import SwiperCore from 'swiper';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
+import { useMedia } from '@alfalab/hooks';
 
-import { Header, ImageViewer, NavigationBar } from './components';
+import { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';
 import { GalleryContext } from './context';
 import { GalleryImage, ImageMeta } from './types';
 
@@ -48,6 +50,11 @@ export type GalleryProps = {
     onSlideIndexChange?: (index: number) => void;
 };
 
+const DEFAULT_FULL_SCREEN = false;
+const DEFAULT_MUTED_VIDEO = true;
+const DEFAULT_PLAYING_VIDEO = true;
+const DEFAULT_HIDE_NAVIGATION = false;
+
 const Backdrop = () => null;
 
 export const Gallery: FC<GalleryProps> = ({
@@ -67,7 +74,22 @@ export const Gallery: FC<GalleryProps> = ({
 
     const [swiper, setSwiper] = useState<SwiperCore>();
     const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);
-    const [fullScreen, setFullScreen] = useState(false);
+    const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);
+    const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);
+    const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);
+    const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);
+
+    const [view] = useMedia<'desktop' | 'mobile'>(
+        [
+            ['mobile', '(max-width: 1023px)'],
+            ['desktop', '(min-width: 1024px)'],
+        ],
+        'desktop',
+    );
+
+    const isMobile = view === 'mobile';
+
+    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
 
     const slideTo = useCallback(
         (index: number) => {
@@ -75,6 +97,7 @@ export const Gallery: FC<GalleryProps> = ({
                 setCurrentSlideIndex?.(index);
 
                 if (swiper) {
+                    setPlayingVideo(true);
                     swiper.slideTo(index);
                 }
             }
@@ -151,6 +174,11 @@ export const Gallery: FC<GalleryProps> = ({
         [fullScreen, open, slideNext, slidePrev],
     );
 
+    const onUnmount = useCallback(() => {
+        setPlayingVideo(DEFAULT_PLAYING_VIDEO);
+        setMutedVideo(DEFAULT_MUTED_VIDEO);
+    }, [setPlayingVideo]);
+
     useEffect(() => {
         if (!uncontrolled && !swiper?.destroyed) {
             swiper?.slideTo(currentSlideIndex);
@@ -171,6 +199,7 @@ export const Gallery: FC<GalleryProps> = ({
 
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const galleryContext: GalleryContext = {
+        view,
         singleSlide,
         currentSlideIndex,
         images,
@@ -178,6 +207,12 @@ export const Gallery: FC<GalleryProps> = ({
         fullScreen,
         initialSlide: uncontrolled ? initialSlide : currentSlideIndex,
         setFullScreen,
+        playingVideo,
+        setPlayingVideo,
+        mutedVideo,
+        setMutedVideo,
+        hideNavigation,
+        setHideNavigation,
         setImageMeta,
         slideNext,
         slidePrev,
@@ -197,13 +232,20 @@ export const Gallery: FC<GalleryProps> = ({
                 className={styles.modal}
                 onEscapeKeyDown={handleEscapeKeyDown}
                 Backdrop={Backdrop}
+                onUnmount={onUnmount}
             >
                 <div className={styles.container}>
-                    <Header />
-
+                    {view === 'desktop' ? <Header /> : <HeaderMobile />}
                     <ImageViewer />
-
-                    {showNavigationBar && <NavigationBar />}
+                    <nav
+                        className={cn({
+                            [styles.navigationVideo]: isCurrentVideo && isMobile,
+                            [styles.hideNavigation]: hideNavigation && isMobile,
+                        })}
+                    >
+                        {showNavigationBar && <NavigationBar />}
+                        {view === 'mobile' && <InfoBar />}
+                    </nav>
                 </div>
             </BaseModal>
         </GalleryContext.Provider>

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

@@ -0,0 +1,21 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.buttons {
+    display: flex;
+    padding-left: var(--gap-32);
+
+    & path {
+        color: var(--color-static-neutral-translucent-1300-inverted);
+    }
+}
+
+/* TODO: применять static цвет через prop IconButton'а */
+.iconButton {
+    &:hover path {
+        color: var(--color-static-neutral-100-hover);
+    }
+
+    &:active path {
+        color: var(--color-static-neutral-100-press);
+    }
+}

package/src/components/{header/buttons.tsx → buttons/index.tsx}

@@ -1,11 +1,17 @@
 import React, { FC, MutableRefObject } from 'react';
+import cn from 'classnames';
 
 import { IconButton, IconButtonProps } from '@alfalab/core-components-icon-button';
 import { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';
+import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
 import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
 import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+import { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';
+import { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
+import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
+import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
 
 import styles from './index.module.css';
 
@@ -32,6 +38,39 @@ export const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
     </TooltipDesktop>
 );
 
+export const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (
+    <IconButton
+        {...restProps}
+        ref={buttonRef}
+        icon={ArrowLeftMIcon}
+        colors='inverted'
+        aria-label='Вернуться назад'
+        className={styles.iconButton}
+    />
+);
+
+export const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (
+    <IconButton
+        {...restProps}
+        ref={buttonRef}
+        icon={PlayCompactMIcon}
+        colors='inverted'
+        aria-label='Проиграть видео'
+        className={cn(styles.iconButton, className)}
+    />
+);
+
+export const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (
+    <IconButton
+        {...restProps}
+        ref={buttonRef}
+        icon={PauseCompactMIcon}
+        colors='inverted'
+        aria-label='Поставить паузу на видео'
+        className={cn(styles.iconButton, className)}
+    />
+);
+
 export const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
     <TooltipDesktop
         trigger='hover'
@@ -50,6 +89,44 @@ export const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (
     </TooltipDesktop>
 );
 
+export const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (
+    <TooltipDesktop
+        trigger='hover'
+        position='bottom'
+        content='Выключить звук'
+        fallbackPlacements={['bottom-end']}
+        targetClassName={className}
+    >
+        <IconButton
+            {...restProps}
+            ref={buttonRef}
+            icon={SoundMIcon}
+            colors='inverted'
+            aria-label='Выключить звук'
+            className={styles.iconButton}
+        />
+    </TooltipDesktop>
+);
+
+export const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (
+    <TooltipDesktop
+        trigger='hover'
+        position='bottom'
+        content='Включить звук'
+        fallbackPlacements={['bottom-end']}
+        targetClassName={className}
+    >
+        <IconButton
+            {...restProps}
+            ref={buttonRef}
+            icon={SoundCrossMIcon}
+            colors='inverted'
+            aria-label='Включить звук'
+            className={styles.iconButton}
+        />
+    </TooltipDesktop>
+);
+
 export const Download: FC<Props> = (props) => (
     <TooltipDesktop
         trigger='hover'

package/src/components/header/Component.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useContext, useEffect, useRef } from 'react';
 
 import { GalleryContext } from '../../context';
-import { isSmallImage, TestIds } from '../../utils';
+import { GALLERY_EVENTS, isSmallImage, isVideo, TestIds } from '../../utils';
+import * as Buttons from '../buttons';
 import { HeaderInfoBlock } from '../header-info-block';
 
-import * as Buttons from './buttons';
-
 import styles from './index.module.css';
 
 export const Header: FC = () => {
@@ -18,10 +17,32 @@ export const Header: FC = () => {
         getCurrentImage,
         setFullScreen,
         onClose,
+        mutedVideo,
+        setMutedVideo,
     } = useContext(GalleryContext);
 
+    const currentImage = getCurrentImage();
+    const meta = getCurrentImageMeta();
+
     const toggleFullScreenButton = useRef<HTMLButtonElement>(null);
 
+    const onMuteButtonClick = () => {
+        if (mutedVideo) {
+            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_UNMUTE, {
+                detail: { player: meta?.player?.current },
+            });
+
+            dispatchEvent(customEvent);
+        } else {
+            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_MUTE, {
+                detail: { player: meta?.player?.current },
+            });
+
+            dispatchEvent(customEvent);
+        }
+        setMutedVideo(!mutedVideo);
+    };
+
     const closeFullScreen = () => {
         setFullScreen(false);
     };
@@ -36,16 +57,10 @@ export const Header: FC = () => {
         }
     }, [fullScreen]);
 
-    const currentImage = getCurrentImage();
-
     const canDownload = currentImage?.canDownload ?? true;
     const filename = currentImage?.name || '';
     const description =
-        singleSlide || !images.length
-            ? ''
-            : `Изображение ${currentSlideIndex + 1} из ${images.length}`;
-
-    const meta = getCurrentImageMeta();
+        singleSlide || !images.length ? '' : `${currentSlideIndex + 1} из ${images.length}`;
 
     const showFullScreenButton = !isSmallImage(meta) && !meta?.broken;
     const showDownloadButton = !meta?.broken && canDownload;
@@ -65,11 +80,19 @@ export const Header: FC = () => {
             />
         );
 
+    const renderToggleMuteVideo = () =>
+        mutedVideo ? (
+            <Buttons.UnmuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.UNMUTE_BUTTON} />
+        ) : (
+            <Buttons.MuteVideo onClick={onMuteButtonClick} dataTestId={TestIds.MUTE_BUTTON} />
+        );
+
     return (
         <div className={styles.header}>
             <HeaderInfoBlock filename={filename} description={description} />
 
             <div className={styles.buttons}>
+                {isVideo(currentImage?.src) && renderToggleMuteVideo()}
                 {showFullScreenButton && renderToggleFullScreenButton()}
 
                 {showDownloadButton && (

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

@@ -8,23 +8,3 @@
     padding: var(--gap-16) var(--gap-24);
     box-sizing: border-box;
 }
-
-.buttons {
-    display: flex;
-    padding-left: var(--gap-32);
-
-    & path {
-        color: var(--color-static-neutral-translucent-1300-inverted);
-    }
-}
-
-/* TODO: применять static цвет через prop IconButton'а */
-.iconButton {
-    &:hover path {
-        color: var(--color-static-neutral-100-hover);
-    }
-
-    &:active path {
-        color: var(--color-static-neutral-100-press);
-    }
-}

package/src/components/header-mobile/Component.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { GalleryContext } from '../../context';
+import { isVideo, TestIds } from '../../utils';
+import * as Buttons from '../buttons';
+
+import styles from './index.module.css';
+
+export const HeaderMobile = () => {
+    const {
+        onClose,
+        images,
+        currentSlideIndex,
+        getCurrentImage,
+        getCurrentImageMeta,
+        hideNavigation,
+    } = useContext(GalleryContext);
+
+    const currentImage = getCurrentImage();
+    const meta = getCurrentImageMeta();
+
+    const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;
+
+    const canDownload = currentImage?.canDownload ?? true;
+    const showDownloadButton = !meta?.broken && canDownload;
+
+    return (
+        <div
+            className={cn(styles.headerMobile, {
+                [styles.video]: isVideo(currentImage?.src),
+                [styles.hide]: hideNavigation,
+            })}
+        >
+            <Buttons.BackArrow onClick={onClose} />
+            <Typography.Text
+                className={styles.description}
+                tag='div'
+                view='component-primary'
+                color='static-primary-light'
+            >
+                {description}
+            </Typography.Text>
+            <div className={styles.rightButtons}>
+                {showDownloadButton && (
+                    <Buttons.Download
+                        href={currentImage?.src}
+                        download={currentImage?.name}
+                        dataTestId={TestIds.DOWNLOAD_BUTTON}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,35 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.headerMobile {
+    position: relative;
+    height: 72px;
+    z-index: 3;
+    padding: var(--gap-12) var(--gap-8);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.video {
+        position: absolute;
+        width: 100%;
+        padding: 0;
+        background-color: var(--color-static-neutral-0-inverted);
+        transition: transform 0.3s ease-in-out;
+    }
+}
+
+.hide {
+    transform: translateY(-96px);
+}
+
+.leftButton,
+.rightButtons {
+    display: flex;
+    align-items: center;
+}
+
+.description {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}

package/src/components/header-mobile/index.ts

@@ -0,0 +1 @@
+export { HeaderMobile } from './Component';

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

@@ -1,11 +1,19 @@
-import React, { FC, KeyboardEventHandler, useContext, useRef } from 'react';
+import React, { FC, KeyboardEventHandler, useContext, useEffect, useRef } from 'react';
 import cn from 'classnames';
 
-import { getImageAlt } from '@alfalab/core-components-gallery';
 import { useFocus } from '@alfalab/hooks';
 
 import { GalleryContext } from '../../context';
 import { GalleryImage } from '../../types';
+import {
+    getImageAlt,
+    isVideo,
+    PREVIEW_HEIGHT_DESKTOP,
+    PREVIEW_HEIGHT_MOBILE,
+    PREVIEW_VIDEO_MULTIPLIER,
+    PREVIEW_WIDTH_DESKTOP,
+    PREVIEW_WIDTH_MOBILE,
+} from '../../utils';
 
 import { NoImagePaths } from './paths';
 
@@ -20,9 +28,44 @@ type Props = {
 };
 
 export const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {
-    const { imagesMeta } = useContext(GalleryContext);
+    const { imagesMeta, view } = useContext(GalleryContext);
+
+    const isMobile = view === 'mobile';
+
+    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;
+    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;
 
     const ref = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const video = imagesMeta[index]?.player?.current;
+        const context = canvas?.getContext('2d');
+        const drawPreview = () => {
+            if (video) {
+                context?.drawImage(
+                    video,
+                    0,
+                    0,
+                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,
+                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,
+                );
+            }
+        };
+
+        drawPreview();
+
+        if (isVideo(image.src)) {
+            video?.addEventListener('canplay', drawPreview);
+        }
+
+        return () => {
+            if (isVideo(image.src)) {
+                video?.removeEventListener('canplay', drawPreview);
+            }
+        };
+    }, [image.src, imagesMeta, index]);
 
     const handleClick = () => {
         onSelect(index);
@@ -40,50 +83,110 @@ export const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect
 
     const isBroken = Boolean(meta?.broken);
 
-    return (
-        <div
-            className={cn(
-                styles.component,
-                { [styles.active]: active, [styles.focused]: focused },
-                className,
-            )}
-            onClick={handleClick}
-            role='button'
-            onKeyDown={handleKeyDown}
-            tabIndex={0}
-            ref={ref}
-            aria-label={`Перейти к изображению ${index + 1}`}
-        >
-            {isBroken ? (
-                <div className={cn(styles.preview, styles.brokenImageWrapper)}>
-                    <div className={styles.brokenIcon}>
+    const renderPreview = () => {
+        if (isBroken) {
+            return (
+                <div
+                    className={cn(
+                        styles.preview,
+                        { [styles.mobile]: isMobile, [styles.active]: active },
+                        styles.brokenImageWrapper,
+                    )}
+                >
+                    <div className={cn(styles.brokenIcon)}>
                         <svg
                             xmlns='http://www.w3.org/2000/svg'
-                            width='40'
-                            height='40'
-                            viewBox='0 0 40 40'
+                            width={previewWidth}
+                            height={previewHeight}
+                            viewBox={`${isMobile ? -6 : 0} ${
+                                isMobile ? -12 : 0
+                            } ${previewWidth} ${previewHeight}`}
                             fill='none'
                         >
-                            <rect width='40' height='40' fill='none' />
+                            <rect fill='none' />
                             <path
                                 fillRule='evenodd'
                                 clipRule='evenodd'
-                                d={NoImagePaths.baseImage}
+                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}
+                                fill='#89898A'
+                            />
+                            <path
+                                d={
+                                    isMobile
+                                        ? NoImagePaths.mobileTriangle
+                                        : NoImagePaths.triangleImage
+                                }
                                 fill='#89898A'
                             />
-                            <path d={NoImagePaths.triangleImage} fill='#89898A' />
                         </svg>
                     </div>
                 </div>
-            ) : (
+            );
+        }
+
+        if (image.previewSrc) {
+            return (
+                <div
+                    className={cn(styles.preview, styles.image, {
+                        [styles.loading]: !meta,
+                        [styles.mobile]: isMobile,
+                    })}
+                >
+                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />
+                </div>
+            );
+        }
+
+        if (isVideo(image.src)) {
+            return (
                 <div
                     className={cn(styles.preview, styles.image, {
                         [styles.loading]: !meta,
+                        [styles.mobile]: isMobile,
                     })}
                 >
-                    <img src={image.src} alt={getImageAlt(image, index)} />
+                    <canvas
+                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}
+                        data-testid='canvas'
+                        width={previewWidth}
+                        height={previewHeight}
+                        ref={canvasRef}
+                    />
                 </div>
+            );
+        }
+
+        return (
+            <div
+                className={cn(styles.preview, styles.image, {
+                    [styles.loading]: !meta,
+                    [styles.mobile]: isMobile,
+                })}
+            >
+                <img src={image.src} alt={getImageAlt(image, index)} />
+            </div>
+        );
+    };
+
+    return (
+        <div
+            className={cn(
+                styles.component,
+                {
+                    [styles.active]: active,
+                    [styles.focused]: focused,
+                    [styles.mobile]: isMobile,
+                },
+                className,
             )}
+            onClick={handleClick}
+            role='button'
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            ref={ref}
+            aria-label={`Перейти к ${index + 1} элементу`}
+        >
+            {renderPreview()}
         </div>
     );
 };