@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/moderncssm/components/buttons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { type FC, type MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n    buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n    download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Открыть в полноэкранном режиме'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsOutwardMIcon}\n            aria-label='Открыть в полноэкранном режиме'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={ArrowLeftMIcon}\n        aria-label='Вернуться назад'\n        className={styles.iconButton}\n    />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PlayCompactMIcon}\n        aria-label='Проиграть видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PauseCompactMIcon}\n        aria-label='Поставить паузу на видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выйти из полноэкранного режима'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsInwardMIcon}\n            aria-label='Выйти из полноэкранного режима'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Выключить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundMIcon}\n            aria-label='Выключить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Включить звук'\n        fallbackPlacements={['bottom-end']}\n        targetClassName={className}\n    >\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundCrossMIcon}\n            aria-label='Включить звук'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Download: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Скачать'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={PointerDownMIcon}\n            aria-label='Скачать'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Share: FC<Props> = (props) => (\n    <TooltipDesktop\n        trigger='hover'\n        position='bottom'\n        content='Поделиться'\n        fallbackPlacements={['bottom-end']}\n    >\n        <IconButton\n            {...props}\n            icon={ShareMIcon}\n            aria-label='Поделиться'\n            className={styles.iconButton}\n        />\n    </TooltipDesktop>\n);\n\nexport const Exit: FC<Props> = (props) => (\n    <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/buttons/index.tsx"],"sourcesContent":["import React, { type FC, type MutableRefObject } from 'react';\nimport cn from 'classnames';\n\nimport { IconButton, type IconButtonProps } from '@alfalab/core-components-icon-button';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\nimport { TooltipDesktop } from '@alfalab/core-components-tooltip/desktop';\nimport { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';\nimport { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';\nimport { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';\nimport { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';\nimport { PauseCompactMIcon } from '@alfalab/icons-glyph/PauseCompactMIcon';\nimport { PlayCompactMIcon } from '@alfalab/icons-glyph/PlayCompactMIcon';\nimport { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';\nimport { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';\nimport { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';\nimport { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';\n\nimport { downloadFile, isVideo } from '../../utils';\n\nimport styles from './index.module.css';\n\ntype Props = Omit<IconButtonProps, 'icon' | 'colors'> & {\n    buttonRef?: MutableRefObject<HTMLButtonElement | null>;\n    download?: string | boolean;\n};\n\nexport const Fullscreen: FC<Props> = ({ buttonRef, ...restProps }) => {\n    const isDesktop = useIsDesktop();\n\n    const iconButton = (\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsOutwardMIcon}\n            aria-label='Открыть в полноэкранном режиме'\n            className={styles.iconButton}\n        />\n    );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Открыть в полноэкранном режиме'\n            fallbackPlacements={['bottom-end']}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const BackArrow: FC<Props> = ({ buttonRef, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={ArrowLeftMIcon}\n        aria-label='Вернуться назад'\n        className={styles.iconButton}\n    />\n);\n\nexport const Play: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PlayCompactMIcon}\n        aria-label='Проиграть видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const Pause: FC<Props> = ({ buttonRef, className, ...restProps }) => (\n    <IconButton\n        {...restProps}\n        ref={buttonRef}\n        icon={PauseCompactMIcon}\n        aria-label='Поставить паузу на видео'\n        className={cn(styles.iconButton, className)}\n    />\n);\n\nexport const ExitFullscreen: FC<Props> = ({ buttonRef, ...restProps }) => {\n    const isDesktop = useIsDesktop();\n\n    const iconButton = (\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={ArrowsInwardMIcon}\n            aria-label='Выйти из полноэкранного режима'\n            className={styles.iconButton}\n        />\n    );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Выйти из полноэкранного режима'\n            fallbackPlacements={['bottom-end']}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const MuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => {\n    const isDesktop = useIsDesktop();\n\n    const iconButton = (\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundMIcon}\n            aria-label='Выключить звук'\n            className={styles.iconButton}\n        />\n    );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Выключить звук'\n            fallbackPlacements={['bottom-end']}\n            targetClassName={className}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const UnmuteVideo: FC<Props> = ({ buttonRef, className, ...restProps }) => {\n    const isDesktop = useIsDesktop();\n\n    const iconButton = (\n        <IconButton\n            {...restProps}\n            ref={buttonRef}\n            icon={SoundCrossMIcon}\n            aria-label='Включить звук'\n            className={styles.iconButton}\n        />\n    );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Включить звук'\n            fallbackPlacements={['bottom-end']}\n            targetClassName={className}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const Download: FC<Props & { href?: string }> = ({ href, ...props }) => {\n    const isDesktop = useIsDesktop();\n\n    const handleMobileVideoDownload = async (e: React.MouseEvent) => {\n        e.preventDefault();\n\n        if (!href) return;\n\n        const fileName = props.download?.toString() || 'video';\n        const fileType = isVideo(href) ? 'video/*' : undefined;\n\n        await downloadFile({\n            url: href,\n            fileName,\n            fileType,\n        });\n    };\n\n    const iconButtonProps = {\n        ...props,\n        icon: PointerDownMIcon,\n        'aria-label': 'Скачать' as const,\n        className: styles.iconButton,\n    };\n\n    const iconButton =\n        !isDesktop && isVideo(href) ? (\n            <IconButton {...iconButtonProps} onClick={handleMobileVideoDownload} />\n        ) : (\n            <IconButton {...iconButtonProps} href={href} />\n        );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Скачать'\n            fallbackPlacements={['bottom-end']}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const Share: FC<Props> = (props) => {\n    const isDesktop = useIsDesktop();\n\n    const iconButton = (\n        <IconButton\n            {...props}\n            icon={ShareMIcon}\n            aria-label='Поделиться'\n            className={styles.iconButton}\n        />\n    );\n\n    return isDesktop ? (\n        <TooltipDesktop\n            view='hint'\n            colors='inverted'\n            trigger='hover'\n            position='bottom'\n            content='Поделиться'\n            fallbackPlacements={['bottom-end']}\n        >\n            {iconButton}\n        </TooltipDesktop>\n    ) : (\n        iconButton\n    );\n};\n\nexport const Exit: FC<Props> = (props) => (\n    <IconButton {...props} icon={CrossMIcon} aria-label='Закрыть' className={styles.iconButton} />\n);\n"],"names":[],"mappings":"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"}

package/moderncssm/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/moderncssm/components/header-info-block/Component.js

@@ -7,7 +7,7 @@ const HeaderInfoBlock = ({ filename, description }) => {
     const [head, tail] = splitFilename(filename);
     return (React.createElement("div", { className: styles.info },
         React.createElement("div", { className: styles.filenameContainer },
-            React.createElement(TypographyTitle, { tag: 'h1', className: styles.filenameHead, view: 'xsmall', font: 'system', color: 'static-primary-light' }, head),
+            React.createElement(TypographyTitle, { tag: 'h2', className: styles.filenameHead, view: 'small', font: 'system', color: 'static-primary-light' }, head),
             React.createElement(TypographyTitle, { tag: 'h1', view: 'xsmall', font: 'system', color: 'static-primary-light' }, tail)),
         description ? (React.createElement(TypographyText, { className: styles.description, tag: 'div', view: 'primary-medium', color: 'static-secondary-light' }, description)) : null));
 };

package/moderncssm/components/header-info-block/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { TypographyText, TypographyTitle } from '@alfalab/core-components-typography';\n\nimport { splitFilename } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport type HeaderInfoBlockProps = {\n    filename: string;\n    description?: string;\n};\n\nexport const HeaderInfoBlock: FC<HeaderInfoBlockProps> = ({ filename, description }) => {\n    const [head, tail] = splitFilename(filename);\n\n    return (\n        <div className={styles.info}>\n            <div className={styles.filenameContainer}>\n                <TypographyTitle\n                    tag='h1'\n                    className={styles.filenameHead}\n                    view='xsmall'\n                    font='system'\n                    color='static-primary-light'\n                >\n                    {head}\n                </TypographyTitle>\n\n                <TypographyTitle tag='h1' view='xsmall' font='system' color='static-primary-light'>\n                    {tail}\n                </TypographyTitle>\n            </div>\n\n            {description ? (\n                <TypographyText\n                    className={styles.description}\n                    tag='div'\n                    view='primary-medium'\n                    color='static-secondary-light'\n                >\n                    {description}\n                </TypographyText>\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,eAAe,GAA6B,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;IACnF,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5C,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA;AACvB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;YACpC,KAAC,CAAA,aAAA,CAAA,eAAe,EACZ,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACS;YAElB,KAAC,CAAA,aAAA,CAAA,eAAe,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC7E,EAAA,IAAI,CACS,CAChB;AAEL,QAAA,WAAW,IACR,oBAAC,cAAc,EAAA,EACX,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACC,IACjB,IAAI,CACN;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header-info-block/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { TypographyText, TypographyTitle } from '@alfalab/core-components-typography';\n\nimport { splitFilename } from '../../utils';\n\nimport styles from './index.module.css';\n\nexport type HeaderInfoBlockProps = {\n    filename: string;\n    description?: string;\n};\n\nexport const HeaderInfoBlock: FC<HeaderInfoBlockProps> = ({ filename, description }) => {\n    const [head, tail] = splitFilename(filename);\n\n    return (\n        <div className={styles.info}>\n            <div className={styles.filenameContainer}>\n                <TypographyTitle\n                    tag='h2'\n                    className={styles.filenameHead}\n                    view='small'\n                    font='system'\n                    color='static-primary-light'\n                >\n                    {head}\n                </TypographyTitle>\n\n                <TypographyTitle tag='h1' view='xsmall' font='system' color='static-primary-light'>\n                    {tail}\n                </TypographyTitle>\n            </div>\n\n            {description ? (\n                <TypographyText\n                    className={styles.description}\n                    tag='div'\n                    view='primary-medium'\n                    color='static-secondary-light'\n                >\n                    {description}\n                </TypographyText>\n            ) : null}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,eAAe,GAA6B,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAI;IACnF,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC;AAE5C,IAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA;AACvB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA;YACpC,KAAC,CAAA,aAAA,CAAA,eAAe,EACZ,EAAA,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,sBAAsB,EAE3B,EAAA,IAAI,CACS;YAElB,KAAC,CAAA,aAAA,CAAA,eAAe,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,sBAAsB,EAC7E,EAAA,IAAI,CACS,CAChB;AAEL,QAAA,WAAW,IACR,oBAAC,cAAc,EAAA,EACX,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,wBAAwB,EAE7B,EAAA,WAAW,CACC,IACjB,IAAI,CACN;AAEd;;;;"}

package/moderncssm/components/image-preview/Component.js

@@ -67,7 +67,7 @@ const ImagePreview = ({ image, active = false, index, onSelect, className }) =>
         }
         if (isVideo(image.src)) {
             return (React.createElement("div", { className: cn(styles.preview, styles.image, {
-                    [styles.loading]: !meta,
+                    [styles.loading]: !meta?.loaded,
                     [styles.mobile]: isMobile,
                 }) },
                 React.createElement("canvas", { className: cn(styles.canvasPreview, { [styles.mobile]: isMobile }), "data-testid": 'canvas', width: previewWidth, height: previewHeight, ref: canvasRef })));

package/moderncssm/components/image-preview/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n    type FC,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n    PREVIEW_HEIGHT_DESKTOP,\n    PREVIEW_HEIGHT_MOBILE,\n    PREVIEW_VIDEO_MULTIPLIER,\n    PREVIEW_WIDTH_DESKTOP,\n    PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    image: GalleryImage;\n    index: number;\n    active?: boolean;\n    onSelect: (index: number) => void;\n    className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n    const { imagesMeta, view } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n\n    const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n    const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n    const ref = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        const video = imagesMeta[index]?.player?.current;\n        const context = canvas?.getContext('2d');\n        const drawPreview = () => {\n            if (video) {\n                context?.drawImage(\n                    video,\n                    0,\n                    0,\n                    video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n                    video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n                );\n            }\n        };\n\n        drawPreview();\n\n        if (isVideo(image.src)) {\n            video?.addEventListener('canplay', drawPreview);\n        }\n\n        return () => {\n            if (isVideo(image.src)) {\n                video?.removeEventListener('canplay', drawPreview);\n            }\n        };\n    }, [image.src, imagesMeta, index]);\n\n    const handleClick = () => {\n        onSelect(index);\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event) => {\n        if (event.key === 'Enter') {\n            onSelect(index);\n        }\n    };\n\n    const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n        e.preventDefault();\n    };\n\n    const [focused] = useFocus(ref, 'keyboard');\n\n    const meta = imagesMeta[index];\n\n    const isBroken = Boolean(meta?.broken);\n\n    const renderPreview = () => {\n        if (isBroken) {\n            return (\n                <div\n                    className={cn(\n                        styles.preview,\n                        { [styles.mobile]: isMobile, [styles.active]: active },\n                        styles.brokenImageWrapper,\n                    )}\n                >\n                    <div className={cn(styles.brokenIcon)}>\n                        <svg\n                            xmlns='http://www.w3.org/2000/svg'\n                            width={previewWidth}\n                            height={previewHeight}\n                            viewBox={`${isMobile ? -6 : 0} ${\n                                isMobile ? -12 : 0\n                            } ${previewWidth} ${previewHeight}`}\n                            fill='none'\n                        >\n                            <rect fill='none' />\n                            <path\n                                fillRule='evenodd'\n                                clipRule='evenodd'\n                                d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n                                fill='#89898A'\n                            />\n                            <path\n                                d={\n                                    isMobile\n                                        ? NoImagePaths.mobileTriangle\n                                        : NoImagePaths.triangleImage\n                                }\n                                fill='#89898A'\n                            />\n                        </svg>\n                    </div>\n                </div>\n            );\n        }\n\n        if (image.previewSrc) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n                </div>\n            );\n        }\n\n        if (isVideo(image.src)) {\n            return (\n                <div\n                    className={cn(styles.preview, styles.image, {\n                        [styles.loading]: !meta?.loaded,\n                        [styles.mobile]: isMobile,\n                    })}\n                >\n                    <canvas\n                        className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n                        data-testid='canvas'\n                        width={previewWidth}\n                        height={previewHeight}\n                        ref={canvasRef}\n                    />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cn(styles.preview, styles.image, {\n                    [styles.loading]: !meta,\n                    [styles.mobile]: isMobile,\n                })}\n            >\n                <img src={image.src} alt={getImageAlt(image, index)} />\n            </div>\n        );\n    };\n\n    return (\n        <div\n            className={cn(\n                styles.component,\n                {\n                    [styles.active]: active,\n                    [styles.focused]: focused,\n                    [styles.mobile]: isMobile,\n                },\n                className,\n            )}\n            onClick={handleClick}\n            role='button'\n            onKeyDown={handleKeyDown}\n            onMouseDown={handleDragStart}\n            tabIndex={0}\n            ref={ref}\n            aria-label={`Перейти к ${index + 1} элементу`}\n        >\n            {renderPreview()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -61,14 +61,14 @@
 }
 
 .loading .active {
-        background-color: var(--color-static-neutral-300-inverted);
+        background-color: var(--color-static-neutral-translucent-100-inverted);
     }
 
 .brokenImageWrapper {
     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;
 }
 

package/moderncssm/components/image-viewer/hooks.js

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

package/moderncssm/components/image-viewer/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isImg = eventTarget.tagName === 'IMG';\n\n            if (!isImg && !isPlaceholder && !isArrow && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAcO,MAAM,oBAAoB,GAAG,MAAK;AACrC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAE,KAAa,KAAI;AAC1E,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa;AAElC,QAAA,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,MAAM;AAE9C,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAAK,KAAI;AACN,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,MAAM,OAAO,GACT,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC3C,YAAA,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAEhD,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,WAAW,CAAE,CAAA,CAAC,CAAC;AAE5E,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,OAAO,KAAK,KAAK;AAE3C,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACnD,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;QACH,UAAU;QACV,eAAe;QACf,kBAAkB;QAClB,QAAQ;QACR,YAAY;QACZ,aAAa;KAChB;AACL;;;;"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n    type MouseEventHandler,\n    type SyntheticEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n    const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n    const leftArrowRef = useRef<HTMLDivElement>(null);\n    const rightArrowRef = useRef<HTMLDivElement>(null);\n\n    const isMobile = view === 'mobile';\n\n    const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n        const target = event.currentTarget;\n\n        const { naturalWidth, naturalHeight } = target;\n\n        setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n    };\n\n    const handleLoadError = (index: number) => {\n        setImageMeta({ width: 0, height: 0, broken: true }, index);\n    };\n\n    const handleWrapperClick = useCallback<MouseEventHandler>(\n        (event) => {\n            const eventTarget = event.target as HTMLElement;\n\n            const isArrow =\n                leftArrowRef.current?.contains(eventTarget) ||\n                rightArrowRef.current?.contains(eventTarget);\n\n            const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n            const isContentArea = Boolean(eventTarget.closest('[data-content-area]'));\n\n            // Закрываем галерею только при клике вне элементов контента и только на desktop\n            if (!isPlaceholder && !isArrow && !isContentArea && !isMobile) {\n                onClose();\n            }\n        },\n        [isMobile, onClose],\n    );\n\n    useEffect(() => {\n        elementClosest(window);\n    }, []);\n\n    return {\n        handleLoad,\n        handleLoadError,\n        handleWrapperClick,\n        isMobile,\n        leftArrowRef,\n        rightArrowRef,\n    };\n};\n"],"names":[],"mappings":";;;;;AAcO,MAAM,oBAAoB,GAAG,MAAK;AACrC,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAElE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,MAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAE,KAAa,KAAI;AAC1E,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa;AAElC,QAAA,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,MAAM;AAE9C,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAa,KAAI;AACtC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAAK,KAAI;AACN,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,MAAM,OAAO,GACT,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAC3C,YAAA,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,WAAW,CAAC;AAEhD,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,MAAM,CAAC,WAAW,CAAE,CAAA,CAAC,CAAC;QAE5E,MAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;;AAGzE,QAAA,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,EAAE;AAC3D,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;IAED,SAAS,CAAC,MAAK;QACX,cAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;QACH,UAAU;QACV,eAAe;QACf,kBAAkB;QAClB,QAAQ;QACR,YAAY;QACZ,aAAa;KAChB;AACL;;;;"}

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

@@ -128,7 +128,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;
     }
 
@@ -246,7 +246,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/moderncssm/components/image-viewer/slide.js

@@ -20,7 +20,7 @@ const SlideInner = ({ children, broken, loading, isVideoView }) => {
         React.createElement(TypographyText, { view: 'primary-small', color: 'static-secondary-light' },
             "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C ",
             isVideoView ? 'видео' : 'изображение'))) : (children);
-    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading }) },
+    return (React.createElement("div", { className: cn(styles.slide, { [styles.slideLoading]: loading && !isVideoView }) },
         broken ? React.createElement("div", { className: styles.placeholder }, content) : content,
         React.createElement(Spinner, { className: styles.spinner, preset: 48, visible: loading })));
 };
@@ -49,7 +49,7 @@ const Slide = ({ isActive, meta, containerAspectRatio, imageAspectRatio, image,
                 [styles.fullScreenMedia]: fullScreen,
                 [styles.verticalImageFit]: verticalImageFit,
                 [styles.horizontalImageFit]: horizontalImageFit,
-            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: imageStyle, "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
+            }), onLoad: (event) => handleLoad(event, index), onError: () => handleLoadError(index), style: imageStyle, "data-content-area": 'true', "data-test-id": slideVisible ? TestIds.ACTIVE_IMAGE : undefined })));
 };
 
 export { Slide };

package/moderncssm/components/image-viewer/slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={imageStyle}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading && !isVideoView })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={imageStyle}\n                data-content-area='true'\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/image-viewer/video/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useContext, useEffect, useCallback } from 'react';
 import cn from 'classnames';
 import { Circle } from '@alfalab/core-components-icon-view/moderncssm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
@@ -8,9 +8,12 @@ import { Subtitles } from '../../subtitles/index.js';
 import styles from './index.module.css';
 
 const Video = ({ url, index, className, isActive }) => {
+    const [videoLoaded, setVideoLoaded] = useState(false);
     const playerRef = useRef(null);
     const timer = useRef();
     const [hlsSupported, setHlsSupported] = useState(true);
+    const abortController = useRef(new AbortController());
+    const [videoError, setVideoError] = useState(false);
     const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation, getCurrentImage, } = useContext(GalleryContext);
     const isMobile = view === 'mobile';
     const isDesktop = view === 'desktop';
@@ -40,6 +43,36 @@ const Video = ({ url, index, className, isActive }) => {
             return null;
         }
     }, [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 = null;
         const initHls = async () => {
@@ -105,8 +138,11 @@ const Video = ({ url, index, className, isActive }) => {
         }
     }, [isActive, playingVideo]);
     useEffect(() => {
+        const { signal } = abortController.current;
         const handleSpacePress = (e) => {
             if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (playingVideo) {
                     setPlayingVideo(false);
                 }
@@ -115,10 +151,7 @@ const Video = ({ url, index, className, isActive }) => {
                 }
             }
         };
-        document.addEventListener('keyup', handleSpacePress);
-        return () => {
-            document.removeEventListener('keyup', handleSpacePress);
-        };
+        document.addEventListener('keydown', handleSpacePress, { signal });
     }, [isActive, playingVideo, setPlayingVideo]);
     const handleWrapperClick = (e) => {
         e.stopPropagation();
@@ -132,9 +165,10 @@ const Video = ({ url, index, className, isActive }) => {
                     setHideNavigation(true);
                 }, 3000);
             }
-            return;
         }
-        setPlayingVideo(!playingVideo);
+        else {
+            setPlayingVideo(!playingVideo);
+        }
     };
     const handleBottomButtonClick = useCallback((e) => {
         e.stopPropagation();
@@ -159,16 +193,17 @@ const Video = ({ url, index, className, isActive }) => {
         }
         setHideNavigation(false);
     };
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    React.createElement("div", { onClick: handleWrapperClick, className: styles.videoWrapper },
+    return (React.createElement("div", { "aria-hidden": true, onClick: handleWrapperClick, "data-content-area": 'true', className: cn(styles.videoWrapper, {
+            [styles.loading]: !videoLoaded && !videoError,
+            [styles.mobileWrapper]: isMobile,
+        }) },
         React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn(styles.video, { [styles.mobile]: view === 'mobile' }, className) },
             React.createElement("track", { kind: 'captions' })),
-        isDesktop && !playingVideo && (React.createElement("div", { className: styles.videoButton },
+        isDesktop && !playingVideo && videoLoaded && (React.createElement("div", { className: styles.videoButton },
             React.createElement(Circle, { size: 64, shapeClassName: styles.iconShape },
                 React.createElement(PlayCompactMIcon, { className: styles.icon })))),
         isDesktop && React.createElement(Subtitles, null),
-        isDesktop && image?.bottomButton && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
+        isDesktop && image?.bottomButton && videoLoaded && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
 };
 
 export { Video };

package/moderncssm/components/image-viewer/video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keyup', handleSpacePress);\n\n        return () => {\n            document.removeEventListener('keyup', handleSpacePress);\n        };\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n\n            return;\n        }\n\n        setPlayingVideo(!playingVideo);\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n        <div onClick={handleWrapperClick} className={styles.videoWrapper}>\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const [videoLoaded, setVideoLoaded] = useState(false);\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n    const abortController = useRef(new AbortController());\n    const [videoError, setVideoError] = useState(false);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => () => abortController.current.abort(), []);\n\n    useEffect(() => {\n        const video = playerRef.current;\n\n        if (!video) {\n            return;\n        }\n\n        const { signal } = abortController.current;\n\n        const handleCanPlay = () => {\n            setVideoLoaded(true);\n            setVideoError(false);\n            setImageMeta(\n                {\n                    player: playerRef,\n                    width: video.videoWidth || 1920,\n                    height: video.videoHeight || 1080,\n                    loaded: true,\n                },\n                index,\n            );\n        };\n\n        const handleError = () => {\n            setVideoError(true);\n            setVideoLoaded(false);\n            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);\n        };\n\n        const handleLoadStart = () => {\n            setVideoLoaded(false);\n            setVideoError(false);\n        };\n\n        video.addEventListener('canplay', handleCanPlay, { signal });\n        video.addEventListener('error', handleError, { signal });\n        video.addEventListener('loadstart', handleLoadStart, { signal });\n    }, [setImageMeta, index]);\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const { signal } = abortController.current;\n\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                e.preventDefault();\n                e.stopPropagation();\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleSpacePress, { signal });\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n        } else {\n            setPlayingVideo(!playingVideo);\n        }\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        <div\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n            data-content-area='true'\n            className={cn(styles.videoWrapper, {\n                [styles.loading]: !videoLoaded && !videoError,\n                [styles.mobileWrapper]: isMobile,\n            })}\n        >\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && videoLoaded && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && videoLoaded && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/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 {