chore: Revert "feat: add media images fullscreen slider (#889)" (#917)

This reverts commit eec646d.

Author: qradle-yndx

src/blocks/Slider/Slider.tsx

@@ -61,7 +61,6 @@ export interface SliderProps
     dotsClassName?: string;
     blockClassName?: string;
     arrowSize?: number;
-    initialIndex?: number;
 }
 
 export const SliderBlock = (props: WithChildren<SliderProps>) => {
@@ -84,7 +83,6 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
         arrowSize,
         onAfterChange: handleAfterChange,
         onBeforeChange: handleBeforeChange,
-        initialIndex = 0,
     } = props;
 
     const {isServer} = useContext(SSRContext);
@@ -109,7 +107,7 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
     const slidesToShowCount = getSlidesToShowCount(slidesToShow);
     const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow);
 
-    const [currentIndex, setCurrentIndex] = useState<number>(initialIndex);
+    const [currentIndex, setCurrentIndex] = useState<number>(0);
     const [childStyles, setChildStyles] = useState<Object>({});
     const [slider, setSlider] = useState<SlickSlider>();
     const autoplayTimeId = useRef<Timeout>();
@@ -348,7 +346,7 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
             responsive: getSliderResponsiveParams(slidesToShow),
             beforeChange: onBeforeChange,
             afterChange: onAfterChange,
-            initialSlide: initialIndex,
+            initialSlide: 0,
             nextArrow: <Arrow type="right" handleClick={handleArrowClick} size={arrowSize} />,
             prevArrow: <Arrow type="left" handleClick={handleArrowClick} size={arrowSize} />,
             lazyLoad,

src/components/FullscreenImage/FullscreenImage.scss

@@ -32,27 +32,6 @@ $closeButtonSize: 36px;
         overflow: hidden;
     }
 
-    &__modal-slider {
-        max-width: $newContentWidth;
-        width: 100%;
-        max-height: 70vh;
-        overflow: hidden;
-        border-radius: $borderRadius;
-
-        &_item {
-            height: 100%;
-
-            &-image {
-                display: block;
-                max-height: 70vh;
-                max-width: 100%;
-                width: 100%;
-                object-fit: contain;
-                object-position: center;
-            }
-        }
-    }
-
     &__modal .yc-modal__content,
     &__modal-image {
         border-radius: $borderRadius;

src/components/FullscreenImage/FullscreenImage.tsx

@@ -3,11 +3,8 @@ import React, {CSSProperties, HTMLProps, useState} from 'react';
 import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';
 import {Icon, Modal} from '@gravity-ui/uikit';
 
-import SliderBlock from '../../blocks/Slider/Slider';
-import {ImageProps as ModelImageProps, SliderType} from '../../models';
 import {block} from '../../utils';
 import Image, {ImageProps} from '../Image/Image';
-import {getMediaImage} from '../Media/Image/utils';
 
 import {i18n} from './i18n';
 
@@ -18,22 +15,14 @@ export interface FullscreenImageProps extends ImageProps {
     modalImageClass?: string;
     imageStyle?: CSSProperties;
     extraProps?: HTMLProps<HTMLDivElement>;
-    sliderData?: {items: ModelImageProps[]; initialIndex: number};
 }
 
 const b = block('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 
 const FullscreenImage = (props: FullscreenImageProps) => {
-    const {
-        imageClassName,
-        sliderData,
-        modalImageClass,
-        imageStyle,
-        alt = i18n('img-alt'),
-        extraProps,
-    } = props;
+    const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps} = props;
     const [isOpened, setIsOpened] = useState(false);
 
     const openModal = () => setIsOpened(true);
@@ -77,29 +66,7 @@ const FullscreenImage = (props: FullscreenImageProps) => {
                             className={b('icon', {hover: true})}
                         />
                     </button>
-                    {sliderData ? (
-                        <div className={b('modal-slider')}>
-                            <SliderBlock
-                                initialIndex={sliderData.initialIndex}
-                                slidesToShow={1}
-                                type={SliderType.MediaCard}
-                            >
-                                {sliderData.items.map((item, index) => (
-                                    <div key={index} className={b('modal-slider_item')}>
-                                        <Image
-                                            className={b(
-                                                'modal-slider_item-image',
-                                                modalImageClass,
-                                            )}
-                                            {...getMediaImage(item)}
-                                        />
-                                    </div>
-                                ))}
-                            </SliderBlock>
-                        </div>
-                    ) : (
-                        <Image {...props} className={b('modal-image', modalImageClass)} />
-                    )}
+                    <Image {...props} className={b('modal-image', modalImageClass)} />
                 </Modal>
             )}
         </div>

src/components/Media/Image/Image.tsx

@@ -7,7 +7,7 @@ import SliderBlock from '../../../blocks/Slider/Slider';
 import {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';
 import {block, getQaAttrubutes} from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
-import FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage';
+import FullscreenImage from '../../FullscreenImage/FullscreenImage';
 import ImageView from '../../Image/Image';
 
 import {getMediaImage} from './utils';
@@ -20,7 +20,6 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
-    fullscreenClassName?: string;
     onLoad?: () => void;
 }
 
@@ -37,7 +36,6 @@ const Image = (props: ImageAllProps) => {
         parallax,
         height,
         imageClassName,
-        fullscreenClassName,
         isBackground,
         hasVideoFallback,
         video,
@@ -89,21 +87,16 @@ const Image = (props: ImageAllProps) => {
 
     const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);
 
-    const renderFullscreenImage = (
-        item: ImageProps,
-        sliderData?: FullscreenImageProps['sliderData'],
-    ) => {
+    const renderFullscreenImage = (item: ImageProps) => {
         const itemData = getMediaImage(item);
 
         return (
             <FullscreenImage
                 key={itemData.alt}
                 {...itemData}
                 imageClassName={imageClass}
-                modalImageClass={fullscreenClassName}
                 imageStyle={{height}}
                 qa={qaAttributes.fullscreenImage}
-                sliderData={sliderData}
             />
         );
     };
@@ -142,9 +135,7 @@ const Image = (props: ImageAllProps) => {
             <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>
                 {imageArray.map((item, index) => (
                     <Fragment key={index}>
-                        {fullscreenItem
-                            ? renderFullscreenImage(item, {items: imageArray, initialIndex: index})
-                            : imageOnly(item)}
+                        {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)}
                     </Fragment>
                 ))}
             </SliderBlock>

src/components/Media/Media.scss

@@ -13,9 +13,4 @@ $block: '.#{$ns}Media';
         display: flex;
         align-items: center;
     }
-
-    &__fullscreen-image-cover {
-        object-fit: cover;
-        object-position: top;
-    }
 }

src/components/Media/Media.tsx

@@ -16,7 +16,6 @@ const b = block('Media');
 
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
-    isFullscreenImageCover?: boolean;
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;
@@ -33,7 +32,6 @@ export const Media = (props: MediaAllProps) => {
         previewImg,
         parallax = false,
         fullscreen,
-        isFullscreenImageCover,
         analyticsEvents,
         className,
         imageClassName,
@@ -68,9 +66,6 @@ export const Media = (props: MediaAllProps) => {
                     disableImageSliderForArrayInput={disableImageSliderForArrayInput}
                     height={height}
                     imageClassName={imageClassName}
-                    fullscreenClassName={
-                        isFullscreenImageCover ? b('fullscreen-image-cover') : undefined
-                    }
                     isBackground={isBackground}
                     video={video}
                     hasVideoFallback={hasVideoFallback}
@@ -142,7 +137,6 @@ export const Media = (props: MediaAllProps) => {
         isBackground,
         hasVideoFallback,
         fullscreen,
-        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,