Merge pull request #40 from gravity-ui/berdysheva/mobile-support-background-media

feat(BackgroundMedia): add device support

Author: Juli Ovechkina

src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.tsx

@@ -25,7 +25,9 @@ const DefaultTemplate: Story<FullProps> = (args) => (
 export const Image = DefaultTemplate.bind({});
 export const ImageSlider = DefaultTemplate.bind({});
 export const Video = DefaultTemplate.bind({});
+export const DeviceSupport = DefaultTemplate.bind({});
 
 Image.args = data.image.content;
 ImageSlider.args = data.imageSlider.content;
 Video.args = data.video.content;
+DeviceSupport.args = data.deviceSupport.content;

src/components/BackgroundMedia/__stories__/data.json

@@ -18,8 +18,18 @@
   "imageSlider": {
     "content": {
       "image": [
-        "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
-        "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png"
+        {
+          "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
+          "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
+          "alt": "Picture",
+          "disableCompress": true
+        },
+        {
+          "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png",
+          "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
+          "alt": "Picture",
+          "disableCompress": true
+        }
       ]
     }
   },
@@ -31,5 +41,26 @@
         "disableCompress": true
       }
     }
+  },
+  "deviceSupport": {
+    "content": {
+      "image": {
+        "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
+        "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
+        "alt": "Picture",
+        "disableCompress": true
+      },
+      "video": {
+        "src": [
+          "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.mp4",
+          "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.ogv",
+          "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.webm",
+          "https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png"
+        ],
+        "loop": {
+          "start": 0
+        }
+      }
+    }
   }
 }

src/components/FullscreenImage/FullscreenImage.tsx

@@ -15,14 +15,8 @@ export interface FullScreenImageProps extends ImageProps {
 
 const b = block('FullScreenImage');
 
-const FullScreenImage = ({
-    src,
-    alt,
-    imageClassName,
-    disableCompress,
-    modalImageClass,
-    imageStyle,
-}: FullScreenImageProps) => {
+const FullScreenImage = (props: FullScreenImageProps) => {
+    const {imageClassName, modalImageClass, imageStyle} = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
     const openModal = useCallback(() => setIsOpened(true), []);
@@ -38,12 +32,10 @@ const FullScreenImage = ({
                 onMouseLeave={hideFullScreenIcon}
             >
                 <Image
+                    {...props}
                     className={b('image', imageClassName)}
-                    src={src}
-                    alt={alt}
                     onClick={openModal}
                     style={imageStyle}
-                    disableCompress={disableCompress}
                 />
                 <div className={b('icon-wrapper', {visible: isMouseEnter})} onClick={openModal}>
                     <Icon data={FullScreen} width={18} height={18} className={b('icon')} />
@@ -60,12 +52,7 @@ const FullScreenImage = ({
                                 className={b('icon', {hover: true})}
                             />
                         </div>
-                        <Image
-                            className={b('modal-image', modalImageClass)}
-                            src={src}
-                            alt={alt}
-                            disableCompress={disableCompress}
-                        />
+                        <Image {...props} className={b('modal-image', modalImageClass)} />
                     </div>
                 </Modal>
             )}

src/models/constructor-items/common.ts

@@ -220,7 +220,7 @@ export interface MediaComponentYoutubeProps {
 }
 
 export interface MediaComponentImageProps {
-    image: ImageProps | ImageProps[];
+    image: ImageProps | ImageProps[] | ImageDeviceProps;
     video?: MediaVideoProps;
     parallax?: boolean;
     height?: number;

src/stories/COMMON_TYPES.md

@@ -58,7 +58,7 @@
 # `Media`— Image/video/DataLens
 
 - `color?: string` — Background color
-- [`image?: ImageObjectProps | ImageObjectProps[]` —Background image](#ImageObjectProps)
+- [`image?: ImageObjectProps | ImageObjectProps[] | ImageDeviceProps` — Background image](#ImageObjectProps)
 - `parallax?: bool` — Enable/disable the parallax effect
 - [`video?: Video` — Video](#Video)
 - `youtube?: url` — Link to a video on YouTube