@alfalab/core-components-gallery 5.7.4 → 5.8.0

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

@@ -3,18 +3,23 @@
 .component {
     display: flex;
     padding: var(--gap-4);
-    border: 2px solid rgba(0, 0, 0, 0);
-    border-radius: var(--border-radius-12);
+    z-index: 3;
     overflow: hidden;
     transition: border 0.15s ease-in-out;
     outline: none;
+
+    & .image {
+        opacity: 0.3;
+    }
+
+    &.mobile {
+        padding: 0;
+    }
 }
 
 .active {
-    border-color: var(--color-static-overlay-white-xhigh);
-
     & > .image {
-        opacity: 0.7;
+        opacity: 1;
     }
 }
 
@@ -22,9 +27,15 @@
     width: 56px;
     height: 56px;
     flex-shrink: 0;
-    border-radius: var(--border-radius-8);
+    border-radius: var(--border-radius-12);
     cursor: pointer;
     user-select: none;
+
+    &.mobile {
+        width: 36px;
+        height: 46px;
+        border-radius: var(--border-radius-8);
+    }
 }
 
 .image {
@@ -32,7 +43,6 @@
 
     & > img {
         display: block;
-        background-color: var(--color-light-base-bg-primary);
         width: 100%;
         height: 100%;
         border-radius: inherit;
@@ -59,9 +69,10 @@
     justify-content: center;
     align-items: center;
     background-color: var(--color-static-neutral-300-inverted);
+    opacity: 0.3;
 
-    &:hover {
-        opacity: 0.7;
+    &.active {
+        opacity: 1;
     }
 }
 
@@ -73,3 +84,11 @@
 .focused {
     @mixin focus-outline;
 }
+
+.canvasPreview {
+    border-radius: var(--border-radius-12);
+
+    &.mobile {
+        border-radius: var(--border-radius-8);
+    }
+}

package/src/components/image-preview/paths.ts

@@ -2,4 +2,7 @@ export const NoImagePaths = {
     baseImage:
         'M 30.5 6.5 L 4 6.5 C 2.894531 6.5 2 7.394531 2 8.5 L 2 31.5 C 2 32.605469 2.894531 33.5 4 33.5 L 36 33.5 C 37.105469 33.5 38 32.605469 38 31.5 L 38 14 L 32.367188 14 C 31.335938 14 30.5 13.164062 30.5 12.132812 Z M 11.917969 15.667969 C 12.285156 15.296875 12.882812 15.296875 13.25 15.667969 L 14.25 16.667969 L 15.25 15.667969 C 15.617188 15.296875 16.214844 15.296875 16.582031 15.667969 C 16.953125 16.035156 16.953125 16.632812 16.582031 17 L 15.582031 18 L 16.582031 19 C 16.953125 19.367188 16.953125 19.964844 16.582031 20.332031 C 16.214844 20.703125 15.617188 20.703125 15.25 20.332031 L 14.25 19.332031 L 13.25 20.332031 C 12.882812 20.703125 12.285156 20.703125 11.917969 20.332031 C 11.546875 19.964844 11.546875 19.367188 11.917969 19 L 12.917969 18 L 11.917969 17 C 11.546875 16.632812 11.546875 16.035156 11.917969 15.667969 Z M 24.75 15.667969 C 24.382812 15.296875 23.785156 15.296875 23.414062 15.667969 C 23.046875 16.035156 23.046875 16.632812 23.414062 17 L 24.414062 18 L 23.414062 19 C 23.046875 19.367188 23.046875 19.964844 23.414062 20.332031 C 23.785156 20.703125 24.378906 20.703125 24.75 20.332031 L 25.75 19.332031 L 26.75 20.332031 C 27.117188 20.703125 27.714844 20.703125 28.082031 20.332031 C 28.449219 19.964844 28.449219 19.367188 28.082031 19 L 27.082031 18 L 28.082031 17 C 28.449219 16.632812 28.449219 16.035156 28.082031 15.667969 C 27.714844 15.296875 27.117188 15.296875 26.75 15.667969 L 25.75 16.667969 Z M 14.40625 27.914062 L 14.402344 27.914062 C 13.898438 28.136719 13.308594 27.910156 13.085938 27.40625 C 12.863281 26.902344 13.089844 26.308594 13.59375 26.085938 L 14 27 C 13.59375 26.085938 13.59375 26.085938 13.59375 26.085938 L 13.597656 26.085938 L 13.601562 26.082031 L 13.609375 26.078125 L 13.621094 26.074219 L 13.636719 26.066406 C 13.660156 26.058594 13.695312 26.042969 13.734375 26.027344 C 13.816406 25.996094 13.933594 25.949219 14.082031 25.898438 C 14.378906 25.796875 14.808594 25.660156 15.359375 25.527344 C 16.457031 25.261719 18.035156 25 20 25 C 21.964844 25 23.542969 25.261719 24.640625 25.527344 C 25.191406 25.660156 25.621094 25.796875 25.917969 25.898438 C 25.96875 25.917969 26.015625 25.933594 26.058594 25.949219 C 26.144531 25.980469 26.210938 26.007812 26.265625 26.027344 C 26.285156 26.035156 26.304688 26.042969 26.320312 26.050781 C 26.335938 26.054688 26.351562 26.0625 26.363281 26.066406 L 26.382812 26.078125 L 26.390625 26.078125 L 26.398438 26.082031 L 26.402344 26.085938 L 26.40625 26.085938 C 26.40625 26.085938 26.40625 26.085938 26.402344 26.089844 L 26.398438 26.105469 L 26.40625 26.085938 C 26.910156 26.308594 27.136719 26.902344 26.914062 27.40625 C 26.691406 27.910156 26.101562 28.136719 25.597656 27.914062 L 20.449219 27.914062 L 25.59375 27.914062 L 25.585938 27.910156 C 25.574219 27.90625 25.554688 27.898438 25.527344 27.886719 C 25.472656 27.863281 25.382812 27.832031 25.261719 27.789062 C 25.019531 27.703125 24.652344 27.589844 24.171875 27.472656 C 23.207031 27.238281 21.785156 27 20 27 C 18.214844 27 16.792969 27.238281 15.828125 27.472656 C 15.347656 27.589844 14.980469 27.703125 14.738281 27.789062 C 14.617188 27.832031 14.527344 27.863281 14.472656 27.886719 C 14.445312 27.898438 14.425781 27.90625 14.414062 27.910156 L 14.40625 27.914062 L 20.449219 27.914062 Z M 14.40625 27.914062',
     triangleImage: 'M 38 12 L 32.5 12 L 32.5 6.5 Z M 38 12',
+    mobileImage:
+        'M19 0H1.33333C0.596954 0 0 0.596944 0 1.33333V16.6667C0 17.4031 0.596954 18 1.33333 18H22.6667C23.403 18 24 17.4031 24 16.6667V4.99995H20.2444C19.5571 4.99995 19 4.44279 19 3.7555V0ZM6.61123 6.11112C6.85668 5.86566 7.25465 5.86566 7.5001 6.11112L8.1667 6.77773L8.83331 6.1111C9.07878 5.86564 9.47675 5.86564 9.7222 6.1111C9.96766 6.35657 9.96766 6.75454 9.7222 7L9.05558 7.66661L9.72231 8.33333C9.96777 8.57878 9.96777 8.97675 9.72231 9.22221C9.47686 9.46767 9.07889 9.46767 8.83344 9.22221L8.16671 8.55548L7.49999 9.22221C7.25454 9.46765 6.85657 9.46765 6.6111 9.22221C6.36565 8.97675 6.36565 8.57878 6.6111 8.33331L7.27782 7.66659L6.61123 7C6.36576 6.75454 6.36576 6.35657 6.61123 6.11112ZM15.1661 6.11112C14.9207 5.86566 14.5227 5.86566 14.2772 6.11112C14.0318 6.35659 14.0318 6.75456 14.2772 7L14.9438 7.66661L14.2771 8.33333C14.0317 8.57878 14.0317 8.97675 14.2771 9.22221C14.5226 9.46767 14.9206 9.46767 15.166 9.22221L15.8327 8.55548L16.4995 9.22221C16.7449 9.46767 17.1429 9.46767 17.3883 9.22221C17.6338 8.97677 17.6338 8.5788 17.3883 8.33333L16.7216 7.66661L17.3882 7C17.6337 6.75454 17.6337 6.35657 17.3882 6.11112C17.1428 5.86566 16.7448 5.86566 16.4993 6.11112L15.8327 6.77773L15.1661 6.11112ZM8.26956 14.2764L8.26919 14.2766C7.93322 14.4248 7.54007 14.2733 7.39079 13.9374C7.24125 13.601 7.39278 13.207 7.72924 13.0575L8 13.6667C7.72924 13.0575 7.72962 13.0573 7.72962 13.0573L7.73005 13.0571L7.73099 13.0567L7.7333 13.0557L7.73957 13.0529L7.74749 13.0495L7.75875 13.0448C7.77446 13.0381 7.796 13.0293 7.82326 13.0184C7.87777 12.9968 7.95515 12.9674 8.05442 12.9328C8.25294 12.8638 8.53925 12.7742 8.90544 12.6854C9.63773 12.5079 10.6907 12.3333 12 12.3333C13.3093 12.3333 14.3623 12.5079 15.0946 12.6854C15.4608 12.7742 15.7471 12.8638 15.9456 12.9328C15.9796 12.9447 16.011 12.9559 16.0398 12.9664C16.0952 12.9866 16.1409 13.0042 16.1767 13.0184C16.1901 13.0238 16.2022 13.0286 16.2128 13.033C16.2238 13.0375 16.2333 13.0414 16.2413 13.0448L16.2559 13.051L16.2604 13.0529L16.2667 13.0557L16.269 13.0567L16.27 13.0571L16.2704 13.0573C16.2704 13.0573 16.2704 13.0573 16.2692 13.0602L16.2646 13.0707L16.2708 13.0575C16.6072 13.207 16.7587 13.601 16.6092 13.9374C16.4599 14.2733 16.0671 14.4249 15.731 14.2767L15.7304 14.2764L12.2987 14.2764L15.73 14.2762L15.7238 14.2736C15.7163 14.2704 15.7032 14.265 15.6846 14.2576C15.6473 14.2428 15.588 14.2201 15.5075 14.1922C15.3467 14.1362 15.1017 14.0591 14.7804 13.9812C14.1377 13.8254 13.1907 13.6667 12 13.6667C10.8093 13.6667 9.86227 13.8254 9.21956 13.9812C8.89825 14.0591 8.65331 14.1362 8.49245 14.1922C8.41204 14.2201 8.3527 14.2428 8.31541 14.2576C8.29677 14.265 8.28365 14.2704 8.27616 14.2736L8.27041 14.276L12.2987 14.2764L8.26956 14.2764Z',
+    mobileTriangle: 'M23.9999 3.66661H20.3333V0L23.9999 3.66661Z',
 };

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

@@ -19,7 +19,7 @@ import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIco
 import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 
 import { GalleryContext } from '../../context';
-import { getImageAlt, getImageKey, TestIds } from '../../utils';
+import { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';
 
 import { Slide } from './slide';
 
@@ -37,15 +37,18 @@ export const ImageViewer: FC = () => {
         currentSlideIndex,
         initialSlide,
         onClose,
-        getCurrentImage,
         setImageMeta,
         setCurrentSlideIndex,
         getSwiper,
         setSwiper,
         slidePrev,
         slideNext,
+        getCurrentImage,
+        view,
     } = useContext(GalleryContext);
 
+    const isMobile = view === 'mobile';
+
     const leftArrowRef = useRef<HTMLDivElement>(null);
     const rightArrowRef = useRef<HTMLDivElement>(null);
 
@@ -53,6 +56,7 @@ export const ImageViewer: FC = () => {
     const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');
 
     const swiper = getSwiper();
+    const currentImage = getCurrentImage();
 
     const handleSlideChange = useCallback(() => {
         setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);
@@ -102,11 +106,11 @@ export const ImageViewer: FC = () => {
 
             const isImg = eventTarget.tagName === 'IMG';
 
-            if (!isImg && !isPlaceholder && !isArrow) {
+            if (!isImg && !isPlaceholder && !isArrow && !isMobile) {
                 onClose();
             }
         },
-        [onClose],
+        [isMobile, onClose],
     );
 
     useEffect(() => {
@@ -120,32 +124,49 @@ export const ImageViewer: FC = () => {
             fadeEffect: {
                 crossFade: true,
             },
-            className: cn(styles.swiper, { [styles.hidden]: fullScreen }),
+            className: cn(styles.swiper, {
+                [styles.hidden]: fullScreen && !isVideo(currentImage?.src),
+                [styles.fullScreenVideo]: fullScreen && !singleSlide && isVideo(currentImage?.src),
+                [styles.mobile]: isMobile,
+                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
+            }),
             controller: { control: swiper },
             a11y: {
                 slideRole: 'img',
             },
             initialSlide,
             simulateTouch: false,
+            zoom: { maxRatio: 4 },
             onSwiper: setSwiper,
             onSlideChange: handleSlideChange,
         }),
-        [swiper, fullScreen, initialSlide, handleSlideChange, setSwiper],
+        [
+            fullScreen,
+            currentImage?.src,
+            singleSlide,
+            isMobile,
+            swiper,
+            initialSlide,
+            setSwiper,
+            handleSlideChange,
+        ],
     );
 
-    const showControls = !singleSlide && !fullScreen && !!images.length;
+    const showControls = !singleSlide && !fullScreen && !isMobile && !!images.length;
 
     const swiperWidth = swiper?.width || 1;
     const swiperHeight = swiper?.height || swiper?.width || 1;
 
     const swiperAspectRatio = swiperWidth / swiperHeight;
 
-    const currentImage = getCurrentImage();
-
     return (
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
         <div
-            className={cn(styles.component, { [styles.singleSlide]: singleSlide })}
+            className={cn(styles.component, {
+                [styles.singleSlide]: singleSlide,
+                [styles.mobile]: isMobile,
+                [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
+            })}
             onClick={handleWrapperClick}
         >
             {showControls && (
@@ -165,7 +186,7 @@ export const ImageViewer: FC = () => {
                 </div>
             )}
 
-            {fullScreen && (
+            {fullScreen && !isVideo(currentImage?.src) && (
                 <img
                     src={currentImage?.src}
                     alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}

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

@@ -4,7 +4,6 @@
     display: flex;
     flex-grow: 1;
     justify-content: center;
-    align-items: center;
     background-color: var(--color-static-neutral-0-inverted);
 }
 
@@ -17,11 +16,28 @@
     max-height: calc(100vh - 168px);
     padding: var(--gap-32) var(--gap-16);
     box-sizing: border-box;
+
+    &.mobile {
+        max-height: calc(100vh - 210px);
+    }
+
+    &.mobileVideo {
+        max-height: 100vh;
+    }
 }
 
 .singleSlide .swiper {
     max-height: calc(100vh - 80px);
     padding: var(--gap-32);
+
+    &.mobile {
+        max-height: calc(100vh - 174px);
+        padding: 0;
+    }
+
+    &.mobileVideo {
+        max-height: 100vh;
+    }
 }
 
 .hidden {
@@ -46,8 +62,11 @@
     width: 0;
     height: 0;
     user-select: none;
-    background-color: var(--color-light-base-bg-primary);
     border-radius: var(--border-radius-8);
+
+    &.mobile {
+        border-radius: var(--border-radius-0);
+    }
 }
 
 .smallImage {
@@ -55,7 +74,6 @@
     width: auto;
     height: auto;
     user-select: none;
-    background-color: var(--color-light-base-bg-primary);
 }
 
 .verticalImageFit {
@@ -124,3 +142,8 @@
     height: auto;
     background-color: var(--color-light-base-bg-primary);
 }
+
+.fullScreenVideo {
+    width: calc(100% - 192px);
+    max-height: calc(100vh - 82px);
+}

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

@@ -1,12 +1,14 @@
-import React, { FC, ReactNode, SyntheticEvent } from 'react';
+import React, { FC, ReactNode, SyntheticEvent, useContext } from 'react';
 import cn from 'classnames';
 
 import { Typography } from '@alfalab/core-components-typography';
 
+import { GalleryContext } from '../../context';
 import { GalleryImage, ImageMeta } from '../../types';
-import { getImageAlt, isSmallImage, TestIds } from '../../utils';
+import { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';
 
 import { NoImagePaths } from './paths';
+import { Video } from './video';
 
 import styles from './index.module.css';
 
@@ -16,9 +18,16 @@ type SlideInnerProps = {
     withPlaceholder: boolean;
     loading: boolean;
     children: ReactNode;
+    isVideoView?: boolean;
 };
 
-const SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, withPlaceholder }) => {
+const SlideInner: FC<SlideInnerProps> = ({
+    children,
+    broken,
+    loading,
+    withPlaceholder,
+    isVideoView,
+}) => {
     const content = broken ? (
         <div className={styles.brokenImgWrapper}>
             <div className={styles.brokenImgIcon}>
@@ -41,7 +50,7 @@ const SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, withPlaceh
             </div>
 
             <Typography.Text view='primary-small' color='static-secondary-light'>
-                Не удалось загрузить изображение
+                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}
             </Typography.Text>
         </div>
     ) : (
@@ -80,11 +89,27 @@ export const Slide: FC<SlideProps> = ({
     handleLoad,
     handleLoadError,
 }) => {
+    const { view } = useContext(GalleryContext);
+
     const broken = Boolean(meta?.broken);
     const small = isSmallImage(meta);
     const verticalImageFit = !small && swiperAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && swiperAspectRatio <= imageAspectRatio;
 
+    if (isVideo(image.src)) {
+        return (
+            <SlideInner
+                isVideoView={true}
+                active={isActive}
+                broken={broken}
+                withPlaceholder={broken}
+                loading={!meta}
+            >
+                <Video url={image.src} index={index} isActive={isActive} />
+            </SlideInner>
+        );
+    }
+
     return (
         <SlideInner
             active={isActive}
@@ -98,6 +123,7 @@ export const Slide: FC<SlideProps> = ({
                 className={cn({
                     [styles.smallImage]: small,
                     [styles.image]: !small && meta,
+                    [styles.mobile]: view === 'mobile',
                     [styles.verticalImageFit]: verticalImageFit,
                     [styles.horizontalImageFit]: horizontalImageFit,
                 })}

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

@@ -0,0 +1,36 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.videoWrapper {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
+.video {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--border-radius-24);
+}
+
+.mobile {
+    border-radius: 0;
+}
+
+.videoButton {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    color: green;
+}
+
+.icon {
+    color: var(--color-static-neutral-0);
+}
+
+.iconShape {
+    fill: var(--color-static-neutral-translucent-700);
+}

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

@@ -0,0 +1,159 @@
+import React, { MouseEvent, ReactEventHandler, useContext, useEffect, useRef } from 'react';
+import cn from 'classnames';
+import Hls from 'hls.js';
+
+import { Circle } from '@alfalab/core-components/icon-view/circle';
+import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
+
+import { GalleryContext } from '../../../context';
+import { GALLERY_EVENTS } from '../../../utils/constants';
+
+import styles from './index.module.css';
+
+type Props = {
+    url: string;
+    index: number;
+    isActive: boolean;
+    className?: string;
+};
+
+export const Video = ({ url, index, className, isActive }: Props) => {
+    const playerRef = useRef<HTMLVideoElement>(null);
+    const timer = useRef<ReturnType<typeof setTimeout>>();
+
+    const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation } =
+        useContext(GalleryContext);
+
+    const isMobile = view === 'mobile';
+
+    useEffect(() => {
+        setImageMeta({ player: playerRef }, index);
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [index]);
+
+    useEffect(() => {
+        const hls = new Hls();
+
+        if (Hls.isSupported()) {
+            hls.on(Hls.Events.ERROR, (_, data) => {
+                if (data.fatal) {
+                    switch (data.type) {
+                        case Hls.ErrorTypes.MEDIA_ERROR:
+                            hls.recoverMediaError();
+                            break;
+                        case Hls.ErrorTypes.NETWORK_ERROR:
+                            setImageMeta({ player: { current: null }, broken: true }, index);
+                            break;
+                        default:
+                            hls.destroy();
+                            break;
+                    }
+                }
+            });
+
+            hls.loadSource(url);
+            if (playerRef.current) {
+                hls.attachMedia(playerRef.current);
+            }
+        }
+
+        return () => {
+            if (hls) {
+                hls.destroy();
+            }
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        };
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [url, index]);
+
+    const handleWrapperClick = (e: MouseEvent) => {
+        e.stopPropagation();
+
+        if (isMobile) {
+            setHideNavigation(false);
+
+            if (playingVideo) {
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                }
+                timer.current = setTimeout(() => {
+                    setHideNavigation(true);
+                }, 3000);
+            }
+
+            return;
+        }
+
+        setPlayingVideo(!playingVideo);
+    };
+
+    useEffect(() => {
+        if (playerRef.current && isActive) {
+            if (playingVideo) {
+                playerRef.current.play();
+            } else {
+                playerRef.current.pause();
+            }
+        }
+        if (playerRef.current && !isActive) {
+            playerRef.current.pause();
+            playerRef.current.currentTime = 0;
+        }
+    }, [isActive, playingVideo]);
+
+    const onPlay: ReactEventHandler<HTMLVideoElement> = (e) => {
+        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PLAY, {
+            detail: { player: e.target },
+        });
+
+        dispatchEvent(customEvent);
+
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+
+        timer.current = setTimeout(() => {
+            setHideNavigation(true);
+        }, 3000);
+    };
+
+    const onPause: ReactEventHandler<HTMLVideoElement> = (e) => {
+        const customEvent = new CustomEvent(GALLERY_EVENTS.ON_PAUSE, {
+            detail: { player: e.target },
+        });
+
+        dispatchEvent(customEvent);
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = undefined;
+        }
+        setHideNavigation(false);
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div onClick={handleWrapperClick} className={styles.videoWrapper}>
+            <video
+                onPlay={onPlay}
+                onPause={onPause}
+                ref={playerRef}
+                playsInline={true}
+                muted={mutedVideo}
+                loop={true}
+                src={Hls.isSupported() ? undefined : url}
+                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}
+            >
+                <track kind='captions' />
+            </video>
+            {view === 'desktop' && !playingVideo && (
+                <div className={styles.videoButton}>
+                    <Circle size={64} shapeClassName={styles.iconShape}>
+                        <PlayCompactMIcon className={styles.icon} />
+                    </Circle>
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/index.ts

@@ -2,3 +2,5 @@ export * from './navigation-bar';
 export * from './header';
 export * from './image-preview';
 export * from './image-viewer';
+export * from './info-bar';
+export * from './header-mobile';

package/src/components/info-bar/Component.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useContext } from 'react';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { GalleryContext } from '../../context';
+import { GALLERY_EVENTS, isVideo } from '../../utils';
+import * as Buttons from '../buttons';
+
+import styles from './index.module.css';
+
+export const InfoBar = () => {
+    const {
+        getCurrentImage,
+        mutedVideo,
+        setMutedVideo,
+        playingVideo,
+        setPlayingVideo,
+        getCurrentImageMeta,
+    } = useContext(GalleryContext);
+
+    const image = getCurrentImage();
+    const meta = getCurrentImageMeta();
+
+    const handleMuteVideo = useCallback(() => {
+        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);
+    }, [meta?.player, mutedVideo, setMutedVideo]);
+
+    const handlePlayVideo = useCallback(() => {
+        setPlayingVideo(!playingVideo);
+    }, [playingVideo, setPlayingVideo]);
+
+    return isVideo(image?.src) ? (
+        <section className={styles.videoButtons}>
+            {playingVideo ? (
+                <Buttons.Pause onClick={handlePlayVideo} className={styles.center} />
+            ) : (
+                <Buttons.Play onClick={handlePlayVideo} className={styles.center} />
+            )}
+            {mutedVideo ? (
+                <Buttons.UnmuteVideo onClick={handleMuteVideo} className={styles.right} />
+            ) : (
+                <Buttons.MuteVideo onClick={handleMuteVideo} className={styles.right} />
+            )}
+        </section>
+    ) : (
+        <Typography.Text
+            className={styles.description}
+            tag='div'
+            view='component'
+            color='primary-inverted'
+        >
+            {image?.name}
+        </Typography.Text>
+    );
+};

package/src/components/info-bar/index.module.css

@@ -0,0 +1,23 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
+.description {
+    text-align: center;
+    margin-bottom: var(--gap-8);
+}
+
+.videoButtons {
+    padding: 0 var(--gap-8);
+    position: relative;
+    height: 48px;
+}
+
+.center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.right {
+    position: absolute;
+    right: 0;
+}

package/src/components/info-bar/index.ts

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

package/src/components/navigation-bar/Component.tsx

@@ -11,7 +11,7 @@ const MIN_SCROLL_STEP = 24;
 export const NavigationBar: FC = () => {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper } =
+    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo } =
         useContext(GalleryContext);
 
     const swiper = getSwiper();
@@ -20,6 +20,7 @@ export const NavigationBar: FC = () => {
         setCurrentSlideIndex?.(index);
 
         if (swiper) {
+            setPlayingVideo(true);
             swiper.slideTo(index);
         }
     };

package/src/components/navigation-bar/index.module.css

@@ -16,6 +16,10 @@
     }
 }
 
+.previews {
+    display: flex;
+}
+
 .preview {
     flex-shrink: 0;
     margin: var(--gap-0) var(--gap-2);